/* ═══════════════════════════════════════════════════════
   Passport Templates v4 — Photo-realistic data pages
   SVG national watermarks, visible guilloche rosettes,
   holographic accents, country-specific security features
   ═══════════════════════════════════════════════════════ */

/* ── 3D Scene ────────────────────────────────────────── */
.passport-scene {
    perspective: 2200px;
    perspective-origin: 50% 42%;
    display: flex;
    justify-content: center;
    padding: 30px 10px 50px;
}

/* ── Passport base (open spread) ─────────────────────── */
.passport {
    display: none;
    width: 960px;
    height: 600px;
    border-radius: 4px;
    overflow: hidden;
    font-family: 'Courier New', 'Lucida Console', monospace;
    transform: rotateY(-3deg) rotateX(2deg);
    transform-style: preserve-3d;
    box-shadow:
        0 35px 70px rgba(0,0,0,0.4),
        0 12px 28px rgba(0,0,0,0.2),
        -5px 5px 15px rgba(0,0,0,0.12),
        inset 0 0 1px rgba(255,255,255,0.1);
    color: #1a1a2e;
}
.passport.active { display: flex; }
.passport.pp-flat {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* ── Cover page (left) ───────────────────────────────── */
.pp-cover {
    width: 420px;
    min-width: 420px;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Inner border on cover */
.pp-cover::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(200,168,78,0.15);
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
}

.pp-cover-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.pp-cover-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pp-cover-eu {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 14px;
}

.pp-cover-coat {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
    font-weight: 700;
    margin-bottom: 18px;
    border: 1.5px solid currentColor;
    opacity: 0.6;
    background-color: rgba(200,168,78,0.04);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

.pp-cover-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(200,168,78,0.15);
}

.pp-cover-subtitle {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: 2px;
}

.pp-cover-country {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.8;
    max-width: 250px;
    margin-top: 8px;
    opacity: 0.7;
}

/* ── Fold ────────────────────────────────────────────── */
.pp-fold {
    width: 12px;
    flex-shrink: 0;
    z-index: 6;
    background:
        linear-gradient(90deg,
            rgba(0,0,0,0.28) 0%,
            rgba(0,0,0,0.1) 15%,
            rgba(0,0,0,0.03) 35%,
            rgba(255,255,255,0.06) 50%,
            rgba(0,0,0,0.03) 65%,
            rgba(0,0,0,0.1) 85%,
            rgba(0,0,0,0.28) 100%);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.08);
}

/* ── Data page (right) ───────────────────────────────── */
.pp-data {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Security thread — dashed vertical line (silver holographic look) */
.pp-data::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 170px;
    width: 2px;
    z-index: 4;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 4px,
        transparent 4px, transparent 10px
    );
    box-shadow: 0 0 3px rgba(255,255,255,0.05);
}

/* Paper texture overlay */
.pp-data::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg,
            transparent 0px, transparent 2px,
            rgba(0,0,0,0.006) 2px, rgba(0,0,0,0.006) 3px),
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 2px,
            rgba(0,0,0,0.004) 2px, rgba(0,0,0,0.004) 3px);
}

/* ── Data page elements ──────────────────────────────── */

.pp-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    z-index: 5;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pp-header .pp-type {
    font-size: 10px;
    opacity: 0.6;
    margin-left: auto;
}

/* Biometric e-passport chip icon in header */
.pp-header::after {
    content: '';
    display: block;
    width: 18px;
    height: 13px;
    margin-left: 8px;
    flex-shrink: 0;
    opacity: 0.4;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Crect x='.5' y='.5' width='17' height='12' rx='1.5' fill='none' stroke='%23fff' stroke-width='.6'/%3E%3Ccircle cx='9' cy='6.5' r='3.2' fill='none' stroke='%23fff' stroke-width='.6'/%3E%3Cpath d='M1 6.5h4.5M12.5 6.5h5M9 1v2.5M9 9.5v3' stroke='%23fff' stroke-width='.3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.pp-photo-wrap {
    position: absolute;
    top: 58px;
    left: 18px;
    width: 148px;
    height: 190px;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.3);
    z-index: 5;
    overflow: hidden;
}
.pp-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(0.9);
}

