/* tutor-area/css/pay.css — the tutor pay flow (plans -> review -> Paytm -> result).
 *
 * Scoped to .tt-pay so nothing leaks into the rest of tutor-area. Loaded AFTER
 * tutor-area/css/main.css, which kills every focus ring with
 * `outline:none !important` on :focus and floats labels/inputs inside
 * .user-pro-section - so this markup stays out of that wrapper and re-declares
 * focus with !important at higher specificity.
 * Colours are the site brand tokens (css/tokens.css), repeated here as local
 * custom properties so this file works on its own.
 */

.tt-pay {
  --p-navy:#0B2545; --p-navy-800:#12315F;
  --p-blue:#1565D8; --p-blue-700:#0F53B3; --p-blue-50:#EEF4FC; --p-blue-100:#DBE9FC;
  --p-green:#0C7A48; --p-green-600:#0E8C52; --p-green-50:#E7F6EE;
  --p-ink:#0F172A; --p-ink-soft:#334155; --p-muted:#5B6B84;
  --p-line:#E3EAF3; --p-line-control:#78818E; --p-surface:#F7FAFD; --p-white:#FFFFFF;
  --p-warn-50:#FEF3C7; --p-warn-ink:#78350F; --p-err-50:#FDECEA; --p-err-ink:#8C1D18;
  --p-r:16px; --p-r-sm:10px;
  --p-shadow:0 1px 3px rgba(11,37,69,.06), 0 4px 12px rgba(11,37,69,.05);
  font-family: 'Inter','Noto Sans Devanagari','Segoe UI',Arial,sans-serif;
  color: var(--p-ink);
  font-size: 16px;
  line-height: 1.55;
  background: var(--p-surface);
  padding: 0 0 48px;
}
.tt-pay *, .tt-pay *::before, .tt-pay *::after { box-sizing: border-box; }
.tt-pay h1, .tt-pay h2, .tt-pay h3 {
  font-family: 'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;
  color: var(--p-navy); letter-spacing: -.01em; margin: 0;
}
.tt-pay a { color: var(--p-blue-700); }
.tt-pay a:focus-visible, .tt-pay button:focus-visible, .tt-pay input:focus-visible {
  outline: 2px solid var(--p-blue) !important;
  outline-offset: 2px !important;
}
.tt-pay__wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------------- hero --- */
.tt-pay .tt-pay-hero {   /* (0,2,0): the legacy section rule pads 50px above and below */
  padding: 0;
}
.tt-pay-hero {
  background: linear-gradient(100deg, #FFFFFF 0%, var(--p-blue-50) 55%, #E3F1EA 100%);
  border-bottom: 1px solid var(--p-line);
  overflow: hidden;
}
.tt-pay-hero .tt-pay__wrap {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center; gap: 24px; min-height: 0;
}
.tt-pay-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--p-green); font-weight: 700; font-size: 15px; margin: 28px 0 8px;
}
.tt-pay-hero__eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--p-green); }
.tt-pay-hero h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1.05; }
.tt-pay-hero h1 span { color: var(--p-green); }
.tt-pay-hero__lede { color: var(--p-ink-soft); max-width: 460px; margin: 12px 0 20px; font-size: 17px; }
.tt-pay-trust { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; margin: 0 0 28px; padding: 0; }
.tt-pay-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--p-ink-soft); }
.tt-pay-trust__ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--p-white); color: var(--p-blue); border: 1px solid var(--p-blue-100);
}
.tt-pay-hero__photo { align-self: end; justify-self: end; }
.tt-pay-hero__photo img { display: block; width: 100%; max-width: 440px; height: auto; }

