/* =====================================================================
   SHARED LIGHT THEME  -  css/theme.css
   Load this one file on every page. To re-colour the whole site, only
   change the two colours in the first block below.
   ===================================================================== */

:root {
    /* ---- THE 2 COLOURS YOU CAN CHANGE ---- */
    --ev-c1: #a12121;          /* colour 1: accent (buttons, dots, highlights) */
    --ev-c2: #1f2a44;          /* colour 2: neutral dark (icons, secondary buttons) */

    /* ---- Light neutrals (normally leave as is) ---- */
    --ev-ink: #16213a;         /* headings / main text */
    --ev-muted: #5b6780;       /* secondary text */
    --ev-bg: #ffffff;
    --ev-soft: #f4f7fc;        /* soft section background */
    --ev-tint1: color-mix(in srgb, var(--ev-c1) 8%, #fff);
    --ev-tint2: color-mix(in srgb, var(--ev-c2) 8%, #fff);
    --ev-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    --ev-font-head: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
    --ev-radius: 18px;
    --ev-shadow: 0 10px 30px rgba(22, 33, 58, .08);
}

/* ---------- FONTS (Inter for text, Plus Jakarta Sans for headings) ----------
   Overrides the old  body{font-family:Arial!important}  from the main site css.
   Icon fonts (.fa) are left alone. */
html body { font-family: var(--ev-font-body) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
button, input, select, textarea { font-family: inherit }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
.ev-title, .ev-h1, .ev-subtitle, .ev-tag, .ev-btn, .ev-stat-value, .ev-step p:first-of-type, .ev-step-num,
.ev-support-grid strong, .ev-book-facts strong, .ev-disclaimer-title, .ev-dest-item h3 { font-family: var(--ev-font-head) !important }
html body .fa, html body .fas, html body .far, html body .fab { font-family: FontAwesome, 'Font Awesome 5 Free', 'Font Awesome 6 Free' !important }

/* ---------- base helpers ---------- */
a:focus { outline: 0; outline-offset: unset }
.fa, .fas { font-weight: 900 }
.fa, .fas, .far, .fal, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1
}

/* ---------- page wrapper ---------- */
.ev-home { background: var(--ev-bg); overflow-x: clip; color: var(--ev-ink) }
.ev-home p { text-align: left }

/* ---------- section ---------- */
.ev-sec { position: relative; padding: 33px 0 30px }
.ev-sec--soft {
    background: var(--ev-soft);
    box-shadow: 0 0 0 100vmax var(--ev-soft);
    clip-path: inset(0 -100vmax)
}
.ev-sec--tint {
    background: var(--ev-soft);
    box-shadow: 0 0 0 100vmax var(--ev-soft);
    clip-path: inset(0 -100vmax)
}
.ev-sec p:last-child { margin-bottom: 0 }
.ev-sec--first { padding-top: 44px }
@media (max-width: 767px) { .ev-sec { padding: 22px 0 20px } .ev-sec--first { padding-top: 30px } }

/* ---------- HEADINGS (no borders / underlines) ----------
   <p class="ev-eyebrow">Small label</p>
   <h2 class="ev-title">Normal words <span class="hl">highlight</span></h2>
   Highlighted words use colour 1 only */
.ev-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--ev-c2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}
.ev-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ev-c1)
}
.ev-title { margin: 30px 0 14px; color: var(--ev-ink); font-size: 23px !important; font-weight: 800; line-height: 1.2 }
.ev-title .hl { color: var(--ev-c1); font-size: inherit; font-weight: inherit }
.ev-subtitle { margin: 0 0 16px; color: var(--ev-ink); font-size: 19px; font-weight: 700; line-height: 1.35 }
.ev-tag {
    color: var(--ev-c1);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap
}

/* ---------- buttons ---------- */
.ev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: 60px;
    background: linear-gradient(135deg, var(--ev-c1), color-mix(in srgb, var(--ev-c1) 80%, #000));
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ev-c1) 30%, transparent);
    transition: transform .25s, box-shadow .25s
}
.ev-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 32px color-mix(in srgb, var(--ev-c1) 38%, transparent) }