.pp-signature {
    position: absolute;
    top: 258px;
    left: 18px;
    width: 148px;
    height: 34px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-signature img {
    max-width: 110px;
    max-height: 28px;
    opacity: 0.6;
}

.pp-fields {
    position: absolute;
    top: 48px;
    left: 184px;
    right: 12px;
    bottom: 82px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 4px;
}

.pp-row { display: flex; gap: 12px; }
.pp-row > .pp-field { flex: 1; }
.pp-field { margin-bottom: 1px; }

.pp-label {
    font-size: 6.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.45;
    line-height: 1.15;
    margin-bottom: 0;
}
.pp-label-sub {
    font-size: 5.5px;
    opacity: 0.3;
    font-style: italic;
}

.pp-value {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.15;
    min-height: 15px;
    word-break: break-word;
}
.pp-value-sm { font-size: 11px; }

.pp-mrz {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 76px;
    z-index: 5;
    padding: 8px 10px;
    font-family: 'OCR B', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 1.6px;
    line-height: 1.55;
    overflow: hidden;
    word-break: break-all;
}

/* Page number */
.pp-mrz::after {
    content: '2';
    position: absolute;
    top: -16px;
    right: 8px;
    font-size: 7px;
    font-family: 'Courier New', monospace;
    opacity: 0.2;
    letter-spacing: 0;
}

/* ── Watermark — SVG national symbol ────────────────── */
.pp-watermark {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 50% 45%;
}

/* ── Guilloche background — concentric rosette + fine lines ── */
.pp-guilloche {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Holographic strip — subtle rainbow vertical line */
.pp-guilloche::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: 25px;
    width: 3px;
    z-index: 3;
    pointer-events: none;
    opacity: 0.12;
    background: linear-gradient(180deg,
        #ff0000 0%, #ff8800 10%, #ffff00 20%,
        #00cc00 35%, #0088ff 50%, #4400cc 65%,
        #ff0000 80%, #ff8800 90%, #ffff00 100%);
}

/* Country-specific decorative accent (e.g. tricolor) */
.pp-guilloche::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════
   USA PASSPORT — Deep navy with bald eagle watermark
   ═══════════════════════════════════════════════════════ */

/* Cover */
.passport-usa .pp-cover {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(15,40,80,0.3) 0%, transparent 70%),
        linear-gradient(145deg, #082040 0%, #0d2a55 50%, #071a38 100%);
    color: #c8a84e;
}
.passport-usa .pp-cover-pattern {
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 28px, rgba(200,168,78,0.02) 28px, rgba(200,168,78,0.02) 29px),
        repeating-linear-gradient(45deg, transparent 0, transparent 60px, rgba(200,168,78,0.012) 60px, rgba(200,168,78,0.012) 61px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 60px, rgba(200,168,78,0.012) 60px, rgba(200,168,78,0.012) 61px),
        repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 10deg, rgba(200,168,78,0.006) 10deg, rgba(200,168,78,0.006) 11deg);
}
.passport-usa .pp-cover-coat {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cpath d='M100 50Q70 30 20 15Q30 35 60 45Q30 38 5 40Q35 55 70 58Q70 75 65 110Q75 100 85 95Q85 105 90 115Q95 105 100 95Q105 105 110 115Q115 105 115 95Q125 100 135 110Q130 75 130 58Q165 55 195 40Q170 38 140 45Q170 35 180 15Q130 30 100 50Z' fill='%23c8a84e'/%3E%3Cellipse cx='100' cy='42' rx='12' ry='10' fill='%23c8a84e'/%3E%3Crect x='87' y='55' width='26' height='32' rx='4' fill='%23c8a84e' opacity='.5'/%3E%3C/svg%3E");
    background-size: 72%;
    border-color: rgba(200,168,78,0.35);
}