/* --------------------------------------------------------------- steps --- */
.tt-pay-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); list-style: none;
  margin: 0 0 24px; padding: 0; counter-reset: step;
}
.tt-pay-steps li {
  position: relative; text-align: center; font-size: 14px; font-weight: 600; color: var(--p-muted);
  padding-top: 40px;
}
.tt-pay-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--p-line); color: var(--p-ink-soft); font-weight: 700; font-size: 14px;
}
.tt-pay-steps li::after {
  content: ""; position: absolute; top: 14px; left: calc(50% + 22px); right: calc(-50% + 22px);
  height: 2px; background: var(--p-line);
}
.tt-pay-steps li:last-child::after { display: none; }
.tt-pay-steps li.is-done, .tt-pay-steps li.is-now { color: var(--p-blue-700); }
.tt-pay-steps li.is-done::before { background: var(--p-green); color: #fff; content: "\2713"; }
.tt-pay-steps li.is-now::before { background: var(--p-blue); color: #fff; }
.tt-pay-steps li.is-done::after { background: var(--p-green); }

/* -------------------------------------------------------------- layout --- */
.tt-pay-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 32px; align-items: start; }
.tt-pay-card {
  background: var(--p-white); border: 1px solid var(--p-line); border-radius: var(--p-r);
  box-shadow: var(--p-shadow); padding: 28px;
}
.tt-pay-card h2 { font-size: 24px; margin-bottom: 4px; }
.tt-pay-card__sub { color: var(--p-muted); margin: 0 0 20px; }

/* ------------------------------------------------------------- banners --- */
.tt-pay-note { border-radius: var(--p-r-sm); padding: 12px 16px; margin: 0 0 16px; font-weight: 600; }
.tt-pay-note--warn { background: var(--p-warn-50); color: var(--p-warn-ink); }
.tt-pay-note--err  { background: var(--p-err-50);  color: var(--p-err-ink); }
.tt-pay-note--ok   { background: var(--p-green-50); color: #0A5C36; }
.tt-pay-note a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------- plans --- */
.tt-pay-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.tt-pay-plan {
  display: flex; flex-direction: column; background: var(--p-white);
  border: 1px solid var(--p-line); border-radius: var(--p-r); box-shadow: var(--p-shadow); padding: 24px;
}
.tt-pay-plan__name { font-size: 20px; }
.tt-pay-plan__price { font-family: 'Plus Jakarta Sans','Segoe UI',Arial,sans-serif; font-size: 34px; font-weight: 800; color: var(--p-navy); margin: 8px 0 2px; }
.tt-pay-plan__price small { font-size: 15px; font-weight: 600; color: var(--p-muted); }
.tt-pay-plan__meta { color: var(--p-muted); font-size: 14px; margin: 0 0 16px; }
.tt-pay-feat { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.tt-pay-feat li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.tt-pay-feat li::before {
  content: "\2713"; flex: 0 0 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--p-green-50); color: var(--p-green); font-weight: 800; font-size: 12px; margin-top: 2px;
}
.tt-pay-feat li.is-off { color: var(--p-muted); }
.tt-pay-feat li.is-off::before { content: "\2715"; background: var(--p-line); color: var(--p-muted); }
.tt-pay-plan form { margin-top: auto; }

/* -------------------------------------------------------------- review --- */
.tt-pay-dl { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; margin: 0 0 20px; }
.tt-pay-dl dt { color: var(--p-muted); font-weight: 600; }
.tt-pay-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tt-pay-sum { background: var(--p-blue-50); border-radius: var(--p-r-sm); padding: 16px 18px; margin: 0 0 20px; }
.tt-pay-sum__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--p-ink-soft); }
.tt-pay-sum__row strong { color: var(--p-navy); }
.tt-pay-sum__total { border-top: 1px solid var(--p-blue-100); margin-top: 8px; padding-top: 10px; font-size: 18px; }
.tt-pay-sum__total strong { font-size: 24px; }
.tt-pay-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 8px; }
.tt-pay-methods span {
  border: 1px solid var(--p-line); border-radius: var(--p-r-sm); padding: 12px 6px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--p-ink-soft); background: var(--p-white);
}
.tt-pay-help { font-size: 13px; color: var(--p-muted); margin: 0 0 20px; }

/* ------------------------------------------------------------- buttons --- */
.tt-pay .tt-pay-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 52px; border: 0; border-radius: var(--p-r-sm); cursor: pointer;
  background: var(--p-green); color: #fff !important; font-weight: 700; font-size: 17px;
  text-decoration: none; transition: background-color 150ms;
}
.tt-pay .tt-pay-btn:hover { background: var(--p-green-600); text-decoration: none; }
.tt-pay .tt-pay-btn--ghost { background: var(--p-white); color: var(--p-blue-700) !important; border: 1px solid var(--p-blue); }
.tt-pay .tt-pay-btn--ghost:hover { background: var(--p-blue-50); }

/* --------------------------------------------------------------- aside --- */
.tt-pay-aside { display: grid; gap: 16px; }
.tt-pay-aside .tt-pay-card { padding: 20px; }
.tt-pay-aside h3 { font-size: 17px; margin-bottom: 6px; }
.tt-pay-aside p { margin: 0; color: var(--p-muted); font-size: 14px; }
.tt-pay-qr { text-align: center; }
.tt-pay-qr__open { display: block; width: 180px; margin: 12px auto 0; cursor: zoom-in; text-decoration: none; }
.tt-pay-qr__open img { display: block; width: 180px; height: auto; border-radius: var(--p-r-sm); border: 1px solid var(--p-line); }
.tt-pay-qr__open span { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; }
.tt-pay-qr__open:hover img { box-shadow: 0 4px 14px rgba(11,37,69,.18); }

/* QR pop-up. <dialog> sits in the top layer; html.tt-scroll-lock stops the
   page behind it scrolling (overflow on body alone does not: html scrolls). */
html.tt-scroll-lock { overflow: hidden; }
.tt-qr-dialog {
  width: min(92vw, 400px); max-height: 94vh; padding: 20px 20px 16px; margin: auto;
  border: 0; border-radius: var(--p-r); background: #fff; text-align: center;
  box-shadow: 0 20px 60px rgba(11,37,69,.35); overflow: auto; overscroll-behavior: contain;
}
.tt-qr-dialog::backdrop { background: rgba(11,37,69,.72); }
.tt-qr-dialog img { display: block; width: 100%; height: auto; max-height: calc(94vh - 110px); object-fit: contain; margin: 20px 0 0; }
.tt-qr-dialog p { margin: 12px 0 0; color: var(--p-ink-soft); font-weight: 600; }
.tt-qr-dialog__close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--p-blue-50); color: var(--p-navy); cursor: pointer;
}
.tt-qr-dialog__close:hover { background: var(--p-blue-100); }
.tt-pay .tt-qr-dialog__close:focus-visible { outline: 2px solid var(--p-blue) !important; outline-offset: 2px !important; }