/* =====================  HERO: working video as background, text on top  ===================== */
.ev-hero { position: relative; width: 100%; display: flex; align-items: center; overflow: hidden; background: var(--ev-soft) }
.ev-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none }
.ev-hero-inner { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; padding-top: 60px; padding-bottom: 60px }
.ev-hero-panel {
    max-width: 780px;
    padding: 46px 52px;
    border-radius: 28px;
    text-align: center;
}
.ev-h1 { margin: 0 0 18px; color: #fff; font-size: 60px; font-weight: 800; line-height: 1.1; text-shadow: 0 2px 14px rgba(0,0,0,.45) }
.ev-hero-copy { margin: 0 0 30px; color: #fff; font-size: 19px; line-height: 1.7; text-shadow: 0 1px 8px rgba(0,0,0,.4) }
.ev-h1 .hl { color: #fff !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important }
.ev-hero-copy strong { color: #fff }
.ev-hero-panel .ev-btn { padding: 17px 42px; font-size: 17px }
@media (max-width: 991px) {
    .ev-hero { display: block; min-height: 0 }
    .ev-hero-video { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9 }
    .ev-hero-inner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 15px }
    .ev-hero-panel { max-width: 100%; padding: 0; background: none; box-shadow: none; border-radius: 0 }
    .ev-hero-copy { display: none }
    .ev-hero-panel .ev-btn { display: none }
    .ev-h1 {
        font-size: 40px;
        color: #fff;
        margin: 0;
        text-shadow: 0 2px 16px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .5)
    }
    .ev-h1 .hl { color: #fff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4) }
}
@media (max-width: 567px) {
    .ev-h1 { font-size: 30px; text-shadow: 0 2px 14px rgba(0, 0, 0, .65), 0 1px 4px rgba(0, 0, 0, .5) }
    .ev-hero-video { aspect-ratio: 4 / 3 }
}

/* =====================  ELIGIBILITY  ===================== */
.ev-elig-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 0 0 6px
}
.ev-elig-head .ev-title { margin: 0 }
.ev-lead { margin: 0 0 20px; color: var(--ev-muted) }
.ev-lead strong { color: var(--ev-c1) }
.ev-elig-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-top: 0
}
.ev-block { margin: 0 0 32px }
.ev-block:last-child { margin-bottom: 0 }
.ev-elig-side { position: sticky; top: 90px }
.ev-preview { position: static }
.ev-preview p { margin-bottom: 12px !important; color: var(--ev-ink) }
.ev-preview img { max-width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ev-shadow) }
.ev-preview .text-center { text-align: center }
@media (max-width: 991px) {
    #jp-eligibility { display: flex; flex-direction: column; gap: 0 }
    #jp-eligibility .ev-elig-head { order: 2 }
    #jp-eligibility .ev-lead { order: 3 }
    #jp-eligibility .ev-elig-grid { order: 1 }
    .ev-elig-grid { grid-template-columns: 1fr; gap: 34px }
    .ev-elig-side { order: -1; position: static }
    .ev-preview { max-width: 440px; margin: 0 auto 34px }
    .ev-preview .jpnv-image-container { float: none !important; margin-left: 0 !important; display: block }
}

/* search box (no border, soft fill) */
.japan-country-search { display: flex; align-items: center; flex: 0 1 300px; max-width: 100%; margin: 0; position: relative }
.japan-country-search input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 8px 42px;
    border: 1px solid #d0d7e3;
    border-radius: 8px;
    font: inherit;
    outline: 0;
    background: #fff;
    color: var(--ev-ink);
    transition: box-shadow .2s, background .2s
}
.japan-country-search input:focus { background: #fff; border-color: var(--ev-c2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-c2) 15%, transparent) }
.japan-country-search > .fa-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ev-muted); pointer-events: none; font-size: 18px }
.japan-country-search button { border: 0; background: transparent; color: var(--ev-muted); cursor: pointer }
.japan-country-search .japan-search-clear { position: absolute; right: 7px; top: 7px; width: 32px; height: 32px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center }
.japan-country-search .japan-search-clear .fa-times { font-size: 18px }
.japan-country-search .japan-search-clear[hidden] { display: none !important }
.japan-country-search input::-webkit-search-cancel-button { display: none }
@media (max-width: 604px) { .japan-country-search { flex: 1 1 100% } }