/* Data page */
.passport-usa .pp-data {
    background:
        radial-gradient(ellipse at 20% 40%, rgba(20,60,120,0.4) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(40,80,150,0.3) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 70%, rgba(15,50,100,0.2) 0%, transparent 40%),
        linear-gradient(150deg, #081e3e 0%, #0e2d58 25%, #0a2448 50%, #0d2a52 75%, #091f40 100%);
    color: #dce6f4;
}
.passport-usa .pp-header {
    background: linear-gradient(180deg, rgba(8,30,62,0.96), rgba(8,30,62,0.5));
    color: #a8c0d8;
    font-size: 11.5px;
}
.passport-usa .pp-photo-wrap {
    border-color: rgba(140,180,230,0.2);
    background: rgba(160,200,240,0.08);
}
.passport-usa .pp-label { color: #6a90b8; }
.passport-usa .pp-value { color: #d4e0f0; }
.passport-usa .pp-mrz {
    background: rgba(4,14,32,0.65);
    color: #6a90b8;
    border-top: 1px solid rgba(80,130,200,0.12);
}
.passport-usa .pp-data::before {
    background: repeating-linear-gradient(0deg, rgba(100,180,255,0.1) 0px, rgba(100,180,255,0.1) 2px, transparent 2px, transparent 7px);
}

/* USA Watermark — Bald eagle */
.passport-usa .pp-watermark {
    opacity: 0.05;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cpath d='M100 50Q70 30 20 15Q30 35 60 45Q30 38 5 40Q35 55 70 58Q70 75 65 110Q75 100 85 95Q85 105 90 115Q95 105 100 95Q105 105 110 115Q115 105 115 95Q125 100 135 110Q130 75 130 58Q165 55 195 40Q170 38 140 45Q170 35 180 15Q130 30 100 50Z' fill='%234080c0'/%3E%3Cellipse cx='100' cy='42' rx='12' ry='10' fill='%234080c0'/%3E%3Crect x='87' y='55' width='26' height='32' rx='4' fill='%234080c0' opacity='.5'/%3E%3Ccircle cx='76' cy='24' r='2.5' fill='%234080c0'/%3E%3Ccircle cx='84' cy='19' r='2.5' fill='%234080c0'/%3E%3Ccircle cx='92' cy='16' r='2.5' fill='%234080c0'/%3E%3Ccircle cx='100' cy='14' r='2.5' fill='%234080c0'/%3E%3Ccircle cx='108' cy='16' r='2.5' fill='%234080c0'/%3E%3Ccircle cx='116' cy='19' r='2.5' fill='%234080c0'/%3E%3Ccircle cx='124' cy='24' r='2.5' fill='%234080c0'/%3E%3C/svg%3E");
    background-size: 72%;
    transform: rotate(-12deg) translate(-5px, 10px);
}

/* USA Guilloche — rosettes + fine cross-hatch */
.passport-usa .pp-guilloche {
    background:
        /* Rosette center-right */
        repeating-radial-gradient(circle at 65% 42%, transparent 0, transparent 8px, rgba(60,120,200,0.035) 8px, transparent 9px),
        /* Rosette lower-left */
        repeating-radial-gradient(circle at 25% 72%, transparent 0, transparent 10px, rgba(50,100,180,0.025) 10px, transparent 11px),
        /* Rosette upper-right */
        repeating-radial-gradient(circle at 82% 18%, transparent 0, transparent 12px, rgba(50,100,180,0.02) 12px, transparent 13px),
        /* Fine cross-hatch lines */
        repeating-linear-gradient(25deg, transparent, transparent 3px, rgba(60,130,210,0.035) 3px, rgba(60,130,210,0.035) 4px),
        repeating-linear-gradient(155deg, transparent, transparent 3px, rgba(60,130,210,0.03) 3px, rgba(60,130,210,0.03) 4px),
        repeating-linear-gradient(65deg, transparent, transparent 6px, rgba(50,110,190,0.018) 6px, rgba(50,110,190,0.018) 7px),
        /* Horizontal fine lines */
        repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(60,120,200,0.02) 5px, rgba(60,120,200,0.02) 6px);
}

/* USA accent — subtle star scatter */
.passport-usa .pp-guilloche::after {
    background:
        radial-gradient(2px 2px at 15% 12%, rgba(100,170,255,0.08) 50%, transparent 50%),
        radial-gradient(2px 2px at 85% 8%, rgba(100,170,255,0.06) 50%, transparent 50%),
        radial-gradient(2px 2px at 42% 6%, rgba(100,170,255,0.07) 50%, transparent 50%),
        radial-gradient(2px 2px at 68% 15%, rgba(100,170,255,0.05) 50%, transparent 50%),
        radial-gradient(2px 2px at 92% 30%, rgba(100,170,255,0.06) 50%, transparent 50%),
        radial-gradient(2px 2px at 20% 88%, rgba(100,170,255,0.05) 50%, transparent 50%),
        radial-gradient(2px 2px at 55% 92%, rgba(100,170,255,0.06) 50%, transparent 50%);
}


/* ═══════════════════════════════════════════════════════
   GERMANY — Cream/beige with Bundesadler eagle watermark
   ═══════════════════════════════════════════════════════ */

/* Cover */
.passport-germany .pp-cover {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(90,20,40,0.3) 0%, transparent 70%),
        linear-gradient(145deg, #480020 0%, #5c1030 50%, #3a0016 100%);
    color: #d4b060;
}
.passport-germany .pp-cover-pattern {
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 30px, rgba(212,176,96,0.018) 30px, rgba(212,176,96,0.018) 31px),
        repeating-linear-gradient(60deg, transparent 0, transparent 50px, rgba(212,176,96,0.01) 50px, rgba(212,176,96,0.01) 51px),
        repeating-linear-gradient(-60deg, transparent 0, transparent 50px, rgba(212,176,96,0.01) 50px, rgba(212,176,96,0.01) 51px);
}
.passport-germany .pp-cover-coat {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='105' rx='22' ry='35' fill='%23d4b060'/%3E%3Ccircle cx='100' cy='55' r='14' fill='%23d4b060'/%3E%3Cpath d='M100 62L94 72L106 72Z' fill='%23d4b060'/%3E%3Cpath d='M78 85Q52 65 22 55Q32 72 58 82Q32 78 12 82Q42 95 72 95Z' fill='%23d4b060'/%3E%3Cpath d='M122 85Q148 65 178 55Q168 72 142 82Q168 78 188 82Q158 95 128 95Z' fill='%23d4b060'/%3E%3Cpath d='M86 138L82 168L92 155L100 170L108 155L118 168L114 138Z' fill='%23d4b060'/%3E%3C/svg%3E");
    background-size: 68%;
    border-color: rgba(212,176,96,0.35);
}

/* Data page */
.passport-germany .pp-data {
    background:
        radial-gradient(ellipse at 60% 30%, rgba(220,195,160,0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(210,180,150,0.25) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 65%, rgba(200,170,140,0.15) 0%, transparent 35%),
        linear-gradient(150deg, #efe2d0 0%, #e4d2ba 25%, #ecdac6 50%, #e2cfb8 75%, #eedcc8 100%);
    color: #1a2840;
}
.passport-germany .pp-header {
    background: linear-gradient(180deg, rgba(236,224,206,0.97), rgba(236,224,206,0.55));
    color: #1a2840;
    font-size: 10px;
    letter-spacing: 1.5px;
}
.passport-germany .pp-header::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Crect x='.5' y='.5' width='17' height='12' rx='1.5' fill='none' stroke='%23222' stroke-width='.6'/%3E%3Ccircle cx='9' cy='6.5' r='3.2' fill='none' stroke='%23222' stroke-width='.6'/%3E%3Cpath d='M1 6.5h4.5M12.5 6.5h5M9 1v2.5M9 9.5v3' stroke='%23222' stroke-width='.3'/%3E%3C/svg%3E");
}
.passport-germany .pp-photo-wrap {
    border-color: rgba(40,50,70,0.12);
    background: rgba(255,255,255,0.4);
}
.passport-germany .pp-label { color: #4a5a72; }
.passport-germany .pp-value { color: #0f1e32; }
.passport-germany .pp-mrz {
    background: rgba(228,215,195,0.85);
    color: #2a3a52;
    border-top: 1px solid rgba(40,60,90,0.08);
}
.passport-germany .pp-data::before {
    background: repeating-linear-gradient(0deg, rgba(100,80,50,0.08) 0px, rgba(100,80,50,0.08) 2px, transparent 2px, transparent 7px);
}

/* Germany Watermark — Bundesadler */
.passport-germany .pp-watermark {
    opacity: 0.05;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='105' rx='22' ry='35' fill='%235a4a30'/%3E%3Ccircle cx='100' cy='55' r='14' fill='%235a4a30'/%3E%3Cpath d='M100 62L94 72L106 72Z' fill='%235a4a30'/%3E%3Cpath d='M78 85Q52 65 22 55Q32 72 58 82Q32 78 12 82Q42 95 72 95Z' fill='%235a4a30'/%3E%3Cpath d='M122 85Q148 65 178 55Q168 72 142 82Q168 78 188 82Q158 95 128 95Z' fill='%235a4a30'/%3E%3Cpath d='M86 138L82 168L92 155L100 170L108 155L118 168L114 138Z' fill='%235a4a30'/%3E%3C/svg%3E");
    background-size: 65%;
    transform: rotate(-8deg) translateY(10px);
}

/* Germany Guilloche — warm rosettes + cross-hatch */
.passport-germany .pp-guilloche {
    background:
        /* Rosette center */
        repeating-radial-gradient(circle at 55% 45%, transparent 0, transparent 8px, rgba(140,100,50,0.03) 8px, transparent 9px),
        /* Rosette left */
        repeating-radial-gradient(circle at 18% 60%, transparent 0, transparent 10px, rgba(130,90,40,0.022) 10px, transparent 11px),
        /* Rosette top-right */
        repeating-radial-gradient(circle at 80% 22%, transparent 0, transparent 12px, rgba(130,90,40,0.018) 12px, transparent 13px),
        /* Cross-hatch */
        repeating-linear-gradient(42deg, transparent, transparent 3px, rgba(140,100,60,0.035) 3px, rgba(140,100,60,0.035) 4px),
        repeating-linear-gradient(138deg, transparent, transparent 3px, rgba(140,100,60,0.03) 3px, rgba(140,100,60,0.03) 4px),
        repeating-linear-gradient(70deg, transparent, transparent 5px, rgba(120,85,45,0.016) 5px, rgba(120,85,45,0.016) 6px),
        /* Horizontal fine lines */
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(140,100,50,0.018) 4px, rgba(140,100,50,0.018) 5px);
}

/* Germany accent — subtle flag tricolor band at top edge */
.passport-germany .pp-guilloche::after {
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 2px,
            rgba(220,0,0,0.04) 2px, rgba(220,0,0,0.04) 4px,
            rgba(255,200,0,0.04) 4px, rgba(255,200,0,0.04) 6px,
            transparent 6px);
}


/* ═══════════════════════════════════════════════════════
   FRANCE — Cool blue-lavender with RF monogram watermark
   ═══════════════════════════════════════════════════════ */

/* Cover */
.passport-france .pp-cover {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(15,30,70,0.3) 0%, transparent 70%),
        linear-gradient(145deg, #091838 0%, #0d2250 50%, #071432 100%);
    color: #c8a84e;
}
.passport-france .pp-cover-pattern {
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 24px, rgba(200,168,78,0.018) 24px, rgba(200,168,78,0.018) 25px),
        repeating-linear-gradient(30deg, transparent 0, transparent 45px, rgba(200,168,78,0.01) 45px, rgba(200,168,78,0.01) 46px);
}
.passport-france .pp-cover-coat {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='82' fill='none' stroke='%23c8a84e' stroke-width='2'/%3E%3Ccircle cx='100' cy='100' r='75' fill='none' stroke='%23c8a84e' stroke-width='.7'/%3E%3Crect x='45' y='62' width='8' height='76' rx='2' fill='%23c8a84e'/%3E%3Cpath d='M53 62L78 62Q94 62 94 78Q94 92 78 94L53 94' fill='none' stroke='%23c8a84e' stroke-width='7' stroke-linejoin='round'/%3E%3Cline x1='72' y1='94' x2='98' y2='138' stroke='%23c8a84e' stroke-width='7' stroke-linecap='round'/%3E%3Crect x='110' y='62' width='8' height='76' rx='2' fill='%23c8a84e'/%3E%3Crect x='110' y='62' width='42' height='7' rx='2' fill='%23c8a84e'/%3E%3Crect x='110' y='92' width='32' height='6' rx='2' fill='%23c8a84e'/%3E%3C/svg%3E");
    background-size: 64%;
    border-color: rgba(200,168,78,0.35);
}

/* Data page */
.passport-france .pp-data {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(130,165,220,0.28) 0%, transparent 48%),
        radial-gradient(ellipse at 75% 60%, rgba(110,145,200,0.2) 0%, transparent 42%),
        radial-gradient(ellipse at 50% 15%, rgba(140,170,220,0.15) 0%, transparent 35%),
        linear-gradient(150deg, #d0ddef 0%, #c2d2e6 25%, #ccd8ec 50%, #c0cee2 75%, #d2dff0 100%);
    color: #1a2040;
}
.passport-france .pp-header {
    background: linear-gradient(180deg, rgba(202,218,236,0.97), rgba(202,218,236,0.55));
    color: #1a2040;
    font-size: 10.5px;
    letter-spacing: 1.2px;
}
.passport-france .pp-header::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Crect x='.5' y='.5' width='17' height='12' rx='1.5' fill='none' stroke='%23222' stroke-width='.6'/%3E%3Ccircle cx='9' cy='6.5' r='3.2' fill='none' stroke='%23222' stroke-width='.6'/%3E%3Cpath d='M1 6.5h4.5M12.5 6.5h5M9 1v2.5M9 9.5v3' stroke='%23222' stroke-width='.3'/%3E%3C/svg%3E");
}
.passport-france .pp-photo-wrap {
    border-color: rgba(30,40,70,0.1);
    background: rgba(255,255,255,0.4);
}
.passport-france .pp-label { color: #4a5a78; }
.passport-france .pp-value { color: #101f38; }
.passport-france .pp-mrz {
    background: rgba(190,208,230,0.85);
    color: #28385a;
    border-top: 1px solid rgba(40,60,100,0.08);
}
.passport-france .pp-data::before {
    background: repeating-linear-gradient(0deg, rgba(60,100,170,0.08) 0px, rgba(60,100,170,0.08) 2px, transparent 2px, transparent 7px);
}

/* France Watermark — RF monogram in circle */
.passport-france .pp-watermark {
    opacity: 0.055;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='82' fill='none' stroke='%233a5080' stroke-width='2'/%3E%3Ccircle cx='100' cy='100' r='75' fill='none' stroke='%233a5080' stroke-width='.7'/%3E%3Crect x='45' y='62' width='8' height='76' rx='2' fill='%233a5080'/%3E%3Cpath d='M53 62L78 62Q94 62 94 78Q94 92 78 94L53 94' fill='none' stroke='%233a5080' stroke-width='7' stroke-linejoin='round'/%3E%3Cline x1='72' y1='94' x2='98' y2='138' stroke='%233a5080' stroke-width='7' stroke-linecap='round'/%3E%3Crect x='110' y='62' width='8' height='76' rx='2' fill='%233a5080'/%3E%3Crect x='110' y='62' width='42' height='7' rx='2' fill='%233a5080'/%3E%3Crect x='110' y='92' width='32' height='6' rx='2' fill='%233a5080'/%3E%3C/svg%3E");
    background-size: 62%;
    transform: rotate(-10deg) translate(10px, 5px);
}

/* France Guilloche — blue rosettes + cross-hatch */
.passport-france .pp-guilloche {
    background:
        /* Rosette center */
        repeating-radial-gradient(circle at 50% 48%, transparent 0, transparent 8px, rgba(60,110,180,0.03) 8px, transparent 9px),
        /* Rosette upper-left */
        repeating-radial-gradient(circle at 20% 25%, transparent 0, transparent 10px, rgba(50,95,165,0.022) 10px, transparent 11px),
        /* Rosette lower-right */
        repeating-radial-gradient(circle at 78% 72%, transparent 0, transparent 11px, rgba(50,95,165,0.02) 11px, transparent 12px),
        /* Cross-hatch */
        repeating-linear-gradient(55deg, transparent, transparent 3px, rgba(60,110,180,0.035) 3px, rgba(60,110,180,0.035) 4px),
        repeating-linear-gradient(125deg, transparent, transparent 3px, rgba(60,110,180,0.028) 3px, rgba(60,110,180,0.028) 4px),
        repeating-linear-gradient(80deg, transparent, transparent 5px, rgba(50,90,160,0.014) 5px, rgba(50,90,160,0.014) 6px),
        /* Horizontal fine lines */
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(60,110,180,0.016) 4px, rgba(60,110,180,0.016) 5px);
}

/* France accent — tricolor vertical stripe on right edge */
.passport-france .pp-guilloche::after {
    background:
        linear-gradient(90deg,
            transparent calc(100% - 12px),
            rgba(0,35,149,0.1) calc(100% - 12px), rgba(0,35,149,0.1) calc(100% - 8px),
            rgba(255,255,255,0.12) calc(100% - 8px), rgba(255,255,255,0.12) calc(100% - 4px),
            rgba(237,41,57,0.1) calc(100% - 4px), rgba(237,41,57,0.1) 100%);
}


/* ═══════════════════════════════════════════════════════
   UK — Deep navy blue (post-Brexit) with crown watermark
   ═══════════════════════════════════════════════════════ */

/* Cover */
.passport-uk .pp-cover {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(15,25,55,0.3) 0%, transparent 70%),
        linear-gradient(145deg, #091532 0%, #0d1a42 50%, #07102c 100%);
    color: #c8a84e;
}
.passport-uk .pp-cover-pattern {
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 22px, rgba(200,168,78,0.018) 22px, rgba(200,168,78,0.018) 23px),
        repeating-linear-gradient(50deg, transparent 0, transparent 48px, rgba(200,168,78,0.01) 48px, rgba(200,168,78,0.01) 49px);
}
.passport-uk .pp-cover-coat {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Crect x='50' y='125' width='100' height='18' rx='3' fill='%23c8a84e'/%3E%3Crect x='45' y='112' width='110' height='16' rx='2' fill='%23c8a84e'/%3E%3Cpath d='M55 112L42 60L72 82L100 38L128 82L158 60L145 112Z' fill='%23c8a84e'/%3E%3Crect x='95' y='22' width='10' height='20' fill='%23c8a84e'/%3E%3Crect x='90' y='28' width='20' height='8' fill='%23c8a84e'/%3E%3Ccircle cx='55' cy='60' r='7' fill='%23c8a84e'/%3E%3Ccircle cx='145' cy='60' r='7' fill='%23c8a84e'/%3E%3Ccircle cx='100' cy='38' r='5' fill='%23c8a84e'/%3E%3C/svg%3E");
    background-size: 64%;
    border-color: rgba(200,168,78,0.35);
}

