/* All-Indonesia.org — shared stylesheet
Palette: Indonesian flag red anchors the brand; a deep archipelago-navy
replaces flat black for dark sections; a muted temple-gold accent marks
the travel signature (route lines, badges). Distinct from the French
template's plain red/white/black system while keeping the same flag DNA. */
:root {
--red: #CE1126;
--red-dark: #A10E1D;
--red-tint: #FBEAEC;
--ink: #17211D;
--navy: #0E2E2E;
--navy-light: #163F3E;
--gold: #B9873C;
--gold-tint: #F7EFDF;
--muted: #5E5A52;
--line: #E7E1D3;
--bg-tint: #FAF8F3;
--white: #FFFFFF;
--success: #2E7D5B;
}
/* Polices Manrope/Inter chargees via dans layout/seo-head.php, pas
via @import ici : @import bloque le rendu et retarde la decouverte de la police (le
navigateur doit d'abord telecharger et parser tout ce fichier CSS avant de meme decouvrir
qu'il faut aller chercher la police), alors qu'un dans le est decouvert et
recupere en parallele du reste - meilleur score PageSpeed. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
color: var(--ink);
background: var(--white);
line-height: 1.55;
font-size: 16px;
}
h1, h2, h3, .logo, .price-amount, .step-num, .nav-cta, .btn-cta, .btn-primary, .btn-choose, .btn-outline {
font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--red); }
img { max-width: 100%; display: block; }
.container {
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
}
/* ---------- Bandeau drapeau (2px, discret) ---------- */
.flag-bar {
height: 4px;
background: var(--red);
}
/* ---------- En-tête / navigation ---------- */
header.site-header {
border-bottom: 1px solid var(--line);
background: var(--white);
}
.nav-inner {
max-width: 1040px;
margin: 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nav-right {
display: flex;
align-items: center;
gap: 20px;
}
.logo {
font-size: 19px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
text-decoration: none;
display: flex;
align-items: center;
}
.logo .word-all { color: var(--ink); }
.logo .word-indonesia { color: var(--red); }
.logo .logo-plane {
width: 17px;
height: 17px;
margin: 0 7px;
color: var(--red);
flex-shrink: 0;
transform: rotate(45deg);
}
.footer-col h3.brand-mark { display: flex; align-items: center; font-size: 15px; }
.footer-col h3.brand-mark .word-all { color: var(--ink); }
.footer-col h3.brand-mark .word-indonesia { color: var(--red); }
.footer-col h3.brand-mark .logo-plane {
width: 14px; height: 14px; margin: 0 6px; color: var(--red);
flex-shrink: 0; transform: rotate(45deg);
}
nav.main-nav {
display: flex;
align-items: center;
gap: 28px;
}
nav.main-nav a {
color: var(--ink);
text-decoration: none;
font-size: 14.5px;
font-weight: 600;
white-space: nowrap;
}
nav.main-nav a:hover { color: var(--red); }
.nav-cta {
background: var(--red);
color: var(--white) !important;
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
}
.nav-cta:hover { background: var(--red-dark); }
/* ---------- Language switcher (native details/summary, no JS needed) ---------- */
.lang-switcher {
position: relative;
}
.lang-switcher summary.lang-current {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid var(--line);
border-radius: 6px;
padding: 8px 12px;
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
list-style: none;
}
.lang-switcher summary.lang-current::-webkit-details-marker { display: none; }
.lang-switcher summary.lang-current:hover { border-color: var(--red); color: var(--red); }
.lang-switcher summary.lang-current svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.15s; }
.lang-switcher[open] summary.lang-current svg { transform: rotate(180deg); }
.lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--white);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 12px 30px -10px rgba(0,0,0,0.18);
padding: 6px;
min-width: 190px;
max-height: 340px;
overflow-y: auto;
z-index: 50;
}
.lang-menu a {
display: block;
padding: 8px 10px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
.lang-menu a:hover { background: var(--bg-tint); color: var(--red); }
.lang-menu a.active { color: var(--red); font-weight: 700; background: var(--red-tint); }
@media (max-width: 760px) {
.lang-menu { right: auto; left: 0; }
}
/* ---------- Hero ---------- */
.hero {
background: var(--bg-tint);
padding: 56px 24px 48px;
text-align: center;
border-bottom: 1px solid var(--line);
}
.hero h1 {
font-size: 32px;
line-height: 1.28;
max-width: 760px;
margin: 0 auto 16px;
color: var(--ink);
}
.hero p.lead {
font-size: 17px;
color: var(--muted);
max-width: 620px;
margin: 0 auto;
}
.breadcrumb {
font-size: 13px;
color: var(--muted);
max-width: 760px;
margin: 0 auto 18px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--red); }
/* ---------- Formulaire ---------- */
.form-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.form-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px 24px;
background: var(--red-tint);
border-bottom: 1px solid var(--line);
font-size: 13px;
color: var(--red-dark);
font-weight: 700;
flex-wrap: wrap;
}
.form-progress .step {
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--red);
color: var(--white);
font-size: 12px;
}
.form-progress .step.pending {
background: var(--white);
color: var(--muted);
border: 1px solid var(--line);
}
.form-progress .sep { color: #D8B7BB; }
.form-progress .muted-label { color: var(--muted); font-weight: 400; }
.section-title {
padding: 24px 28px 4px;
font-size: 18px;
font-weight: 700;
color: var(--ink);
}
.fields {
padding: 8px 28px 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-note {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
margin: 0 0 4px;
}
.radio-row {
display: flex;
gap: 28px;
margin-top: 4px;
}
.radio-row label {
display: flex;
align-items: center;
gap: 7px;
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.radio-row input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--red);
cursor: pointer;
}
.field.full { grid-column: 1 / -1; }
label { font-size: 13px; font-weight: 600; color: var(--ink); }
input, select, textarea {
font-size: 15px;
padding: 11px 12px;
border: 1px solid var(--line);
border-radius: 7px;
color: var(--ink);
background: var(--white);
font-family: inherit;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(206, 17, 38, 0.12);
}
input::placeholder { color: #A9A9A9; }
.divider { height: 1px; background: var(--line); margin: 4px 28px; }
.pay-bar {
padding: 24px 28px 28px;
background: var(--bg-tint);
border-top: 1px solid var(--line);
text-align: center;
}
.pay-note { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.btn-primary {
display: inline-block;
width: 100%;
max-width: 360px;
background: var(--red);
color: var(--white) !important;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 16px 24px;
border: none;
border-radius: 7px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--red-dark); }
.btn-primary:disabled {
background: #c9c9c9;
color: #6b6b6b !important;
cursor: not-allowed;
}
.btn-primary:disabled:hover { background: #c9c9c9; }
.after-note {
max-width: 760px; margin: 20px auto 0; padding: 0 24px;
font-size: 13px; color: var(--muted); text-align: center;
}
.after-note b { color: var(--ink); }
/* ---------- Contenu éditorial ---------- */
.content { max-width: 720px; margin: 0 auto; padding: 8px 24px 24px; }
.content h2 { font-size: 22px; color: var(--ink); margin: 48px 0 14px; }
.content h2 .num { color: var(--red); margin-right: 4px; }
.content p { font-size: 15.5px; color: var(--ink); margin: 0 0 12px; }
.content ul, .content ol { margin: 0 0 12px; padding-left: 20px; }
.content ul li, .content ol li { font-size: 15.5px; margin-bottom: 8px; }
hr.section-rule { border: none; border-top: 1px solid var(--line); margin: 40px 0 0; }
.cta-wrap { text-align: center; margin: 28px 0 8px; }
.btn-cta {
display: inline-block;
background: var(--red);
color: var(--white) !important;
font-size: 15px;
font-weight: 700;
text-decoration: none;
padding: 14px 32px;
border-radius: 7px;
transition: background 0.15s ease;
}
.btn-cta:hover { background: var(--red-dark); }
.btn-cta.secondary { background: var(--navy); }
.btn-cta.secondary:hover { background: var(--navy-light); }
.btn-cta.outline {
background: var(--white);
color: var(--red) !important;
border: 1.5px solid var(--red);
}
.btn-cta.outline:hover { background: var(--red-tint); }
/* ---------- FAQ accordéon ---------- */
.faq-item {
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 16px 20px;
font-size: 15.5px;
font-weight: 700;
color: var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--white);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-size: 20px;
font-weight: 400;
color: var(--red);
flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); background: var(--red-tint); }
.faq-answer { padding: 16px 20px; font-size: 15px; color: var(--muted); background: var(--white); }
/* ---------- Prix (discret) + bandeau de clôture ---------- */
.price-line { font-size: 15px; color: var(--muted); margin: 4px 0 18px; }
.price-line b { color: var(--ink); font-weight: 700; }
.closing-banner {
text-align: center;
background: var(--navy);
color: var(--white);
border-radius: 10px;
padding: 32px 28px;
margin: 32px 0 60px;
font-size: 19px;
font-weight: 700;
line-height: 1.4;
}
/* ---------- Fil d'Ariane ---------- */
.breadcrumb-nav { max-width: 720px; margin: 16px auto 0; padding: 0 24px; font-size: 13.5px; color: var(--muted); }
.breadcrumb-nav a { color: var(--muted); text-decoration: underline; }
.breadcrumb-nav a:hover { color: var(--red); }
.breadcrumb-nav span[aria-current] { color: var(--ink); }
/* ---------- Pages simples (contact / mentions légales) ---------- */
.page-body { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.page-body h1 { font-size: 28px; margin-bottom: 8px; color: var(--ink); }
.page-body .lead { color: var(--muted); margin-bottom: 32px; }
.page-body h2 { font-size: 19px; margin: 32px 0 10px; color: var(--ink); }
.page-body p { font-size: 15.5px; margin-bottom: 12px; }
.page-body ul { padding-left: 20px; }
.page-body li { font-size: 15.5px; margin-bottom: 8px; }
.info-callout {
background: var(--gold-tint);
border: 1px solid #E6D3AC;
border-radius: 10px;
padding: 16px 18px;
font-size: 14.5px;
margin: 18px 0 24px;
}
.info-callout b { color: var(--navy); }
.compare-table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 28px;
font-size: 14px;
}
.compare-table th, .compare-table td {
border: 1px solid var(--line);
padding: 11px 12px;
text-align: left;
vertical-align: top;
}
.compare-table th {
background: var(--bg-tint);
font-weight: 700;
color: var(--ink);
}
.compare-table td:first-child, .compare-table th:first-child { font-weight: 700; white-space: nowrap; }
.topic-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 24px 26px;
margin: 20px 0 28px;
}
.topic-card .topic-kicker {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--red);
background: var(--red-tint);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
.topic-card h2 { margin-top: 0 !important; }
.topic-facts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 24px;
margin: 14px 0 16px;
padding: 14px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.topic-facts div { font-size: 14px; }
.topic-facts b { display: block; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
@media (max-width: 600px) {
.topic-facts { grid-template-columns: 1fr; }
.compare-table { font-size: 12.5px; }
}
.contact-box {
border: 1px solid var(--line);
border-radius: 10px;
padding: 24px 26px;
background: var(--bg-tint);
margin: 24px 0;
}
.contact-box a { font-weight: 700; }
/* ---------- Pied de page ---------- */
footer.site-footer {
border-top: 1px solid var(--line);
background: var(--bg-tint);
padding: 40px 24px 28px;
margin-top: 40px;
}
.footer-inner {
max-width: 1040px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 32px;
}
.footer-col h3 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
margin: 0 0 12px;
}
.footer-col a {
display: block;
color: var(--ink);
text-decoration: none;
font-size: 14.5px;
margin-bottom: 8px;
}
.footer-col a:hover { color: var(--red); }
.footer-col p { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.footer-disclaimer {
max-width: 1040px;
margin: 28px auto 0;
padding-top: 20px;
border-top: 1px solid var(--line);
font-size: 12.5px;
color: var(--muted);
line-height: 1.6;
}
.footer-bottom {
max-width: 1040px;
margin: 16px auto 0;
font-size: 12.5px;
color: var(--muted);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 640px) {
.fields { grid-template-columns: 1fr; }
.hero h1 { font-size: 25px; }
nav.main-nav { display: none; }
.footer-inner { grid-template-columns: 1fr; }
}
/* ================================================================
Nouveau template — composants inspirés du site Madagascar
================================================================ */
/* ---- Eyebrow / badge pilule ---- */
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--red-dark);
background: var(--red-tint);
padding: 7px 16px;
border-radius: 999px;
margin-bottom: 18px;
}
/* ---- Hero v2 : deux colonnes ---- */
.hero-v2 {
background: linear-gradient(180deg, var(--bg-tint) 0%, var(--white) 100%);
padding: 56px 24px 64px;
border-bottom: 1px solid var(--line);
}
.hero-grid {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
}
.hero-grid h1 { font-size: 30px; line-height: 1.28; margin: 0 0 16px; text-align: left; }
.hero-grid .lead { font-size: 16.5px; color: var(--muted); text-align: left; max-width: 520px; margin: 0 0 26px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.btn-outline {
display: inline-block;
background: var(--white);
color: var(--ink) !important;
border: 1.5px solid var(--line);
padding: 14px 26px;
border-radius: 7px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
}
.btn-outline:hover { border-color: var(--red); color: var(--red) !important; }
.trust-line { font-size: 13px; color: var(--muted); }
.trust-line b { color: var(--ink); }
/* ---- Hero visual: boarding-pass card (signature element) ---- */
.visual-card {
background: var(--navy);
border-radius: 16px;
padding: 26px 26px 0;
color: var(--white);
box-shadow: 0 20px 45px -20px rgba(14,46,46,0.45);
position: relative;
overflow: hidden;
}
.visual-card::after {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(206,17,38,0.28);
}
.visual-card .vc-kicker {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
position: relative;
}
.visual-card .vc-title {
font-size: 21px;
font-weight: 800;
margin-bottom: 18px;
position: relative;
}
.vc-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; position: relative; }
.vc-pill {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
padding: 6px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
}
.vc-stub {
position: relative;
margin: 0 -26px;
padding: 20px 26px 22px;
border-top: 1px dashed rgba(255,255,255,0.28);
}
.vc-stub::before, .vc-stub::after {
content: "";
position: absolute;
top: -9px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--white);
}
.vc-stub::before { left: -9px; }
.vc-stub::after { right: -9px; }
.vc-facts { display: flex; flex-direction: column; gap: 10px; position: relative; }
.vc-fact { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,0.9); }
.vc-fact svg { flex-shrink: 0; }
/* ---- Icônes ligne (pictos) ---- */
.icon {
width: 20px; height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-red { color: var(--red); }
/* ---- Sélecteur d'éligibilité ---- */
.checker-section { padding: 56px 24px; background: var(--white); }
.checker-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.checker-box {
background: var(--white);
border: 1px solid var(--line);
border-radius: 14px;
padding: 28px;
margin-top: 28px;
text-align: left;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.checker-box h3 { margin: 0 0 16px; font-size: 15px; }
.checker-row { display: flex; gap: 10px; flex-wrap: wrap; }
.checker-row select {
flex: 1;
min-width: 220px;
font-size: 15px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--white);
}
.checker-row button {
background: var(--red);
color: var(--white);
border: none;
padding: 0 26px;
border-radius: 7px;
font-weight: 700;
font-size: 15px;
cursor: pointer;
}
.checker-row button:hover { background: var(--red-dark); }
.checker-result {
margin-top: 16px;
padding: 18px 16px;
border-radius: 8px;
background: var(--red-tint);
border: 1px solid #F3CCD1;
font-size: 14px;
color: var(--ink);
display: none;
}
.checker-result.visible { display: block; }
.checker-result b { color: var(--red-dark); }
.checker-note-cta { margin-top: 20px; }
.checker-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
/* ---- Cartes à icône (3 colonnes) ---- */
.icon-cards {
max-width: 1080px;
margin: 32px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.icon-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
padding: 26px 24px;
}
.icon-card .icon-badge {
width: 42px; height: 42px;
border-radius: 10px;
background: var(--red-tint);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.icon-card h3 { font-size: 16.5px; margin: 0 0 8px; }
.icon-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
/* ---- Steps numérotés (3 étapes) ---- */
.flight-path {
max-width: 1080px;
margin: 28px auto 0;
display: none;
}
.flight-path svg { display: block; width: 100%; height: 28px; }
.flight-path .path-line {
stroke: var(--gold);
stroke-width: 2;
stroke-dasharray: 1 9;
stroke-linecap: round;
fill: none;
}
.flight-path .path-plane { color: var(--red); transform: rotate(90deg); transform-origin: center; }
.steps-grid {
max-width: 1080px;
margin: 10px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.step-card {
background: var(--bg-tint);
border: 1px solid var(--line);
border-radius: 12px;
padding: 26px 24px;
position: relative;
}
.step-card .step-num {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--red);
color: var(--white);
font-weight: 800;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.step-card .icon-badge {
width: 42px; height: 42px;
border-radius: 10px;
background: var(--white);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.step-card h3 { font-size: 16.5px; margin: 0 0 8px; }
.step-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
/* ---- Section générique avec eyebrow centré ---- */
.section-v2 { padding: 60px 24px; }
.section-head { max-width: 720px; margin: 0 auto 8px; text-align: center; }
.section-head h2 { font-size: 26px; margin: 0 0 12px; }
.section-head p { font-size: 15.5px; color: var(--muted); margin: 0; }
/* ---- Tarifs : 3 cartes ---- */
.pricing-grid {
max-width: 1080px;
margin: 36px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.price-card {
background: var(--white);
border: 1.5px solid var(--line);
border-radius: 14px;
padding: 30px 26px;
position: relative;
}
.price-card--featured {
border-color: var(--red);
box-shadow: 0 12px 30px -14px rgba(206,17,38,0.35);
}
.price-card .badge-top {
position: absolute;
top: -13px; left: 26px;
background: var(--red);
color: var(--white);
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 999px;
}
.price-card .price-name { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.price-card .price-amount { font-size: 34px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.price-card .price-amount span { font-size: 14px; font-weight: 600; color: var(--muted); }
.price-card .price-desc { font-size: 14px; color: var(--muted); margin-bottom: 20px; min-height: 40px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 22px; }
.price-card ul li {
font-size: 14px;
color: var(--ink);
padding-left: 24px;
position: relative;
margin-bottom: 10px;
}
.price-card ul li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--red);
font-weight: 800;
}
.price-card .btn-choose {
display: block;
text-align: center;
background: var(--bg-tint);
color: var(--ink) !important;
border: 1px solid var(--line);
padding: 12px 20px;
border-radius: 7px;
font-weight: 700;
font-size: 14.5px;
text-decoration: none;
}
.price-card--featured .btn-choose { background: var(--red); color: var(--white) !important; border-color: var(--red); }
.price-card .btn-choose:hover { opacity: 0.9; }
.pricing-note {
max-width: 720px;
margin: 32px auto 0;
font-size: 13px;
color: var(--muted);
text-align: center;
line-height: 1.6;
}
@media (min-width: 861px) {
.flight-path { display: block; }
}
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; }
.icon-cards, .steps-grid, .pricing-grid { grid-template-columns: 1fr; }
}
/* ================================================================
RTL support (Arabic and any other right-to-left language)
Scoped to [dir="rtl"] so it has zero effect on LTR languages
sharing this same stylesheet file.
================================================================ */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .nav-inner { flex-direction: row-reverse; }
[dir="rtl"] .nav-right { flex-direction: row-reverse; }
[dir="rtl"] nav.main-nav { flex-direction: row-reverse; }
[dir="rtl"] .logo { flex-direction: row-reverse; }
[dir="rtl"] .logo .logo-plane { transform: rotate(-45deg) scaleX(-1); }
[dir="rtl"] .footer-col h3.brand-mark { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .hero-actions { flex-direction: row-reverse; justify-content: center; }
[dir="rtl"] .hero-grid { direction: rtl; }
[dir="rtl"] .checker-row { flex-direction: row-reverse; }
[dir="rtl"] .vc-fact { flex-direction: row-reverse; }
[dir="rtl"] .vc-pills { flex-direction: row-reverse; }
[dir="rtl"] .content ul, [dir="rtl"] .content ol,
[dir="rtl"] .page-body ul, [dir="rtl"] .page-body ol { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .lang-switcher summary.lang-current svg { transform: scaleX(-1); }
[dir="rtl"] .footer-inner { text-align: right; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
[dir="rtl"] .compare-table th, [dir="rtl"] .compare-table td { text-align: right; }
[dir="rtl"] .topic-facts b { text-align: right; }
[dir="rtl"] .step-num, [dir="rtl"] .icon-badge { margin-left: 0; }
[dir="rtl"] .faq-item summary::after { transform: scaleX(-1); }
@media (max-width: 760px) {
[dir="rtl"] .lang-menu { left: auto; right: 0; }
}