/* -------------------------------------------------------------- result --- */
.tt-pay-result { max-width: 640px; margin: 40px auto 0; text-align: center; }
.tt-pay-result__ico { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.tt-pay-result__ico--ok { background: var(--p-green); }
.tt-pay-result__ico--err { background: #B3261E; }
.tt-pay-result__ico--wait { background: var(--p-blue); }
.tt-pay-result h1 { font-size: 30px; margin-bottom: 8px; }
.tt-pay-result p { color: var(--p-ink-soft); }
.tt-pay-result .tt-pay-dl { text-align: left; max-width: 420px; margin: 20px auto; }
.tt-pay-result__actions { display: grid; gap: 10px; max-width: 360px; margin: 24px auto 0; }
.tt-pay-spinner {
  width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
  border: 4px solid var(--p-blue-100); border-top-color: var(--p-blue); animation: tt-pay-spin .9s linear infinite;
}
@keyframes tt-pay-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 960px) {
  .tt-pay-main { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  /* Owner, 24 Sep: the three trust points stay on ONE row, icon above text.
     Below 1024 the copy column is too narrow for them side by side (wrapped at 768 and 961). */
  .tt-pay-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tt-pay-trust li { flex-direction: column; gap: 6px; text-align: center; font-size: 12.5px; line-height: 1.35; }
  .tt-pay-trust__ico { width: 36px; height: 36px; }
}
@media (max-width: 767px) {
  .tt-pay-hero .tt-pay__wrap { grid-template-columns: 1fr; min-height: 0; }
  .tt-pay-hero__photo { display: none; }   /* on a phone the plan, not the photo, belongs above the fold */
  .tt-pay-hero__eyebrow { margin-top: 20px; }
  .tt-pay-trust { margin-bottom: 20px; }
  .tt-pay-card { padding: 20px; }
  .tt-pay-dl { grid-template-columns: 1fr; gap: 2px; }
  .tt-pay-dl dd { margin-bottom: 8px; }
  .tt-pay-steps li { font-size: 12px; }
  .tt-pay-methods { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tt-pay-spinner { animation: none; }
}
.tt-pay .tt-pay-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tt-pay-account { margin: 32px 0 0; }
.tt-pay-steps--3 { grid-template-columns: repeat(3, 1fr); }

/* ------------------------------------------------ guest form (pay-now.php) --- */
/* (0,3,1) and every property re-declared: pay-now.php also loads the legacy
   css/main.css and bootstrap, whose label/input rules would otherwise win. */
.tt-pay .tt-pay-form .tt-pay-field { margin: 0 0 16px; }
.tt-pay .tt-pay-form .tt-pay-field label {
  display: block; margin: 0 0 6px; font-weight: 600; font-size: 15px; color: var(--p-ink-soft);
}
.tt-pay .tt-pay-form .tt-pay-field label small { font-weight: 500; color: var(--p-muted); }
.tt-pay .tt-pay-form .tt-pay-field input {
  display: block; width: 100%; height: 50px; margin: 0; padding: 0 14px;
  border: 1px solid var(--p-line-control); border-radius: var(--p-r-sm);
  background: var(--p-white); color: var(--p-ink); font: 400 16px/1.2 'Inter','Segoe UI',Arial,sans-serif;
  box-shadow: none;
}
.tt-pay .tt-pay-form .tt-pay-field input:focus { border-color: var(--p-blue); }
.tt-pay .tt-pay-form .tt-pay-field input[aria-invalid="true"] { border-color: #B3261E; }
.tt-pay .tt-pay-form .tt-pay-field .tt-pay-err { margin: 6px 0 0; color: var(--p-err-ink); font-size: 14px; font-weight: 600; }
.tt-pay .tt-pay-form .tt-pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tt-pay .tt-pay-form .tt-pay-amount { position: relative; }
.tt-pay .tt-pay-form .tt-pay-amount span {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 700; font-size: 20px; color: var(--p-navy); pointer-events: none;
}
.tt-pay .tt-pay-form .tt-pay-amount input { padding-left: 34px; height: 58px; font-size: 22px; font-weight: 700; }
@media (max-width: 560px) {
  .tt-pay .tt-pay-form .tt-pay-row { grid-template-columns: 1fr; }
}

/* WhatsApp help button. Dark ink on the brand green: 7.92:1 (white on #25D366 is 1.98). */
.tt-pay .tt-pay-btn--wa { background: #25D366; color: #04291A !important; text-align: left; }
.tt-pay .tt-pay-btn--wa:hover { background: #1EBE5A; }
.tt-pay .tt-pay-btn--wa span { display: flex; flex-direction: column; line-height: 1.2; }
.tt-pay .tt-pay-btn--wa small { font-size: 13px; font-weight: 600; opacity: .85; }