/* v25: polished light/dark themes */
:root{color-scheme:light;--bg:#f5f9fd;--surface:#fff;--surface-2:#eef5fb;--text:#11244b;--muted:#60738c;--border:#d8e5f0;--accent:#086be8;--accent-soft:#e7f2ff;--shadow:0 10px 30px rgba(25,65,105,.08)}
body{transition:background .22s ease,color .22s ease;background:linear-gradient(135deg,#eef7ff 0%,#fff 48%,#f1f9ff 100%);color:var(--text)}
.theme-icon{font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.circle-btn{border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:0 2px 8px rgba(20,60,100,.06);transition:.18s}
.circle-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:#b9d5f2;transform:translateY(-1px)}
body.dark-mode{color-scheme:dark;--bg:#0b1220;--surface:#121b2b;--surface-2:#182437;--text:#f1f5fb;--muted:#aab8ca;--border:#2a3a50;--accent:#66a9ff;--accent-soft:#1a3657;--shadow:0 12px 34px rgba(0,0,0,.28);background:linear-gradient(135deg,#09111e 0%,#0f1928 50%,#0b1422 100%);color:var(--text)}
body.dark-mode .header{background:rgba(18,27,43,.96);border-color:var(--border)}
body.dark-mode .nav>a,body.dark-mode .nav-drop{color:var(--text)}
body.dark-mode .menu{background:var(--surface);border-color:var(--border);box-shadow:0 18px 45px rgba(0,0,0,.35)}
body.dark-mode .menu span:hover{background:var(--accent-soft);color:var(--accent)}
body.dark-mode .hero h1,body.dark-mode .how h2,body.dark-mode .loading-card h2{color:var(--text)}
body.dark-mode .hero p,body.dark-mode .features,body.dark-mode .countries-mini div span,body.dark-mode .steps small,body.dark-mode .ready p{color:var(--muted)}
body.dark-mode .pill{background:var(--accent-soft);color:#8fc3ff}
body.dark-mode .dropzone{background:rgba(18,27,43,.72);border-color:#4b91e5}
body.dark-mode .dropzone:hover{background:#16263b}
body.dark-mode .countries-mini,body.dark-mode .trust>div,body.dark-mode .steps>div,body.dark-mode .card{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow)}
body.dark-mode .trust>div{background:#16263a}
body.dark-mode .result-actions button,body.dark-mode .print-buttons button,body.dark-mode .tabs button{background:var(--surface-2);border-color:var(--border);color:#a9ceff}
body.dark-mode .tabs button.active,body.dark-mode .primary,.dark-mode .choose{background:#176fd7;color:#fff}
body.dark-mode .format strong{color:#7eb7ff}
body.dark-mode .format>span,body.dark-mode .format>small,body.dark-mode .prints>small{color:#8fc3ff}
body.dark-mode .mini-sheet,body.dark-mode .sheet-box,body.dark-mode .preview-box{background:#0c1523;border-color:var(--border)}
body.dark-mode .other{background:var(--surface)}
body.dark-mode .a4-preview-layer{background:rgba(2,8,18,.82)}
body.dark-mode .a4-preview-modal{background:#111b2a;border-color:#31445c;color:var(--text)}
body.dark-mode .a4-preview-head,body.dark-mode .a4-preview-foot{background:#121d2e;box-shadow:0 1px 0 var(--border)}
body.dark-mode .a4-preview-scroll{background:radial-gradient(circle at 50% 0,#1a2638 0,#0f1826 58%)}
body.dark-mode .a4-preview-page{background:#fff;color:#11244b;border-color:#40536a;box-shadow:0 14px 40px rgba(0,0,0,.38)}
body.dark-mode .a4-preview-toolbar{background:#152235;border-color:var(--border)}
body.dark-mode .a4-option label{color:#9fb0c5}
body.dark-mode .a4-option select,body.dark-mode .a4-check{background:#0f1928;color:#edf4fc;border-color:#34475f}
body.dark-mode .a4-add-section{background:#16263a;color:#8fc3ff;border-color:#3c5875}
body.dark-mode .a4-add-section span{color:#aabbd0}
body.dark-mode .a4-close{background:#1c2a3d;color:#eaf2fb;border-color:#34475f}
body.dark-mode .a4-preview-foot>span{color:#aab8ca}
.social-btn i{font-size:18px}

/* v25 theme surface polish */
body.dark-mode .logo-copy b,body.dark-mode .logo-copy small{color:var(--text)}
body.dark-mode .logo-copy b span{color:#72b1ff}
body.dark-mode .all-btn{background:#176fd7}
body.dark-mode .a4-preview-head p,body.dark-mode .a4-preview-foot>span:before{color:#9fb0c5}
body.dark-mode .a4-option select:focus{border-color:#66a9ff;box-shadow:0 0 0 3px rgba(102,169,255,.14)}



.passport-colors{margin:12px 0 2px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.passport-colors-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.passport-colors-head span{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12px;color:var(--text)}
.passport-colors-head span svg{width:15px;height:15px;color:var(--accent)}
.passport-colors-head small{font-size:9px;color:var(--muted)}
.passport-color-list{display:flex;gap:8px;flex-wrap:wrap}
.passport-color{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer;transition:.16s;box-shadow:0 2px 7px rgba(20,60,100,.04)}
.passport-color:hover{transform:translateY(-1px);border-color:#9cc5ee}
.passport-color.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(8,107,232,.12);background:var(--accent-soft)}
.passport-color b{font-size:9px;white-space:nowrap}
.swatch{width:20px;height:20px;border-radius:7px;border:1px solid #cbd5e1;display:block;flex:0 0 20px}
.swatch-transparent{background-color:#fff;background-image:linear-gradient(45deg,#d7dee8 25%,transparent 25%),linear-gradient(-45deg,#d7dee8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d7dee8 75%),linear-gradient(-45deg,transparent 75%,#d7dee8 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}
.preview-box.is-transparent-bg{background-color:#fff!important;background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%)!important;background-size:18px 18px!important;background-position:0 0,0 9px,9px -9px,-9px 0!important}
body.dark-mode .passport-colors{background:#182437}
body.dark-mode .passport-color{background:#121b2b}
@media(max-width:700px){.passport-colors-head{align-items:flex-start;flex-direction:column;gap:3px}.passport-color{padding:5px 7px}.passport-color b{font-size:8px}}


#passportColors{display:none}


#passportColors{display:none}
.custom-bg-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.custom-color-picker{display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:9px;font-weight:800;color:var(--text);cursor:pointer}
.custom-color-picker input{width:30px;height:25px;padding:0;border:0;background:transparent;cursor:pointer}
.custom-bg-btn{border:1px solid var(--border);border-radius:10px;padding:7px 10px;background:var(--surface);color:var(--text);font-size:9px;font-weight:800;cursor:pointer}
.custom-bg-btn:hover{border-color:var(--accent);transform:translateY(-1px)}


#passportColors[hidden]{display:none!important} #passportColors.show-colors{display:block!important}


.country-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.more-country-item{cursor:pointer}
.more-country-icon{width:42px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.more-country-icon svg{width:20px;height:20px}
@media(max-width:900px){.country-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.country-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* PhotoPassPro v30 — next-generation visual system */
:root{
  --p30-bg:#f6f9ff;--p30-surface:rgba(255,255,255,.82);--p30-solid:#fff;
  --p30-ink:#0b1733;--p30-muted:#64748b;--p30-line:rgba(148,163,184,.24);
  --p30-blue:#2563eb;--p30-cyan:#06b6d4;--p30-violet:#7c3aed;
  --p30-shadow:0 22px 70px rgba(37,71,130,.12);
}
html{scroll-behavior:smooth}
body{
  background:
   radial-gradient(900px 500px at 8% -8%,rgba(37,99,235,.13),transparent 65%),
   radial-gradient(760px 480px at 95% 12%,rgba(124,58,237,.10),transparent 65%),
   linear-gradient(180deg,#f8fbff 0%,#f4f8ff 55%,#fff 100%)!important;
  color:var(--p30-ink)!important;
  letter-spacing:-.01em;
}
.header{
  height:82px!important;
  background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 8px 30px rgba(15,23,42,.04);
}
.header-inner{max-width:1500px!important;padding:0 34px!important;gap:28px!important}
.logo{min-width:250px!important;gap:12px!important}
.logo-mark{
 width:44px!important;height:44px!important;border-radius:14px!important;
 background:linear-gradient(135deg,#2563eb,#06b6d4)!important;
 box-shadow:0 10px 25px rgba(37,99,235,.28)!important;
}
.logo-copy b{font-size:21px!important;letter-spacing:-1px!important}
.logo-copy small{font-size:9px!important;letter-spacing:.08em;text-transform:uppercase}
.nav{gap:8px!important}
.nav>a,.nav-drop{
 padding:11px 13px!important;border-radius:10px!important;font-size:12px!important;
 font-weight:650!important;transition:.2s!important;
}
.nav>a:hover,.nav-drop:hover{background:rgba(37,99,235,.07)!important;color:#2563eb!important}
.menu{top:49px!important;border-radius:14px!important;padding:8px!important;box-shadow:0 24px 60px rgba(15,23,42,.14)!important}
.all-btn{
 background:linear-gradient(135deg,#2563eb,#4f46e5)!important;border-radius:11px!important;
 padding:11px 16px!important;box-shadow:0 9px 22px rgba(37,99,235,.2)!important;
}
.circle-btn{border-radius:11px!important}
.hero{
 max-width:1500px!important;min-height:450px!important;padding:58px 44px 26px!important;
 grid-template-columns:1.05fr .95fr!important;
}
.hero-text{position:relative;z-index:2}
.pill{
 background:rgba(37,99,235,.08)!important;color:#2456c8!important;border:1px solid rgba(37,99,235,.12);
 padding:8px 14px!important;border-radius:999px!important;font-size:10px!important;
 box-shadow:0 6px 20px rgba(37,99,235,.05);
}
.hero h1{
 font-size:clamp(46px,5.2vw,76px)!important;line-height:.98!important;
 letter-spacing:-4px!important;margin:19px 0 18px!important;
 max-width:720px;
}
.hero h1 em{
 background:linear-gradient(90deg,#2563eb,#06b6d4,#7c3aed);
 -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.hero p{font-size:16px!important;line-height:1.7!important;color:#5c6f89!important;max-width:570px!important}
.features{gap:10px!important;font-size:13px!important}
.features li{padding:4px 0}
.features svg{color:#2563eb!important;filter:drop-shadow(0 3px 5px rgba(37,99,235,.25))}
.hero-art{height:390px!important}
.hero-art:before{
 content:"";position:absolute;width:390px;height:390px;border-radius:50%;
 background:radial-gradient(circle,rgba(37,99,235,.16),rgba(6,182,212,.07) 45%,transparent 70%);
 filter:blur(4px);animation:p30pulse 5s ease-in-out infinite;
}
.orb{background:linear-gradient(135deg,rgba(147,197,253,.42),rgba(196,181,253,.25))!important;filter:blur(.2px)}
.o1{width:145px!important;height:145px!important;left:20%!important;top:35px!important}
.o2{width:210px!important;height:210px!important;right:8%!important;bottom:0!important}
.photo{border-radius:12px!important;padding:7px!important;box-shadow:0 28px 50px rgba(30,64,175,.20)!important}
.pile-main{width:192px!important;height:258px!important}
.note{background:rgba(255,255,255,.72);backdrop-filter:blur(10px);padding:9px 12px;border-radius:12px;box-shadow:0 10px 25px rgba(15,23,42,.08)}
.upload-layout{
 max-width:1500px!important;padding:18px 44px!important;grid-template-columns:1fr 285px!important;gap:18px!important;
}
.dropzone{
 min-height:255px!important;border:1.5px dashed rgba(37,99,235,.42)!important;border-radius:22px!important;
 background:rgba(255,255,255,.64)!important;box-shadow:var(--p30-shadow)!important;
 position:relative;overflow:hidden;transition:.25s!important;
}
.dropzone:before{
 content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(37,99,235,.04),transparent 45%,rgba(6,182,212,.04));
 pointer-events:none;
}
.dropzone:hover{transform:translateY(-3px);border-color:#2563eb!important;background:rgba(255,255,255,.88)!important;box-shadow:0 28px 75px rgba(37,99,235,.14)!important}
.upload-svg{width:58px!important;height:58px!important;padding:13px;border-radius:16px;background:linear-gradient(135deg,#e8f1ff,#ecfeff);box-sizing:content-box}
.dropzone strong{font-size:19px!important;margin-top:13px!important}
.choose{
 background:linear-gradient(135deg,#2563eb,#4f46e5)!important;border-radius:12px!important;
 padding:12px 28px!important;box-shadow:0 12px 25px rgba(37,99,235,.22);font-weight:750!important;
}
.countries-mini{
 border:1px solid var(--p30-line)!important;border-radius:20px!important;padding:18px!important;
 background:rgba(255,255,255,.74)!important;box-shadow:var(--p30-shadow)!important;
 backdrop-filter:blur(16px);
}
.countries-mini h3{font-size:12px!important;text-transform:uppercase;letter-spacing:.08em;color:#334155}
.countries-mini div{padding:7px 8px;margin:2px -8px!important;border-radius:10px;transition:.18s}
.countries-mini div:hover{background:#f1f6ff}
.trust{max-width:1500px!important;padding:5px 44px 24px!important;gap:14px!important}
.trust>div{
 border:1px solid var(--p30-line);background:rgba(255,255,255,.72)!important;border-radius:16px!important;
 padding:16px 18px!important;box-shadow:0 12px 35px rgba(15,23,42,.06)!important;
}
.how{max-width:1500px!important;padding:58px 44px!important}
.how h2{font-size:34px!important;letter-spacing:-1.7px!important}
.steps{gap:14px!important}
.steps>div{
 border:1px solid var(--p30-line)!important;border-radius:18px!important;background:rgba(255,255,255,.76)!important;
 box-shadow:0 14px 40px rgba(15,23,42,.06)!important;transition:.22s!important;
}
.steps>div:hover{transform:translateY(-4px);box-shadow:0 22px 55px rgba(37,99,235,.11)!important}
.step-num{background:linear-gradient(135deg,#2563eb,#06b6d4)!important;box-shadow:0 8px 20px rgba(37,99,235,.2)}
.loading-card{
 border:1px solid var(--p30-line)!important;border-radius:24px!important;box-shadow:var(--p30-shadow)!important;
 background:rgba(255,255,255,.86)!important;
}
.result-page{max-width:1500px!important}
.ready{
 border:1px solid rgba(34,197,94,.18)!important;border-radius:22px!important;
 background:linear-gradient(135deg,rgba(240,253,244,.92),rgba(255,255,255,.84))!important;
 box-shadow:0 18px 50px rgba(34,197,94,.08)!important;
}
.ready h2{letter-spacing:-1.2px}
.result-grid{gap:18px!important}
.card{
 border:1px solid var(--p30-line)!important;border-radius:20px!important;
 background:rgba(255,255,255,.8)!important;box-shadow:0 18px 50px rgba(15,23,42,.07)!important;
 backdrop-filter:blur(14px);
}
.result-preview .preview-box,.mini-sheet,.sheet-box{
 border-radius:15px!important;border:1px solid rgba(148,163,184,.2)!important;
}
.tabs{gap:7px!important}
.tabs button{
 border-radius:10px!important;border:1px solid transparent!important;transition:.18s!important;
}
.tabs button.active{
 background:linear-gradient(135deg,#2563eb,#4f46e5)!important;color:#fff!important;
 box-shadow:0 9px 20px rgba(37,99,235,.2);
}
.result-actions button,.print-buttons button{
 border-radius:11px!important;border:1px solid var(--p30-line)!important;background:#fff!important;
 transition:.2s!important;
}
.result-actions button:hover,.print-buttons button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08)}
.primary{
 background:linear-gradient(135deg,#2563eb,#4f46e5)!important;border-radius:11px!important;
 box-shadow:0 10px 24px rgba(37,99,235,.18)!important;
}
.format strong{color:#2563eb!important}
.footer{
 background:rgba(248,250,252,.82)!important;border-top:1px solid var(--p30-line)!important;
 backdrop-filter:blur(15px);
}
.footer-inner{max-width:1500px!important;padding:42px 44px!important}
.social-btn{box-shadow:0 5px 16px rgba(15,23,42,.08)!important}
.modal-layer{backdrop-filter:blur(12px)!important;background:rgba(7,15,31,.42)!important}
.modal{border-radius:22px!important;box-shadow:0 30px 90px rgba(0,0,0,.22)!important;border:1px solid rgba(255,255,255,.5)!important}
.toast{border-radius:12px!important;box-shadow:0 18px 45px rgba(15,23,42,.18)!important}
@keyframes p30pulse{0%,100%{transform:scale(.96);opacity:.75}50%{transform:scale(1.04);opacity:1}}
@media(max-width:1050px){
 .nav{display:none!important}.mobile-btn{display:grid!important}
 .hero{grid-template-columns:1fr!important;padding-top:42px!important}.hero-art{height:330px!important}
}
@media(max-width:800px){
 .header-inner{padding:0 18px!important}.logo{min-width:0!important}
 .hero,.upload-layout,.trust,.how,.footer-inner{padding-left:20px!important;padding-right:20px!important}
 .upload-layout{grid-template-columns:1fr!important}
 .trust{grid-template-columns:1fr!important}
 .hero h1{font-size:48px!important;letter-spacing:-2.7px!important}
}
@media(max-width:520px){
 .header{height:70px!important}.logo-copy b{font-size:18px!important}.logo-mark{width:39px!important;height:39px!important}
 .hero{padding-top:28px!important}.hero h1{font-size:41px!important}
 .hero-art{height:285px!important;transform:scale(.86)}
 .dropzone{min-height:235px!important}.trust>div{padding:14px!important}
}
body.dark-mode{
 --p30-bg:#070b14;--p30-surface:rgba(15,23,42,.82);--p30-solid:#0f172a;
 --p30-ink:#f8fafc;--p30-muted:#a7b4c7;--p30-line:rgba(148,163,184,.18);
 background:radial-gradient(900px 500px at 8% -8%,rgba(37,99,235,.16),transparent 65%),linear-gradient(180deg,#070b14,#0b1220)!important;
}
body.dark-mode .header{background:rgba(8,13,24,.78)!important}
body.dark-mode .hero p{color:#a7b4c7!important}
body.dark-mode .dropzone,body.dark-mode .countries-mini,body.dark-mode .trust>div,
body.dark-mode .steps>div,body.dark-mode .card{background:rgba(15,23,42,.76)!important;border-color:var(--p30-line)!important}
body.dark-mode .dropzone:hover{background:rgba(20,32,53,.92)!important}
body.dark-mode .countries-mini div:hover{background:#16243a}
body.dark-mode .result-actions button,body.dark-mode .print-buttons button{background:#111c2d!important;color:#dbeafe!important}
body.dark-mode .ready{background:linear-gradient(135deg,rgba(10,45,30,.8),rgba(15,23,42,.86))!important}
body.dark-mode .footer{background:rgba(7,11,20,.8)!important}
body.dark-mode .pill{background:rgba(37,99,235,.16)!important;color:#93c5fd!important}



.seo-size-card{display:block;width:100%;padding:16px;border:1px solid var(--border);border-radius:14px;text-align:left;background:var(--surface);color:inherit;font:inherit;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.seo-size-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(15,23,42,.08);border-color:#2563eb;}
.seo-size-card strong{display:inline-block;margin-bottom:4px;}
.seo-size-card span{opacity:.78;}
body.dark-mode .seo-size-card{background:#111827!important;border-color:#2d3748!important;color:#f8fafc!important;}
body.dark-mode .seo-size-card:hover{border-color:#60a5fa!important;box-shadow:0 10px 25px rgba(0,0,0,.22);}



/* v26: clean true light/dark themes */
html,body{background:#fff!important;color:#111827!important}
body{background:#fff!important}
body.dark-mode{background:#0b0f14!important;color:#f8fafc!important}
body.dark-mode .header{background:#0b0f14!important;border-color:#273244!important}
body.dark-mode .hero h1,body.dark-mode .how h2,body.dark-mode .loading-card h2,body.dark-mode .logo-copy b,body.dark-mode .logo-copy small,body.dark-mode .nav>a,body.dark-mode .nav-drop{color:#fff!important}
body.dark-mode .hero p,body.dark-mode .features,body.dark-mode .steps small,body.dark-mode .countries-mini div span,body.dark-mode .ready p{color:#d1d5db!important}
body.dark-mode .countries-mini,body.dark-mode .trust>div,body.dark-mode .steps>div,body.dark-mode .card,body.dark-mode .other{background:#111827!important;border-color:#2d3748!important;color:#f8fafc!important}
body.dark-mode .a4-preview-modal{background:#111827!important;color:#fff!important}
body.dark-mode .a4-preview-head,body.dark-mode .a4-preview-foot{background:#111827!important;color:#fff!important;border-color:#2d3748!important}
body.dark-mode .a4-preview-scroll{background:#0b0f14!important}
body.dark-mode .a4-option label,body.dark-mode .a4-preview-head p,body.dark-mode .a4-preview-foot>span{color:#d1d5db!important}
body.dark-mode .a4-option select,body.dark-mode .a4-check{background:#0f172a!important;color:#fff!important;border-color:#334155!important}
body.dark-mode .a4-add-section{background:#111827!important;color:#fff!important;border-color:#64748b!important}
body.dark-mode .a4-close{background:#1f2937!important;color:#fff!important}
body.dark-mode .menu{background:#111827!important;border-color:#334155!important}
body.dark-mode .menu span{color:#f8fafc!important}
body.dark-mode .circle-btn{color:#fff!important}
body.dark-mode .country-item strong,body.dark-mode .country-item small{color:#fff!important}



/* v29 — polished branding + fixed social icons/position */
:root{--brand-ink:#111827;--brand-blue:#086be8}
.logo-copy b{color:#111827!important;font-weight:800;letter-spacing:-.9px}
.logo-copy b span{color:#086be8!important}
.logo-copy small{color:#53657a!important}
.logo{position:relative}
body.dark-mode .logo-copy b{color:#fff!important}
body.dark-mode .logo-copy b span{color:#73b5ff!important}
body.dark-mode .logo-copy small{color:#b9c7d8!important}
/* Keep the social group anchored neatly in the Follow Us column */
.footer-inner>div:last-child{min-width:150px}
.footer-inner>div:last-child h4{margin-bottom:12px}
.social{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;flex-wrap:nowrap!important}
.social-btn{position:relative!important;flex:0 0 34px!important;width:34px!important;height:34px!important;padding:0!important;margin:0!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;overflow:hidden!important}
.social-btn i{font-family:"Font Awesome 6 Brands"!important;font-style:normal!important;font-weight:400!important;font-size:16px!important;line-height:1!important;display:block!important;visibility:visible!important;opacity:1!important}
.social-btn.facebook i{color:#1877f2!important}.social-btn.instagram i{color:#d62976!important}.social-btn.youtube i{color:#ff0000!important}.social-btn.twitter i{color:#111827!important}
.social-btn:hover i{transform:scale(1.08)}
body.dark-mode .social-btn{background:#1b2a3d!important;border-color:#40556e!important}
body.dark-mode .social-btn.facebook i{color:#5da0ff!important}.dark-mode .social-btn.instagram i{color:#ff78ae!important}.dark-mode .social-btn.youtube i{color:#ff6b6b!important}.dark-mode .social-btn.twitter i{color:#fff!important}
@media(max-width:600px){.footer-inner>div:last-child{min-width:0}.social{gap:8px!important}.social-btn{flex-basis:32px!important;width:32px!important;height:32px!important}.social-btn i{font-size:15px!important}}



/* Lightweight, colorful SEO guide redesign */
.seo-content{margin:34px auto 0!important;padding:0 18px 46px!important;background:transparent!important}
.seo-content>div{max-width:1080px!important;padding:26px 0 10px!important}
.seo-content h2{margin:0 0 10px!important;font-size:clamp(25px,3vw,34px)!important;line-height:1.15!important;letter-spacing:-.7px!important;color:#172554!important}
.seo-content h2:after{content:"";display:block;width:52px;height:4px;border-radius:99px;margin-top:12px;background:linear-gradient(90deg,#2563eb,#06b6d4,#8b5cf6)}
.seo-content>div>p{max-width:850px!important;color:#64748b!important;line-height:1.7!important;font-size:15px!important}
.seo-content h3{margin:27px 0 10px!important;font-size:18px!important;color:#1e3a8a!important}
.seo-content ol{margin:8px 0 22px!important;padding-left:22px!important;color:#475569!important;line-height:1.85!important}
.seo-content ol li{padding-left:5px!important}
.seo-content ol li::marker{color:#2563eb;font-weight:800}
.seo-content details{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:11px!important;margin:8px 0!important;padding:0 15px!important;box-shadow:0 2px 10px rgba(15,23,42,.035)!important}
.seo-content summary{cursor:pointer;padding:13px 0!important;font-weight:650!important;color:#334155!important}
.seo-content details p{margin:0 0 13px!important;color:#64748b!important;line-height:1.65!important;font-size:14px!important}
.seo-content .seo-size-card{position:relative!important;min-height:92px!important;padding:16px 17px!important;border:1px solid #e2e8f0!important;border-radius:13px!important;background:#fff!important;box-shadow:0 3px 12px rgba(15,23,42,.045)!important;overflow:hidden!important}
.seo-content .seo-size-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--card-accent,#2563eb)}
.seo-content .seo-size-card:nth-child(2){--card-accent:#f59e0b}.seo-content .seo-size-card:nth-child(3){--card-accent:#ef4444}.seo-content .seo-size-card:nth-child(4){--card-accent:#8b5cf6}
.seo-content .seo-size-card strong{font-size:15px!important;color:#1e293b!important}.seo-content .seo-size-card span{font-size:13px!important;color:#64748b!important}
.seo-content .seo-size-card:hover{transform:translateY(-1px)!important;box-shadow:0 7px 18px rgba(15,23,42,.08)!important;border-color:#cbd5e1!important}
body.dark-mode .seo-content h2{color:#e0e7ff!important}.dark-mode .seo-content>div>p,.dark-mode .seo-content ol{color:#b7c3d4!important}.dark-mode .seo-content h3{color:#93c5fd!important}
body.dark-mode .seo-content details,.dark-mode .seo-content .seo-size-card{background:#111827!important;border-color:#263449!important}.dark-mode .seo-content summary,.dark-mode .seo-content .seo-size-card strong{color:#f8fafc!important}.dark-mode .seo-content details p,.dark-mode .seo-content .seo-size-card span{color:#aab8ca!important}
@media(max-width:600px){.seo-content{padding:0 13px 34px!important}.seo-content>div{padding-top:20px!important}.seo-content h2{font-size:24px!important}.seo-content h3{font-size:17px!important}.seo-content .seo-size-card{min-height:78px!important;padding:14px!important}}

/* Migrated inline presentation styles */
.passport-color[data-bg="#ffffff"] .swatch,
.passport-color[data-bg="#fff"] .swatch{background:#fff}
.passport-color[data-bg="#f7f7f2"] .swatch{background:#f7f7f2}
.passport-color[data-bg="#dbeafe"] .swatch{background:#dbeafe}
.passport-color[data-bg="#eef1f4"] .swatch{background:#eef1f4}
.passport-color[data-bg="#eaf8ef"] .swatch{background:#eaf8ef}
.seo-content-inner{max-width:1100px;margin:0 auto;padding:30px 22px 50px}
.seo-size-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:22px 0}
.seo-disclaimer{font-size:13px;color:var(--muted);margin-top:24px}

/* Final mobile dropdown sizing fix */
@media (max-width:430px){.mobile-accordion-content{max-height:0!important;overflow:hidden!important}.mobile-accordion.open .mobile-accordion-content{max-height:70vh!important;overflow-y:auto!important;padding:8px 7px 9px!important}}

/* FINAL: show complete mobile dropdown and let drawer body scroll */
.mobile-menu-drawer{min-height:0;}
.mobile-drawer-body{min-height:0;overflow-y:auto;overflow-x:hidden;display:block!important;}
.mobile-drawer-body > *{margin-bottom:9px;}
.mobile-accordion-content{max-height:0!important;overflow:hidden!important;opacity:0;padding:0 9px!important;}
.mobile-accordion.open .mobile-accordion-content{max-height:none!important;overflow:visible!important;opacity:1;padding:8px 9px 9px!important;}
@media (max-width:430px){
 .mobile-drawer-body{display:block!important;overflow-y:auto!important;padding-bottom:30px!important;}
 .mobile-accordion.open .mobile-accordion-content{max-height:none!important;overflow:visible!important;}
}


/* Multilingual language selector */
.language-selector{position:relative;z-index:100}
.language-btn{display:flex;align-items:center;gap:7px;height:38px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(20,60,100,.05)}
.language-btn:hover{border-color:#b9d5f2;background:var(--accent-soft)}
.language-btn .language-flag{font-size:18px;line-height:1}
.language-btn svg{width:13px;height:13px}
.language-menu{position:absolute;right:0;top:calc(100% + 7px);width:178px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 35px rgba(20,60,100,.16);display:none}
.language-menu.open{display:block}
.language-menu button{width:100%;display:flex;align-items:center;gap:9px;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:11px;font-weight:700;text-align:left;cursor:pointer}
.language-menu button:hover,.language-menu button.active{background:var(--accent-soft);color:var(--accent)}
.language-menu button span{font-size:18px;line-height:1}

.mobile-language-section{margin:0 0 10px;padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}
.mobile-language-title{display:flex;align-items:center;gap:7px;margin-bottom:9px;color:var(--text);font-size:12px}
.mobile-language-title svg{width:16px;color:var(--accent)}
.mobile-language-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mobile-language-grid button{display:flex;align-items:center;gap:7px;min-width:0;padding:8px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);cursor:pointer;font-size:10px;text-align:left}
.mobile-language-grid button:hover,.mobile-language-grid button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.mobile-language-grid button span{font-size:17px;line-height:1}
body.dark-mode .language-btn,body.dark-mode .language-menu,body.dark-mode .mobile-language-grid button{background:var(--surface);border-color:var(--border);color:var(--text)}
body.dark-mode .mobile-language-section{background:var(--surface-2);border-color:var(--border)}
@media(max-width:700px){
  #desktopLanguage{display:none}
}

/* Language selector: reliable SVG country flags (works even when emoji flags are unavailable) */
.language-btn .language-flag,
.language-menu .language-option-flag,
.mobile-language-grid .language-option-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.language-btn .language-flag svg{width:24px;height:17px;display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(15,23,42,.12)}
.language-menu .language-option-flag svg{width:24px;height:17px;display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(15,23,42,.10)}
.mobile-language-grid .language-option-flag svg{width:24px;height:17px;display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(15,23,42,.10)}


/* PhotoPassPro A4 print — single source of truth */
#a4PrintRoot{display:none!important}

@media print{
  @page{
    size:A4 portrait;
    margin:0;
  }

  html,body{
    width:210mm!important;
    min-width:210mm!important;
    max-width:210mm!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
  }

  /* Hide the website, but NEVER hide the A4 root or its children. */
  body.printing-a4 > *:not(#a4PrintRoot){
    display:none!important;
  }

  body.printing-a4 #a4PrintRoot{
    display:block!important;
    visibility:visible!important;
    position:static!important;
    width:210mm!important;
    min-width:210mm!important;
    max-width:210mm!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
  }

  body.printing-a4 #a4PrintRoot *{
    visibility:visible!important;
  }

  body.printing-a4 #a4PrintRoot .a4-print-page{
    display:block!important;
    width:210mm!important;
    min-width:210mm!important;
    max-width:210mm!important;
    height:297mm!important;
    min-height:297mm!important;
    max-height:297mm!important;
    margin:0!important;
    padding:var(--a4-pad,3mm)!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    background:#fff!important;
    page-break-after:always!important;
    break-after:page!important;
  }

  body.printing-a4 #a4PrintRoot .a4-print-page:last-child{
    page-break-after:auto!important;
    break-after:auto!important;
  }

  body.printing-a4 #a4PrintRoot .a4-print-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(var(--cols,6),minmax(0,1fr))!important;
    gap:var(--gap,4mm)!important;
    margin:0 0 var(--gap,4mm) 0!important;
    padding:0!important;
    align-items:start!important;
  }

  body.printing-a4 #a4PrintRoot .a4-print-photo{
    min-width:0!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  body.printing-a4 #a4PrintRoot .a4-print-photo img{
    display:block!important;
    visibility:visible!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:var(--photo-ratio,35/45)!important;
    object-fit:cover!important;
    margin:0!important;
    padding:0!important;
  }

  body.printing-a4 #a4PrintRoot .a4-print-photo.border-clean{
    border:1px solid #ddd!important;
  }
  body.printing-a4 #a4PrintRoot .a4-print-photo.border-thin{
    border:1px solid #aaa!important;
  }
  body.printing-a4 #a4PrintRoot .a4-print-photo.border-cut{
    border:1px dashed #888!important;
  }
  body.printing-a4 #a4PrintRoot .a4-print-photo.border-none{
    border:0!important;
  }

  body.printing-a4 #a4PrintRoot .a4-print-label{
    display:block!important;
    visibility:visible!important;
    text-align:center!important;
    font:700 6px Arial,sans-serif!important;
    letter-spacing:1px!important;
    text-transform:uppercase!important;
    margin-top:2mm!important;
  }
}



/* =========================================================
   A4 PRINT PREVIEW — MOBILE RESPONSIVE UI
   ========================================================= */

/* Tablet */
@media (max-width: 850px){
  .a4-preview-layer{
    padding:10px !important;
    align-items:stretch !important;
    justify-content:center !important;
  }

  .a4-preview-modal{
    width:100% !important;
    max-width:760px !important;
    height:calc(100dvh - 20px) !important;
    max-height:none !important;
    border-radius:14px !important;
  }

  .a4-preview-head{
    flex:0 0 auto !important;
    padding:12px 14px !important;
  }

  .a4-preview-head h2{
    font-size:16px !important;
  }

  .a4-preview-head h2:before{
    width:26px !important;
    height:26px !important;
  }

  .a4-preview-toolbar{
    flex:0 0 auto !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding:9px 12px !important;
    gap:7px !important;
    scrollbar-width:none !important;
  }

  .a4-preview-toolbar::-webkit-scrollbar{
    display:none !important;
  }

  .a4-option{
    flex:0 0 auto !important;
  }

  .a4-option select,
  .a4-check,
  .a4-reset{
    min-height:34px !important;
  }

  .a4-preview-scroll{
    padding:14px 10px 18px !important;
    gap:18px !important;
    align-items:center !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .a4-preview-page{
    flex:0 0 auto !important;
    width:min(92vw,560px) !important;
    max-width:calc(100vw - 28px) !important;
    height:auto !important;
    aspect-ratio:210 / 297 !important;
    padding:var(--a4-pad,3mm) !important;
    margin:0 auto !important;
    box-shadow:0 4px 18px rgba(15,44,72,.20) !important;
  }

  .a4-preview-row{
    width:100% !important;
    grid-template-columns:repeat(var(--cols,6),minmax(0,1fr)) !important;
    gap:var(--gap,4mm) !important;
  }

  .a4-preview-photo{
    min-width:0 !important;
  }

  .a4-remove-photo{
    width:22px !important;
    height:22px !important;
    right:3px !important;
    top:3px !important;
    opacity:1 !important;
    font-size:13px !important;
  }

  .a4-add-section{
    margin:7px auto 0 !important;
    min-height:30px !important;
  }

  .a4-page-number{
    font-size:7px !important;
    bottom:4px !important;
    right:5px !important;
  }

  .a4-preview-foot{
    flex:0 0 auto !important;
    padding:9px 12px !important;
    gap:8px !important;
  }

  .a4-preview-foot > span{
    font-size:9px !important;
  }

  .a4-preview-foot > div{
    width:100% !important;
    justify-content:flex-end !important;
  }
}

/* Phone */
@media (max-width: 600px){
  .a4-preview-layer{
    padding:0 !important;
  }

  .a4-preview-modal{
    width:100vw !important;
    height:100dvh !important;
    max-height:none !important;
    border-radius:0 !important;
    border:0 !important;
  }

  .a4-preview-head{
    min-height:56px !important;
    padding:9px 12px !important;
  }

  .a4-preview-head h2{
    font-size:15px !important;
  }

  .a4-preview-head p{
    font-size:9px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:calc(100vw - 80px) !important;
  }

  .a4-close{
    flex:0 0 auto !important;
    width:34px !important;
    height:34px !important;
  }

  .a4-preview-toolbar{
    padding:8px 10px !important;
    gap:6px !important;
  }

  .a4-option label{
    font-size:7px !important;
  }

  .a4-option select{
    height:32px !important;
    min-width:76px !important;
    font-size:9px !important;
    padding:0 6px !important;
  }

  .a4-check{
    height:32px !important;
    padding:0 7px !important;
    font-size:9px !important;
    white-space:nowrap !important;
  }

  .a4-reset{
    height:32px !important;
    padding:0 8px !important;
    font-size:9px !important;
    white-space:nowrap !important;
  }

  .a4-preview-scroll{
    padding:12px 6px 14px !important;
    gap:14px !important;
  }

  /* Keep the complete A4 page visible without horizontal clipping. */
  .a4-preview-page{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    min-width:0 !important;
    padding:var(--a4-pad,3mm) !important;
    box-shadow:0 3px 14px rgba(15,44,72,.20) !important;
  }

  .a4-preview-row{
    gap:var(--gap,3mm) !important;
  }

  .a4-preview-sections{
    gap:var(--section-gap,3mm) !important;
  }

  .a4-preview-photo{
    border-width:1px !important;
  }

  .a4-remove-photo{
    width:19px !important;
    height:19px !important;
    right:2px !important;
    top:2px !important;
    font-size:11px !important;
  }

  .a4-add-section{
    min-height:28px !important;
    padding:5px 8px !important;
    font-size:8px !important;
  }

  .a4-add-section svg{
    width:12px !important;
  }

  .a4-layout-label{
    bottom:6px !important;
    font-size:5px !important;
  }

  .a4-page-number{
    bottom:3px !important;
    right:4px !important;
    font-size:6px !important;
  }

  .a4-preview-foot{
    padding:8px 10px !important;
    flex-direction:row !important;
    align-items:center !important;
  }

  .a4-preview-foot > span{
    min-width:0 !important;
    flex:1 1 auto !important;
    font-size:8px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .a4-preview-foot > div{
    width:auto !important;
    flex:0 0 auto !important;
    gap:5px !important;
  }

  .a4-preview-foot button{
    min-height:34px !important;
    padding:0 10px !important;
    font-size:9px !important;
    white-space:nowrap !important;
  }

  .a4-preview-foot .primary{
    min-width:82px !important;
    justify-content:center !important;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .a4-preview-page{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
  }

  .a4-preview-scroll{
    padding-left:4px !important;
    padding-right:4px !important;
  }

  .a4-preview-foot{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .a4-preview-foot button{
    padding:0 8px !important;
    font-size:8px !important;
  }

  .a4-preview-foot .primary{
    min-width:74px !important;
  }
}

/* Prevent the page behind the A4 preview from scrolling on touch devices. */
@media (max-width: 850px){
  body:has(#a4PreviewLayer){
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }
}