/* country list */
#sec-evisa-countries .li_cls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 54px;
    gap: 0 16px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    min-width: 0
}
#sec-evisa-countries .li_cls li { box-sizing: border-box; min-width: 0 !important; margin: 0; padding: 3px 0; display: flex; border: 0 }
#sec-evisa-countries .li_cls li a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--ev-soft);
    color: var(--ev-ink);
    font-weight: 600;
    line-height: 17px;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: background .2s, color .2s
}
#sec-evisa-countries .li_cls li a:hover { background: var(--ev-tint1); color: var(--ev-c1); text-decoration: none }
#sec-evisa-countries .div_lst { overflow: hidden; transition: max-height .9s ease }
#sec-evisa-countries .div_lst.show_less { max-height: 120px !important; overflow: hidden }
#sec-evisa-countries .div_lst .col-12 { padding: 0 }
#sec-evisa-countries .text-center-button { display: flex; justify-content: center; padding: 0; margin: 16px 0 30px }
#sec-evisa-countries .show_all {
    background: #fff;
    font-weight: 600;
    border-radius: 60px;
    color: var(--ev-c1);
    border: 2px solid var(--ev-c1);
    padding: 9px 24px;
    text-align: center;
    transition: background .2s, color .2s, border-color .2s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    margin: 0 auto;
    outline: 0;
    box-shadow: none
}
#sec-evisa-countries .show_all:hover { background: var(--ev-c1); color: #fff; border-color: var(--ev-c1) }
#sec-evisa-countries .show_all:has(.fa-chevron-up) { background: #fff; color: var(--ev-c2); border-color: var(--ev-c2); box-shadow: none }
#sec-evisa-countries .show_all:has(.fa-chevron-up):hover { background: var(--ev-c2); color: #fff; border-color: var(--ev-c2) }
#sec-evisa-countries.country-search-active .div_lst { max-height: none !important; height: auto !important; overflow: visible !important }
#sec-evisa-countries.country-search-active .li_cls li,
#sec-evisa-countries.country-search-active .ev-chips li { visibility: visible !important }
#sec-evisa-countries .li_cls li[hidden],
#sec-evisa-countries .ev-chips li[hidden] { display: none !important }
#sec-evisa-countries.country-search-active > .see_more,
#sec-evisa-countries.country-search-active > .text-center-button { display: none !important }
.japan-country-search-status { margin: 12px 0 0; font-weight: 600 }
@media (max-width: 991px) { #sec-evisa-countries .li_cls { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 767px) { #sec-evisa-countries .li_cls { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 360px) { #sec-evisa-countries .li_cls { grid-template-columns: 1fr } }

/* condition chips */
.ev-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0 }
.ev-chips li { padding: 0; border: 0; background: none }
.ev-chips li a, .ev-chips li:not(:has(a)) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 60px;
    background: var(--ev-soft);
    color: var(--ev-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s
}

.ev-note { margin: 0; padding: 12px 16px; border-radius: 12px; line-height: 1.55; border: 1px dashed var(--ev-c1) }
.ev-note strong { color: var(--ev-c1) }

