/* ---------------------------------------------------------
   Book Ariana page styles — StageNexa-Tohidul (TI)
   Loaded on top of ti-index.css so the page inherits the exact
   colours, fonts and spacing used across the rest of the site.
   Plain CSS3, unminified, safe to edit in File Manager.
   --------------------------------------------------------- */

/* quick action cards -------------------------------------- */
.ti-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ti-action{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:26px 24px 24px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ti-action:hover{transform:translateY(-3px);border-color:rgba(34,181,115,.5);box-shadow:0 18px 40px rgba(8,23,15,.10)}
.ti-action-num{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.24em;color:var(--emerald)}
.ti-action h3{margin:12px 0 8px}
.ti-action p{margin:0;font-size:16px;color:var(--muted)}

/* fact list ------------------------------------------------ */
.ti-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.ti-facts li{display:grid;grid-template-columns:130px 1fr;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ti-facts b{font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);padding-top:3px}
.ti-facts span{font-size:16.5px;color:var(--muted)}

/* booking form — card layout ------------------------------- */
#ti-booking-form{max-width:none;width:100%;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:30px 30px 28px;box-shadow:0 18px 46px rgba(8,23,15,.07);
  display:grid;grid-template-columns:1fr 1fr;gap:18px 18px;align-content:start}
#ti-booking-form > div{display:grid;gap:7px;min-width:0}
/* full-width rows: preferred date, message, button, note */
#ti-booking-form > div:nth-of-type(5),
#ti-booking-form > div:nth-of-type(6),
#ti-booking-form > button,
#ti-booking-form > .ti-form-note{grid-column:1 / -1}

#ti-booking-form label{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#5C6E63}
#ti-booking-form input,
#ti-booking-form textarea,
#ti-booking-form select{width:100%;font-family:var(--serif);font-size:16px;line-height:1.5;
  padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:#FBFDFB;color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
#ti-booking-form select{font-family:var(--ui);font-size:15px;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235C6E63' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
#ti-booking-form textarea{resize:vertical;min-height:132px}
#ti-booking-form input:hover,#ti-booking-form textarea:hover,#ti-booking-form select:hover{border-color:rgba(34,181,115,.45)}
#ti-booking-form input:focus,#ti-booking-form textarea:focus,#ti-booking-form select:focus{
  outline:none;background:#fff;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(34,181,115,.16)}
#ti-booking-form button.btn{justify-self:start;padding:15px 34px;cursor:pointer;border:0}
#ti-booking-form button.btn:hover{filter:brightness(1.06)}
.ti-form-note{margin:0;font-family:var(--ui);font-size:13px;color:var(--emerald);min-height:18px}
.ti-form-note.error{color:#B4432F}

@media (max-width:720px){
  #ti-booking-form{grid-template-columns:1fr;padding:24px 20px}
  #ti-booking-form button.btn{justify-self:stretch;text-align:center}
}

/* calendly -------------------------------------------------- */
.ti-calendly{margin:30px auto 0;max-width:960px;background:rgba(255,255,255,.04);border:1px solid rgba(143,239,192,.22);
  border-radius:6px;overflow:hidden}
.ti-calendly-fallback{margin:16px 0 0;font-family:var(--ui);font-size:13px;color:#9FD8C4;text-align:center}
.ti-calendly-fallback a{color:var(--mint)}

/* social grid ----------------------------------------------- */
.ti-social{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.ti-soc{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:22px 20px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.ti-soc:hover{transform:translateY(-3px);border-color:rgba(23,162,184,.5);box-shadow:0 16px 34px rgba(8,23,15,.09)}
.ti-soc b{display:block;font-family:var(--ui);font-size:15px;letter-spacing:.02em}
.ti-soc span{display:block;margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.5}

/* responsive ------------------------------------------------ */
@media (max-width:980px){
  .ti-actions{grid-template-columns:1fr}
  .ti-social{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ti-social{grid-template-columns:1fr}
  .ti-facts li{grid-template-columns:1fr;gap:4px}
}

/* TI: site credit strip */
.ti-credit{background:#08170F;color:#8FA79A;font:600 12px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.06em;text-align:center;padding:14px 18px}
.ti-credit a{color:#8FEFC0;text-decoration:none;border-bottom:1px solid rgba(143,239,192,.45)}
.ti-credit a:hover{color:#fff}

.ti-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.ti-reveal.ti-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ti-reveal{opacity:1;transform:none}}
/* one call-to-action in the header is enough — the nav pill is it */
@media (max-width:520px){
  .wrap{padding-left:18px;padding-right:18px}
}
@media (max-width:1180px){
  /* keep the Menu button on the same line as the name */
}

/* TI: social icons */
.ti-ico{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;margin-right:6px;flex:none}
a:has(> .ti-ico){display:inline-flex;align-items:center}