/* GOVR — UAE 5-Year Multiple Entry Visa (simplified service page, "new")
 * Standalone page-specific stylesheet. Shares nav/footer/typography/tokens
 * with home-redesign.css; this file adds the simplified service-page layout
 * on top. All selectors are prefixed `v5n-` and scoped under `.v5n-page` so
 * the design palette never leaks into the shared nav/footer. Uses the site
 * Inter font (no serif) to stay consistent with the rest of govr.ae. */

.v5n-page {
	/* Design palette (kept from the approved HTML design). */
	--gold: #B8893B;
	--gold-deep: #8C6526;
	--ink: #1F1B16;
	--muted: #6B6258;
	--cream: #F4EFE6;
	--cream-soft: #FAF7F1;
	--line: #E7DECF;
	--card-note: #FBF6E9;
	--white: #FFFFFF;
	--ok: #1e8e5a;
	--v5n-radius: 12px;
	--v5n-maxw: 880px;
	/* Same font family as the rest of the site — Inter, no serif. */
	--font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--ink);
	line-height: 1.65;
}

.v5n-page a { color: inherit; text-decoration: none; }
.v5n-page img { max-width: 100%; height: auto; }

.v5n-wrap { max-width: var(--v5n-maxw); margin: 0 auto; padding: 0 24px; }

