/*
  page-apply.css
  --------------
  Styles for apply.html only. Extracted from the <style> block that used
  to live in that page's head, so the site can serve
  style-src 'self' with no 'unsafe-inline' - the same reason every
  page's JavaScript already lives in its own .js file. Adding a
  <style> block or a style="..." attribute to that page from here
  on will be blocked by the browser, silently; put it here instead.
*/

.apply-wrap { max-width: 720px; margin: 0 auto; padding: 32px 24px 64px; }

  /* Same recipe as index.html's .hero: a normal bounded element whose
     height comes from its own padding/content (not a hardcoded pixel
     height, not background-attachment:fixed), with a gradient using
     PERCENTAGE stops so it always scales correctly to however tall
     this particular element ends up being. That's what makes the
     homepage hero reliable and the old body-wide fixed background
     (fixed pixel stops against a variable-height element) wasn't. */
  .apply-head-panel {
    padding: 40px 26px 32px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    position: relative;
    background-size: cover;
    background-position: center;
    color: var(--on-photo);
  }
  .apply-head-panel .country { font-size: 1.9rem; font-weight: 800; margin: 8px 0 2px; letter-spacing: -0.01em; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
  .apply-head-panel .visa-type { color: var(--on-photo-soft); font-size: 1.02rem; }
  .apply-head-panel .back-link { color: var(--on-photo-soft); font-size: 0.88rem; display: inline-block; margin-bottom: 14px; }
  .apply-head-panel .back-link:hover { color: var(--on-photo); }
  .apply-head-panel .photo-credit {
    position: absolute;
    bottom: 8px;
    inset-inline-end: 14px;
    font-size: 0.66rem;
    color: var(--on-photo);
    background: var(--photo-overlay-strong);
    padding: 2px 8px;
    border-radius: 6px;
  }

  .dtv-notice {
    padding: 16px 20px;
    margin-bottom: 20px;
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .dtv-notice strong { display: block; margin-bottom: 4px; }

  .option-card { padding: 22px 24px; margin-bottom: 20px; }
  .option-card h2 { font-size: 0.95rem; margin: 0 0 14px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
  .option-list { display: flex; flex-direction: column; gap: 10px; }
  .option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 0.93rem;
  }
  .option-item.selected { border-color: var(--accent); background: var(--accent-soft); }
  .option-item .opt-main { display: flex; align-items: center; gap: 10px; }
  .option-item .opt-price { font-weight: 700; white-space: nowrap; }
  /* --ink-soft, not --ink-faint: this row sits on --bg when unselected
     and on --accent-soft when selected, and --ink-faint is only rated
     for --card-bg (see the token comment in site.css). On these two it
     measures 4.22:1 and 4.00:1, both under the 4.5:1 AA minimum for
     text this size. --ink-soft clears it on all three (4.99 / 5.78 /
     4.74). This is the delivery-time line - the text a customer reads
     to choose how fast they need the visa - so it has to be legible. */
  .option-item .opt-sub { color: var(--ink-soft); font-size: 0.82rem; display: block; }
  .option-item .opt-sub.opt-sub-express { color: var(--rust); font-weight: 700; font-size: 0.92rem; }

  .option-item .opt-pitch { color: var(--rust); font-size: 0.82rem; font-weight: 600; display: block; }
  .option-item .opt-badge {
    display: inline-block; margin-inline-start: 8px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
    padding: 2px 8px; border-radius: 999px; vertical-align: middle;
  }

  .fee-card { padding: 22px 24px 18px; margin-bottom: 20px; }
  .fee-card .fee-total-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border); }
  .fee-card .fee-label { font-size: 0.95rem; color: var(--ink-soft); }
  .fee-card .fee-label small { display: block; color: var(--ink-faint); font-size: 0.78rem; margin-top: 2px; }
  .fee-card .fee-amount { font-size: 1.3rem; font-weight: 800; }

  .fine-print {
    font-size: 0.8rem;
    color: var(--ink-faint);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
  }

  .docs-card { padding: 22px 24px; margin-bottom: 28px; }
  .docs-card h2 { font-size: 1.02rem; margin: 0 0 12px; }
  .docs-card ul { margin: 0; padding-left: 20px; }
  [dir="rtl"] .docs-card ul { padding-left: 0; padding-right: 20px; }
  .docs-card li { margin-bottom: 8px; font-size: 0.93rem; color: var(--ink-soft); }

  .apply-actions { display: flex; gap: 12px; flex-wrap: wrap; }

  #not-found { display: none; text-align: center; padding: 60px 24px; background: var(--bg); border-radius: var(--radius); }