/* =====================================================================
   Online Tijara — premium dark "my-account" experience on the cosmos
   palette. Loads ONLY on the WooCommerce account pages (body.ot-woo).
   Covers the returning-student LOGIN and the logged-in ACCOUNT DASHBOARD
   (nav + content + edit-account / address / orders forms). Defensive:
   colour / shape / shadow over Woo's own markup — no markup or checkout
   logic touched, so Woo updates stay safe. Latin numerals everywhere.

   NOTE: cart & checkout (block-based) are intentionally NOT styled here
   yet — they sit behind WooCommerce "Coming Soon" mode and can't be
   visually validated, so we don't ship blind CSS onto them. Extend this
   file + the enqueue once a validation window is available.

   Tokens are self-contained (cosmos.css does not load on account pages).
   ===================================================================== */
body.ot-woo {
  --ot-orange:    var(--wp--preset--color--brand, #ff6b1a);
  --ot-orange-2:  var(--wp--preset--color--brand-2, #ff8a3d);
  --ot-gold:      var(--wp--preset--color--gold, #ffd27a);
  --ot-gold-soft: var(--wp--preset--color--gold-soft, #ffe7c2);
  --ot-text:      var(--wp--preset--color--contrast, #f6f5f3);
  --ot-text-dim:  var(--wp--preset--color--contrast-dim, #9a9aa8);
  --ot-surface:   var(--wp--preset--color--surface, #15151f);
  --ot-bg-2:      var(--wp--preset--color--base-2, #0d0d14);
  --ot-glow:      rgba(255,107,26,.5);
  --ot-border:    rgba(255,255,255,.08);
  --ot-glass:     linear-gradient(160deg, rgba(26,26,38,.72), rgba(13,13,20,.60));
  --ot-ease:      cubic-bezier(.2,.8,.2,1);
}

/* ---- Form fields → dark glass (kills Woo's white inputs) ---- */
.ot-woo :is(
  input[type=text], input[type=email], input[type=tel], input[type=url],
  input[type=password], input[type=number], input[type=search],
  textarea, select, .woocommerce-Input, .input-text
) {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 12px !important;
  color: var(--ot-text) !important;
  padding: 12px 16px !important;
  transition: border-color .25s var(--ot-ease), box-shadow .25s var(--ot-ease);
}
.ot-woo :is(input, textarea, select):focus {
  outline: none !important;
  border-color: rgba(255,210,122,.5) !important;
  box-shadow: 0 0 0 3px rgba(255,107,26,.15) !important;
}
.ot-woo ::placeholder { color: var(--ot-text-dim) !important; opacity: 1; }
.ot-woo label { color: var(--ot-text) !important; }
.ot-woo .woocommerce-form-login__rememberme,
.ot-woo .woocommerce-form__label-for-checkbox { color: var(--ot-text-dim) !important; }

/* ---- LOGIN / reset panels → glass card ---- */
.ot-woo .woocommerce-form-login,
.ot-woo .woocommerce-form-register,
.ot-woo .woocommerce-ResetPassword {
  background: var(--ot-glass) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--ot-border) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.42);
}

/* ---- ACCOUNT DASHBOARD → glass nav rail + glass content panel ---- */
/* Two-column layout only when the account navigation is present (logged in).
   NB: body carries BOTH .ot-woo and .woocommerce-account, so target the
   .woocommerce container directly (a descendant of body.ot-woo). */
.ot-woo .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 24px;
  align-items: start;
}
/* WooCommerce floats the nav/content with % widths and lets them auto-place
   into 2 rows — pin each to an explicit cell + reset float/width/margin so
   nav sits in col 1 (RTL: right) and content fills col 2. */
.ot-woo .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.ot-woo .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
}
@media (max-width: 880px) {
  .ot-woo .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 1fr !important;
  }
  .ot-woo .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation,
  .ot-woo .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

.ot-woo .woocommerce-MyAccount-navigation {
  background: var(--ot-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--ot-border);
  border-radius: 20px;
  padding: 12px;
}
.ot-woo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.ot-woo .woocommerce-MyAccount-navigation li { margin: 0; border: none; }
.ot-woo .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 13px 16px;
  border-radius: 12px;
  color: var(--ot-text) !important;
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s var(--ot-ease), color .25s var(--ot-ease);
}
.ot-woo .woocommerce-MyAccount-navigation a:hover {
  background: rgba(255,255,255,.05);
  color: var(--ot-gold) !important;
}
.ot-woo .woocommerce-MyAccount-navigation-link.is-active a {
  background: rgba(255,107,26,.12);
  border-inline-start: 3px solid var(--ot-orange);
  color: var(--ot-gold) !important;
  font-weight: 800;
}

/* ---- STUDENT-DASHBOARD BRIDGE (My Account → Tutor /dashboard/) ----
   A highlighted nav item + hero CTA so the learning hub is obvious from the
   WooCommerce account area. Markup added in functions.php (ot_account_*). */
.ot-woo .woocommerce-MyAccount-navigation-link--tutor-dashboard { margin-bottom: 10px; }
.ot-woo .woocommerce-MyAccount-navigation-link--tutor-dashboard a {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(255,107,26,.18), rgba(255,210,122,.10)) !important;
  border: 1px solid rgba(255,210,122,.34);
  color: var(--ot-gold) !important;
  font-weight: 800 !important;
}
.ot-woo .woocommerce-MyAccount-navigation-link--tutor-dashboard a::before {
  content: "🎓"; font-size: 1.05em; line-height: 1;
}
.ot-woo .woocommerce-MyAccount-navigation-link--tutor-dashboard a:hover {
  background: linear-gradient(135deg, rgba(255,107,26,.28), rgba(255,210,122,.16)) !important;
  border-color: rgba(255,210,122,.55);
  color: #fff !important;
}

/* Hero CTA card on the account dashboard home. */
.ot-woo .ot-acct-dash-cta {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 26px; padding: 20px 22px; border-radius: 18px;
  text-decoration: none !important;
  background: linear-gradient(150deg, rgba(26,26,38,.92), rgba(13,13,20,.95));
  border: 1px solid rgba(255,210,122,.26);
  box-shadow: 0 18px 46px rgba(255,107,26,.16), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .3s var(--ot-ease), box-shadow .3s var(--ot-ease), border-color .3s var(--ot-ease);
}
.ot-woo .ot-acct-dash-cta:hover {
  transform: translateY(-3px);
  border-color: rgba(255,210,122,.5);
  box-shadow: 0 26px 60px rgba(255,107,26,.26);
}
.ot-woo .ot-acct-dash-ic {
  flex-shrink: 0; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 16px; font-size: 1.7rem;
  background: linear-gradient(135deg, rgba(255,107,26,.22), rgba(255,210,122,.12));
  border: 1px solid rgba(255,210,122,.3);
}
.ot-woo .ot-acct-dash-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ot-woo .ot-acct-dash-txt b {
  font-family: 'Cairo', sans-serif; font-weight: 900; font-size: 1.18rem; color: #fff !important;
}
.ot-woo .ot-acct-dash-txt i {
  font-style: normal; font-family: 'Tajawal', sans-serif; font-size: .92rem; color: var(--ot-text-dim);
}
.ot-woo .ot-acct-dash-go {
  margin-inline-start: auto; flex-shrink: 0;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#ff6b1a,#ffd27a); color: #160a02;
  font-weight: 900; font-size: 1.2rem; line-height: 1;
}
.ot-woo .ot-acct-dash-cta:hover .ot-acct-dash-go { box-shadow: 0 8px 22px rgba(255,107,26,.5); }
@media (max-width: 560px) {
  .ot-woo .ot-acct-dash-cta { padding: 16px; gap: 12px; }
  .ot-woo .ot-acct-dash-ic { width: 46px; height: 46px; font-size: 1.4rem; border-radius: 13px; }
  .ot-woo .ot-acct-dash-txt b { font-size: 1.05rem; }
  .ot-woo .ot-acct-dash-txt i { font-size: .85rem; }
  .ot-woo .ot-acct-dash-go { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .ot-woo .ot-acct-dash-cta { transition: none !important; }
}

.ot-woo .woocommerce-MyAccount-content {
  background: var(--ot-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--ot-border);
  border-radius: 20px;
  padding: 28px;
}
.ot-woo .woocommerce-MyAccount-content a { color: var(--ot-gold) !important; }
.ot-woo .woocommerce-MyAccount-content a:hover { color: var(--ot-orange-2) !important; }

/* ---- Orders / address tables → dark glass ---- */
.ot-woo .woocommerce table.shop_table {
  background: transparent !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 16px !important;
  border-collapse: separate !important;
  overflow: hidden;
}
.ot-woo .woocommerce table.shop_table th,
.ot-woo .woocommerce table.shop_table td {
  border-color: var(--ot-border) !important;
  color: var(--ot-text) !important;
}
.ot-woo .woocommerce table.shop_table thead th {
  background: rgba(255,255,255,.03) !important;
  color: var(--ot-gold) !important;
}
.ot-woo .woocommerce-Address address,
.ot-woo .woocommerce-Address {
  color: var(--ot-text) !important;
  border-color: var(--ot-border) !important;
}

/* ---- WooCommerce notices on dark ---- */
.ot-woo .woocommerce-message,
.ot-woo .woocommerce-info,
.ot-woo .woocommerce-error {
  background: rgba(255,255,255,.04) !important;
  border-top: 3px solid var(--ot-orange) !important;
  border-radius: 12px !important;
  color: var(--ot-text) !important;
}
.ot-woo .woocommerce-message a,
.ot-woo .woocommerce-info a { color: var(--ot-gold) !important; }

/* =====================================================================
   CART & CHECKOUT (block-based: .wc-block-*). The blocks already adapt to
   the dark block theme (transparent surfaces, light text, molten buttons,
   glass order summary) — the only leaks are the WHITE block text inputs +
   country/state selects, which we dark-glass here. Validated in a Coming
   Soon preview window. Order-summary + step titles get accent polish.
   ===================================================================== */
.ot-woo .wc-block-components-text-input input,
.ot-woo .wc-block-components-text-input textarea,
.ot-woo .wc-blocks-components-select__container,
.ot-woo .wc-blocks-components-select select,
.ot-woo .wc-block-components-combobox-control input {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 12px !important;
  color: var(--ot-text) !important;
}
.ot-woo .wc-blocks-components-select__select { background: transparent !important; color: var(--ot-text) !important; }
/* Floating label = placeholder text on dark; gold when the field is active. */
.ot-woo .wc-block-components-text-input label,
.ot-woo .wc-blocks-components-select__label { color: var(--ot-text-dim) !important; }
.ot-woo .wc-block-components-text-input.is-active label { color: var(--ot-gold) !important; }
.ot-woo .wc-block-components-text-input input:focus,
.ot-woo .wc-block-components-text-input textarea:focus {
  outline: none !important;
  border-color: rgba(255,210,122,.5) !important;
  box-shadow: 0 0 0 3px rgba(255,107,26,.15) !important;
}

/* Order-summary card → glass; step titles → gold. */
.ot-woo .wc-block-checkout__sidebar .wc-block-components-panel,
.ot-woo .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--ot-glass) !important;
  border: 1px solid var(--ot-border) !important;
  border-radius: 20px !important;
}
.ot-woo .wc-block-components-checkout-step__title,
.ot-woo .wc-block-cart__totals-title {
  color: var(--ot-gold) !important;
  font-family: 'Cairo', sans-serif !important;
}

/* Block notices on dark. */
.ot-woo .wc-block-components-notice-banner {
  background: rgba(255,255,255,.04) !important;
  color: var(--ot-text) !important;
  border-radius: 12px !important;
}
.ot-woo .wc-block-components-notice-banner.is-error { border-inline-start: 4px solid #ff5a5a !important; }

/* Brand the empty product placeholder thumbnail (cart line + summary). */
.ot-woo .wc-block-components-product-image img[src*="placeholder"] { opacity: 0; }
.ot-woo .wc-block-components-product-image:has(img[src*="placeholder"]) {
  background: radial-gradient(circle at 50% 45%, rgba(255,107,26,.45), var(--ot-bg-2) 72%);
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .ot-woo :is(input, textarea, select),
  .ot-woo .woocommerce-MyAccount-navigation a { transition: none !important; }
}

/* =====================================================================
   WARM-CONTRAST REFINEMENT (v2.7) — aligns the account area with the LMS
   "Student Experience Polish" warm ink palette + focus-glow parity.
   Additive, appended last. RTL-safe.
   ===================================================================== */
body.ot-woo { --ot-ink: #F5F2EA; --ot-ink-2: #D7CFC2; --ot-ink-muted: #A79F92; }
.ot-woo .woocommerce-MyAccount-content,
.ot-woo .woocommerce-MyAccount-content p,
.ot-woo .woocommerce-MyAccount-content li,
.ot-woo .woocommerce table.shop_table td,
.ot-woo .woocommerce-Address address { color: var(--ot-ink-2) !important; }
.ot-woo .woocommerce :is(h1,h2,h3,h4) { color: var(--ot-ink) !important; }
.ot-woo ::placeholder { color: var(--ot-ink-muted) !important; opacity: 1; }
.ot-woo .woocommerce-form-login__rememberme,
.ot-woo .woocommerce-form__label-for-checkbox,
.ot-woo small { color: var(--ot-ink-muted) !important; }
.ot-woo :is(input, textarea, select):focus {
  border-color: rgba(255,210,122,.6) !important;
  box-shadow: 0 0 0 3px rgba(255,107,26,.16), 0 8px 26px rgba(255,107,26,.14) !important;
}