/* =====================  VALIDITY STATS (horizontal stepper)  ===================== */
.ev-stats { margin: 0; padding: 24px 20px; list-style: none; display: flex; align-items: stretch; background: var(--ev-soft); border-radius: var(--ev-radius) }
.ev-stat { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0 20px }
.ev-stat:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 38px;
    background: color-mix(in srgb, var(--ev-c1) 22%, #fff)
}
.ev-stat-ico {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--ev-c1);
    box-shadow: 0 2px 10px rgba(22,33,58,.07)
}
.ev-stat-ico svg { width: 22px; height: 22px }
.ev-stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.ev-stat-label { color: var(--ev-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase }
.ev-stat-value { color: var(--ev-ink); font-size: 22px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere }
@media (max-width: 991px) {
    .ev-stat { padding: 0 8px; gap: 10px }
    .ev-stat-value { font-size: 19px }
}
@media (max-width: 767px) {
    .ev-stats { flex-direction: column; padding: 14px; gap: 0 }
    .ev-stat { padding: 12px 6px }
    .ev-stat:not(:first-child)::before {
        left: 6px;
        right: 6px;
        top: 0;
        bottom: auto;
        transform: none;
        width: auto;
        height: 1px
    }
    .ev-stat-value { font-size: 20px }
}

/* =====================  FEE CARD (simple dashed note)  ===================== */
.ev-fee-card { margin: 0; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--ev-c1); line-height: 1.55 }
.ev-fee-card p { margin: 0; color: var(--ev-muted); line-height: 1.55 }


/* =====================  FEE / SUPPORT (icon + text strip)  ===================== */
.ev-strip { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 0; border-radius: var(--ev-radius); background: var(--ev-soft) }
.ev-strip--c1 { background: var(--ev-soft) }
.ev-strip-ico { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ev-c1) }
.ev-strip--c1 .ev-strip-ico { color: var(--ev-c1) }
.ev-strip p { margin: 0; color: var(--ev-ink) }
.ev-strip a, .ev-strip a strong { color: #0071bc }
.ev-strip--c1 a, .ev-strip--c1 a strong { color: #0071bc }
.ev-strip a:hover, .ev-strip a:hover strong { color: #005a96 }
@media (max-width: 576px) { .ev-strip { flex-direction: column; align-items: flex-start } }

/* =====================  SUPPORT  ===================== */
.ev-support { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; align-items: center }
.ev-support-text p { margin: 0 0 24px; line-height: 1.7; color: var(--ev-muted) }
.ev-support-text .ev-title { margin-bottom: 18px }
.ev-support-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px }
.ev-support-grid li { display: flex; flex-direction: column; gap: 5px; padding: 22px 22px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 6px 20px rgba(22, 33, 58, .06) }
.ev-support-grid strong { font-size: 19px; color: var(--ev-ink) }
.ev-support-grid a { color: var(--ev-ink); text-decoration: none; transition: color .2s }
.ev-support-grid a:hover { color: var(--ev-c1) }
.ev-support-grid li > span:last-child { color: var(--ev-muted); line-height: 1.5 }
.ev-support-ico { width: 52px; height: 52px; margin-bottom: 10px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--ev-tint1); color: var(--ev-c1) }
@media (max-width: 900px) { .ev-support { grid-template-columns: 1fr; gap: 34px } }
@media (max-width: 480px) { .ev-support-grid { grid-template-columns: 1fr } }

/* =====================  REQUIREMENTS  ===================== */
.ev-req { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--ev-soft) 0%, #fff 100%); box-shadow: 0 4px 20px rgba(22,33,58,.06) }
.ev-req-img { position: relative; min-height: 340px }
.ev-req-img picture { position: absolute; inset: 0; display: block }
.ev-req-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; box-shadow: none }
.ev-req-body { padding: 30px 34px; color: var(--ev-ink); overflow-wrap: break-word; word-break: break-word }
.ev-req-body > p:first-child { margin: 0 0 18px; color: var(--ev-ink); font-weight: 700 }
#sec-evisa-countries .ev-chips--link li a {
    color: #0071bc;
    transition: background .2s, color .2s, border-radius .2s;
}
#sec-evisa-countries .ev-chips--link li a:hover {
    color: #056aad;
    border-radius: 60px !important;
}
.ev-checklist { list-style: none; margin: 0 0 22px; padding: 0 }
.ev-checklist li { position: relative; margin: 0; padding: 6px 0 6px 36px; border: 0 }
.ev-checklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ev-c1), color-mix(in srgb, var(--ev-c1) 70%, #000));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ev-c1) 30%, transparent)
}
@media (max-width: 860px) {
    .ev-req { grid-template-columns: 1fr }
    .ev-req-img { min-height: 220px }
    .ev-req-body { padding: 26px 20px }
    .ev-req-body p { font-size: 15px; line-height: 1.65 }
    .ev-checklist li { padding-left: 34px; font-size: 15px; line-height: 1.55 }
    .ev-checklist li::before { width: 22px; height: 22px; font-size: 13px; line-height: 22px }
}

