/* ============================================================
   Tasha Macrame — аккаунт, формы, модальное окно
   ============================================================ */

/* ---------------- Кнопки в шапке ---------------- */

/* Атрибут hidden должен побеждать любые display из классов ниже.
   Без этого спрятанные блоки (кнопки входа, панели) остаются видимыми. */
[hidden]{display:none !important;}

.account{display:flex;align-items:center;gap:10px;}
.account__guest{display:flex;gap:10px;}

.btn-sm{
  padding:9px 20px;
  border-radius:100px;
  font-size:14px;
  letter-spacing:.04em;
  transition:transform .35s var(--ease), background .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-sm--ghost{
  color:var(--teal-900);
  border:1.4px solid var(--sand-300);
  background:rgba(255,255,255,.6);
}
.btn-sm--ghost:hover{border-color:var(--teal-300);background:var(--white);transform:translateY(-2px);}
.btn-sm--solid{
  color:var(--white);
  background:linear-gradient(120deg,var(--teal-700),var(--teal-500));
  box-shadow:0 6px 18px rgba(20,112,109,.24);
}
.btn-sm--solid:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,112,109,.32);}

/* ---------------- Чип пользователя ---------------- */

.account__user{position:relative;}
.account__chip{
  display:flex;align-items:center;gap:10px;
  padding:6px 16px 6px 6px;
  border-radius:100px;
  background:rgba(255,255,255,.65);
  border:1.4px solid var(--teal-100);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.account__chip:hover{border-color:var(--teal-300);background:var(--white);transform:translateY(-1px);}

.account__avatar{
  width:30px;height:30px;
  border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
  color:var(--white);
  font-size:13px;
  font-weight:500;
  background-size:cover;
  background-position:center;
  flex-shrink:0;
}
.account__name{
  font-size:14px;
  color:var(--teal-900);
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.account__menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:206px;
  padding:8px;
  border-radius:16px;
  background:var(--white);
  box-shadow:var(--shadow-m);
  border:1px solid var(--sand-100);
  display:flex;
  flex-direction:column;
  z-index:50;
  animation:menuIn .3s var(--ease);
}
@keyframes menuIn{
  from{opacity:0;transform:translateY(-8px) scale(.97);}
  to{opacity:1;transform:none;}
}
.account__item{
  padding:10px 14px;
  border-radius:10px;
  font-size:14.5px;
  text-align:left;
  color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.account__item:hover{background:var(--teal-050);color:var(--teal-700);padding-left:18px;}
.account__item--danger{color:#b4544f;}
.account__item--danger:hover{background:#fdeeed;color:#a33f3a;}

/* ---------------- Модальное окно ---------------- */

.modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:20px;
}
.modal[hidden]{display:none;}

.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(14,75,74,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:fadeIn .4s var(--ease);
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.modal__box{
  position:relative;
  width:min(100%,436px);
  max-height:92vh;
  overflow-y:auto;
  padding:36px 36px 28px;
  border-radius:26px;
  background:linear-gradient(170deg,var(--white),var(--sand-050));
  box-shadow:var(--shadow-l);
  animation:modalIn .55s var(--ease);
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(28px) scale(.95);}
  to{opacity:1;transform:none;}
}
.modal.is-closing .modal__box{
  animation:modalOut .3s var(--ease) forwards;
}
.modal.is-closing .modal__overlay{
  animation:fadeOut .3s var(--ease) forwards;
}
@keyframes modalOut{
  to{opacity:0;transform:translateY(18px) scale(.96);}
}
@keyframes fadeOut{to{opacity:0;}}

.modal__close{
  position:absolute;
  top:14px;right:16px;
  width:36px;height:36px;
  border-radius:50%;
  font-size:26px;
  line-height:1;
  color:var(--ink-soft);
  display:grid;place-items:center;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.modal__close:hover{background:var(--sand-100);color:var(--teal-900);transform:rotate(90deg);}

/* узелок в шапке окна */
.modal__knot{
  width:110px;
  margin:0 auto 14px;
}
.modal__knot svg{
  width:100%;height:56px;
  fill:none;
  stroke:var(--teal-300);
  stroke-width:4;
  stroke-linecap:round;
}
.modal__knot svg path{
  stroke-dasharray:220;
  stroke-dashoffset:220;
  animation:knotDraw 1.6s var(--ease) forwards;
}
.modal__knot svg path:nth-child(2){
  stroke:var(--sand-500);
  animation-delay:.22s;
}
@keyframes knotDraw{to{stroke-dashoffset:0;}}

.modal__title{
  text-align:center;
  font-size:32px;
  margin-bottom:4px;
}
.modal__sub{
  text-align:center;
  font-size:14.5px;
  color:var(--ink-soft);
  margin-bottom:22px;
}

/* ---------------- Вкладки ---------------- */

.tabs{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:5px;
  border-radius:100px;
  background:var(--sand-100);
  margin-bottom:22px;
}
.tab{
  position:relative;
  z-index:2;
  padding:10px;
  border-radius:100px;
  font-size:14.5px;
  color:var(--ink-soft);
  transition:color .35s var(--ease);
}
.tab.is-active{color:var(--teal-900);}
.tab__glider{
  position:absolute;
  z-index:1;
  top:5px;left:5px;
  width:calc(50% - 5px);
  height:calc(100% - 10px);
  border-radius:100px;
  background:var(--white);
  box-shadow:0 2px 10px rgba(20,112,109,.14);
  transition:transform .45s var(--ease);
}
.tabs.is-register .tab__glider{transform:translateX(100%);}

/* ---------------- Google ---------------- */

.gauth{margin-bottom:18px;}
#googleBtn{display:flex;justify-content:center;min-height:44px;}
.gauth__divider{
  position:relative;
  text-align:center;
  margin-top:18px;
}
.gauth__divider::before{
  content:'';
  position:absolute;
  top:50%;left:0;right:0;
  height:1px;
  background:var(--sand-300);
}
.gauth__divider span{
  position:relative;
  padding:0 14px;
  background:var(--sand-050);
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--ink-soft);
}

/* ---------------- Поля ---------------- */

.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--teal-900);
  margin-bottom:7px;
}
.field label span{color:#c07a74;}

.field input,
.field textarea{
  width:100%;
  padding:13px 16px;
  border-radius:13px;
  border:1.5px solid var(--sand-300);
  background:rgba(255,255,255,.8);
  font:inherit;
  font-size:15px;
  color:var(--ink);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field textarea{resize:vertical;min-height:96px;line-height:1.6;}

.field input::placeholder,
.field textarea::placeholder{color:#a9b5b2;}

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--teal-300);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(127,201,194,.2);
}
.field input.is-error,
.field textarea.is-error{
  border-color:#dba9a4;
  box-shadow:0 0 0 4px rgba(219,169,164,.18);
}

.field__pass{position:relative;}
.field__pass input{padding-right:50px;}
.field__eye{
  position:absolute;
  top:50%;right:8px;
  transform:translateY(-50%);
  width:36px;height:36px;
  border-radius:50%;
  display:grid;place-items:center;
  transition:background .3s var(--ease);
}
.field__eye:hover{background:var(--sand-100);}
.field__eye svg{
  width:20px;height:20px;
  fill:none;
  stroke:var(--ink-soft);
  stroke-width:1.7;
  stroke-linecap:round;
}
.field__eye.is-off svg{stroke:var(--teal-500);}

.field__hint{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  color:var(--ink-soft);
}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* сообщение об ошибке/успехе */
.form-msg{
  margin:0 0 14px;
  font-size:14px;
  min-height:0;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .35s var(--ease), max-height .35s var(--ease), margin .35s var(--ease);
}
.form-msg.is-shown{opacity:1;max-height:90px;margin-bottom:14px;}
.form-msg--error{color:#b4544f;}
.form-msg--ok{color:var(--teal-700);}

/* ---------------- Кнопка отправки ---------------- */

.btn--full{width:100%;}
.btn__spinner{
  position:absolute;
  width:19px;height:19px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:var(--white);
  opacity:0;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.btn.is-loading .btn__label{opacity:0;}
.btn.is-loading .btn__spinner{opacity:1;}
.btn.is-loading{pointer-events:none;}

.modal__switch{
  text-align:center;
  margin:18px 0 0;
  font-size:14px;
  color:var(--ink-soft);
}
.link{
  color:var(--teal-700);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .3s var(--ease);
}
.link:hover{color:var(--teal-500);}

/* ---------------- Шаг подтверждения почты ---------------- */

.code-step{
  animation:stepIn .45s var(--ease);
}
@keyframes stepIn{
  from{opacity:0;transform:translateX(22px);}
  to{opacity:1;transform:none;}
}

.code-step__icon{
  width:74px;
  margin:0 auto 18px;
}
.code-step__icon svg{
  width:100%;height:56px;
  fill:none;
  stroke:var(--teal-500);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.code-step__icon rect{fill:var(--teal-050);}
.code-step__flap{
  stroke-dasharray:80;
  stroke-dashoffset:80;
  animation:flapDraw .9s var(--ease) .2s forwards;
}
@keyframes flapDraw{to{stroke-dashoffset:0;}}

.code-step__text{
  text-align:center;
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.code-step__text b{color:var(--teal-900);font-weight:500;}

/* шесть окошек для цифр */
.code-inputs{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  margin-bottom:18px;
}
.code-inputs input{
  width:100%;
  aspect-ratio:3/4;
  padding:0;
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  font-size:27px;
  color:var(--teal-900);
  border:1.6px solid var(--sand-300);
  border-radius:13px;
  background:rgba(255,255,255,.85);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease),
             transform .28s var(--ease), background .28s var(--ease);
}
.code-inputs input:focus{
  outline:none;
  border-color:var(--teal-300);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(127,201,194,.22);
  transform:translateY(-2px);
}
.code-inputs input.is-filled{
  border-color:var(--teal-300);
  background:var(--teal-050);
}
.code-inputs.is-error input{
  border-color:#dba9a4;
  animation:shake .45s var(--ease);
}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-7px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(3px);}
}
.code-inputs.is-ok input{
  border-color:var(--teal-500);
  background:#e7f6f4;
}

.code-step__foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:16px;
  font-size:13.5px;
  color:var(--ink-soft);
}
.code-step__timer{color:var(--sand-700);}

.code-step__back{
  display:block;
  margin:14px auto 0;
  font-size:13.5px;
  text-decoration:none;
}

/* подсказка с кодом, когда отправка писем не настроена */
.dev-hint{
  margin:0 0 18px;
  padding:14px;
  border-radius:13px;
  background:#fdf4e3;
  border:1px solid #ecd9b0;
  text-align:center;
}
.dev-hint__label{
  display:block;
  font-size:12.5px;
  line-height:1.5;
  color:#8a6d3b;
  margin-bottom:9px;
}
.dev-hint__code{
  font-family:'Cormorant Garamond',serif;
  font-size:30px;
  letter-spacing:.22em;
  padding:5px 10px 5px 16px;   /* компенсируем разрядку справа */
  border-radius:9px;
  color:#7a5c28;
  background:rgba(255,255,255,.75);
  border:1px dashed #ddc394;
  transition:background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.dev-hint__code:hover{
  background:var(--white);
  color:var(--teal-700);
  transform:translateY(-2px);
}
.dev-hint__code:active{transform:translateY(0);}

/* ---------------- Раздел заказа ---------------- */

.order-gate{
  max-width:620px;
  margin:0 auto;
  padding:clamp(40px,6vw,64px) 32px;
  text-align:center;
  border:1px dashed var(--teal-300);
  border-radius:var(--radius);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(6px);
}
.order-gate__text{
  color:var(--ink-soft);
  max-width:400px;
  margin:0 auto 24px;
}
.order-gate__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.order-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,44px);
  align-items:start;
}
.order-form,
.order-list{
  background:var(--white);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow-s);
}
.order-form__title{font-size:25px;margin-bottom:20px;}

