/* ================================================================
   StraightResume — Resume Builder (app.css)
   Form · Templates · Payment
================================================================ */

/* ── Builder Nav (main.php) ───────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);border-bottom:1px solid #dbeafe;
  box-shadow:0 2px 20px rgba(37,99,235,.07);height:70px;
  display:flex;align-items:center;padding:0 24px}
.nav-inner{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1160px;margin:0 auto}
.nav-brand{display:flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:800;color:#1d4ed8;letter-spacing:-.5px;text-decoration:none}
.brand-icon{width:38px;height:38px;background:linear-gradient(135deg,#2563eb,#60a5fa);border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:white;font-size:16px;
  box-shadow:0 4px 12px rgba(37,99,235,.3);flex-shrink:0}
.nav-brand em{color:#f97316;font-style:normal}
.main-wrap{min-height:calc(100vh - 130px)}
.footer{background:#0f172a;color:rgba(255,255,255,.5);text-align:center;padding:24px;font-size:.85rem;
  border-top:1px solid rgba(255,255,255,.06)}

/* ── PROGRESS BAR ─────────────────────────────────────────────────── */
.progress-bar-wrap{background:white;border-bottom:1px solid #e2e8f0;padding:0;position:sticky;top:70px;z-index:100;
  box-shadow:0 2px 12px rgba(37,99,235,.06)}
.progress-steps{display:flex;max-width:860px;margin:0 auto;padding:0 24px}
.ps{flex:1;padding:16px 8px;text-align:center;font-size:.78rem;font-weight:600;color:#94a3b8;
  border-bottom:3px solid transparent;transition:all .3s ease;cursor:default;letter-spacing:.2px;position:relative}