/* Shared icon (sprite <use>) — stroked line icons. */
.v5n-ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ===== Breadcrumb =====
 * The element is a <nav>, so the site's global `nav { position:sticky;
 * border-bottom; background; z-index }` rule would otherwise hijack it.
 * These class-level resets win on specificity and keep it a plain inline row. */
.v5n-crumb { position: static; top: auto; z-index: auto; background: transparent; border: 0; border-bottom: 0; padding: 16px 24px; font-size: 13px; color: var(--muted); }
.v5n-crumb a:hover { color: var(--gold); }
.v5n-crumb .current { color: var(--gold); font-weight: 600; }

/* ===== Hero ===== */
.v5n-hero { background: var(--cream-soft); text-align: center; padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.v5n-pill { display: inline-block; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 16px; border-radius: 30px; margin-bottom: 18px; }
.v5n-hero h1 { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; line-height: 1.14; margin-bottom: 14px; letter-spacing: -0.01em; }
.v5n-hero > .v5n-wrap > p { max-width: 58ch; margin: 0 auto 24px; color: var(--muted); font-size: 16px; }

/* ===== Stat strip ===== */
.v5n-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 700px; margin: 28px auto 0; border: 1px solid var(--line); border-radius: var(--v5n-radius); overflow: hidden; background: #fff; }
.v5n-stat { padding: 15px 8px; text-align: center; border-right: 1px solid var(--line); }
.v5n-stat:last-child { border-right: none; }
.v5n-stat-n { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--gold-deep); line-height: 1.1; }
.v5n-stat-l { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ===== Sections ===== */
.v5n-section { padding: 44px 0; border-bottom: 1px solid var(--line); }
.v5n-sec-title { font-family: var(--font-display); font-size: clamp(21px, 3vw, 28px); font-weight: 800; text-align: center; margin-bottom: 22px; letter-spacing: -0.01em; }

/* ===== Left-aligned section heading (eyebrow + title + lead) =====
 * Used by the "What it is" and "Related UAE Visa Types" sections. */
.v5n-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.v5n-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold); flex-shrink: 0; }
h2.v5n-title { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; margin-bottom: 16px; letter-spacing: -0.01em; line-height: 1.15; }
.v5n-lead { color: var(--muted); font-size: 15px; margin-bottom: 24px; max-width: 68ch; }

/* ===== Intro note ===== */
.v5n-note { background: var(--cream-soft); border-inline-start: 3px solid var(--gold); border-radius: 8px; padding: 22px 24px; color: var(--ink); font-size: 15px; }
.v5n-note b { color: var(--gold-deep); }
.v5n-note-outside { margin-top: 16px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }

/* ===== Related visa cards ===== */
.v5n-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v5n-rel { border: 1px solid var(--line); border-radius: var(--v5n-radius); padding: 22px; background: #fff; display: block; transition: box-shadow .2s ease, transform .2s ease; }
.v5n-rel:hover { box-shadow: 0 10px 26px rgba(31, 27, 22, .08); transform: translateY(-2px); }
.v5n-rel h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.v5n-rel p { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.v5n-rel-price { font-size: 15px; font-weight: 700; color: var(--gold); }

/* ===== Requirements cards ===== */
.v5n-req-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.v5n-req { border: 1px solid var(--line); border-radius: var(--v5n-radius); padding: 24px 18px; text-align: center; background: #fff; }
.v5n-req .v5n-ic-wrap { width: 46px; height: 46px; border-radius: 50%; background: var(--card-note); display: grid; place-items: center; margin: 0 auto 12px; color: var(--gold-deep); }
.v5n-req h4 { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.v5n-req p { font-size: 13px; color: var(--muted); margin: 0; }

/* ===== Docs note ===== */
.v5n-docs-note { background: var(--card-note); border-radius: 8px; padding: 16px 18px; font-size: 13.5px; color: var(--muted); }
.v5n-docs-note.is-center { text-align: center; }
.v5n-docs-note b { color: var(--ink); }

/* ===== Pricing scenario cards ===== */
.v5n-price2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.v5n-pcard { border: 1px solid var(--line); border-radius: var(--v5n-radius); padding: 24px 22px; background: #fff; text-align: center; }
.v5n-pcard.is-featured { border-color: var(--gold); box-shadow: 0 8px 24px rgba(184, 137, 59, .12); }
.v5n-pcard .v5n-scen { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.v5n-pcard .v5n-amt { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--gold-deep); }
.v5n-pcard .v5n-psub { font-size: 12.5px; color: var(--muted); margin: 6px 0 10px; }
.v5n-pcard .v5n-real { background: var(--card-note); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--ink); }
.v5n-pcard .v5n-real b { color: var(--gold-deep); }

/* ===== Pay-now / pay-later split ===== */
.v5n-paysplit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v5n-pay { border: 1px solid var(--line); border-radius: var(--v5n-radius); padding: 18px; display: flex; gap: 14px; align-items: flex-start; background: #fff; }
.v5n-pay .v5n-ic-wrap { width: 38px; height: 38px; border-radius: 10px; background: var(--card-note); display: grid; place-items: center; color: var(--gold-deep); flex-shrink: 0; }
.v5n-pay h4 { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.v5n-pay p { font-size: 12.5px; color: var(--muted); margin: 0; }

/* ===== Steps ===== */
.v5n-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v5n-step { border: 1px solid var(--line); border-radius: var(--v5n-radius); padding: 22px 18px; text-align: center; background: #fff; }
.v5n-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; margin: 0 auto 12px; }
.v5n-step h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.v5n-step p { font-size: 13px; color: var(--muted); margin: 0; }

/* ===== Buttons ===== */
/* Buttons match single-visa.php's .visa-cta-btn — gold gradient, soft gold
 * shadow, 12px radius, lift on hover — to stay consistent with the site. */
.v5n-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; white-space: nowrap; background: linear-gradient(135deg, #C4A747 0%, #D4B856 100%); color: #fff !important; border: none; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; padding: 15px 28px; border-radius: 12px; text-transform: uppercase; box-shadow: 0 8px 24px rgba(196, 167, 71, 0.25); transition: all 0.3s ease; min-height: 48px; cursor: pointer; font-family: var(--font-display); }
.v5n-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(196, 167, 71, 0.35); }
.v5n-btn:active { transform: translateY(0); }
.v5n-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.v5n-btn-wa, .v5n-btn-wa:hover { background: linear-gradient(135deg, #C4A747 0%, #D4B856 100%); }
.v5n-btn-outline { background: #fff; color: var(--gold-deep) !important; border: 1.5px solid var(--gold); box-shadow: none; }
.v5n-btn-outline:hover { background: #FBF7EC; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196, 167, 71, 0.18); }
.v5n-cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ===== FAQ ===== */
.v5n-faq-section { background: #fff; padding: 52px 0; border-top: 1px solid var(--line); }
.v5n-faq-section h2 { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 30px); font-weight: 800; text-align: center; margin-bottom: 8px; }
.v5n-faq-section .v5n-faq-sub { text-align: center; color: var(--muted); margin-bottom: 32px; font-size: 15px; }
.v5n-faq { max-width: 720px; margin: 0 auto; }
.v5n-faq details { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
.v5n-faq summary { padding: 16px 20px; font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.v5n-faq summary::-webkit-details-marker { display: none; }
.v5n-faq summary::after { content: "+"; color: var(--gold); font-size: 22px; flex-shrink: 0; line-height: 1; }
.v5n-faq details[open] summary::after { content: "\2212"; }
.v5n-faq .v5n-answer { padding: 0 20px 18px; color: var(--muted); font-size: 14px; }
.v5n-faq .v5n-answer p { margin-bottom: 10px; }
.v5n-faq .v5n-answer p:last-child { margin-bottom: 0; }
.v5n-faq .v5n-answer b, .v5n-faq .v5n-answer strong { color: var(--ink); }

/* ===== Final CTA ===== */
.v5n-final { background: var(--cream-soft); text-align: center; padding: 48px 0; }
.v5n-final h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 29px); font-weight: 800; margin-bottom: 8px; }
.v5n-final p { color: var(--muted); margin-bottom: 22px; font-size: 15px; }

/* ===== Mobile sticky apply bar ===== */
.v5n-mobile-cta { display: none; }
.v5n-mobile-cta .v5n-m-price { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.v5n-mobile-cta .v5n-m-price b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--gold-deep); }

/* ===== Responsive ===== */
@media (max-width: 720px) {
	.v5n-req-grid, .v5n-price2, .v5n-paysplit, .v5n-steps, .v5n-related { grid-template-columns: 1fr; }
	/* Space for the fixed .v5n-mobile-cta bar. Commented out 2026-07-25 along with
	   the bar itself in page-five-year-visa-new.php (Apply Now hidden for now) —
	   without the bar this is just 78px of dead space under the footer. Restore
	   both together. */
	/* body { padding-bottom: 78px; } */
	.v5n-mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(31, 27, 22, .08); padding: 10px 16px; align-items: center; justify-content: space-between; gap: 12px; }
	.v5n-mobile-cta .v5n-btn { margin: 0; flex: 0 0 auto; padding: 13px 20px; font-size: 13.5px; }
}
@media (max-width: 430px) {
	.v5n-stats { grid-template-columns: 1fr 1fr; }
	.v5n-stat:nth-child(2) { border-right: none; }
	.v5n-stat:nth-child(1), .v5n-stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.v5n-btn, .v5n-rel { transition: none !important; }
}