.orders{display:flex;flex-direction:column;gap:14px;}

.order-card{
  padding:18px 20px;
  border-radius:var(--radius-sm);
  border:1px solid var(--sand-100);
  background:var(--sand-050);
  animation:cardIn .5s var(--ease) both;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.order-card:hover{border-color:var(--teal-100);transform:translateX(3px);}
@keyframes cardIn{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:none;}
}
.order-card.is-removing{
  animation:cardOut .35s var(--ease) forwards;
}
@keyframes cardOut{
  to{opacity:0;transform:translateX(30px);max-height:0;padding-block:0;margin-bottom:-14px;}
}

.order-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.order-card__title{font-size:19px;margin:0;}
.order-card__desc{
  font-size:14.5px;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.order-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.order-card__tag{
  font-size:12px;
  padding:4px 11px;
  border-radius:100px;
  background:var(--teal-050);
  color:var(--teal-700);
}
.order-card__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12.5px;
  color:var(--ink-soft);
}

.status{
  font-size:12px;
  padding:4px 12px;
  border-radius:100px;
  white-space:nowrap;
}
.status--new{background:var(--teal-100);color:var(--teal-900);}
.status--in_progress{background:var(--sand-300);color:#6d5330;}
.status--done{background:#d6f0dc;color:#2f6b40;}
.status--declined{background:#f2dedc;color:#9c4f4a;}

.order-del{
  font-size:12.5px;
  color:#b4544f;
  padding:4px 10px;
  border-radius:8px;
  transition:background .25s var(--ease);
}
.order-del:hover{background:#fdeeed;}

.orders-empty{
  text-align:center;
  padding:30px 10px;
  color:var(--ink-soft);
  font-size:14.5px;
}

/* ---------------- Карточки с настоящими фото ---------------- */

.card__media img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  transition:transform .8s var(--ease);
}
.card:hover .card__media img{transform:scale(1.05);}

.card__desc{
  font-size:14px;
  color:var(--ink-soft);
  margin:0 0 14px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card__btn--off{
  color:var(--sand-700);
  border-color:var(--sand-300);
  background:var(--sand-050);
  cursor:default;
}
.card__btn--off:hover{background:var(--sand-050);color:var(--sand-700);border-color:var(--sand-300);}

/* пункт «Управление сайтом» в меню владельца */
.account__item--admin{
  color:var(--teal-700);
  border-bottom:1px solid var(--sand-100);
  margin-bottom:4px;
  padding-bottom:12px;
}

/* ---------------- Личный кабинет ---------------- */

.section--cabinet{background:linear-gradient(180deg,var(--sand-050),var(--teal-050));}
.section--cabinet[hidden]{display:none;}

.cabinet{max-width:560px;margin:0 auto;}
.cabinet__card{
  background:var(--white);
  border-radius:var(--radius);
  padding:34px;
  box-shadow:var(--shadow-m);
}
.cabinet__head{
  display:flex;
  align-items:center;
  gap:18px;
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:1px solid var(--sand-100);
}
.cabinet__avatar{
  width:64px;height:64px;
  border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
  color:var(--white);
  font-size:24px;
  font-family:'Cormorant Garamond',serif;
  background-size:cover;
  background-position:center;
  flex-shrink:0;
}
.cabinet__head h3{font-size:26px;margin:0 0 2px;}
.cabinet__email{margin:0;font-size:14.5px;color:var(--ink-soft);}

.cabinet__form{margin-bottom:22px;}

.cabinet__meta{
  margin:0 0 22px;
  padding:18px 0 0;
  border-top:1px solid var(--sand-100);
  display:grid;
  gap:12px;
}
.cabinet__meta div{display:flex;justify-content:space-between;gap:14px;}
.cabinet__meta dt{font-size:14px;color:var(--ink-soft);}
.cabinet__meta dd{margin:0;font-size:14px;color:var(--teal-900);text-align:right;}

/* ---------------- Кружки при нажатии ---------------- */

.spark{
  position:fixed;
  top:0;left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  will-change:transform,opacity;
}

/* ---------------- Уведомления ---------------- */

.toasts{
  position:fixed;
  bottom:24px;right:24px;
  z-index:1400;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  padding:14px 20px;
  border-radius:14px;
  background:var(--white);
  box-shadow:var(--shadow-m);
  border-left:3px solid var(--teal-500);
  font-size:14.5px;
  color:var(--ink);
  max-width:330px;
  animation:toastIn .45s var(--ease);
}
.toast--error{border-left-color:#c9605a;}
.toast.is-out{animation:toastOut .35s var(--ease) forwards;}
@keyframes toastIn{
  from{opacity:0;transform:translateX(40px);}
  to{opacity:1;transform:none;}
}
@keyframes toastOut{
  to{opacity:0;transform:translateX(40px);}
}

/* ---------------- Адаптив ---------------- */

@media (max-width:900px){
  .order-panel{grid-template-columns:1fr;}
}

@media (max-width:768px){
  .account{margin-left:auto;margin-right:8px;}
  .account__guest .btn-sm--ghost{display:none;}
  .account__name{display:none;}
  .account__chip{padding:5px;}
  .modal__box{padding:30px 22px 24px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .toasts{left:16px;right:16px;bottom:16px;}
  .toast{max-width:none;}
}