.ps.active{color:#2563eb;border-bottom-color:#2563eb}
.ps.done{color:#10b981;border-bottom-color:#10b981}
.ps.done::after{content:'✓';position:absolute;right:4px;top:12px;font-size:.7rem;color:#10b981}
.progress-line{display:none}

/* ── FORM PAGE WRAPPER ────────────────────────────────────────────── */
.form-page{max-width:860px;margin:0 auto;padding:32px 24px 80px}

/* Language selector */
.lang-selector-row{display:flex;align-items:center;gap:12px;margin-bottom:28px;
  background:var(--b50,#eff6ff);border:1px solid #bfdbfe;border-radius:12px;padding:14px 18px}
.lang-selector-row label{font-weight:600;color:#1d4ed8;font-size:.88rem;margin:0;white-space:nowrap}
.lang-select{border:1.5px solid #bfdbfe;border-radius:8px;padding:8px 12px;font-size:.88rem;
  font-family:'Inter',sans-serif;color:#1e293b;background:white;cursor:pointer;flex:1;max-width:220px}
.lang-select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1)}

/* ── FORM SECTION ─────────────────────────────────────────────────── */
.form-section{display:none}
.form-section.active{display:block;animation:fadeUp .4s ease-out both}

/* Section header */
.section-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:32px;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;
  border-radius:16px;padding:22px 24px}
.section-icon{width:52px;height:52px;background:linear-gradient(135deg,#2563eb,#3b82f6);
  border-radius:14px;display:flex;align-items:center;justify-content:center;color:white;
  font-size:1.4rem;flex-shrink:0;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.section-header h2{font-size:1.4rem;font-weight:800;color:#0f172a;margin-bottom:4px;line-height:1.2}
.section-header p{font-size:.88rem;color:#64748b;margin:0}

/* ── FIELD GRID ───────────────────────────────────────────────────── */
.fields-grid{display:grid;gap:20px;margin-bottom:20px}
.fields-grid.cols-2{grid-template-columns:1fr 1fr}
.fields-grid.cols-3{grid-template-columns:1fr 1fr 1fr}

.field-group{display:flex;flex-direction:column;gap:6px;position:relative}
.field-group.full{grid-column:1/-1}
.field-group label{font-size:.82rem;font-weight:700;color:#334155;letter-spacing:.2px;margin:0}
.field-group input,.field-group select,.field-group textarea{
  padding:11px 14px;border:1.5px solid #e2e8f0;border-radius:10px;
  font-size:.93rem;font-family:'Inter',sans-serif;color:#1e293b;
  background:white;transition:all .25s ease;outline:none;width:100%;margin:0}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{
  border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.1);background:#eff6ff}
.field-group textarea{resize:vertical;min-height:100px}
.req{color:#ef4444;font-size:.85rem}
.char-count{font-size:.78rem;color:#94a3b8;text-align:right;margin-top:4px}

/* Error state */
.field-group.error input,.field-group.error select,.field-group.error textarea{border-color:#ef4444;background:#fef2f2}
.field-error{font-size:.78rem;color:#ef4444;font-weight:500;margin-top:2px}

/* Checkbox inline */
.checkbox-inline{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#475569;
  font-weight:500;margin-top:8px;cursor:pointer}
.checkbox-inline input[type=checkbox]{width:16px;height:16px;accent-color:#2563eb;cursor:pointer;margin:0}

/* ── PHOTO UPLOAD ─────────────────────────────────────────────────── */
.photo-upload-area{margin-bottom:24px;display:flex;justify-content:center}
.photo-placeholder{width:100px;height:100px;border:2px dashed #bfdbfe;border-radius:50%;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;background:#eff6ff;transition:all .25s ease;overflow:hidden}
.photo-placeholder:hover{border-color:#2563eb;background:#dbeafe}
.photo-placeholder i{font-size:1.4rem;color:#60a5fa}
.photo-placeholder span{font-size:.72rem;font-weight:600;color:#60a5fa}
.photo-placeholder small{font-size:.65rem;color:#94a3b8}
#photoPreview{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ── DYNAMIC CARDS ────────────────────────────────────────────────── */
.dynamic-card{background:white;border:1.5px solid #e2e8f0;border-radius:16px;padding:22px;
  margin-bottom:16px;position:relative;transition:all .25s ease;
  box-shadow:0 2px 8px rgba(37,99,235,.05)}
.dynamic-card:hover{border-color:#93c5fd;box-shadow:0 4px 20px rgba(37,99,235,.1)}
.dynamic-card.compact{padding:18px}
.card-handle{position:absolute;top:14px;left:14px;color:#cbd5e1;cursor:grab;font-size:.9rem}

.remove-btn{position:absolute;top:14px;right:14px;width:32px;height:32px;
  background:#fef2f2;border:1px solid #fecaca;border-radius:8px;cursor:pointer;
  color:#ef4444;font-size:.85rem;display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;padding:0}
.remove-btn:hover{background:#ef4444;color:white;border-color:#ef4444;transform:scale(1.05)}

/* ── ADD BUTTONS ──────────────────────────────────────────────────── */
.add-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1.5px dashed #93c5fd;
  border-radius:12px;color:#2563eb;font-size:.9rem;font-weight:600;cursor:pointer;
  width:100%;justify-content:center;transition:all .25s ease;font-family:'Inter',sans-serif;
  margin-top:4px}
.add-btn:hover{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-color:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.15)}
.add-btn-sm{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;
  background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;color:#2563eb;
  font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s ease;
  font-family:'Inter',sans-serif;margin-top:8px}
.add-btn-sm:hover{background:#dbeafe;border-color:#2563eb}

/* ── SUBSECTION DIVIDER ───────────────────────────────────────────── */
.subsection-divider{display:flex;align-items:center;gap:10px;margin:28px 0 20px;
  font-size:.88rem;font-weight:700;color:#475569;letter-spacing:.3px}
.subsection-divider::before,.subsection-divider::after{content:'';flex:1;height:1px;background:#e2e8f0}

/* ── EXTRAS BLOCK ─────────────────────────────────────────────────── */
.extras-block{margin-bottom:32px;padding:20px 22px;background:#f8fafc;
  border:1px solid #e2e8f0;border-radius:14px}
.extras-block h3{font-size:.95rem;font-weight:700;color:#334155;margin-bottom:16px;
  display:flex;align-items:center;gap:8px}
.extras-block h3 i{color:#2563eb;width:18px}

/* ── FORM NAV ─────────────────────────────────────────────────────── */
.form-nav{position:sticky;bottom:0;z-index:50;background:white;
  border-top:1px solid #e2e8f0;padding:16px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  box-shadow:0 -4px 20px rgba(37,99,235,.08);margin:32px -24px 0}
.btn.btn-ghost{background:#f1f5f9;color:#475569;border:1.5px solid #e2e8f0}
.btn.btn-ghost:hover{background:#e2e8f0;color:#1e293b}
.btn.btn-primary{background:linear-gradient(135deg,#2563eb,#3b82f6);color:white;
  box-shadow:0 4px 16px rgba(37,99,235,.3);padding:12px 28px;border-radius:12px;
  font-size:.95rem;font-weight:700;border:none;cursor:pointer;font-family:'Inter',sans-serif;
  display:inline-flex;align-items:center;gap:8px;transition:all .25s ease}
.btn.btn-primary:hover{background:linear-gradient(135deg,#1d4ed8,#2563eb);transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.4)}

/* ── TEMPLATE SELECTION ───────────────────────────────────────────── */
.templates-page{max-width:1100px;margin:0 auto;padding:40px 24px 80px}
.page-header{text-align:center;margin-bottom:40px}
.page-header h1{font-size:1.8rem;font-weight:900;color:#0f172a;margin-bottom:8px;letter-spacing:-.5px}
.page-header p{color:#64748b;font-size:.95rem}
.templates-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;margin-bottom:40px}

.template-card{border:2px solid #e2e8f0;border-radius:14px;overflow:hidden;cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);background:white;
  box-shadow:0 2px 8px rgba(37,99,235,.08);display:flex;flex-direction:column}
.template-card:hover{border-color:#93c5fd;box-shadow:0 8px 28px rgba(37,99,235,.15);transform:translateY(-3px)}
.template-card.selected{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.15),0 12px 40px rgba(37,99,235,.2)}
.template-card.selected .template-preview{box-shadow:inset 0 0 0 1px #2563eb}

.template-preview{height:360px;background:#fff;border-bottom:2px solid #d1d5db;
  position:relative;overflow:hidden;padding:8px;display:flex;align-items:flex-start;justify-content:flex-start;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.tprev-header{height:40px;background:#1e3a8a;border-radius:4px;margin-bottom:8px;width:100%}
.tprev-body{flex:1;padding:4px 0;display:flex;flex-direction:column;gap:3px}
.tprev-line{height:6px;background:#e2e8f0;border-radius:3px}
.tprev-line.tprev-name{height:10px;background:#334155;width:70%;border-radius:4px}
.tprev-line.tprev-title{height:7px;background:#94a3b8;width:50%;border-radius:3px}
.tprev-line.short{width:60%}
.tprev-section{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.tprev-sh{height:7px;background:#bfdbfe;border-radius:3px;width:40%;margin-bottom:3px}
.tprev-sidebar{width:70px;background:#1e3a8a;border-radius:6px;padding:8px;margin-right:8px;flex-shrink:0;
  display:flex;flex-direction:column;gap:4px;align-items:center}
.tprev-avatar{width:32px;height:32px;background:rgba(255,255,255,.3);border-radius:50%;margin-bottom:4px}
.tprev-line.sm{height:5px;background:rgba(255,255,255,.3);border-radius:2px;width:100%}
.tprev-line.sm.short{width:70%}
.tprev-sh.sm{height:5px;background:rgba(255,255,255,.5);width:80%;margin-bottom:2px}
.tprev-exec-top{padding:10px;border-bottom:2px solid #1e3a8a;margin-bottom:8px}
.tprev-exec-contact{display:flex;gap:6px;margin-top:4px}
.tprev-dot{width:6px;height:6px;background:#94a3b8;border-radius:50%}
.tprev-exec-divider{height:2px;background:#1e3a8a;border-radius:1px;margin-bottom:8px}
.template-badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#f97316,#fb923c);
  color:white;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:100px;letter-spacing:.3px}

.template-info{padding:18px 16px;flex:1;display:flex;flex-direction:column}
.template-info h3{font-size:1rem;font-weight:800;color:#0f172a;margin-bottom:6px;line-height:1.3}
.template-info p{font-size:.8rem;color:#64748b;line-height:1.5;margin-bottom:12px;flex:1}
.template-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
.template-tags span{font-size:.7rem;font-weight:600;padding:4px 10px;border-radius:100px;
  background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;white-space:nowrap}
.template-card.selected .template-tags span{background:#dbeafe;border-color:#93c5fd}

.template-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;
  border-radius:16px;padding:20px 28px;animation:fadeUp .4s ease-out}
.selected-info{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:600;color:#1e293b}
.selected-info i{color:#2563eb;font-size:1.2rem}
.btn-xl{padding:12px 28px;font-size:.95rem;font-weight:700;border-radius:12px;
  background:linear-gradient(135deg,#2563eb,#3b82f6);color:white;
  box-shadow:0 4px 16px rgba(37,99,235,.35);display:inline-flex;align-items:center;
  gap:8px;transition:all .25s ease;font-family:'Inter',sans-serif;border:none;cursor:pointer}
.btn-xl:hover{background:linear-gradient(135deg,#1d4ed8,#2563eb);transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.45)}

/* ── PAYMENT PAGE ─────────────────────────────────────────────────── */
.payment-page{min-height:calc(100vh - 130px);background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 50%,#eff6ff 100%);
  display:flex;align-items:center;justify-content:center;padding:40px 24px}
.payment-card{background:white;border:1px solid #bfdbfe;border-radius:24px;
  padding:40px;max-width:500px;width:100%;box-shadow:0 20px 60px rgba(37,99,235,.14),0 4px 16px rgba(0,0,0,.06)}
.payment-header{text-align:center;margin-bottom:32px}
.payment-lock{width:60px;height:60px;background:linear-gradient(135deg,#2563eb,#3b82f6);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:white;font-size:1.5rem;margin:0 auto 16px;box-shadow:0 8px 24px rgba(37,99,235,.3)}
.payment-header h1{font-size:1.6rem;font-weight:900;color:#0f172a;margin-bottom:6px}
.payment-header p{color:#64748b;font-size:.9rem}

.order-summary{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:20px;margin-bottom:24px}
.order-item{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid #e2e8f0;margin-bottom:14px}
.order-item-icon{width:44px;height:44px;background:linear-gradient(135deg,#2563eb,#3b82f6);border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:white;font-size:1.1rem;flex-shrink:0}
.order-item-info{flex:1}
.order-item-info strong{display:block;font-weight:700;color:#1e293b;font-size:.95rem}
.order-item-info span{font-size:.8rem;color:#64748b}
.order-item-price{font-size:1.3rem;font-weight:900;color:#2563eb}
.order-total{display:flex;justify-content:space-between;align-items:center}
.order-total span{font-weight:600;color:#64748b;font-size:.9rem}
.order-total strong{font-size:1.5rem;font-weight:900;color:#0f172a}

.payment-features{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.pf-item{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#475569;font-weight:500}
.pf-item i{color:#10b981;width:16px}
.text-green{color:#10b981}

.paypal-section{margin-bottom:20px}
.payment-separator{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:.78rem;color:#94a3b8}
.payment-separator::before,.payment-separator::after{content:'';flex:1;height:1px;background:#e2e8f0}
.payment-trust{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;color:#64748b;font-weight:500}
.payment-back{display:flex;align-items:center;gap:6px;color:#64748b;font-size:.85rem;
  justify-content:center;transition:color .2s;margin-top:16px}
.payment-back:hover{color:#2563eb}

.pay-status{text-align:center;padding:24px;border-radius:12px}
.pay-status.loading{background:#eff6ff}
.pay-status.success{background:#ecfdf5}
.pay-status.error{background:#fef2f2}
.pay-status.info{background:#eff6ff}
.pay-status i{font-size:2rem;margin-bottom:10px;display:block}
.pay-status.success i{color:#10b981}
.pay-status.error i{color:#ef4444}
.pay-status.info i{color:#2563eb}
.pay-status p{font-size:.9rem;font-weight:600;color:#1e293b;margin-bottom:12px}
.spinner{width:40px;height:40px;border:3px solid #bfdbfe;border-top-color:#2563eb;
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-ghost.btn-sm{padding:8px 16px;font-size:.82rem;background:#f1f5f9;color:#475569;
  border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── PREVIEW PAGE ───────────────────────────────────────────────────────────── */
.preview-page{max-width:1200px;margin:0 auto;padding:20px}
.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 20px;
  margin-bottom:24px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar-sep{color:#cbd5e0;font-weight:500;display:none}
.toolbar-label{font-size:.85rem;color:#64748b;font-weight:500}
.preview-container{display:flex;justify-content:center;padding:16px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.preview-paper{background:#fff;border:1px solid #e2e8f0;border-radius:8px;
  box-shadow:0 4px 24px rgba(0,0,0,.08);padding:24px;max-width:850px;width:100%;flex-shrink:0;
  min-height:1100px;position:relative;overflow:visible;font-size:14px;line-height:1.6;
  word-wrap:break-word;word-break:break-word;overflow-wrap:break-word}
.preview-paper::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(45deg,transparent 49%,rgba(0,0,0,.02) 50%,transparent 51%);
  background-size:20px 20px;pointer-events:none;opacity:.3;display:none}
.download-cta-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;
  border-radius:16px;padding:20px 24px;margin-top:32px}
.cta-left{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:600;color:#0f172a;min-width:200px}
.text-green{color:#10b981}
.pulse-btn{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.btn-download{background:linear-gradient(135deg,#2563eb,#3b82f6);color:white;
  padding:12px 20px;border-radius:12px;font-size:.95rem;font-weight:700;
  box-shadow:0 4px 16px rgba(37,99,235,.3);border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-download:hover{background:linear-gradient(135deg,#1d4ed8,#2563eb);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.4)}
.price-badge{background:#10b981;color:white;padding:4px 12px;border-radius:20px;
  font-size:.8rem;font-weight:700;margin-left:8px}

/* ================================================================
   StraightResume — app.css ADDITIONS (Responsive + Form Fixes)
================================================================ */

/* ── FORM NAV: proper sticky on all screens ──────────────────── */
.form-nav {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 20px rgba(37,99,235,.08);
  /* Fix: don't use negative margin trick, use proper offset */
  margin: 32px -24px 0;
  border-radius: 0;
}

/* ── FIELD ERROR animations ──────────────────────────────────── */
.field-group.error input,
.field-group.error select,
.field-group.error textarea {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  animation: shake .3s ease-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.field-error {
  font-size: .78rem;
  color: #ef4444;
  font-weight: 500;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  animation: fadeIn .2s ease-out;
}
.field-error::before {
  content: '⚠';
  font-size: .75rem;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── SECTION transition ──────────────────────────────────────── */
.form-section { display: none; }
.form-section.active {
  display: block;
  animation: fadeUp .35s ease-out both;
}

/* ── DYNAMIC CARD: mobile padding fix ───────────────────────── */
.dynamic-card .fields-grid { margin-bottom: 12px; }

/* ── PROGRESS STEPS: scrollable on very small screens ────────── */
.progress-bar-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.progress-steps { min-width: 360px; }

/* ── PHOTO UPLOAD responsive ─────────────────────────────────── */
@media (max-width: 480px) {
  .photo-placeholder { width: 80px; height: 80px; }
  .photo-placeholder i { font-size: 1.1rem; }
}

/* ── TEMPLATE GRID: 2-col on medium, 1-col on small ─────────── */
@media (max-width: 640px) {
  .templates-grid { grid-template-columns: 1fr; }
  .templates-page { padding: 32px 16px 60px; }
  .page-header h1 { font-size: 1.6rem; }
}

/* ── LANG SELECTOR: stack on small ──────────────────────────── */
@media (max-width: 480px) {
  .lang-selector-row { flex-direction: column; align-items: flex-start; }
  .lang-select { max-width: 100%; width: 100%; }
}

/* ── SECTION HEADER: tighter on mobile ──────────────────────── */
@media (max-width: 480px) {
  .section-header { padding: 14px 14px; margin-bottom: 20px; }
  .section-header h2 { font-size: 1.1rem; }
  .section-icon { width: 38px; height: 38px; font-size: 1rem; border-radius: 10px; flex-shrink: 0; }
}

/* ── EXTRAS BLOCK spacing on mobile ─────────────────────────── */
@media (max-width: 480px) {
  .extras-block { padding: 14px 12px; margin-bottom: 20px; }
  .subsection-divider { margin: 20px 0 16px; font-size: .82rem; }
}

/* ── BTN sizes on small screens ─────────────────────────────── */
@media (max-width: 400px) {
  .btn.btn-primary,
  .btn.btn-ghost {
    padding: 10px 14px;
    font-size: .82rem;
  }
  #btnSubmit { width: 100%; justify-content: center; }
}

/* ── TEMPLATE PAGE: responsive grid ─────────────────────────── */
@media (max-width: 1024px) {
  .templates-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
}

@media (max-width: 768px) {
  .templates-page { padding: 32px 16px 60px; }
  .page-header h1 { font-size: 1.5rem; }
  .page-header p { font-size: .9rem; }
  .templates-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .template-preview { height: 300px; }
  .template-info { padding: 14px 12px; }
  .template-info h3 { font-size: .95rem; margin-bottom: 4px; }
  .template-info p { font-size: .78rem; line-height: 1.4; }
  .template-tags span { font-size: .68rem; padding: 3px 8px; }
}

@media (max-width: 640px) {
  .templates-grid { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); }
  .templates-page { padding: 24px 14px 50px; }
  .page-header { margin-bottom: 28px; }
  .page-header h1 { font-size: 1.4rem; }
  .template-preview { height: 260px; }
  #templateForm { display: flex; flex-direction: column; gap: 20px; }
}

/* ── TEMPLATES: Medium screens (tablets) ──────────────────── */
@media (max-width: 1024px) {
  .templates-page { padding: 36px 20px 60px; }
  .page-header h1 { font-size: 1.6rem; }
  .templates-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
  .template-preview { height: 340px; }
}

/* ── TEMPLATES: Large tablets ────────────────────────────────── */
@media (max-width: 768px) {
  .templates-page { padding: 32px 16px 60px; }
  .page-header h1 { font-size: 1.5rem; }
  .page-header p { font-size: .9rem; }
  .templates-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .template-preview { height: 300px; }
  .template-info { padding: 14px 12px; }
  .template-info h3 { font-size: .95rem; margin-bottom: 4px; }
  .template-info p { font-size: .78rem; line-height: 1.4; }
  .template-tags span { font-size: .68rem; padding: 3px 8px; }
}

/* ── RESUME TEMPLATE CONTENT: Base styling ─────────────────── */
.preview-paper h1, .preview-paper h2, .preview-paper h3 { word-wrap: break-word; }
.preview-paper ul, .preview-paper ol { padding-left: 16px; margin: 8px 0; }
.preview-paper li { margin-bottom: 4px; }
.preview-paper p { margin: 6px 0; }
.preview-paper table { width: 100%; border-collapse: collapse; }
.preview-paper td, .preview-paper th { padding: 4px 6px; }

/* ── PREVIEW RESPONSIVE: Desktop/Laptop (1200px+) ──────────── */
@media (min-width: 1201px) {
  .preview-page { padding: 24px; }
  .preview-paper { max-width: 850px; padding: 28px; font-size: 14px; }
}

/* ── PREVIEW RESPONSIVE: Large tablets (1024px) ──────────────── */
@media (max-width: 1024px) {
  .preview-page { padding: 16px; }
  .preview-toolbar { padding: 12px 16px; gap: 8px; }
  .preview-paper { max-width: 100%; padding: 20px; font-size: 13px; min-height: auto; }
  .preview-paper h1 { font-size: 18px; }
  .preview-paper h2 { font-size: 14px; }
  .btn.btn-sm { padding: 7px 13px; font-size: .78rem; }
}

/* ── PREVIEW RESPONSIVE: Tablets (768px) ────────────────────── */
@media (max-width: 768px) {
  .preview-page { padding: 12px; }
  .preview-toolbar { flex-direction: column; align-items: stretch; padding: 10px; }
  .toolbar-left, .toolbar-right { width: 100%; justify-content: space-around; }
  .preview-container { padding: 10px 0; }
  .preview-paper { padding: 16px; font-size: 12px; line-height: 1.5; }
  .preview-paper h1 { font-size: 16px; margin-bottom: 8px; }
  .preview-paper h2 { font-size: 13px; margin-bottom: 6px; }
  .preview-paper h3 { font-size: 12px; margin-bottom: 4px; }
  .preview-paper p { margin: 4px 0; }
  .preview-paper ul, .preview-paper ol { padding-left: 12px; margin: 4px 0; }
  .preview-paper li { margin-bottom: 2px; font-size: 11px; }
  .download-cta-bar { flex-direction: column-reverse; padding: 12px; }
  .btn.btn-sm { padding: 6px 10px; font-size: .7rem; width: auto; }
}

/* ── PREVIEW RESPONSIVE: Mobile landscape (640px) ──────────── */
@media (max-width: 640px) {
  .preview-page { padding: 10px; }
  .preview-toolbar { flex-direction: column; align-items: stretch; padding: 8px; }
  .toolbar-left, .toolbar-right { width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  .preview-container { padding: 8px 0; }
  .preview-paper { padding: 12px; font-size: 11px; line-height: 1.4; }
  .preview-paper h1 { font-size: 14px; margin-bottom: 6px; }
  .preview-paper h2 { font-size: 12px; margin-bottom: 4px; }
  .preview-paper h3 { font-size: 11px; margin-bottom: 3px; }
  .preview-paper p { margin: 2px 0; }
  .preview-paper ul, .preview-paper ol { padding-left: 10px; margin: 2px 0; }
  .preview-paper li { margin-bottom: 1px; font-size: 10px; }
  .download-cta-bar { flex-direction: column-reverse; align-items: stretch; padding: 10px; gap: 8px; }
  .cta-left { font-size: .75rem; margin-bottom: 8px; }
  .btn.btn-sm { padding: 5px 8px; font-size: .65rem; width: 100%; }
}

/* ── PREVIEW RESPONSIVE: Mobile portrait (480px) ───────────── */
@media (max-width: 480px) {
  .preview-page { padding: 8px; }
  .preview-toolbar { flex-direction: column; align-items: stretch; padding: 6px; gap: 6px; }
  .toolbar-left, .toolbar-right { width: 100%; flex-direction: column; gap: 4px; }
  .btn.btn-ghost.btn-sm, .btn.btn-primary.btn-download { width: 100%; padding: 6px 10px; font-size: .65rem; display: flex; justify-content: center; }
  .btn-paypal { display: none !important; }
  .preview-container { padding: 6px 0; margin: 0; }
  .preview-paper { padding: 10px; font-size: 10px; line-height: 1.3; min-height: auto; }
  .preview-paper h1 { font-size: 12px; margin: 6px 0 4px; }
  .preview-paper h2 { font-size: 11px; margin: 4px 0 2px; }
  .preview-paper h3 { font-size: 10px; margin: 2px 0 1px; }
  .preview-paper p { margin: 1px 0; font-size: 9px; }
  .preview-paper ul, .preview-paper ol { padding-left: 8px; margin: 1px 0; }
  .preview-paper li { margin: 0; font-size: 9px; }
  .preview-paper table { font-size: 8px; }
  .preview-paper td, .preview-paper th { padding: 2px 3px; }
  .download-cta-bar { flex-direction: column-reverse; align-items: stretch; padding: 8px; gap: 6px; }
  .cta-left { font-size: .7rem; margin-bottom: 0; text-align: center; }
  .btn.btn-primary.btn-xl { width: 100%; padding: 8px 12px; font-size: .75rem; }
  .price-badge { display: none; }
}

/* ── PREVIEW RESPONSIVE: Extra small (360px) ────────────────── */
@media (max-width: 360px) {
  .preview-page { padding: 6px; }
  .preview-toolbar { padding: 4px; gap: 4px; }
  .toolbar-left, .toolbar-right { gap: 2px; }
  .btn.btn-ghost.btn-sm { padding: 5px 8px; font-size: .6rem; }
  .preview-paper { padding: 8px; font-size: 9px; }
  .preview-paper h1 { font-size: 11px; margin: 4px 0 3px; }
  .preview-paper h2 { font-size: 10px; margin: 3px 0 2px; }
  .preview-paper h3 { font-size: 9px; }
  .preview-paper p { font-size: 8px; margin: 1px 0; }
  .preview-paper ul { padding-left: 6px; }
  .preview-paper li { font-size: 8px; margin: 0; padding: 0; }
  .download-cta-bar { padding: 6px; }
  .btn.btn-primary.btn-xl { padding: 6px 10px; font-size: .7rem; }
}
  .preview-page { padding: 10px; }
  .preview-toolbar { padding: 10px; flex-direction: column; align-items: stretch; }
  .toolbar-left, .toolbar-right { width: 100%; gap: 6px; flex-direction: column; align-items: stretch; }
  .btn.btn-sm { width: 100%; padding: 7px 10px; font-size: .72rem; }
  .preview-paper { padding: 12px; min-height: auto; max-width: 100%; overflow: visible; }
  .preview-container { padding: 6px 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .btn-download { width: 100%; padding: 9px 14px; font-size: .8rem; gap: 4px; }
  .btn-paypal { display: none; }
  .download-cta-bar { padding: 12px; font-size: .75rem; flex-direction: column; align-items: stretch; }
  .cta-left { width: 100%; text-align: center; margin-bottom: 8px; font-size: .8rem; }
  .template-cta { flex-direction: column; align-items: stretch; padding: 12px; }
  .selected-info { justify-content: center; font-size: .8rem; gap: 6px; }
  .btn-xl { width: 100%; padding: 10px 16px; font-size: .82rem; justify-content: center; }
}

/* ── TEMPLATE SELECTION: Extra small devices ───────────────── */
@media (max-width: 480px) {
  .templates-page { padding: 20px 12px 50px; }
  .page-header { margin-bottom: 24px; }
  .page-header h1 { font-size: 1.3rem; font-weight: 800; }
  .page-header p { font-size: .85rem; }
  .templates-grid { grid-template-columns: 1fr; gap: 12px; }
  .template-preview { height: 240px; padding: 6px; }
  .template-card { border-radius: 12px; margin-bottom: 4px; }
  .template-info { padding: 12px 10px; }
  .template-info h3 { font-size: .9rem; margin-bottom: 3px; }
  .template-info p { font-size: .75rem; line-height: 1.3; margin-bottom: 8px; }
  .template-tags { gap: 4px; }
  .template-tags span { font-size: .65rem; padding: 2px 6px; }
}

/* ── PAYMENT PAGE: responsive styles ────────────────────────── */
@media (max-width: 768px) {
  .payment-page { padding: 20px 12px; min-height: auto; }
  .payment-card { padding: 28px 20px; max-width: 100%; }
  .payment-header h1 { font-size: 1.4rem; }
  .order-summary { padding: 16px; margin-bottom: 20px; }
  .payment-features { grid-template-columns: 1fr; gap: 6px; }
  .pf-item { font-size: .78rem; }
  .order-item { gap: 10px; padding-bottom: 12px; margin-bottom: 10px; }
  .order-item-icon { width: 38px; height: 38px; font-size: .9rem; }
  .order-total strong { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .payment-page { padding: 16px 10px; }
  .payment-card { padding: 20px 16px; border-radius: 16px; }
  .payment-lock { width: 50px; height: 50px; font-size: 1.2rem; }
  .payment-header h1 { font-size: 1.2rem; margin-bottom: 4px; }
  .payment-header p { font-size: .8rem; }
  .order-summary { padding: 14px 12px; }
  .order-item-info strong { font-size: .87rem; }
  .order-item-price { font-size: 1.1rem; }
  .order-total { flex-direction: column; align-items: flex-start; gap: 8px; }
  .payment-separator { margin: 12px 0; font-size: .75rem; }
  .btn { width: 100%; padding: 10px 14px; margin-bottom: 8px; }
}

/* ── FORM NAV: full-width submit on tiny screens ─────────────── */
@media (max-width: 360px) {
  .form-nav { flex-wrap: wrap; }
  .form-nav .btn { flex: 1; justify-content: center; min-width: 120px; }
  .templates-page { padding: 16px 10px 40px; }
  .page-header h1 { font-size: 1.2rem; }
  .templates-grid { gap: 10px; }
  .template-preview { height: 200px; padding: 4px; }
  .template-info { padding: 10px 8px; }
  .template-info h3 { font-size: .85rem; }
  .template-info p { font-size: .7rem; }
  .preview-page { padding: 8px; }
  .preview-toolbar { padding: 8px; }
  .preview-paper { padding: 10px; font-size: 12px; }
  .btn.btn-sm { padding: 6px 10px; font-size: .7rem; }
}