/* Data page */
.passport-uk .pp-data {
    background:
        radial-gradient(ellipse at 28% 42%, rgba(20,40,90,0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 25%, rgba(50,70,130,0.3) 0%, transparent 45%),
        radial-gradient(ellipse at 55% 75%, rgba(25,45,95,0.2) 0%, transparent 35%),
        linear-gradient(150deg, #0c1838 0%, #142450 25%, #0e1c40 50%, #162852 75%, #0c183a 100%);
    color: #d8ddee;
}
.passport-uk .pp-header {
    background: linear-gradient(180deg, rgba(12,24,56,0.96), rgba(12,24,56,0.5));
    color: #98b0d0;
    font-size: 9px;
    letter-spacing: 1.4px;
}
.passport-uk .pp-photo-wrap {
    border-color: rgba(140,165,210,0.18);
    background: rgba(160,190,225,0.08);
}
.passport-uk .pp-label { color: #6888b0; }
.passport-uk .pp-value { color: #d0d8ee; }
.passport-uk .pp-mrz {
    background: rgba(6,12,30,0.6);
    color: #6888b0;
    border-top: 1px solid rgba(60,100,170,0.12);
}
.passport-uk .pp-data::before {
    background: repeating-linear-gradient(0deg, rgba(80,140,220,0.09) 0px, rgba(80,140,220,0.09) 2px, transparent 2px, transparent 7px);
}

/* UK Watermark — Crown */
.passport-uk .pp-watermark {
    opacity: 0.055;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Crect x='50' y='125' width='100' height='18' rx='3' fill='%234070a0'/%3E%3Crect x='45' y='112' width='110' height='16' rx='2' fill='%234070a0'/%3E%3Cpath d='M55 112L42 60L72 82L100 38L128 82L158 60L145 112Z' fill='%234070a0'/%3E%3Crect x='95' y='22' width='10' height='20' fill='%234070a0'/%3E%3Crect x='90' y='28' width='20' height='8' fill='%234070a0'/%3E%3Ccircle cx='55' cy='60' r='7' fill='%234070a0'/%3E%3Ccircle cx='145' cy='60' r='7' fill='%234070a0'/%3E%3Ccircle cx='100' cy='38' r='5' fill='%234070a0'/%3E%3C/svg%3E");
    background-size: 58%;
    transform: rotate(-6deg) translateY(5px);
}

/* UK Guilloche — blue rosettes + cross-hatch */
.passport-uk .pp-guilloche {
    background:
        /* Rosette center */
        repeating-radial-gradient(circle at 55% 42%, transparent 0, transparent 8px, rgba(60,110,190,0.03) 8px, transparent 9px),
        /* Rosette left */
        repeating-radial-gradient(circle at 15% 55%, transparent 0, transparent 10px, rgba(55,100,175,0.02) 10px, transparent 11px),
        /* Rosette top-right */
        repeating-radial-gradient(circle at 85% 20%, transparent 0, transparent 11px, rgba(55,100,175,0.018) 11px, transparent 12px),
        /* Cross-hatch */
        repeating-linear-gradient(38deg, transparent, transparent 3px, rgba(60,115,195,0.03) 3px, rgba(60,115,195,0.03) 4px),
        repeating-linear-gradient(142deg, transparent, transparent 3px, rgba(60,115,195,0.025) 3px, rgba(60,115,195,0.025) 4px),
        repeating-linear-gradient(75deg, transparent, transparent 5px, rgba(50,95,170,0.014) 5px, rgba(50,95,170,0.014) 6px),
        /* Horizontal fine lines */
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(60,110,190,0.016) 4px, rgba(60,110,190,0.016) 5px);
}

/* UK accent — subtle crown pattern scatter */
.passport-uk .pp-guilloche::after {
    background:
        radial-gradient(3px 3px at 88% 15%, rgba(100,160,220,0.06) 50%, transparent 50%),
        radial-gradient(3px 3px at 12% 85%, rgba(100,160,220,0.05) 50%, transparent 50%),
        radial-gradient(3px 3px at 90% 78%, rgba(100,160,220,0.04) 50%, transparent 50%),
        radial-gradient(3px 3px at 15% 20%, rgba(100,160,220,0.05) 50%, transparent 50%);
}


/* ── Country nav bar ─────────────────────────────────── */
.country-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}
.country-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #334155;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    box-shadow: 0 4px 12px rgba(15,23,42,0.06);
    transition: all 0.2s ease;
}
.country-nav a:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15,23,42,0.1);
}
.country-nav a.active {
    background: linear-gradient(135deg, #0ea5e9, #22c55e);
    color: #fff;
    border-color: transparent;
}
.country-nav .flag { font-size: 18px; }


/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 999px) and (min-width: 768px) {
    .passport-scene { padding: 15px 0 20px; }
    .passport {
        transform: scale(0.72) rotateY(-2deg) rotateX(1deg);
        transform-origin: top center;
        margin-bottom: -168px;
    }
    .passport.pp-flat { transform: scale(0.72) !important; margin-bottom: -168px; }
}
@media (max-width: 767px) and (min-width: 480px) {
    .passport-scene { padding: 10px 0 15px; }
    .passport {
        transform: scale(0.48) rotateY(-1.5deg) rotateX(0.5deg);
        transform-origin: top center;
        margin-bottom: -312px;
    }
    .passport.pp-flat { transform: scale(0.48) !important; margin-bottom: -312px; }
}
@media (max-width: 479px) {
    .passport-scene { padding: 5px 0 10px; }
    .passport {
        transform: scale(0.34) rotateY(-1deg) rotateX(0.5deg);
        transform-origin: top center;
        margin-bottom: -396px;
    }
    .passport.pp-flat { transform: scale(0.34) !important; margin-bottom: -396px; }
}