/* =====================  STEPS (Process)  ===================== */
.ev-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px }
.ev-step { position: relative; padding: 64px 20px 22px; border: 1px solid #e3e9f3; border-radius: 16px; background: #fff; overflow: hidden }
.ev-step-num { position: absolute; top: -1px; left: 20px; width: 46px; height: 52px; border-radius: 0 0 14px 14px; background: var(--ev-c1); color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 18px color-mix(in srgb, var(--ev-c1) 30%, transparent) }
.ev-step:nth-child(even) .ev-step-num { background: var(--ev-c2); box-shadow: 0 10px 18px color-mix(in srgb, var(--ev-c2) 30%, transparent) }
.ev-step p { margin: 0 }
.ev-step p:first-of-type { margin-bottom: 8px; color: var(--ev-ink); font-size: 17px; overflow-wrap: break-word }

/* =====================  BENEFITS (no numbers)  ===================== */
.ev-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.ev-benefits li { position: relative; padding: 18px 18px 18px 60px; border: 0; border-radius: var(--ev-radius); background: var(--ev-soft); overflow-wrap: break-word }
.ev-benefits li::before {
    content: "\2713";
    position: absolute;
    left: 18px;
    top: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ev-c1), color-mix(in srgb, var(--ev-c1) 70%, #000));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--ev-c1) 30%, transparent)
}/* Center the Japan E-Visa preview card on tablet and mobile */
@media (max-width: 991px) {
    .ev-elig-side,
    .ev-elig-side .jpnv-main-image-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .ev-elig-side .jpnv-image-container.ev-preview {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        max-width: 520px;
    }
    .ev-elig-side .jpnv-image-container.ev-preview img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 767px) { .ev-benefits { grid-template-columns: 1fr } }

/* =====================  TRAVEL GUIDE BOOK  ===================== */
.ev-book { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; align-items: center }
.ev-book-cover { display: block; position: relative; justify-self: center; max-width: 300px; transition: transform .3s }
.ev-book-cover::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: 14px; background: var(--ev-tint1); z-index: 0 }
.ev-book-cover picture, .ev-book-cover img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 18px 40px rgba(22, 33, 58, .22) }
.ev-book-cover:hover { transform: translateY(-6px) }
.ev-book-info .ev-title { margin-bottom: 22px }
.ev-book-facts { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0 0 22px; padding: 0 }
.ev-book-facts li { min-width: 110px; padding: 12px 20px; border: 0; border-radius: 12px; background: var(--ev-soft); display: flex; flex-direction: column; gap: 2px; box-shadow: 0 4px 14px rgba(22, 33, 58, .05) }
.ev-book-facts strong { font-size: 22px; font-weight: 800; color: var(--ev-c1); line-height: 1.1 }
.ev-book-facts span { font-size: 14px; color: var(--ev-muted) }
.ev-book-desc { margin: 0 0 30px; font-size: 17px; line-height: 1.75; color: var(--ev-muted) }
.ev-book-actions { display: flex; flex-wrap: wrap; gap: 14px }
.ev-btn--ghost { background: #fff; color: var(--ev-c1) !important; box-shadow: none; border: 2px solid var(--ev-c1) }
.ev-btn--ghost:hover { background: var(--ev-c1); color: #fff !important; border-color: var(--ev-c1) }
@media (max-width: 860px) { .ev-book { grid-template-columns: 1fr; gap: 44px } .ev-book-cover { max-width: 240px } .ev-book-info { text-align: center } .ev-book-facts, .ev-book-actions { justify-content: center } }

/* =====================  TOP DESTINATIONS (include/top-destination.php)  ===================== */
.ev-dest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 16px }
.ev-dest-item { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: var(--ev-soft) }
.ev-dest-item.is-big { grid-column: 2 / span 2; grid-row: 1 / span 2 }
.ev-dest-item picture { display: block; width: 100%; height: 100% }
.ev-dest-item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s ease }
.ev-dest-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(22,33,58,.35) 100%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    border-radius: 22px
}
.ev-dest-item:hover::after { opacity: 1 }
.ev-dest-item:hover img { transform: scale(1.05) }
.ev-dest-item figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px }
.ev-dest-item h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 18px;
    border-radius: 60px;
    background: rgba(255, 255, 255, .95);
    color: var(--ev-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 6px 18px rgba(22, 33, 58, .12)
}
.ev-dest-item h3::before { content: none }
.ev-dest-item.is-big h3 { font-size: 20px; padding: 12px 22px }
@media (max-width: 991px) {
    .ev-dest { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto }
    .ev-dest-item { aspect-ratio: 4 / 3 }
    .ev-dest-item.is-big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 7 }
}
@media (max-width: 575px) {
    .ev-dest { grid-template-columns: 1fr; grid-auto-rows: auto }
    .ev-dest-item { aspect-ratio: 4 / 3 }
    .ev-dest-item.is-big { height: auto; aspect-ratio: 4 / 5 }
}
@media (max-width: 450px) {
    #sec-evisa-countries .li_cls {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* =====================  AUDIO PLAYER  ===================== */
div.custom_au_div { position: relative; width: 100%; max-width: 800px; height: 145px; border-radius: 16px; background: var(--ev-soft); margin: 15px auto }
.custom_au_div h2 { position: absolute; right: 130px; font-size: 20px; margin: 0 }
.custom_au_div .cover { position: absolute; top: 0; left: 10px; max-width: 80px; height: 100%; border-radius: 40px 0 0 40px }
.custom_au_player { position: absolute; bottom: 0; right: 0; left: 109px; width: calc(100% - 110px) }
.audio-wid { position: relative; left: 51px; top: 14px }
.audio-title { font-size: 2rem; font-weight: 700; text-align: center; position: absolute; margin-top: 10px; left: 120px; right: 10px; color: var(--ev-ink) }
.audio-title:after { content: none }
@media only screen and (max-width: 500px) {
    .custom_au_player { left: 0; max-width: 100%; width: 100% }
    div.custom_au_div { height: 150px; border-radius: 20px }
    .custom_au_div .cover { display: none }
    .custom_au_div h2 { right: 0; top: 50px }
    .audio-wid { left: 0; max-width: 260px }
    .audio-title { left: 0 !important; right: 0 !important }
}
@media screen and (max-width: 360px) { div.custom_au_div { height: 180px; border-radius: 20px } }

.ev-disclaimer { display: flex; align-items: center; gap: 18px; margin: 10px 0 36px; padding: 18px 22px; border: 0; border-radius: var(--ev-radius); background: var(--ev-soft); color: var(--ev-muted) }
.ev-disclaimer-ico { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ev-c1) }
.ev-disclaimer-body { flex: 1 1 auto; min-width: 0 }
.ev-disclaimer-body strong.ev-disclaimer-title { display: block; margin-bottom: 4px; color: var(--ev-ink); font-size: 18px }
.ev-disclaimer-body p { margin: 0 }
.ev-disclaimer-date { flex: 0 0 auto; padding: 8px 18px; border-radius: 60px; background: #fff; color: var(--ev-c1); font-weight: 700; white-space: nowrap }
@media (max-width: 767px) { .ev-disclaimer { flex-direction: column; align-items: flex-start } }

/* =====================  FOOTER FEEDBACK / DISCLAIMER (include/feedback-dis_lakshika.php)  ===================== */
.ev-fb-sec { margin: 0; padding: 16px 0 }
.ev-fb-disclaimer { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--ev-soft); color: var(--ev-muted); font-size: 14px; line-height: 1.5; text-align: left; border-left: 3px solid var(--ev-c1) }
.ev-fb-disclaimer-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ev-c1); font-size: 18px; box-shadow: 0 2px 8px rgba(22,33,58,.06) }
.ev-fb-disclaimer-text { margin: 0 }
.ev-fb-disclaimer-text strong { color: var(--ev-ink) }
.ev-fb-label { display: inline-block; color: var(--ev-ink); font-weight: 600; font-size: 15px }
.ev-fb-problem { background: #fff !important; color: var(--ev-c1) !important; border: 2px solid var(--ev-c1) !important; border-radius: 60px !important; padding: 6px 16px !important; font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; box-shadow: none !important; cursor: pointer }
.ev-fb-problem:hover { background: var(--ev-c1) !important; color: #fff !important }
/* Override Bootstrap .btn-success hover/active so YES/NO keep their own colours */
.feedback-btn.btn-success { border-color: transparent !important }

.feedback-btn.btn-success:active { transform: none }
@media (max-width: 767px) { .ev-fb-disclaimer { flex-direction: column; align-items: flex-start } }

/* =====================  PDF READER OVERLAY (only on pages with the eBook)  ===================== */
#pdf-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 99999999; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px; box-sizing: border-box; overflow-y: auto }
#pdf-container { display: flex; flex-direction: column; align-items: center; width: 100% }
.pdf-page { position: relative; margin-bottom: 30px; background: #000; padding: 5px; width: 100%; display: flex; justify-content: center }
.pdf-page canvas { width: 100%; max-width: 800px; height: auto; background: #fff }
#pdf-header { position: fixed; top: 15px; left: 15px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; padding: 6px 12px; border-radius: 8px; z-index: 10000 }
.loader { color: #fff; text-align: center; padding: 20px; font-family: Arial, sans-serif }
.btn-github, .btn-github-close { position: fixed; top: 20px; right: 17px; z-index: 10000; width: 40px; height: 40px; border: 1px solid #d0d7de; border-radius: 6px; cursor: pointer; transition: all .1s ease; display: flex; align-items: center; justify-content: center; background: #f6f8fa }
.btn-github-close { right: 20px }
.btn-github:hover, .btn-github-close:hover { background: #f3f4f6 }
.btn-github:active, .btn-github-close:active { background: #ebecf0 }
#back-btn { left: 15px; right: auto; transform: rotate(90deg); padding-top: 12px }
.download-icon { width: 36px; height: 36px; position: relative }
.download-icon::before { content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 3px; height: 18px; background: currentColor; border-radius: 1.5px }
.download-icon::after { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid currentColor }
.download-icon .base { position: absolute; bottom: 3px; left: 4px; right: 4px; height: 3px; background: currentColor; border-radius: 1.5px }

@media (max-width: 767px) {
    .ev-title { font-size: 28px; overflow-wrap: break-word }
    .ev-subtitle { font-size: 19px; overflow-wrap: break-word }
    .ev-benefits li { padding-left: 52px }
    .ev-step { padding: 58px 14px 18px }
    .ev-step-num { left: 12px; width: 38px; height: 44px }
    .ev-step p { line-height: 1.55 }
    .ev-block { margin-bottom: 24px }
    .ev-stats { gap: 10px }
    .ev-stat { padding: 12px 14px; gap: 10px }
    .ev-strip { padding: 14px 16px; gap: 12px }
    .ev-req-body { padding: 22px 18px }
}

/* Font Awesome icon sizes */
.ev-stat-ico i { font-size: 20px }
.ev-strip-ico i { font-size: 24px }
.ev-support-ico i { font-size: 24px }
.ev-disclaimer-ico i { font-size: 22px }
.ev-btn i { font-size: 18px }

/* Requirements inside the left column: image on top, list below */

.ev-elig-main .ev-req-img { min-height: 240px }
.ev-elig-main .ev-req-body { padding: 28px 26px }