*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:#11244b;background:linear-gradient(135deg,#eaf5ff,#fff 48%,#edf8ff);min-height:100vh}button,a{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.header{height:76px;background:#fff;border-bottom:1px solid #dce8f4;position:sticky;top:0;z-index:30}.header-inner{height:100%;max-width:1520px;margin:auto;padding:0 30px;display:flex;align-items:center;gap:34px}.logo{display:flex;align-items:center;gap:10px;min-width:255px}.logo-mark{width:42px;height:42px;background:#086be8;border-radius:10px;color:#fff;display:grid;place-items:center}.logo-mark svg{width:27px}.logo-copy b{font-size:22px;line-height:1;display:block;letter-spacing:-.8px}.logo-copy b span{color:#086be8}.logo-copy small{font-size:9px;display:block;margin-top:4px}.nav{margin-left:auto;display:flex;gap:28px;align-items:center}.nav>a,.nav-drop{border:0;background:none;color:#13264c;font-size:12px;position:relative;padding:25px 0}.nav-drop{display:flex;align-items:center;gap:4px}.nav-drop svg{width:12px}.menu{display:none;position:absolute;top:58px;left:-12px;width:190px;background:#fff;border:1px solid #dce7f1;border-radius:10px;box-shadow:0 18px 45px #133a631c;padding:7px}.nav-drop:hover .menu{display:block}.menu span{display:block;padding:10px;border-radius:7px;font-size:11px;text-align:left}.menu span:hover{background:#edf6ff;color:#086be8}.header-right{display:flex;align-items:center;gap:12px}.circle-btn,.mobile-btn{border:0;background:transparent;color:#11244b;width:34px;height:34px;display:grid;place-items:center}.all-btn{border:0;background:#086be8;color:#fff;border-radius:8px;padding:10px 15px;font-size:12px;font-weight:700;display:flex;gap:7px;align-items:center}.all-btn svg{width:15px}.mobile-btn{display:none}.page{display:none}.page.active{display:block}.hero{max-width:1450px;margin:auto;min-height:360px;padding:32px 35px 10px;display:grid;grid-template-columns:1fr 1fr;align-items:center}.pill{display:inline-block;background:#e4f2ff;color:#0752b5;padding:7px 22px;border-radius:30px;font-size:11px;font-weight:800;letter-spacing:.7px}.hero h1{font-size:47px;line-height:1;letter-spacing:-2.1px;margin:15px 0;color:#11244b}.hero h1 em{font-style:normal;color:#086be8}.hero p{font-size:16px;line-height:1.5;max-width:520px;margin:0 0 15px}.features{padding:0;margin:0;list-style:none;display:grid;gap:8px;font-size:14px}.features li{display:flex;gap:10px;align-items:center}.features svg{width:20px;color:#086be8;fill:#086be8}.hero-art{height:325px;position:relative;display:grid;place-items:center}.orb{position:absolute;border-radius:50%;background:#d9edff}.o1{width:115px;height:115px;left:28%;top:26px}.o2{width:170px;height:170px;right:14%;bottom:3px}.photo{position:absolute;width:160px;height:215px;background:#fff;padding:6px;box-shadow:0 12px 25px #28568135}.pile-main{width:184px;height:245px;z-index:3;transform:rotate(-4deg);top:35px;left:31%}.pile-left{transform:rotate(-16deg);top:78px;left:19%;z-index:2}.pile-right{transform:rotate(14deg);top:82px;right:17%;z-index:2}.person{height:100%;background-image:url("/img.png");background-size:cover;background-position:center;position:relative;overflow:hidden}.note{position:absolute;right:3%;top:5px;font-family:cursive;font-weight:700;font-size:15px;transform:rotate(-4deg)}.note svg{width:48px;color:#086be8;display:block;margin-left:35px}.upload-layout{max-width:1450px;margin:auto;padding:10px 35px;display:grid;grid-template-columns:1fr 260px;gap:14px}.dropzone{min-height:225px;border:1.8px dashed #086be8;border-radius:14px;background:#ffffff65;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;text-align:center}.dropzone:hover{background:#f4faff}.upload-svg{width:53px;height:53px;color:#086be8;stroke-width:1.7}.dropzone strong{font-size:18px;margin-top:7px}.dropzone span{font-size:12px;margin:4px}.choose{background:#086be8;color:#fff;border-radius:8px;padding:11px 36px;font-size:13px;display:flex;gap:7px;align-items:center;margin-top:6px}.choose svg{width:16px}.dropzone>small{font-size:10px;margin-top:9px}.countries-mini{background:#ffffffb8;border-radius:14px;padding:15px}.countries-mini h3{font-size:12px;margin:0 0 9px}.countries-mini div{display:grid;grid-template-columns:25px 1fr auto;gap:5px;font-size:11px;margin:8px 0}.countries-mini div span{color:#536985}.countries-mini>button{border:0;background:none;font-size:11px;font-weight:700;padding:5px 0}.trust{max-width:1450px;margin:auto;padding:3px 35px 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.trust>div{background:#dceeff;border-radius:11px;padding:12px 20px;display:flex;gap:12px;align-items:center}.trust svg{color:#086be8;width:27px}.trust b,.trust small{display:block}.trust b{font-size:12px}.trust small{font-size:10px;margin-top:3px}.how{max-width:1450px;margin:auto;padding:0 35px 25px}.how h2{text-align:center;font-size:20px;margin:10px 0 17px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.steps>div{min-height:125px;border:1px solid #dbe7f2;border-radius:10px;background:#ffffffc7;display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px;position:relative}.steps .num{position:absolute;top:-11px;background:#086be8;color:#fff;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}.steps>div>svg{width:23px;color:#086be8;margin-top:19px}.steps b{font-size:12px;margin-top:5px}.steps small{font-size:10px;color:#526985;line-height:1.35;margin-top:4px}.loading-card{min-height:570px;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-card{background:transparent}.loader{width:92px;height:92px;border:5px solid #dcecff;border-top-color:#086be8;border-radius:50%;display:grid;place-items:center;position:relative;animation:spin .8s linear infinite}.loader svg{width:32px;color:#086be8;animation:spin .8s linear reverse infinite}.loading-card h2{font-size:23px;margin:24px 0 7px}.loading-card p{font-size:12px;color:#5c708b}.progress{width:min(550px,80%);height:9px;background:#e1edf8;border-radius:20px;overflow:hidden;margin-top:20px}.progress span{display:block;height:100%;width:0;background:#086be8;transition:width .15s}.load-meta{width:min(550px,80%);display:flex;justify-content:space-between;font-size:10px;margin-top:7px;color:#5c708b}.load-meta b{color:#086be8}.load-meta svg{width:12px;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.result-page{max-width:1450px;margin:auto;padding:15px 35px 30px}.ready{display:flex;justify-content:center;gap:12px;align-items:center;margin-bottom:18px}.ready>span{width:42px;height:42px;background:#168153;color:#fff;border-radius:50%;display:grid;place-items:center}.ready svg{width:25px}.ready h2{font-size:23px;color:#087044;margin:0}.ready p{font-size:11px;color:#5a6e88;margin:4px 0 0}.result-grid{display:grid;grid-template-columns:1.18fr .78fr .78fr;gap:12px}.card{background:#ffffffdc;border:1px solid #d8e6f2;border-radius:12px}.result-preview{padding:9px}.tabs{display:flex;gap:4px}.tabs button{border:0;background:#edf5fc;color:#0756bc;padding:7px 13px;border-radius:6px;font-size:10px}.tabs button.active{background:#086be8;color:#fff}.preview-box{height:270px;background:#edf3f6;margin-top:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-box img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .15s,filter .15s}.sheet-box{width:240px;height:250px;background:#fff;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;box-shadow:0 2px 9px #183a5b15}.sheet-box .mini-photo{background:#e8eef2;overflow:hidden;position:relative}.mini-photo:before{content:"";position:absolute;width:44%;height:48%;background:#d69c73;border-radius:50%;left:28%;top:15%}.mini-photo:after{content:"";position:absolute;width:70%;height:50%;background:#263343;border-radius:50% 50% 0 0;left:15%;bottom:-7%}.hidden{display:none!important}.result-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}.result-actions button,.print-buttons button{border:1px solid #d4e2ee;background:#f2f8fd;color:#0755bc;border-radius:7px;padding:7px 3px;font-size:9px;font-weight:600}.result-actions svg,.print-buttons svg{width:15px;display:block;margin:auto auto 3px}.format,.prints{padding:21px 13px;text-align:center;display:flex;align-items:center;flex-direction:column}.format>small,.prints>small{color:#086be8;font-size:11px;font-weight:700}.format strong{font-size:25px;color:#086be8;margin-top:23px}.format>span{font-size:12px;margin-top:7px}.format-country{font-size:12px;color:#11244b;margin-top:9px;font-weight:800}.primary{border:0;background:#086be8;color:#fff;border-radius:7px;font-weight:700;padding:12px 14px}.download{margin-top:20px;width:90%;font-size:12px}.download svg{width:16px;vertical-align:middle}.mini-sheet{width:170px;height:150px;border:1px solid #d3e0ec;border-radius:8px;background:#fff;padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:9px auto 7px}.mini-sheet span{background:#e8eef2;position:relative}.mini-sheet span:before{content:"";position:absolute;width:45%;height:48%;border-radius:50%;background:transparent;left:27%;top:14%}.mini-sheet span:after{content:"";position:absolute;width:72%;height:50%;border-radius:50% 50% 0 0;background:transparent;left:14%;bottom:-7%}.prints>b{font-size:10px}.print-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%;margin-top:9px}.other{padding:13px 10px;margin-top:12px}.other h3{text-align:center;font-size:15px;margin:0 0 10px}.other-title{display:flex;align-items:center;justify-content:center;gap:7px}.other-title svg{width:19px;height:19px;color:#086be8;stroke-width:2.2}.country-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.country-item{border:1px solid #d3e2ee;background:#fff;border-radius:8px;padding:7px 3px;text-align:center}.country-item:hover{border-color:#5796df;box-shadow:0 5px 16px #2465a515}.country-item .flag{font-size:23px}.country-item b{display:block;font-size:10px;margin-top:3px}.country-item small{font-size:8px;color:#60748d}.zip{width:calc(100% - 24px);margin:10px 12px 0;border:0;border-radius:8px;background:#dcecff;color:#086be8;padding:8px;display:flex;justify-content:center;align-items:center;gap:9px}.zip>svg{width:22px}.zip b,.zip small{display:block;text-align:left}.zip b{font-size:12px}.zip small{font-size:9px;color:#536f8f;margin-top:2px}.sizes-page{max-width:1450px;margin:auto;padding:45px 35px 70px;min-height:600px}.page-title{text-align:center}.page-title h1{font-size:38px;margin:12px 0 7px}.page-title p{font-size:13px;color:#5a708c}.sizes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.size-card{background:#fff;border:1px solid #d9e6f1;border-radius:12px;padding:17px;display:flex;gap:13px;align-items:center}.size-card .flag{font-size:31px}.size-card b{display:block;font-size:14px}.size-card small{font-size:10px;color:#5c708c}.modal-layer{display:none;position:fixed;inset:0;background:#071b3288;z-index:100;align-items:center;justify-content:center;padding:18px}.modal-layer.open{display:flex}.modal{width:min(570px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:17px;padding:26px;position:relative;box-shadow:0 25px 70px #00162f55}.modal-close{position:absolute;right:13px;top:13px;width:32px;height:32px;border:0;background:#edf5fc;border-radius:50%;display:grid;place-items:center;color:#1c4169}.modal h2{font-size:21px;margin:0 35px 7px 0}.modal p{font-size:12px;color:#566d89;line-height:1.6}.modal-preview{height:230px;background:#eef3f6;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:13px 0}.modal-preview img{max-width:100%;max-height:100%}.range{display:flex;align-items:center;gap:10px;font-size:11px;margin:12px 0}.range input{flex:1}.modal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.option{border:1px solid #d7e4ef;background:#f8fbfe;border-radius:9px;padding:12px;text-align:left}.option.active{border-color:#086be8;background:#edf6ff}.option b,.option small{display:block}.option b{font-size:12px}.option small{font-size:9px;color:#637891;margin-top:4px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:17px}.secondary{border:1px solid #d4e1ec;background:#f5f9fd;color:#24486d;border-radius:8px;padding:10px 14px;font-weight:600}.modal .primary{padding:10px 15px}footer{background:#102a48;color:#fff;border-top:4px solid #1683f4}.footer-inner{max-width:1450px;margin:auto;padding:25px 35px 22px;display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr;gap:25px}.footer-inner .logo-copy b{color:#fff}.footer-inner .logo-copy small{color:#d3e2f1}.footer-inner h4{font-size:11px;margin:0 0 9px}.footer-inner a{display:block;font-size:9px;margin:6px 0;color:#dce8f4;cursor:pointer}.copyright{display:block;font-size:9px;color:#d3e2f1;margin-top:22px}.social{display:flex;gap:8px;align-items:center}.social-btn{width:30px;height:30px;border:1px solid #d7e4ef;border-radius:50%;background:#fff;color:#102a48;display:grid;place-items:center;transition:transform .15s,box-shadow .15s,background .15s}.social-btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px #001a3720}.social-btn svg{width:16px;height:16px;display:block}.social-btn.youtube svg{width:17px;height:17px}.social-btn.facebook:hover{background:#edf4ff}.social-btn.instagram:hover{background:#fff0f6}.social-btn.youtube:hover{background:#fff0f0}.social-btn.twitter:hover{background:#eef4f8}body.dark .social-btn{background:#1a3048;border-color:#38526d;color:#eef6ff}body.dark .social-btn.youtube svg path:last-child{fill:#eef6ff}body.dark .social-btn:hover{background:#24415d}
.action-loading{position:fixed;top:88px;left:50%;transform:translate(-50%,-16px);z-index:250;display:flex;align-items:center;gap:9px;background:#102a48;color:#fff;border:1px solid #2f5375;border-radius:999px;padding:9px 16px;font-size:11px;font-weight:700;box-shadow:0 12px 35px #001a3740;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;backdrop-filter:blur(8px)}
.action-loading.show{opacity:1;transform:translate(-50%,0)}
.action-spinner{width:15px;height:15px;border:2px solid #ffffff55;border-top-color:#79bdff;border-radius:50%;animation:spin .7s linear infinite}
.toast-root{position:fixed;right:17px;bottom:17px;z-index:200;display:grid;gap:8px}.toast{background:#102a48;color:#fff;border-radius:9px;padding:11px 14px;font-size:11px;box-shadow:0 10px 30px #001a3733;display:flex;gap:7px;align-items:center;animation:toastIn .2s}.toast svg{width:15px;color:#79bdff}@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}body.dark{color:#eaf3ff;background:#0b1727}body.dark .header,body.dark .card,body.dark .dropzone,body.dark .countries-mini,body.dark .steps>div,body.dark .size-card,body.dark .modal{background:#122238;border-color:#294159}body.dark .nav>a,body.dark .nav-drop,body.dark .hero h1,body.dark .logo-copy b{color:#eef6ff}body.dark .hero p,body.dark .features,body.dark .steps small{color:#bfd0e3}body.dark .menu,body.dark .menu span{background:#122238;color:#eef6ff}body.dark .menu span:hover{background:#1a3450}body.dark .preview-box{background:#172a3f}body.dark .result-actions button,body.dark .print-buttons button,body.dark .secondary{background:#182e46;color:#dcecff;border-color:#31506d}body.dark .other{background:#122238}body.dark .country-item{background:#172b41;color:#eef6ff;border-color:#31506d}body.dark .modal p{color:#bfd0e3}@media(max-width:950px){.nav{display:none}.mobile-btn{display:grid}.header-inner{padding:0 15px}.header-right{margin-left:auto}.hero{grid-template-columns:1fr;padding:25px 20px}.hero-art{height:290px}.upload-layout{grid-template-columns:1fr;padding:10px 20px}.countries-mini{display:none}.trust,.how,.result-page,.sizes-page{padding-left:20px;padding-right:20px}.result-grid{grid-template-columns:1fr 1fr}.result-preview{grid-column:1/-1}.country-grid{grid-template-columns:repeat(4,1fr)}.footer-inner{grid-template-columns:1fr 1fr;padding-left:20px;padding-right:20px}.sizes-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.header{height:68px}.logo{min-width:0}.logo-copy b{font-size:18px}.logo-copy small{font-size:7px}.all-btn{font-size:0;padding:9px}.all-btn svg{width:17px}.hero h1{font-size:39px}.hero-art{transform:scale(.88);margin:-5px 0}.steps{grid-template-columns:1fr 1fr}.trust{grid-template-columns:1fr}.result-grid{grid-template-columns:1fr}.country-grid{grid-template-columns:repeat(3,1fr)}.ready{align-items:flex-start}.ready h2{font-size:18px}.ready p{font-size:9px}.footer-inner{grid-template-columns:1fr 1fr}.footer-inner>div:first-child{grid-column:1/-1}.sizes-grid{grid-template-columns:1fr}.modal-grid{grid-template-columns:1fr}.page-title h1{font-size:29px}}

/* v3: A4 print preview — six passport photos in one horizontal row */
.mini-sheet{width:100%;max-width:310px;height:92px;grid-template-columns:repeat(6,1fr);gap:5px;padding:7px}
.mini-sheet span{min-width:0}
.sheet-box{width:100%;max-width:560px;height:118px;grid-template-columns:repeat(6,1fr);gap:7px;padding:9px}
.print-preview-a4{background:#fff;border:1px solid #d4e1ec;border-radius:10px;padding:18px;margin-top:14px;overflow:hidden}
.print-preview-a4 .a4-page{aspect-ratio:297/210;background:#fff;border:1px solid #e2e8ef;padding:5.5%;display:grid;grid-template-columns:repeat(6,1fr);gap:1.5%;align-items:center}
.print-preview-a4 .a4-photo{aspect-ratio:35/45;background:#edf1f4;overflow:hidden;position:relative}
.print-preview-a4 .a4-photo img{width:100%;height:100%;object-fit:cover;display:block}
.print-pages-note{font-size:10px;color:#5c708b;margin-top:7px;text-align:center}
.page-selector{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:15px}
.page-selector button{border:1px solid #d5e3ee;background:#f7fbff;border-radius:8px;padding:10px 4px;font-size:11px;color:#17466f}
.page-selector button.active{background:#086be8;color:#fff;border-color:#086be8}
.custom-page-row{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11px}
.custom-page-row input{width:90px;border:1px solid #d5e1ec;border-radius:8px;padding:9px}
@media(max-width:600px){.mini-sheet{max-width:260px}.page-selector{grid-template-columns:repeat(3,1fr)}}

/* v4 print-sheet fixes */
.mini-sheet{
  width:100%;
  max-width:none;
  height:88px;
  padding:5px;
  display:grid!important;
  grid-template-columns:repeat(6,1fr)!important;
  grid-template-rows:1fr!important;
  gap:4px;
  background:#fff;
  border:1px solid #d2dfeb;
  border-radius:7px;
  overflow:hidden;
}
.mini-real-photo{
  display:block;
  min-width:0;
  min-height:0;
  background:#e9eef2 center/cover no-repeat;
  border:1px solid #d5e0e8;
  overflow:hidden;
}
.sheet-box{
  width:min(94%,760px)!important;
  height:170px!important;
  background:#fff;
  padding:8px;
  display:grid!important;
  grid-template-columns:repeat(6,1fr)!important;
  grid-template-rows:1fr!important;
  gap:7px;
  border:1px solid #cddce8;
  border-radius:8px;
  box-shadow:0 3px 12px #183a5b15;
}
.sheet-real-photo{
  min-width:0;
  min-height:0;
  background:#e9eef2 center/cover no-repeat;
  border:1px solid #cbd9e4;
  overflow:hidden;
}
.page-picker{
  margin-top:18px;
  border:1px solid #d8e5ef;
  border-radius:11px;
  padding:16px;
  background:#f7fbff;
}
.page-picker label{font-size:12px;font-weight:700;display:flex;align-items:center;gap:12px}
.page-picker input{
  width:100px;
  border:1px solid #cbdbe8;
  border-radius:7px;
  padding:9px;
  font-weight:700;
}
.page-help{font-size:10px;color:#5d728c;margin-top:8px}
@media(max-width:600px){
  .mini-sheet{height:58px;gap:2px;padding:3px}
  .sheet-box{height:100px!important;gap:3px;padding:4px}
}


/* v5: real in-page A4 print preview and same-window printing */
/* Cutting-friendly gutter: 3mm between each passport photo. */
.a4-preview-layer{position:fixed;inset:0;z-index:1000;background:rgba(4,20,38,.82);display:flex;align-items:center;justify-content:center;padding:18px}
.a4-preview-modal{width:min(1180px,98vw);height:min(94vh,920px);background:#eef3f8;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.35)}
.a4-preview-head{background:#fff;padding:16px 20px;border-bottom:1px solid #d6e1eb;display:flex;align-items:center;justify-content:space-between}
.a4-preview-head h2{margin:0;font-size:18px;color:#12385d}.a4-preview-head p{margin:4px 0 0;font-size:11px;color:#61758b}
.a4-close{width:34px;height:34px;border:0;border-radius:50%;background:#edf4fa;color:#244b70;font-size:25px;line-height:1;cursor:pointer}
.a4-preview-scroll{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;align-items:center;gap:24px}
.a4-preview-page{position:relative;flex:0 0 auto;width:min(700px,92vw);aspect-ratio:210/297;background:#fff;box-shadow:0 5px 24px rgba(15,44,72,.18);display:block;padding:3mm 3mm 0;box-sizing:border-box}
.a4-preview-row{width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3mm;align-items:start;justify-content:start}
.a4-preview-photo{min-width:0;aspect-ratio:1/1;overflow:hidden;background:#fff}
.a4-preview-photo img{width:100%;height:100%;display:block;object-fit:cover}
.a4-preview-page .a4-preview-photo{aspect-ratio:var(--photo-ratio,35/45);width:100%;align-self:start}
.a4-page-number{position:absolute;bottom:4px;right:7px;font-size:8px;color:#8b9aab}
.a4-preview-foot{background:#fff;border-top:1px solid #d6e1eb;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#5e7288}
.a4-preview-foot>div{display:flex;gap:8px}.a4-preview-foot .primary{display:flex;align-items:center;gap:6px;cursor:pointer}.a4-preview-foot .primary svg{width:15px}
#a4PrintRoot{display:none}
@media(max-width:700px){.a4-preview-layer{padding:0}.a4-preview-modal{width:100vw;height:100vh;border-radius:0}.a4-preview-scroll{padding:14px}.a4-preview-page{width:96vw;padding:0 3mm}.a4-preview-row{gap:2.5mm}.a4-preview-foot{flex-direction:column;align-items:stretch}.a4-preview-foot>div{justify-content:flex-end}}



/* A4 preview photo remove control — removes only the preview slot, never the source image */
.a4-preview-photo{position:relative}
.a4-remove-photo{
  position:absolute;right:4px;top:4px;width:24px;height:24px;border:0;border-radius:50%;
  background:#d93025;color:#fff;font-size:18px;line-height:24px;padding:0;display:grid;place-items:center;
  z-index:5;box-shadow:0 2px 7px #0003;
}
.a4-remove-photo:hover{background:#b42318;transform:scale(1.05)}
.a4-preview-foot>div{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* v6: Add extra horizontal six-photo sections inside each A4 page */
.a4-preview-sections{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:3mm;
}
.a4-add-section{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin:7mm auto 0;
  padding:0;
  border:1.5px solid #111;
  border-radius:50%;
  background:#fff;
  color:#111;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  transition:transform .15s ease,background .15s ease,color .15s ease;
}
.a4-add-section svg{width:18px;height:18px;stroke-width:2.2}
.a4-add-section:hover{background:#111;color:#fff;transform:scale(1.08)}
.a4-add-section:active{transform:scale(.96)}
.a4-preview-page .a4-page-number{z-index:2}
.a4-print-page{
  display:flex!important;
  flex-direction:column!important;
  gap:3mm!important;
}
.a4-print-row{flex:0 0 auto!important}

/* v12: polished A4 Print Preview */
.a4-preview-layer{background:rgba(7,20,36,.72);backdrop-filter:blur(5px);padding:22px}
.a4-preview-modal{width:min(1240px,96vw);height:min(95vh,960px);background:#f1f5f9;border:1px solid rgba(255,255,255,.35);border-radius:20px;box-shadow:0 30px 90px rgba(0,20,45,.42)}
.a4-preview-head{padding:15px 20px;background:linear-gradient(180deg,#fff,#f8fbfe);box-shadow:0 1px 0 #dbe5ee}
.a4-preview-head h2{font-size:19px;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
.a4-preview-head h2:before{content:'A4';display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#086be8;color:#fff;font-size:10px;font-weight:800;letter-spacing:0}
.a4-preview-head p{margin-top:5px;font-size:10px;color:#718399}
.a4-close{width:36px;height:36px;background:#edf3f8;transition:.15s}.a4-close:hover{background:#e2ebf3;transform:rotate(90deg)}
.a4-preview-scroll{padding:30px 30px 36px;gap:28px;align-items:center;background:radial-gradient(circle at 50% 0,#fff 0,#f1f5f9 55%)}
.a4-preview-page{width:min(640px,88vw);border:1px solid #d9e1e8;box-shadow:0 10px 35px rgba(21,50,77,.17),0 2px 5px rgba(21,50,77,.08);border-radius:2px;padding:3mm 3mm 0;overflow:hidden}
.a4-preview-page:after{content:'PRINT AREA';position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-size:6px;letter-spacing:1px;color:#c2ccd6;pointer-events:none}
.a4-preview-sections{gap:3mm}
.a4-preview-row{gap:3mm;position:relative}
.a4-preview-row:before{content:'6 PHOTOS';position:absolute;left:0;top:-11px;font-size:5px;letter-spacing:.8px;color:#b4c0cc;opacity:0}
.a4-preview-photo{background:#fff;border:1px solid #e1e7ec;box-shadow:0 1px 2px rgba(30,55,80,.08);transition:.15s}
.a4-preview-photo:hover{border-color:#8fb8df;box-shadow:0 4px 12px rgba(20,90,150,.16);transform:translateY(-1px)}
.a4-remove-photo{width:22px;height:22px;right:3px;top:3px;font-size:16px;line-height:22px;opacity:0;transition:.15s}
.a4-preview-photo:hover .a4-remove-photo{opacity:1}
.a4-add-section{width:38px;height:38px;margin:5mm auto 0;border:1px solid #b9c8d7;background:#fff;color:#086be8;box-shadow:0 3px 10px rgba(25,70,110,.12);transition:.15s}
.a4-add-section:hover{background:#086be8;color:#fff;border-color:#086be8;transform:translateY(-1px) scale(1.04)}
.a4-page-number{right:8px;bottom:6px;font-size:6px;color:#a8b4c0}
.a4-preview-foot{padding:12px 18px;background:#fff;box-shadow:0 -1px 0 #dce5ed}
.a4-preview-foot>span{font-size:9px;color:#718399;display:flex;align-items:center;gap:6px}
.a4-preview-foot>span:before{content:'✓';width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#e7f6ef;color:#168153;font-weight:800}
.a4-preview-foot .primary{padding:9px 14px;border-radius:8px;box-shadow:0 3px 8px rgba(8,107,232,.2)}
.a4-preview-foot .secondary{padding:9px 13px;border-radius:8px}
@media(max-width:700px){.a4-preview-scroll{padding:18px 12px 28px}.a4-preview-page{width:94vw}.a4-preview-foot{padding:11px}.a4-preview-head{padding:13px 14px}}
/* A4 Print Preview — expanded options */
.a4-preview-toolbar{display:flex;align-items:end;gap:9px;flex-wrap:wrap;padding:10px 16px;background:#f8fbfe;border-bottom:1px solid #dbe5ed}
.a4-option{display:flex;flex-direction:column;gap:4px}.a4-option label{font-size:8px;text-transform:uppercase;letter-spacing:.6px;font-weight:800;color:#718399}.a4-option select{height:32px;border:1px solid #d5e0e9;border-radius:8px;background:#fff;color:#193a5b;font-size:10px;padding:0 8px;outline:none}.a4-option select:focus{border-color:#78aee0;box-shadow:0 0 0 3px rgba(8,107,232,.08)}
.a4-check{height:32px;display:flex;align-items:center;gap:6px;padding:0 9px;border:1px solid #d5e0e9;border-radius:8px;background:#fff;font-size:10px;font-weight:700;color:#38526c}.a4-check input{accent-color:#086be8}.a4-reset{height:32px;padding:0 10px!important;display:flex;align-items:center;gap:5px}.a4-reset svg{width:13px}
.a4-preview-page{padding:var(--a4-pad,3mm) var(--a4-pad,3mm) 0}.a4-preview-sections{display:flex;flex-direction:column;gap:var(--section-gap,4mm)}.a4-preview-row{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:var(--gap,4mm)}
.a4-preview-photo.border-clean,.a4-print-photo.border-clean{border:1px solid #e1e7ec}.a4-preview-photo.border-thin,.a4-print-photo.border-thin{border:1px solid #b9c6d2}.a4-preview-photo.border-cut,.a4-print-photo.border-cut{border:1px dashed #8fa3b5}.a4-preview-photo.border-none,.a4-print-photo.border-none{border:0}.a4-preview-page.paper-soft{background:#fafcff}.a4-layout-label{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font-size:6px;color:#9aa9b7;letter-spacing:.7px;text-transform:uppercase}.a4-preview-photo{position:relative}.a4-remove-photo{position:absolute;right:4px;top:4px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(15,34,52,.75);color:#fff;font-size:15px;line-height:20px;opacity:0;transition:.15s}.a4-preview-photo:hover .a4-remove-photo{opacity:1}.a4-add-section{margin:10px auto 0;display:flex;align-items:center;gap:5px;border:1px dashed #aac1d6;background:#f7fbff;color:#34709e;border-radius:8px;padding:6px 10px;font-size:9px;font-weight:800}.a4-add-section svg{width:13px}.a4-add-section:hover{background:#edf6ff;border-color:#78aee0}
.a4-print-page{padding:var(--a4-pad,3mm)!important;background:#fff!important}.a4-print-page.paper-soft{background:#fbfcfe!important}.a4-print-row{display:grid!important;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr))!important;gap:var(--gap,4mm)!important;margin-bottom:var(--gap,4mm)}.a4-print-photo{overflow:hidden;background:#fff}.a4-print-photo img{width:100%!important;height:auto!important;aspect-ratio:var(--photo-ratio,35/45)!important;object-fit:cover!important;display:block!important}.a4-print-label{text-align:center;font:700 6px Inter,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;margin-top:2mm;color:#98a7b5}
@media(max-width:850px){.a4-preview-toolbar{gap:6px}.a4-option select{max-width:130px}.a4-preview-modal{width:98vw}.a4-preview-page{width:min(680px,92vw)}}

/* v15: clearer Add Section icon + live option feedback */
.a4-add-section{position:relative;width:42px;height:42px;margin:5mm auto 0;padding:0;border:1px solid #b8cbe0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#086be8;box-shadow:0 4px 12px rgba(22,72,112,.14);font-size:0}
.a4-add-section i,.a4-add-section svg{width:19px;height:19px;stroke-width:2.5}
.a4-add-section span{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap;font-size:8px;font-weight:800;color:#53708a;opacity:.9;pointer-events:none}
.a4-add-section:hover{background:#086be8;color:#fff;border-color:#086be8;box-shadow:0 6px 16px rgba(8,107,232,.25);transform:translateY(-1px) scale(1.06)}
.a4-add-section:hover span{color:#086be8}
.a4-add-section:active{transform:scale(.96)}
.a4-preview-toolbar select,.a4-check{transition:border-color .15s,box-shadow .15s,transform .1s}
.a4-preview-toolbar select:active{transform:scale(.98)}
.a4-remove-photo i,.a4-remove-photo svg{width:12px;height:12px;stroke-width:2.5}

/* v16: responsive layout across desktop, tablet and mobile */
@media (max-width:1100px){
  .header-inner{padding:0 18px;gap:18px}.logo{min-width:210px}.nav{gap:16px}
  .hero{padding-left:22px;padding-right:22px;grid-template-columns:1fr 1fr}.hero h1{font-size:40px}
  .upload-layout{padding-left:22px;padding-right:22px;grid-template-columns:1fr 230px}.trust{padding-left:22px;padding-right:22px}.how,.result-page{padding-left:22px;padding-right:22px}
  .result-grid{grid-template-columns:1fr 1fr}.result-grid .other{grid-column:1/-1}.country-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:850px){
  .header{height:64px}.header-inner{padding:0 14px}.logo{min-width:0}.logo-copy b{font-size:18px}.logo-copy small{font-size:8px}.nav{display:none}.mobile-btn{display:grid}.header-right{margin-left:auto}.all-btn{padding:8px 11px}
  .hero{min-height:auto;padding:24px 16px 8px;grid-template-columns:1fr}.hero h1{font-size:36px}.hero-art{height:280px;margin-top:5px}
  .upload-layout{padding:8px 16px;grid-template-columns:1fr}.countries-mini{display:none}.dropzone{min-height:205px}
  .trust{padding:5px 16px 10px;grid-template-columns:1fr}.how,.result-page{padding-left:16px;padding-right:16px}.steps{grid-template-columns:1fr 1fr}
  .result-grid{grid-template-columns:1fr}.result-grid .other{grid-column:auto}.country-grid{grid-template-columns:repeat(4,1fr)}
  .a4-preview-layer{padding:0;overflow:hidden}.a4-preview-modal{width:100vw;height:100dvh;max-height:none;border-radius:0;display:flex;flex-direction:column}.a4-preview-head{flex:0 0 auto;padding:12px 14px}.a4-preview-head h2{font-size:16px}.a4-preview-head p{font-size:9px}
  .a4-preview-toolbar{flex:0 0 auto;padding:9px 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:31vh;overflow:auto}.a4-option{min-width:0}.a4-option select{width:100%;max-width:none}.a4-check{width:100%;justify-content:center}.a4-reset{width:100%;justify-content:center}
  .a4-preview-scroll{flex:1 1 auto;min-height:0;padding:20px 10px 28px;gap:20px;overflow:auto;align-items:center}.a4-preview-page{width:min(96vw,640px);max-width:96vw}.a4-preview-foot{flex:0 0 auto;padding:10px;display:flex;gap:8px;flex-direction:column}.a4-preview-foot>span{justify-content:center}.a4-preview-foot>div{width:100%;display:grid;grid-template-columns:1fr 1.4fr;gap:7px}.a4-preview-foot button{width:100%}
}
@media (max-width:520px){
  .logo-mark{width:36px;height:36px}.logo-copy b{font-size:16px}.logo-copy small{display:none}.circle-btn{display:none}.all-btn{font-size:10px}
  .hero h1{font-size:30px;letter-spacing:-1.4px}.hero p{font-size:14px}.features{font-size:12px}.hero-art{height:245px;transform:scale(.88);transform-origin:center}
  .steps{grid-template-columns:1fr}.country-grid{grid-template-columns:repeat(3,1fr)}
  .a4-preview-toolbar{grid-template-columns:1fr 1fr}.a4-option label{font-size:7px}.a4-option select,.a4-check,.a4-reset{height:34px;font-size:9px}.a4-preview-scroll{padding-left:7px;padding-right:7px}.a4-preview-page{width:97vw}.a4-add-section{width:38px;height:38px}.a4-add-section span{font-size:7px}
}
@media (max-width:360px){
  .a4-preview-toolbar{grid-template-columns:1fr}.a4-preview-foot>div{grid-template-columns:1fr}.a4-preview-head h2{font-size:15px}.a4-preview-page{width:98vw}
}

/* Country icon polish */
.country-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eef6ff;font-size:20px;line-height:1;flex:none}.countries-mini .country-icon{width:25px;height:25px;font-size:17px}.country-item .country-icon{margin:0 auto 2px}.size-card .country-icon{width:42px;height:42px;font-size:29px}.country-item,.size-card{transition:transform .15s,box-shadow .15s,border-color .15s}.country-item:hover,.size-card:hover{transform:translateY(-2px)}

/* Dark mode contrast & control visibility fixes */
body.dark .circle-btn{color:#f4f8ff;background:#1a3048;border:1px solid #36526d;border-radius:50%}
body.dark .circle-btn svg{stroke:#f4f8ff!important;visibility:visible!important;opacity:1!important}
body.dark .all-btn{color:#fff}
body.dark .pill{background:#193552;color:#9dceff}
body.dark .dropzone{background:#122238;color:#eef6ff;border-color:#4d9eff}
body.dark .dropzone:hover{background:#17304a}
body.dark .dropzone>span,body.dark .dropzone>small,body.dark .countries-mini div span,body.dark .copyright{color:#aebfd2}
body.dark .choose{color:#fff}
body.dark .trust>div{background:#17304a;color:#eef6ff}
body.dark .trust small{color:#aebfd2}
body.dark .how h2,body.dark .how b,body.dark .how small{color:#eef6ff}
body.dark .steps>div{background:#122238}
body.dark .result-preview,body.dark .format,body.dark .prints{background:#122238;color:#eef6ff}
body.dark .tabs button{background:#1a3048;color:#cfe0f2}
body.dark .tabs button.active{background:#086be8;color:#fff}
body.dark .format>span,body.dark .prints>b,body.dark .ready p{color:#b5c7da}
body.dark .format strong{color:#6fb6ff}
body.dark .download.primary{color:#fff}
body.dark .other-title{color:#eef6ff}
body.dark .other-title svg{color:#75baff;stroke:#75baff}
body.dark .country-item strong,body.dark .country-item small{color:#eef6ff}
body.dark .country-item small{color:#afc2d6}
body.dark .country-grid .country-item:hover{background:#1c3853}
body.dark .zip{background:#18314a;color:#eaf4ff;border-color:#34546f}
body.dark .zip small{color:#adc1d5}
body.dark .page-title h1,body.dark .page-title p{color:#eef6ff}
body.dark .page-title p{color:#b6c9dc}
body.dark .size-card strong{color:#eef6ff}
body.dark .size-card small{color:#adc1d5}
body.dark .a4-preview-head,body.dark .a4-preview-foot{background:#122238;color:#eaf3ff;border-color:#294159}
body.dark .a4-preview-head h2{color:#eef6ff}
body.dark .a4-preview-head p,body.dark .a4-preview-foot,body.dark .a4-preview-foot>span{color:#aebfd2}
body.dark .a4-close{background:#1a3048;color:#eef6ff}
body.dark .a4-option label{color:#aebfd2}
body.dark .a4-option select,body.dark .a4-check{background:#172c43;color:#eaf3ff;border-color:#36536d}
body.dark .a4-option select option{background:#172c43;color:#eef3fa}
body.dark .a4-reset{background:#172c43!important;color:#dbe9f7!important;border-color:#36536d!important}
body.dark .a4-add-section{background:#172d44;color:#78baff;border-color:#46647e}
body.dark .a4-add-section span{color:#b9cce0}
body.dark .a4-add-section:hover{background:#086be8;color:#fff}
body.dark .a4-page-number,body.dark .a4-layout-label{color:#8ea4b9}
body.dark .modal-layer .modal{color:#eef6ff}
body.dark .modal h2,body.dark .modal h3,body.dark .modal b,body.dark .modal strong{color:#eef6ff}
body.dark .modal p,body.dark .modal small,body.dark .modal label{color:#b9cadd}
body.dark .modal-close{background:#1a3048;color:#eef6ff;border-color:#36536d}
body.dark .option{background:#172d44;color:#eef6ff;border-color:#36536d}
body.dark .option.active{background:#183b5d;border-color:#4c9fff}
body.dark .secondary{color:#dbe9f7!important}
body.dark input,body.dark textarea{background:#172d44;color:#eef6ff;border-color:#36536d}
@media(max-width:600px){body.dark .circle-btn{display:grid}.circle-btn svg{width:18px;height:18px}}

.flag svg{display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden}.flag-static{background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(15,23,42,.12)}
.flag-usa{background:linear-gradient(to bottom,#d32f2f 0 7.14%,#fff 7.14% 14.28%,#d32f2f 14.28% 21.42%,#fff 21.42% 28.56%,#d32f2f 28.56% 35.7%,#fff 35.7% 42.84%,#d32f2f 42.84% 49.98%,#fff 49.98% 57.12%,#d32f2f 57.12% 64.26%,#fff 64.26% 71.4%,#d32f2f 71.4% 78.54%,#fff 78.54% 85.68%,#d32f2f 85.68% 92.82%,#fff 92.82% 100%);position:relative}.flag-usa:before{content:"";position:absolute;left:0;top:0;width:48%;height:54%;background:#1d4ed8;border-radius:inherit}.flag-india{background:linear-gradient(#ff9933 0 33.33%,#fff 33.33% 66.66%,#138808 66.66%)}.flag-japan{background:radial-gradient(circle at center,#bc002d 0 25%,transparent 26%),#fff}.flag-aus{background:#0b3d91}.flag-bd{background:radial-gradient(circle at 45% 50%,#f42a41 0 25%,transparent 26%),#006a4e}.flag-indonesia{background:linear-gradient(#e31b23 0 50%,#fff 50%)}.flag-china{background:#de2910;position:relative}.flag-china:before{content:"★";position:absolute;left:18%;top:10%;font-size:10px;color:#ffde00}

/* v28: true light-mode text contrast */
body:not(.dark){color:#111827;background:#fff}
body:not(.dark) .header{background:#fff;color:#111827;border-bottom-color:#e5e7eb}
body:not(.dark) .nav>a,body:not(.dark) .nav-drop,body:not(.dark) .circle-btn{color:#111827}
body:not(.dark) .logo-copy b,body:not(.dark) .hero h1,body:not(.dark) .hero p,
body:not(.dark) .features,body:not(.dark) .features li,body:not(.dark) .countries-mini,
body:not(.dark) .countries-mini h3,body:not(.dark) .countries-mini div,
body:not(.dark) .how h2,body:not(.dark) .steps b,body:not(.dark) .ready h2,
body:not(.dark) .format,body:not(.dark) .prints,body:not(.dark) .other,
body:not(.dark) .other h3,body:not(.dark) .page-title h1,body:not(.dark) .size-card strong,
body:not(.dark) .a4-preview-head h2{color:#111827}
body:not(.dark) .logo-copy small,body:not(.dark) .countries-mini div span,
body:not(.dark) .steps small,body:not(.dark) .format>span,body:not(.dark) .prints>b,
body:not(.dark) .ready p,body:not(.dark) .page-title p,body:not(.dark) .size-card small,
body:not(.dark) .copyright,body:not(.dark) .a4-preview-head p,body:not(.dark) .a4-preview-foot>span{color:#4b5563}
body:not(.dark) .menu{background:#fff;color:#111827;border-color:#dbe3eb}
body:not(.dark) .menu span{color:#111827}
body:not(.dark) .dropzone{color:#111827;background:#fff}
body:not(.dark) .dropzone span,body:not(.dark) .dropzone small{color:#4b5563}
body:not(.dark) .countries-mini,body:not(.dark) .card,body:not(.dark) .steps>div,
body:not(.dark) .country-item,body:not(.dark) .size-card{background:#fff;color:#111827}
body:not(.dark) .trust>div{background:#eef6ff;color:#111827}
body:not(.dark) .a4-preview-modal,body:not(.dark) .a4-preview-toolbar,
body:not(.dark) .a4-preview-head,body:not(.dark) .a4-preview-foot{color:#111827}
body:not(.dark) .a4-option label{color:#4b5563}
body:not(.dark) .a4-option select,body:not(.dark) .a4-check{background:#fff;color:#111827;border-color:#cfd8e3}
body:not(.dark) .a4-option select option{background:#fff;color:#111827}
body:not(.dark) .a4-reset{background:#fff!important;color:#111827!important;border-color:#cfd8e3!important}
body:not(.dark) .a4-add-section{background:#fff;color:#086be8;border-color:#b8cbe0}
body:not(.dark) .a4-add-section span{color:#4b6b86}
body:not(.dark) .a4-page-number,body:not(.dark) .a4-layout-label{color:#64748b}
body:not(.dark) .other-title{color:#111827}
body:not(.dark) input,body:not(.dark) textarea{background:#fff;color:#111827;border-color:#cfd8e3}
body:not(.dark) .option{background:#fff;color:#111827;border-color:#d6e0ea}
body:not(.dark) .secondary{color:#374151!important}
.auto-cutout-note{display:flex!important;align-items:center;justify-content:center;gap:7px;margin-top:4px;color:#2563eb!important;font-weight:700!important}
.auto-cutout-note svg{width:15px;height:15px;stroke-width:2.4}

#removeBgBtn{cursor:pointer;}
#removeBgBtn:disabled{opacity:.6;cursor:wait;}

/* v35 */
#removeBgBtn{cursor:pointer;}#removeBgBtn:disabled{opacity:.6;cursor:wait;}

/* v36: secondary 6-photo box removed from Preview */
.sheet-box{display:none!important;}

/* Country selection: keep the clicked country visibly active. */
.country-item.active{border-color:#086be8!important;background:#edf6ff!important;color:#0755bc;box-shadow:0 0 0 2px #086be826,0 6px 18px #2465a51a;}
.country-item.active .country-icon{background:#dbeeff;}
.size-card.active{border-color:#086be8!important;background:#edf6ff!important;box-shadow:0 0 0 2px #086be826,0 6px 18px #2465a51a;}
.size-card.active .country-icon{background:#dbeeff;}
body.dark .country-item.active,body.dark .size-card.active{background:#183b5d!important;border-color:#4c9fff!important;color:#eef6ff;}
body.dark .country-item.active .country-icon,body.dark .size-card.active .country-icon{background:#214b70;}
.sheet-photo-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;padding:10px;box-sizing:border-box}
.sheet-photo-grid .sheet-real-photo{min-width:0;min-height:0;width:100%;height:100%;border-radius:8px;background-color:#fff;overflow:hidden}
.sheet-photo-grid .sheet-real-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* Photo Sheet: exactly 6 photos in one horizontal row */
#sheetPhotoGrid.sheet-photo-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:1fr!important;gap:8px!important;padding:8px!important;align-items:stretch!important;}
#sheetPhotoGrid.sheet-photo-grid .sheet-real-photo{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;}
#sheetPhotoGrid.sheet-photo-grid .sheet-real-photo img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}


/* ===== Responsive footer enhancement ===== */
footer,
.site-footer,
.footer {
  width: 100%;
  box-sizing: border-box;
}

footer *,
.site-footer *,
.footer * {
  box-sizing: border-box;
}

footer img,
.site-footer img,
.footer img {
  max-width: 100%;
  height: auto;
}

footer .container,
.site-footer .container,
.footer .container {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

footer .footer-grid,
.site-footer .footer-grid,
.footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

footer .footer-links,
.site-footer .footer-links,
.footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

footer a,
.site-footer a,
.footer a {
  overflow-wrap: anywhere;
}

footer .footer-bottom,
.site-footer .footer-bottom,
.footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  footer .footer-grid,
  .site-footer .footer-grid,
  .footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 600px) {
  footer .container,
  .site-footer .container,
  .footer .container {
    width: min(100% - 24px, 1200px);
  }

  footer .footer-grid,
  .site-footer .footer-grid,
  .footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  footer .footer-links,
  .site-footer .footer-links,
  .footer .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  footer .footer-bottom,
  .site-footer .footer-bottom,
  .footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ===== Modern Footer Redesign ===== */
.modern-footer {
  margin-top: 56px;
  background: #111827;
  color: #d1d5db;
  border-top: 1px solid #273244;
  font-family: inherit;
}
.modern-footer__inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 40px;
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(140px, 1fr));
  gap: 42px;
}
.modern-footer__brand {
  max-width: 360px;
}
.modern-footer__logo {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin-bottom: 14px;
}
.modern-footer__brand p {
  margin: 0;
  line-height: 1.7;
  font-size: 14px;
  color: #9ca3af;
}
.modern-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.modern-footer__column h3 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.modern-footer__column a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color .2s ease, transform .2s ease;
}
.modern-footer__column a:hover {
  color: #fff;
  transform: translateX(2px);
}
.modern-footer__bottom {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 22px;
  border-top: 1px solid #273244;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: #6b7280;
  font-size: 12px;
}
@media (max-width: 800px) {
  .modern-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 28px;
  }
  .modern-footer__brand {
    grid-column: 1 / -1;
    max-width: 600px;
  }
}
@media (max-width: 520px) {
  .modern-footer {
    margin-top: 40px;
  }
  .modern-footer__inner {
    width: min(100% - 28px, 1180px);
    padding: 36px 0 30px;
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }
  .modern-footer__brand {
    grid-column: 1 / -1;
  }
  .modern-footer__bottom {
    width: min(100% - 28px, 1180px);
    padding: 16px 0 20px;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 360px) {
  .modern-footer__inner {
    grid-template-columns: 1fr;
  }
}


/* ===== PhotoFit-inspired clean footer ===== */
.photo-style-footer {
  position: relative;
  width: 100%;
  margin-top: 64px;
  padding: 44px 20px 22px;
  background:
    radial-gradient(circle at 8% 100%, rgba(224, 235, 255, .72), transparent 25%),
    radial-gradient(circle at 92% 0%, rgba(235, 230, 255, .65), transparent 24%),
    #fff;
  border-top: 1px solid #edf2f8;
  color: #111a3a;
  overflow: hidden;
  box-sizing: border-box;
}
.photo-style-footer::before,
.photo-style-footer::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.photo-style-footer::before {
  width: 180px;
  height: 180px;
  left: -105px;
  bottom: -125px;
  background: #edf4ff;
}
.photo-style-footer::after {
  width: 150px;
  height: 150px;
  right: -85px;
  top: -100px;
  background: #f1edff;
}
.photo-style-footer__inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.photo-style-footer__brand {
  min-width: 0;
}
.photo-style-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #101936;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.35px;
}
.photo-style-footer__logo-mark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #147cff, #7440ef);
  box-shadow: 0 7px 18px rgba(53, 101, 240, .22);
  font-size: 20px;
}
.photo-style-footer__brand p {
  margin: 8px 0 0 44px;
  color: #71809d;
  font-size: 13px;
  line-height: 1.5;
}
.photo-style-footer__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 30px;
}
.photo-style-footer__links a {
  color: #17213f;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color .2s ease, transform .2s ease;
}
.photo-style-footer__links a:hover {
  color: #1677f5;
  transform: translateY(-1px);
}
.photo-style-footer__line {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  height: 1px;
  margin: 30px auto 0;
  background: #e8edf5;
}
.photo-style-footer__trust {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  margin: 23px auto 0;
  color: #8a98b2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .7px;
}
.photo-style-footer__trust i {
  font-style: normal;
  color: #bdc6d5;
}
.photo-style-footer__trust b {
  margin-left: 3px;
  color: #aebbd0;
  font-size: 15px;
}
.photo-style-footer__bottom {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 17px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #a0abc0;
  font-size: 11px;
}
@media (max-width: 720px) {
  .photo-style-footer {
    margin-top: 42px;
    padding: 36px 18px 20px;
  }
  .photo-style-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
  }
  .photo-style-footer__brand p {
    margin-left: 0;
  }
  .photo-style-footer__links {
    justify-content: center;
    gap: 12px 22px;
  }
  .photo-style-footer__line {
    margin-top: 26px;
  }
}
@media (max-width: 420px) {
  .photo-style-footer {
    padding-left: 14px;
    padding-right: 14px;
  }
  .photo-style-footer__links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: min(260px, 100%);
    gap: 12px 20px;
  }
  .photo-style-footer__links a {
    text-align: center;
  }
  .photo-style-footer__trust {
    gap: 8px;
    font-size: 10px;
    letter-spacing: .4px;
  }
  .photo-style-footer__bottom {
    flex-direction: column;
    gap: 3px;
  }
}


/* Footer brand/logo */
.photo-style-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.photo-style-footer__logo-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #087cff 0%, #7440ef 100%);
  box-shadow: 0 8px 20px rgba(53, 101, 240, .22);
}
.photo-style-footer__logo-mark svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.4;
}
.photo-style-footer__logo-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.photo-style-footer__logo-copy b {
  color: #111827;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -1px;
}
.photo-style-footer__logo-copy b span {
  color: #086be8;
}
.photo-style-footer__logo-copy small {
  margin-top: 5px;
  color: #53657a;
  font-size: 10px;
  letter-spacing: .02em;
  font-weight: 500;
}
.photo-style-footer__brand p {
  margin-left: 53px;
}
@media (max-width: 720px) {
  .photo-style-footer__brand p {
    margin-left: 0;
  }
}

/* ===== Country Live Update social footer ===== */
.country-footer{width:100%;background:#fff;color:#111a3a;border-top:1px solid #edf2f8;margin-top:20px}
.country-footer__inner{max-width:1450px;margin:auto;padding:34px 35px 28px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.country-footer__brand{min-width:0}
.country-footer__logo{display:inline-flex;align-items:center;gap:12px;color:#101936}
.country-footer__logo-mark{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#087cff 0%,#7440ef 100%);display:grid;place-items:center;box-shadow:0 8px 20px rgba(53,101,240,.22)}
.country-footer__logo-mark svg{width:27px;height:27px;color:#fff}
.country-footer__logo-copy b{display:block;font-size:21px;line-height:1.05;letter-spacing:-.7px}
.country-footer__logo-copy b span{color:#43a9ff}
.country-footer__logo-copy small{display:block;color:#53657a;font-size:10px;margin-top:5px}
.country-footer__brand p{margin:12px 0 0;color:#64748b;font-size:11px;line-height:1.5}
.country-footer__social{flex:0 0 auto}
.country-footer__social h4{margin:0 0 12px;font-size:11px;text-align:right;color:#53657a;font-weight:700}
.country-footer .social{display:flex!important;gap:10px!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:wrap!important}
.country-footer .social-btn{width:38px!important;height:38px!important;flex:0 0 38px!important;border:1px solid #e2e8f0!important;border-radius:50%!important;background:#fff!important;color:#334155!important;box-shadow:0 5px 16px rgba(15,23,42,.08)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;transition:transform .18s,background .18s,border-color .18s!important}
.country-footer .social-btn i{font-family:"Font Awesome 6 Brands"!important;font-size:17px!important;font-style:normal!important;font-weight:400!important;line-height:1!important}
.country-footer .social-btn.facebook i{color:#1877f2!important}.country-footer .social-btn.twitter i{color:#111827!important}.country-footer .social-btn.instagram i{color:#d62976!important}.country-footer .social-btn.youtube i{color:#ff0000!important}.country-footer .social-btn.linkedin i{color:#0a66c2!important}
.country-footer .social-btn:hover{transform:translateY(-3px);background:#f8fafc!important;border-color:#cbd5e1!important}
.country-footer__line{height:1px;background:#e8edf5;max-width:1380px;margin:0 auto}
.country-footer__bottom{max-width:1450px;margin:auto;padding:18px 35px 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#94a3b8;font-size:10px}
.country-footer__bottom b{color:#ff5c68;font-size:13px}
@media(max-width:700px){
  .country-footer__inner{padding:28px 20px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
  .country-footer__social{width:100%}
  .country-footer__social h4{text-align:left}
  .country-footer .social{justify-content:flex-start!important}
  .country-footer__bottom{padding:16px 20px 20px;flex-direction:column;gap:7px}
}
@media(max-width:380px){.country-footer__logo-copy b{font-size:18px}.country-footer__logo-mark{width:43px;height:43px}.country-footer .social-btn{width:35px!important;height:35px!important;flex-basis:35px!important}}

/* ===== Final responsive polish ===== */
html{overflow-x:hidden}
body{overflow-x:hidden}
main,.page{width:100%;min-width:0}
.hero,.upload-layout,.trust,.how,.result-page,.sizes-page{width:100%;min-width:0}
.hero-text,.hero-art,.dropzone,.countries-mini,.trust>div,.steps>div,.result-grid>* ,.country-item,.size-card,.modal,.modal-grid>*{min-width:0}
.hero h1,.hero p,.features li,.dropzone strong,.dropzone span,.dropzone small,.trust span,.steps b,.steps small,.ready h2,.ready p,.format strong,.format>span,.prints>b,.country-item b,.country-item small,.size-card b,.size-card small,.page-title h1,.page-title p{overflow-wrap:anywhere}

/* Prevent card content from stretching or overflowing */
.result-grid{align-items:stretch}
.result-grid>.card{width:100%;min-width:0}
.result-preview{min-width:0;overflow:hidden}
.preview-box{width:100%;max-width:100%;min-width:0}
.preview-box img{width:auto;max-width:100%;height:auto}
.result-actions{width:100%;min-width:0}
.result-actions button,.print-buttons button{min-width:0;white-space:normal;line-height:1.25}
.format,.prints{min-width:0;overflow:hidden}
.download{max-width:100%;white-space:normal}
.country-grid{width:100%;min-width:0}
.country-item{min-width:0;overflow:hidden}
.country-item small{display:block;line-height:1.3}
.sizes-grid{width:100%;min-width:0}
.size-card{min-width:0}
.size-card>span:last-child{min-width:0}

/* Better desktop proportions */
@media (min-width:1201px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr)}
  .upload-layout{grid-template-columns:minmax(0,1fr) 270px}
  .result-grid{grid-template-columns:minmax(0,1.2fr) minmax(210px,.75fr) minmax(210px,.75fr)}
}

/* Tablet */
@media (max-width:1100px){
  .header-inner{gap:16px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);padding-left:22px;padding-right:22px}
  .hero h1{font-size:42px}
  .hero-art{height:300px;overflow:hidden}
  .upload-layout{grid-template-columns:minmax(0,1fr) 230px;padding-left:22px;padding-right:22px}
  .trust{padding-left:22px;padding-right:22px}
  .how,.result-page,.sizes-page{padding-left:22px;padding-right:22px}
  .result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-preview{grid-column:1/-1}
  .format strong{font-size:23px}
  .country-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Mobile/tablet header */
@media (max-width:850px){
  .header{height:64px}
  .header-inner{padding:0 14px;gap:10px}
  .logo{min-width:0;flex:1 1 auto}
  .logo-copy{min-width:0}
  .logo-copy b{font-size:18px;white-space:nowrap}
  .logo-copy small{font-size:8px;white-space:nowrap}
  .header-right{gap:7px;flex:0 0 auto}
  .all-btn{padding:9px 11px;white-space:nowrap}

  .hero{grid-template-columns:1fr;min-height:0;padding:28px 16px 6px}
  .hero-text{width:100%;text-align:left}
  .hero h1{font-size:38px;line-height:1.04;margin:14px 0 12px}
  .hero p{font-size:14px;max-width:650px}
  .features{font-size:12px;gap:7px}
  .features li{align-items:flex-start}
  .features svg{flex:0 0 18px;margin-top:1px}
  .hero-art{width:100%;height:275px;margin:8px 0 0;transform:none;overflow:hidden}
  .pile-main{left:50%;transform:translateX(-50%) rotate(-4deg)}
  .pile-left{left:27%;}
  .pile-right{right:27%;}
  .note{right:5%;}

  .upload-layout{grid-template-columns:1fr;padding:8px 16px}
  .countries-mini{display:none}
  .dropzone{min-height:215px;padding:20px 14px}
  .dropzone strong{font-size:17px;max-width:100%}
  .dropzone span{font-size:12px}
  .choose{padding:11px 28px}
  .dropzone>small{max-width:100%;line-height:1.35}
  .auto-cutout-note{padding:0 10px}

  .trust{grid-template-columns:1fr;padding:6px 16px 12px;gap:8px}
  .trust>div{padding:12px 16px}
  .how,.result-page,.sizes-page{padding-left:16px;padding-right:16px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .steps>div{min-height:132px;padding:14px 10px}

  .result-grid{grid-template-columns:1fr;gap:10px}
  .result-preview{grid-column:auto}
  .preview-box{height:min(58vw,300px)}
  .result-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
  .format,.prints{padding:18px 14px}
  .download{width:min(320px,100%)}
  .other{overflow:hidden}
  .country-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .country-item{padding:8px 4px}
  .country-item b{font-size:10px}
  .country-item small{font-size:8px}
  .sizes-page{padding-top:32px;padding-bottom:50px}
  .sizes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .size-card{padding:14px 12px}
  .page-title h1{font-size:32px;line-height:1.1}
}

/* Phones */
@media (max-width:600px){
  .header-inner{padding:0 11px}
  .logo-mark{width:37px;height:37px;flex:0 0 37px}
  .logo-mark svg{width:23px}
  .logo-copy b{font-size:16px;letter-spacing:-.6px}
  .logo-copy small{display:none}
  .circle-btn{display:none}
  .all-btn{font-size:0;padding:9px;width:36px;height:36px;justify-content:center}
  .all-btn svg{width:17px;height:17px}
  .mobile-btn{width:36px;height:36px}

  .hero{padding:22px 14px 4px}
  .pill{font-size:9px;padding:7px 14px}
  .hero h1{font-size:31px;letter-spacing:-1.4px;margin:12px 0 10px}
  .hero p{font-size:13px;line-height:1.55;margin-bottom:13px}
  .features{font-size:11px;gap:6px}
  .features li{gap:7px}
  .features svg{width:17px;height:17px}
  .hero-art{height:235px;margin-top:8px}
  .photo{width:120px;height:165px;padding:5px}
  .pile-main{width:142px;height:190px;top:24px}
  .pile-left{top:57px;left:18%}
  .pile-right{top:60px;right:18%}
  
  
  .o1{width:82px;height:82px;left:25%;top:18px}
  .o2{width:120px;height:120px;right:10%;bottom:0}
  .note{font-size:11px;right:1%;top:1px}
  .note svg{width:36px;margin-left:25px}

  .upload-layout{padding:8px 14px}
  .dropzone{min-height:205px;border-radius:12px;padding:18px 10px}
  .upload-svg{width:46px;height:46px}
  .dropzone strong{font-size:15px}
  .dropzone span{font-size:11px}
  .choose{font-size:12px;padding:10px 22px}
  .dropzone>small{font-size:9px}
  .auto-cutout-note{font-size:9px!important;gap:5px!important}

  .trust{padding:5px 14px 10px}
  .trust>div{padding:11px 13px;gap:10px;border-radius:10px}
  .trust svg{width:23px}
  .trust b{font-size:11px}
  .trust small{font-size:9px}
  .how,.result-page,.sizes-page{padding-left:14px;padding-right:14px}
  .how h2{font-size:18px;margin:10px 0 15px}
  .steps{grid-template-columns:1fr 1fr;gap:8px}
  .steps>div{min-height:126px;padding:13px 8px}
  .steps b{font-size:11px}
  .steps small{font-size:9px}

  .result-page{padding-top:12px;padding-bottom:24px}
  .ready{justify-content:flex-start;gap:9px;margin-bottom:13px}
  .ready>span{width:36px;height:36px;flex:0 0 36px}
  .ready svg{width:21px}
  .ready h2{font-size:17px}
  .ready p{font-size:9px;line-height:1.4}
  .result-preview{padding:8px}
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;padding:7px 11px}
  .preview-box{height:250px}
  .result-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .result-actions button{padding:8px 5px;font-size:9px}
  .format,.prints{padding:16px 12px}
  .format strong{font-size:22px;margin-top:13px}
  .download{margin-top:15px}
  .mini-sheet{height:58px}
  .sheet-box{height:92px!important}
  .other{padding:12px 8px}
  .other h3{font-size:14px}
  .country-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .country-item{padding:7px 3px}
  .country-item .flag{font-size:20px}
  .country-item b{font-size:9px}
  .country-item small{font-size:7px}
  .zip{width:calc(100% - 12px);margin:8px 6px 0}
  .sizes-page{padding-top:28px}
  .page-title h1{font-size:27px}
  .page-title p{font-size:11px;line-height:1.5}
  .sizes-grid{grid-template-columns:1fr;gap:8px;margin-top:20px}
  .size-card{padding:12px}
  .size-card .country-icon{width:38px;height:38px;font-size:26px}
  .size-card b{font-size:12px}
  .size-card small{font-size:9px}

  .modal-layer{padding:10px}
  .modal{width:100%;max-height:92vh;border-radius:14px;padding:20px 16px}
  .modal h2{font-size:18px}
  .modal p{font-size:11px}
  .modal-grid{grid-template-columns:1fr}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions button{width:100%}

  .country-footer__inner{padding:26px 16px 22px;gap:20px}
  .country-footer__logo{max-width:100%}
  .country-footer__logo-copy{min-width:0}
  .country-footer__logo-copy b{font-size:18px;white-space:normal}
  .country-footer__logo-copy small{font-size:9px;line-height:1.35}
  .country-footer__brand p{font-size:10px;line-height:1.5}
  .country-footer__social h4{text-align:left}
  .country-footer .social{gap:8px!important;justify-content:flex-start!important}
  .country-footer .social-btn{width:35px!important;height:35px!important;flex-basis:35px!important}
  .country-footer__bottom{padding:15px 16px 18px;font-size:9px;line-height:1.45}
}

@media (max-width:380px){
  .logo-copy b{font-size:15px}
  .hero h1{font-size:28px}
  .hero-art{height:215px}
  .photo{width:105px;height:145px}
  .pile-main{width:125px;height:167px}
  .pile-left{left:14%;top:55px}
  .pile-right{right:14%;top:57px}
  .note{display:none}
  .steps{grid-template-columns:1fr}
  .country-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-actions{grid-template-columns:1fr 1fr}
  .preview-box{height:220px}
  .country-footer__logo-copy b{font-size:17px}
  .country-footer__social .social{flex-wrap:wrap!important}
}


/* Mobile navigation menu */
.mobile-nav-menu{display:grid;gap:9px;margin:-4px -2px 0}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 9px;border-bottom:1px solid #e2ebf4}
.mobile-nav-kicker{display:block;font-size:8px;font-weight:800;letter-spacing:1.3px;color:#086be8;margin-bottom:3px}
.mobile-nav-head h2{margin:0;font-size:24px;letter-spacing:-.5px}
.mobile-nav-dot{width:38px;height:38px;border-radius:12px;background:#edf6ff;color:#086be8;display:grid;place-items:center}
.mobile-nav-dot svg{width:19px}
.mobile-nav-link,.mobile-nav-sub{width:100%;border:1px solid #dce7f1;background:#fff;color:#11244b;border-radius:12px;display:flex;align-items:center;text-align:left;gap:11px;min-width:0;transition:.15s ease}
.mobile-nav-link{padding:12px}
.mobile-nav-sub{padding:10px 11px}
.mobile-nav-link:hover,.mobile-nav-sub:hover{border-color:#9fc7f3;background:#f6fbff;transform:translateY(-1px)}
.mobile-nav-link>span:nth-child(2),.mobile-nav-sub>span:nth-child(2){min-width:0;flex:1}
.mobile-nav-link b,.mobile-nav-sub b{display:block;font-size:12px;line-height:1.2}
.mobile-nav-link small,.mobile-nav-sub small{display:block;font-size:9px;color:#61748d;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-nav-link>svg,.mobile-nav-sub>svg{width:15px;flex:0 0 auto;color:#8aa0b7}
.mobile-nav-icon,.mobile-nav-sub-icon{display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:#edf6ff;color:#086be8}
.mobile-nav-icon{width:36px;height:36px}
.mobile-nav-sub-icon{width:32px;height:32px;font-size:17px}
.mobile-nav-icon svg{width:18px}.mobile-nav-sub-icon svg{width:16px}
.mobile-nav-section{border:1px solid #dce7f1;border-radius:13px;background:#f8fbfe;padding:9px}
.mobile-nav-section-title{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px}
.mobile-nav-section-title span{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#193454}
.mobile-nav-section-title span svg{width:14px;color:#086be8}
.mobile-nav-section-title small{font-size:8px;color:#71839a}
.mobile-nav-section .mobile-nav-sub+.mobile-nav-sub{margin-top:7px}
body.dark .mobile-nav-head{border-color:#2b435c}
body.dark .mobile-nav-link,body.dark .mobile-nav-sub{background:#142940;border-color:#304b65;color:#eef6ff}
body.dark .mobile-nav-link:hover,body.dark .mobile-nav-sub:hover{background:#19344e;border-color:#47719a}
body.dark .mobile-nav-section{background:#102238;border-color:#304b65}
body.dark .mobile-nav-section-title span{color:#e8f2fc}
body.dark .mobile-nav-link small,body.dark .mobile-nav-sub small{color:#adc0d3}
body.dark .mobile-nav-dot,body.dark .mobile-nav-icon,body.dark .mobile-nav-sub-icon{background:#193b5d;color:#7fc0ff}
@media(max-width:600px){
  .modal-layer{padding:10px}
  .modal{width:100%;max-height:calc(100dvh - 20px);border-radius:16px;padding:18px}
  .mobile-nav-menu{gap:8px}
  .mobile-nav-head h2{font-size:22px}
  .mobile-nav-section{padding:8px}
  .mobile-nav-link{padding:11px}
}

/* Mobile All Sizes visibility fix */
@media (max-width:600px){
  .header-right .all-btn{font-size:10px;width:auto;height:36px;padding:9px 10px;gap:5px;white-space:nowrap;display:flex!important}
  .header-right .all-btn svg{width:15px;height:15px;flex:0 0 15px}
}

/* Final responsive pass */
html{overflow-x:hidden}
body{overflow-x:hidden}
img{max-width:100%;height:auto}

@media (max-width: 900px){
  .header-inner{max-width:100%;padding:0 16px;gap:12px}
  .logo{flex:1;min-width:0}
  .logo-copy{min-width:0}
  .logo-copy b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-right{flex:0 0 auto}
  .hero,.upload-layout,.trust,.how,.result-page,.sizes-page{width:100%;max-width:100%;}
  .hero{grid-template-columns:1fr;padding-left:20px!important;padding-right:20px!important}
  .hero-text{min-width:0}
  .hero-art{width:100%;max-width:620px;margin:10px auto 0;overflow:hidden}
  .upload-layout{grid-template-columns:1fr!important;padding-left:20px!important;padding-right:20px!important}
  .countries-mini{width:100%;min-width:0}
  .trust{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:20px!important;padding-right:20px!important}
  .trust>div{min-width:0}
  .how{padding-left:20px!important;padding-right:20px!important}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .result-page{padding-left:20px!important;padding-right:20px!important}
  .result-grid{grid-template-columns:1fr 1fr!important}
  .result-grid .result-preview{grid-column:1/-1}
  .result-grid .format,.result-grid .prints{min-width:0}
  .tabs{width:100%;overflow-x:auto;display:flex}
  .tabs button{flex:0 0 auto;white-space:nowrap}
  .result-actions{grid-template-columns:repeat(3,minmax(0,1fr));}
  .country-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .zip{max-width:100%}
  .sizes-page{padding-left:20px!important;padding-right:20px!important}
}

@media (max-width: 700px){
  .header{height:68px}
  .header-inner{padding:0 12px}
  .logo-mark{width:38px;height:38px}
  .logo-copy b{font-size:17px}
  .mobile-btn{width:38px;height:38px;display:grid!important;place-items:center}
  .all-btn{height:36px;padding:8px 10px;font-size:10px;white-space:nowrap}
  .hero{padding-top:24px!important}
  .hero h1{font-size:38px!important;line-height:1.02!important}
  .hero p{font-size:14px;line-height:1.55}
  .hero-art{height:260px;transform:none;margin-top:6px}
  .upload-layout{padding-top:10px!important}
  .dropzone{min-height:220px!important;padding:24px 16px!important;text-align:center}
  .dropzone strong{font-size:17px!important;line-height:1.3;text-align:center}
  .dropzone>span,.dropzone>small{max-width:100%;line-height:1.45;text-align:center}
  .choose{max-width:100%;justify-content:center}
  .trust{grid-template-columns:1fr!important;gap:8px!important}
  .trust>div{width:100%;padding:13px 14px!important}
  .how{padding-top:38px!important;padding-bottom:38px!important}
  .how h2{font-size:28px!important}
  .steps{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .steps>div{min-width:0;padding:14px 10px!important;text-align:center}
  .steps small{line-height:1.4}
  .result-grid{grid-template-columns:1fr!important}
  .result-grid .result-preview{grid-column:auto}
  .format,.prints{width:100%;}
  .result-actions{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .result-actions button{min-width:0;padding:10px 7px!important;font-size:10px!important}
  .preview-box{max-width:100%;overflow:hidden}
  .preview-box img{max-width:100%;object-fit:contain}
  .ready{padding:13px!important}
  .ready h2{font-size:17px!important}
  .ready p{line-height:1.4}
  .country-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .country-item{min-width:0;padding:9px 4px!important;text-align:center}
  .country-item b,.country-item small{display:block;overflow:hidden;text-overflow:ellipsis}
  .page-title{text-align:center}
  .page-title h1{font-size:30px!important;line-height:1.08}
  .page-title p{font-size:12px;line-height:1.5}
  .sizes-grid{grid-template-columns:1fr!important}
  .country-footer__inner{grid-template-columns:1fr!important;padding:28px 18px 22px!important}
  .country-footer__brand,.country-footer__social{width:100%;min-width:0}
  .country-footer__social h4{text-align:left}
  .country-footer .social{flex-wrap:wrap!important;gap:9px!important}
  .country-footer__bottom{flex-direction:column;align-items:flex-start;gap:6px;padding-left:18px!important;padding-right:18px!important}
}

@media (max-width: 430px){
  .header-inner{padding:0 9px}
  .logo{gap:7px}
  .logo-mark{width:35px;height:35px}
  .logo-copy b{font-size:15px}
  .all-btn{padding:8px 8px;font-size:9px}
  .mobile-btn{width:35px;height:35px}
  .hero{padding-left:14px!important;padding-right:14px!important}
  .hero h1{font-size:32px!important}
  .pill{font-size:9px;padding:6px 12px}
  .hero-art{height:225px;transform:scale(.9);transform-origin:center top}
  .upload-layout,.trust,.how,.result-page,.sizes-page{padding-left:14px!important;padding-right:14px!important}
  .dropzone{min-height:205px!important;padding:20px 11px!important}
  .dropzone strong{font-size:15px!important}
  .dropzone span{font-size:10px}
  .choose{font-size:11px!important;padding:10px 16px!important}
  .dropzone>small{font-size:8px!important}
  .auto-cutout-note{font-size:8px!important}
  .steps{grid-template-columns:1fr!important}
  .result-actions{grid-template-columns:1fr!important}
  .country-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ready{align-items:flex-start!important}
  .ready>span{flex:0 0 32px;width:32px;height:32px}
  .ready h2{font-size:15px!important}
  .ready p{font-size:8px!important}
  .country-footer__logo-copy b{font-size:16px}
  .country-footer__bottom{font-size:8px}
}

@media (max-width: 340px){
  .logo-copy b{font-size:14px}
  .all-btn{font-size:0;padding:8px;width:34px;justify-content:center}
  .all-btn svg{width:16px}
  .hero h1{font-size:29px!important}
  .country-grid{grid-template-columns:1fr 1fr!important}
}

/* Final social icon visibility fix */
.country-footer .social-btn i{color:#334155!important;opacity:1!important;visibility:visible!important;}
.country-footer .social-btn.facebook i{color:#1877f2!important;}
.country-footer .social-btn.twitter i{color:#111827!important;}
.country-footer .social-btn.instagram i{color:#d62976!important;}
.country-footer .social-btn.youtube i{color:#ff0000!important;}
.country-footer .social-btn.linkedin i{color:#0a66c2!important;}

/* Premium mobile navigation */
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(7,25,48,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:200;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.mobile-menu-overlay.open{opacity:1;visibility:visible}
.mobile-menu-drawer{position:absolute;top:0;right:0;height:100%;width:min(410px,94vw);background:var(--surface,#fff);border-left:1px solid var(--border,#d8e5f0);box-shadow:-24px 0 70px rgba(14,48,84,.25);transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;overflow:hidden}
.mobile-menu-overlay.open .mobile-menu-drawer{transform:translateX(0)}
.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 16px;border-bottom:1px solid var(--border,#d8e5f0);background:var(--surface,#fff);flex:0 0 auto}
.mobile-drawer-brand{display:flex;align-items:center;gap:11px;min-width:0}.mobile-drawer-brand>span:last-child{min-width:0}
.mobile-drawer-logo{width:42px;height:42px;border-radius:13px;background:#086be8;color:#fff;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 8px 20px rgba(8,107,232,.23)}.mobile-drawer-logo svg{width:22px}
.mobile-drawer-brand b{display:block;font-size:16px;letter-spacing:-.35px;line-height:1.15;color:var(--text,#11244b)}.mobile-drawer-brand b span{color:#086be8}.mobile-drawer-brand small{display:block;font-size:8px;color:var(--muted,#60738c);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:270px}
.mobile-drawer-close{width:40px;height:40px;border:1px solid var(--border,#d8e5f0);border-radius:12px;background:var(--surface-2,#eef5fb);color:var(--text,#11244b);display:grid;place-items:center;flex:0 0 auto;cursor:pointer}.mobile-drawer-close:active{transform:scale(.95)}.mobile-drawer-close svg{width:19px}
.mobile-drawer-body{padding:14px 13px 26px;overflow:auto;display:grid;gap:10px;-webkit-overflow-scrolling:touch}
.mobile-drawer-item{width:100%;border:1px solid var(--border,#d8e5f0);background:var(--surface,#fff);color:var(--text,#11244b);border-radius:14px;display:flex;align-items:center;text-align:left;gap:11px;padding:11px;min-width:0;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}.mobile-drawer-item:active{transform:scale(.985)}
.mobile-drawer-item:hover,.mobile-drawer-item:focus-visible{border-color:#9fc7f3;background:var(--accent-soft,#e7f2ff);outline:none}.mobile-drawer-item.mobile-home{padding:12px;background:var(--surface-2,#eef5fb)}
.mobile-drawer-item>span:nth-child(2){flex:1;min-width:0}.mobile-drawer-item b{display:block;font-size:12px;line-height:1.25}.mobile-drawer-item small{display:block;font-size:9px;color:var(--muted,#60738c);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-drawer-item>svg{width:15px;color:#8aa0b7;flex:0 0 auto}
.mobile-drawer-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-soft,#e7f2ff);color:#086be8;display:grid;place-items:center;flex:0 0 auto;font-size:18px}.mobile-drawer-icon svg{width:18px}.flag-icon{font-size:19px}
.mobile-accordion{border:1px solid var(--border,#d8e5f0);border-radius:15px;background:var(--surface-2,#f4f8fc);overflow:hidden}.mobile-accordion-head{width:100%;min-height:54px;border:0;background:transparent;color:var(--text,#11244b);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;font:inherit;cursor:pointer}.mobile-accordion-head>span:first-child{display:flex;align-items:center;gap:10px;font-size:12px}.mobile-accordion-head>span:first-child svg{width:18px;color:#086be8}.accordion-chevron-wrap{width:31px;height:31px;border-radius:9px;background:var(--surface,#fff);display:grid;place-items:center;flex:0 0 auto}.accordion-chevron{width:16px;color:var(--muted,#71839a);transition:transform .25s ease}.mobile-accordion.open .accordion-chevron{transform:rotate(180deg)}
.mobile-accordion-content{max-height:0;opacity:0;overflow:hidden;padding:0 9px;display:grid;gap:7px;transition:max-height:.25s ease,opacity:.2s ease,padding:.25s ease;}.mobile-accordion.open .mobile-accordion-content{max-height:none;overflow:visible;opacity:1;padding:8px 9px 9px;}.mobile-accordion-content .mobile-drawer-item{background:var(--surface,#fff)}
body.mobile-menu-open{overflow:hidden}
body.dark-mode .mobile-menu-drawer{background:var(--surface);border-color:var(--border);box-shadow:-24px 0 70px rgba(0,0,0,.45)}body.dark-mode .mobile-drawer-head{background:var(--surface);border-color:var(--border)}body.dark-mode .mobile-drawer-item{background:var(--surface);border-color:var(--border);color:var(--text)}body.dark-mode .mobile-drawer-item.mobile-home,body.dark-mode .mobile-accordion{background:var(--surface-2)}body.dark-mode .mobile-accordion-head{color:var(--text)}body.dark-mode .accordion-chevron-wrap{background:var(--surface);border:1px solid var(--border)}body.dark-mode .mobile-accordion-content .mobile-drawer-item{background:var(--surface);border-color:var(--border)}body.dark-mode .mobile-drawer-close{background:var(--surface-2);border-color:var(--border);color:var(--text)}body.dark-mode .mobile-drawer-brand b{color:var(--text)}
@media (min-width:701px){.mobile-menu-overlay{display:none!important}}
@media (max-width:430px){.mobile-menu-drawer{width:100%;border-left:0}.mobile-drawer-head{padding:14px 13px}.mobile-drawer-body{padding:12px 10px 24px}.mobile-drawer-brand b{font-size:15px}.mobile-drawer-brand small{max-width:220px}.mobile-drawer-logo{width:39px;height:39px}.mobile-drawer-close{width:37px;height:37px}}
@media (max-width:360px){.mobile-drawer-brand small{display:none}.mobile-drawer-body{gap:8px}.mobile-drawer-item{padding:10px}.mobile-drawer-item small{font-size:8px}.mobile-accordion-head{min-height:51px}}


/* ===== Mobile menu + footer final polish ===== */
.mobile-drawer-brand{align-items:flex-start!important}
.mobile-drawer-brand>span:last-child{display:flex;flex-direction:column;justify-content:center;min-height:42px}
.mobile-drawer-brand em{display:block;font-style:normal;font-size:8px;line-height:1.35;color:var(--muted,#60738c);margin-top:3px;max-width:250px}
.mobile-drawer-logo{background:linear-gradient(135deg,#087cff,#7440ef)!important;border-radius:14px!important}
.mobile-drawer-head{padding:18px 16px!important;background:linear-gradient(180deg,rgba(247,251,255,.98),rgba(255,255,255,.98))!important}
.mobile-drawer-body{padding:15px 13px 30px!important;gap:9px!important}
.mobile-drawer-item{box-shadow:0 3px 12px rgba(15,23,42,.035)}
.mobile-accordion{box-shadow:0 3px 12px rgba(15,23,42,.035)}
.mobile-accordion.open{border-color:#b9d5f2;box-shadow:0 8px 24px rgba(37,99,235,.08)}
.mobile-accordion-content .mobile-drawer-item{box-shadow:none}
/* Mobile dropdown sizing fix */
.mobile-accordion-content{max-height:0;opacity:0;overflow:hidden;padding:0 9px;display:grid;gap:7px;transition:max-height:.25s ease,opacity:.2s ease,padding:.25s ease;}
.mobile-accordion.open .mobile-accordion-content{max-height:none;overflow:visible;opacity:1;padding:8px 9px 9px;}
@media (max-width:430px){
  .mobile-accordion.open .mobile-accordion-content{max-height:none;overflow:visible;opacity:1;padding:8px 9px 9px;}
}
@media (max-width:360px){
  .mobile-accordion.open .mobile-accordion-content{max-height:none;overflow:visible;opacity:1;padding:8px 9px 9px;}
}
.country-footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#fbfdff 0%,#f5f8fc 100%)!important;border-top:1px solid #e5edf6!important;margin-top:42px!important}
.country-footer:before{content:"";position:absolute;left:8%;top:-120px;width:260px;height:260px;border-radius:50%;background:rgba(37,99,235,.07);filter:blur(12px);pointer-events:none}
.country-footer__inner{position:relative;z-index:1;max-width:1280px!important;padding:42px 34px 30px!important}
.country-footer__logo{padding:2px 0;text-decoration:none}
.country-footer__logo-mark{width:50px!important;height:50px!important;border-radius:15px!important}
.country-footer__logo-copy b{font-size:22px!important}
.country-footer__logo-copy small{font-size:10px!important;max-width:360px;line-height:1.45}
.country-footer__brand p{max-width:500px!important;font-size:11px!important;margin-top:13px!important}
.country-footer__social{padding:14px 16px;border:1px solid #e4ebf3;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 10px 30px rgba(15,23,42,.05)}
.country-footer__social h4{margin-bottom:11px!important}
.country-footer .social-btn{box-shadow:0 5px 15px rgba(15,23,42,.06)!important}
.country-footer__line{max-width:1280px!important;background:#e3eaf2!important}
.country-footer__bottom{max-width:1280px!important;padding:18px 34px 24px!important;color:#7b8ba0!important}
@media(max-width:700px){
 .mobile-drawer-head{padding:15px 13px!important}
 .mobile-drawer-brand em{max-width:205px}
 .country-footer{margin-top:30px!important}
 .country-footer__inner{padding:30px 16px 24px!important;gap:18px!important}
 .country-footer__social{width:100%;padding:13px 14px}
 .country-footer__bottom{padding:15px 16px 20px!important;font-size:9px!important}
}
@media(max-width:380px){
 .mobile-drawer-brand em{display:none}
 .country-footer__logo-mark{width:43px!important;height:43px!important}
 .country-footer__logo-copy b{font-size:17px!important}
 .country-footer__logo-copy small{font-size:8px!important}
 .country-footer__brand p{font-size:9px!important}
}
body.dark-mode .mobile-drawer-head{background:linear-gradient(180deg,#121b2b,#121b2b)!important}
body.dark-mode .mobile-drawer-brand em{color:#9fb0c5}
body.dark-mode .country-footer{background:linear-gradient(180deg,#0f1827,#0b1320)!important;border-color:#26384d!important}
body.dark-mode .country-footer:before{background:rgba(37,99,235,.11)}
body.dark-mode .country-footer__social{background:rgba(18,27,43,.82);border-color:#2a3a50;box-shadow:none}
body.dark-mode .country-footer__line{background:#26384d!important}

/* PhotoPassPro branding fix */
.site-brand-logo{
  display:block;
  width:205px;
  height:auto;
  max-height:54px;
  object-fit:contain;
  object-position:left center;
  border-radius:8px;
}
.logo{
  min-width:205px!important;
  height:58px;
  display:flex!important;
  align-items:center!important;
}
.footer-brand-logo{
  display:block;
  width:235px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  object-position:left center;
  border-radius:8px;
}
.country-footer__logo{
  display:inline-flex!important;
  align-items:center!important;
}
.mobile-brand-logo{
  display:block;
  width:220px;
  max-width:calc(100vw - 115px);
  height:auto;
  max-height:52px;
  object-fit:contain;
  object-position:left center;
  border-radius:8px;
}
.mobile-drawer-brand{
  min-width:0!important;
  flex:1 1 auto;
}
.mobile-drawer-head{
  align-items:center!important;
}
@media (max-width:700px){
  .site-brand-logo{width:190px;max-height:50px}
  .logo{min-width:190px!important}
  .footer-brand-logo{width:210px}
}

/* PhotoPassPro text logo — no image asset required */
.logo,.country-footer__logo{gap:11px!important;text-decoration:none!important}
.brand-mark,.footer-brand-mark,.mobile-brand-mark{
  display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg,#1687e8,#0876d8);
  color:#fff;box-shadow:0 8px 20px rgba(8,118,216,.22);
}
.brand-mark{width:46px;height:46px;border-radius:14px}
.brand-mark svg{width:23px;height:23px;stroke-width:2.2}
.brand-copy,.footer-brand-copy,.mobile-brand-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand-copy b,.footer-brand-copy b,.mobile-brand-copy b{font-size:21px;line-height:1.05;letter-spacing:-.8px;color:#172033;font-weight:800}
.brand-copy b span,.footer-brand-copy b span,.mobile-brand-copy b span{color:#1687e8}
.brand-copy small,.footer-brand-copy small,.mobile-brand-copy small{margin-top:5px;font-size:8.5px;line-height:1.1;letter-spacing:.09em;color:#718096;font-weight:600;white-space:nowrap}
.footer-brand-mark{width:48px;height:48px;border-radius:14px}
.footer-brand-mark svg{width:23px;height:23px}
.footer-brand-copy b{font-size:21px}
.footer-brand-copy small{font-size:8.5px}
.mobile-brand-mark{width:42px;height:42px;border-radius:13px}
.mobile-brand-mark svg{width:21px;height:21px}
.mobile-brand-copy b{font-size:17px;letter-spacing:-.5px}
.mobile-brand-copy small{font-size:7.5px;margin-top:4px}
/* remove legacy image-logo rules */
.site-brand-logo,.footer-brand-logo,.mobile-brand-logo{display:none!important}
body.dark-mode .brand-copy b,body.dark-mode .footer-brand-copy b,body.dark-mode .mobile-brand-copy b{color:#f1f5fb}
body.dark-mode .brand-copy small,body.dark-mode .footer-brand-copy small,body.dark-mode .mobile-brand-copy small{color:#9fb0c5}
@media(max-width:700px){
  .brand-mark{width:40px;height:40px;border-radius:12px}
  .brand-mark svg{width:20px;height:20px}
  .brand-copy b{font-size:18px}
  .brand-copy small{font-size:7px}
}
@media(max-width:360px){
  .brand-copy small{display:none}
  .brand-copy b{font-size:17px}
}

/* Final footer polish: Follow Us should have no background/card */
.country-footer__social{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:14px 0!important;
}
body.dark-mode .country-footer__social{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Animated image-upload visual */
.upload-animation{
  width:92px;
  height:72px;
  position:relative;
  margin-bottom:7px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.upload-photo-card{
  position:absolute;
  width:50px;
  height:58px;
  border:2px solid #086be8;
  border-radius:9px;
  background:linear-gradient(145deg,#ffffff,#eaf5ff);
  box-shadow:0 7px 16px rgba(8,107,232,.14);
}
.upload-card-back{
  transform:rotate(-11deg) translate(-10px,3px);
  opacity:.42;
  animation:uploadBack 2.2s ease-in-out infinite;
}
.upload-card-front{
  z-index:2;
  display:grid;
  place-items:center;
  animation:uploadFloat 2.2s ease-in-out infinite;
}
.upload-card-front svg{
  width:27px;
  height:27px;
  color:#086be8;
  stroke-width:1.8;
}
.upload-arrow{
  position:absolute;
  z-index:4;
  right:4px;
  top:1px;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#086be8;
  color:#fff;
  box-shadow:0 5px 13px rgba(8,107,232,.25);
  animation:uploadArrow 1.25s ease-in-out infinite;
}
.upload-arrow svg{width:16px;height:16px;stroke-width:2.7}
@keyframes uploadFloat{
  0%,100%{transform:translateY(2px)}
  50%{transform:translateY(-5px)}
}
@keyframes uploadBack{
  0%,100%{transform:rotate(-11deg) translate(-10px,3px)}
  50%{transform:rotate(-7deg) translate(-12px,-2px)}
}
@keyframes uploadArrow{
  0%,100%{transform:translateY(4px);opacity:.78}
  50%{transform:translateY(-5px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .upload-card-back,.upload-card-front,.upload-arrow{animation:none}
}

.country-popup-grid{grid-template-columns:repeat(2,1fr);margin-top:16px}.country-popup-card{width:100%;text-align:left}.country-popup-card .flag{font-size:27px}.country-popup-card:hover{border-color:#5796df;box-shadow:0 5px 16px #2465a515}@media(max-width:600px){.country-popup-grid{grid-template-columns:1fr}}


/* Footer legal/info links: open as modal popups instead of separate pages. */
.footer-legal-links{display:flex;align-items:center;justify-content:flex-end;gap:7px 14px;flex-wrap:wrap;margin-left:auto}
.footer-legal-links button{appearance:none;border:0;background:transparent;padding:2px 0;color:#64748b;font:inherit;font-size:10px;font-weight:700;cursor:pointer;text-decoration:none;transition:color .16s,transform .16s}
.footer-legal-links button:hover{color:#2563eb;transform:translateY(-1px)}
body.dark-mode .footer-legal-links button{color:#a7b4c7}
body.dark-mode .footer-legal-links button:hover{color:#93c5fd}
@media(max-width:700px){.footer-legal-links{width:100%;justify-content:flex-start;margin-left:0;gap:8px 14px}.footer-legal-links button{font-size:9px}}

/* 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}}


/* Edit Photo drag-to-fix framing */
.edit-canvas{position:relative!important;touch-action:none!important;user-select:none!important;cursor:grab!important;background:#eef3f6!important}
.edit-canvas.dragging{cursor:grabbing!important}
.edit-canvas img{max-width:100%!important;max-height:100%!important;transform-origin:center center!important;will-change:transform!important;pointer-events:none!important;user-select:none!important;-webkit-user-drag:none!important}
.drag-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(17,36,75,.82);color:#fff;font-size:11px;font-weight:700;pointer-events:none;transition:opacity .18s ease}
.drag-hint svg{width:14px;height:14px}.drag-hint.hidden{opacity:0}
body.dark-mode .edit-canvas{background:#101927!important}
body.dark-mode .drag-hint{background:rgba(0,0,0,.72)}


/* Mobile print fixes */


/* Prevent mobile print preview from inheriting desktop fixed widths */
@media (max-width: 600px) {
  .print-preview,
  .print-sheet,
  #printArea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* Edit Photo color option */
.edit-color-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  font-size:13px;
  font-weight:700;
}
.edit-color-row input[type="color"]{
  width:42px;
  height:34px;
  padding:2px;
  border:1px solid #d5dce5;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}
.edit-color-row span:last-child{
  font-size:12px;
  font-weight:600;
  opacity:.7;
  text-transform:uppercase;
}


/* Smooth, low-lag editor interaction */
.edit-canvas{
  contain:layout paint;
  will-change:contents;
  overflow:hidden!important;
}
.edit-canvas img{
  backface-visibility:hidden;
  transform:translateZ(0);
}


/* 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;
  }
}