:root {
      --gold: #c9a96e;
      --dark: #1a1a2e;
      --cream: #f8f7f2;
      --card: #ffffff;
      --muted: #6d6d7f;
      --danger: #d93025;
      --success: #1f8d4f;
      --surface: #f5f4ef;
      --shadow: 0 10px 25px rgba(0,0,0,0.08);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { width: 100%; min-height: 100%; background: linear-gradient(180deg, #121331 0%, #1a1a2e 220px, #f8f7f2 100%); color: #1a1a2e; font-family: 'Poppins', sans-serif; }
    body { padding: 0; }
    .page { width: min(1100px, 94%); margin: 0 auto; padding: 90px 0 40px; }
    .sticky-header { position: sticky; top: 0; background: #fff; z-index: 40; border-bottom: 1px solid #eee; backdrop-filter: blur(6px); }
    .header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
    .brand { display: flex; flex-direction: column; gap: 2px; }
    .brand h1 { font-family: 'Playfair Display', serif; color: #1a1a2e; font-size: 20px; letter-spacing: 0.2px; }
    .brand span { color: #555; font-size: 12px; }
    .progress-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .step-item { min-width: 115px; display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 8px 10px; border-radius: 999px; background: #f1f0e9; color: #555; border: 1px solid #dfdbcc; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
    .step-item i { font-size: 11px; }
    .step-item.active { border-color: var(--gold); background: #fffbe8; color: #1a1a2e; box-shadow: 0 0 0 2px rgba(201,169,110,0.15); }
    .step-item.done { background: var(--gold); color: #1a1a2e; border-color: #b5923f; }
    .step-item:hover { transform: translateY(-1px); }
    .main-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; margin-top: 14px; border: 1px solid #efebdd; }
    .card-content { display: grid; grid-template-columns: 1fr; gap: 16px; background: #fff; padding: 20px; }
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    .section-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: #1a1a2e; }
    .section-title i { color: var(--gold); }
    .form-group { margin-bottom: 12px; }
    .form-label, label { font-size: 13px; font-weight: 500; color: #555; margin-bottom: 4px; display: inline-block; }
    input, textarea, select { width: 100%; min-height: 48px; border-radius: 10px; border: 1.2px solid #d8d4c5; background: #fff; padding: 11px 12px; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease; color: #1d1d2f; font-family: 'Poppins', sans-serif; }
    textarea { min-height: 100px; resize: vertical; padding-top: 11px; }
    input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,169,110,.15); }
    input[readonly], textarea[readonly] { background: #f5f2e6; border-color: #e6ddc4; }
    .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .form-group small { color: #777; font-weight: 400; font-size: 12px; }
    .helper { font-size: 12px; color: #858293; margin-top: 4px; }
    .error { border-color: #e13232 !important; }
    .error-text { font-size: 12px; color: #c11d1d; margin-top: 4px; display: block; }
    .success-text { font-size: 12px; color: #1f8d4f; margin-top: 4px; display: block; }
    .required { color: #c0392b; }
    .btn { border: 0; border-radius: 12px; cursor: pointer; font-weight: 700; font-family: 'Poppins', sans-serif; transition: transform .15s ease, background .15s ease; }
    .btn-primary { background: var(--gold); color: #1a1a2e; width: 100%; min-height: 52px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    .btn-primary:hover { transform: scale(1.01); background: #b5923f; }
    .btn-primary:disabled { opacity: .6; cursor: not-allowed; }
    .btn-outline { border: 1.6px solid #c9a96e; color: #1a1a2e; background: #fff; min-height: 44px; font-size: 13px; }
    .btn-outline:hover { background: #fff8e8; }
    .btn-sm { border: 1px dashed #c9a96e; background: #fff; color: #1a1a2e; font-size: 12px; padding: 9px 12px; border-radius: 10px; min-height: 42px; }
    .btn-sm:hover { background: #fff9ed; }
    .nav-btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
    .alert { border-radius: 10px; font-size: 13px; padding: 10px 12px; margin-top: 8px; }
    .alert-error { background: #fff3f3; border: 1px solid #f4c3c3; color: #c63636; }
    .alert-success { background: #f1fbf5; border: 1px solid #b5e4c8; color: #0d6b32; }
    .alert-info { background: #f2f6ff; border: 1px solid #c8d5ff; color: #243b7f; }
    .autosave-bar { font-size: 11px; color: #5d5d6f; text-align: right; margin-top: 6px; }
    .summary-card { border-radius: 14px; border: 1px solid #f2e8cf; background: #fffdf3; box-shadow: 0 8px 20px rgba(0,0,0,0.05); padding: 14px; margin-bottom: 12px; }
    .summary-card h3 { margin-bottom: 10px; color: #1a1a2e; font-size: 15px; font-weight: 700; font-family: 'Playfair Display', serif; }
    .summary-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #eee7d6; font-size: 13px; color: #2a2a3e; }
    .summary-item:last-child { border: none; margin-top: 4px; font-size: 15px; font-weight: 700; }
    .badge { background: #e9f9ec; color: #1f7f42; border-radius: 999px; font-size: 11px; padding: 2px 8px; font-weight: 600; }
    .loader-wrap { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.15); z-index: 999; align-items: center; justify-content: center; }
    .spinner { width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .form-divider { border: none; border-top: 1px solid rgba(201,169,110,.15); margin: 20px 0; }
    .gallery-item { border-radius: 10px; background: #f9f7f0; border: 1px solid #efe8d0; margin-bottom: 8px; padding: 8px; display: flex; gap: 8px; align-items: center; }
    .gallery-item input { margin-bottom: 0; flex: 1; }
    .story-item { border-radius: 10px; background: #f9f7f0; border: 1px solid #efe8d0; margin-bottom: 8px; padding: 12px; position: relative; }
    .story-item .remove-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #c12a2a; cursor: pointer; font-size: 16px; }
    .event-item { border-radius: 10px; background: #f9f7f0; border: 1px solid #efe8d0; margin-bottom: 8px; padding: 12px; position: relative; }
    .event-item .remove-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #c12a2a; cursor: pointer; font-size: 16px; }
    .photo-picker { display: flex; align-items: center; gap: 10px; border: 1.2px solid #d8d4c5; border-radius: 10px; padding: 8px 12px; background: #fff; margin-bottom: 8px; }
    .photo-picker button { border: 1px dashed #c9a96e; background: #fff; color: #1a1a2e; font-size: 11px; padding: 8px 10px; border-radius: 8px; min-height: 38px; white-space: nowrap; cursor: pointer; transition: background .2s; }
    .photo-picker button:hover { background: #fff9ed; }
    .btn-small { border: 1px dashed #c9a96e; background: #fff; color: #1a1a2e; font-size: 11px; padding: 8px 10px; border-radius: 8px; min-height: 38px; white-space: nowrap; cursor: pointer; transition: background .2s; }
    .btn-small:hover { background: #fff9ed; }
    .btn-secondary { border: 1px solid #ddd; background: #f5f3ed; color: #555; font-size: 13px; padding: 10px 16px; border-radius: 10px; min-height: 40px; white-space: nowrap; cursor: pointer; transition: background .2s; }
    .photo-picker input { flex: 1; margin-bottom: 0; min-height: 38px; }
    .card-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .price-big { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--gold); margin-top: 6px; font-weight: 700; }
    .card-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
    .music-picker-wrap { display: flex; align-items: center; gap: 10px; border: 1.2px solid #d8d4c5; border-radius: 10px; padding: 8px 12px; background: #fff; }
    .music-selected-display { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .music-selected-display .song-title { font-size: 13px; font-weight: 600; color: #1a1a2e; }
    .music-selected-display .song-artist { font-size: 11px; color: #888; }
    .music-modal-overlay { position: fixed; inset: 0; background: rgba(10,10,30,0.55); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; backdrop-filter: blur(4px); animation: fadeIn .2s ease; padding: 16px; overflow-y: auto; }
    .music-modal { background: #fff; border-radius: 20px; width: min(600px, 95vw); max-width: 95vw; height: auto; max-height: none; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden; margin: auto; flex-shrink: 0; }
    .music-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eee; font-weight: 700; font-size: 15px; font-family: 'Playfair Display', serif; color: #1a1a2e; }
    .music-modal-close { background: none; border: none; font-size: 18px; color: #888; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background .2s; }
    .music-modal-close:hover { background: #f1f0e9; color: #333; }
    .music-list-wrap { flex: 1; overflow-y: auto; max-height: 340px; min-height: 180px; padding: 8px 12px 10px 12px; }
    .music-search-wrap { position: relative; padding: 12px 16px; border-bottom: 1px solid #f0ebe0; }
    .music-search-icon { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: #999; font-size: 13px; }
    .music-search-input { width: 100%; border: 1.2px solid #ddd; border-radius: 10px; padding: 10px 12px 10px 34px; font-size: 13px; font-family: 'Poppins', sans-serif; color: #1a1a2e; transition: border-color .2s; background: #fafaf6; }
    .music-search-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,.12); }
    .music-loading { text-align: center; color: #aaa; padding: 40px; font-size: 13px; }
    .music-empty { text-align: center; color: #bbb; padding: 40px; font-size: 13px; }
    .music-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background .15s; border: 1.5px solid transparent; margin-bottom: 4px; }
    .music-item:hover { background: #fdf8ee; }
    .music-item.active { background: #fff8e8; border-color: var(--gold); }
    .music-item-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #c9a96e, #e4c98a); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; }
    .music-item-info { flex: 1; min-width: 0; }
    .music-item-title { font-size: 13px; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .music-item-artist { font-size: 11px; color: #888; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .music-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .music-play-btn { background: none; border: 1px solid #e0d8c5; border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #888; cursor: pointer; font-size: 12px; transition: all .15s; }
    .music-play-btn:hover, .music-play-btn.playing { background: var(--gold); border-color: var(--gold); color: #fff; }
    .music-select-btn { background: none; border: 1px solid #c9a96e; border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--gold); cursor: pointer; font-size: 12px; transition: all .15s; }
    .music-select-btn:hover, .music-select-btn.chosen { background: var(--gold); color: #fff; }
    .music-player-bar { background: #1a1a2e; color: #fff; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .music-player-info { display: flex; align-items: center; gap: 8px; font-size: 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .music-player-controls { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #bbb; }
    .music-player-controls button { background: none; border: 1px solid #444; color: #fff; border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; transition: background .15s; }
    .music-player-controls button:hover { background: var(--gold); border-color: var(--gold); }
    #seekBar { accent-color: var(--gold); }
    .music-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid #eee; }
    @media (max-width: 900px) {
      .page { padding-top: 60px; }
      .header-inner { flex-wrap: wrap; justify-content: center; }
      .step-item { min-width: 100px; font-size: 10px; }
      .card-grid-two { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .main-card { border-radius: 12px; }
      .card-content { padding: 14px; }
      .btn-primary { min-height: 50px; }
      .form-row, .grid2 { grid-template-columns: 1fr; }
      .step-item { flex: 1 1 40%; }
      .sticky-header { position: fixed; width: 100%; top: 0; left: 0; right: 0; z-index: 60; }
      body { padding-top: 90px; }
    }
    .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; }
    .gallery-card { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; aspect-ratio: 1/1; background: #f9f9f9; display: flex; align-items: center; justify-content: center; }
    .gallery-card img { width: 100%; height: 100%; object-fit: cover; }
    .gallery-card .btn-delete { position: absolute; top: 5px; right: 5px; background: rgba(255,0,0,0.7); color: white; border: none; border-radius: 4px; width: 24px; height: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; }
    .gallery-card .btn-delete:hover { background: red; }
    .photo-preview-card { position: relative; margin-top: 8px; display: inline-block; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; }
    .photo-preview-card img { max-width: 200px; display: block; }
    .photo-preview-card .btn-delete { position: absolute; top: 5px; right: 5px; background: rgba(255,0,0,0.7); color: white; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 11px; }
    /* Upload Progress */
    .upload-progress-container { position: fixed; bottom: 20px; right: 20px; width: 320px; background: white; border-radius: 8px 8px 0 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 10001; transform: translateY(110%); transition: transform 0.4s ease; overflow: hidden; border: 1px solid #ccc; border-bottom: none; }
    .upload-progress-container.active { transform: translateY(0); }
    .upload-progress-header { background: #323232; color: white; padding: 10px 16px; font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; cursor: default; }
    .upload-progress-body { padding: 12px 16px; display: flex; align-items: center; gap: 12px; background: #fff; }
    .progress-ring-wrap { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
    .progress-ring-wrap svg { transform: rotate(-90deg); width: 28px; height: 28px; }
    .progress-ring-wrap circle { fill: none; stroke-width: 3; }
    .progress-ring-bg { stroke: #eee; }
    .progress-ring-fill { stroke: #1a73e8; stroke-dasharray: 75.4; stroke-dashoffset: 75.4; transition: stroke-dashoffset 0.3s ease; }
    .upload-info { flex: 1; min-width: 0; }
    .upload-filename { font-size: 13px; font-weight: 500; color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
    .upload-status-text { font-size: 12px; color: #70757a; }
  
/* ============================================================
   IMORA — PREMIUM CUSTOMER FORM / VISUAL REDESIGN
   Clean luxury, large type, comfortable spacing, mobile first.
   ============================================================ */
:root{
  --bg:#f5f3ef;
  --paper:#fffdfa;
  --paper-2:#faf8f4;
  --ink:#25242a;
  --ink-soft:#4f4d55;
  --muted:#817f86;
  --line:#e5e1da;
  --line-strong:#d7d1c7;
  --gold:#ae8a52;
  --gold-2:#c9ad7c;
  --gold-pale:#f2eadc;
  --success:#2e8156;
  --danger:#b44e4e;
  --shadow:0 22px 60px rgba(38,35,30,.08);
  --shadow-small:0 8px 24px rgba(38,35,30,.055);
}

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(900px 360px at 50% -90px,rgba(174,138,82,.13),transparent 70%),
    linear-gradient(180deg,#f6f4f0 0%,#f8f6f2 34%,#f3f1ed 100%);
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

*{box-sizing:border-box}

button,input,textarea,select{font:inherit}

/* Header */
.sticky-header{
  background:rgba(250,249,246,.82)!important;
  border-bottom:1px solid rgba(37,36,42,.08)!important;
  box-shadow:0 8px 30px rgba(30,28,25,.045)!important;
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}

.header-inner{
  max-width:1040px!important;
  padding:15px 20px 13px!important;
}

.brand{
  gap:5px!important;
}

.brand h1{
  font-family:'Cormorant Garamond',serif!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:-.3px!important;
  color:var(--ink)!important;
}

.brand span{
  font-family:'DM Sans',sans-serif!important;
  font-size:11px!important;
  color:var(--muted)!important;
  letter-spacing:.15px!important;
}

/* Progress */
.progress-bar{
  max-width:1040px;
  margin:0 auto;
  gap:7px!important;
  padding:4px 0 2px!important;
  overflow-x:auto;
  scrollbar-width:none;
}
.progress-bar::-webkit-scrollbar{display:none}

.step-item{
  min-width:auto!important;
  height:34px;
  padding:0 13px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#8b8882!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.05px;
  box-shadow:none!important;
  transition:.2s ease!important;
  white-space:nowrap;
}
.step-item i{font-size:10px!important}
.step-item:hover{transform:none!important}
.step-item.active{
  background:var(--paper)!important;
  color:var(--ink)!important;
  border-color:#d9c9ad!important;
  box-shadow:0 5px 18px rgba(174,138,82,.12)!important;
}
.step-item.done{
  color:#735d38!important;
  background:var(--gold-pale)!important;
  border-color:#eadfc9!important;
}

/* Page + main shell */
.page{
  width:min(1040px,calc(100% - 32px))!important;
  margin:0 auto!important;
  padding:38px 0 60px!important;
}

.main-card{
  background:rgba(255,253,250,.96)!important;
  border:1px solid rgba(37,36,42,.08)!important;
  border-radius:28px!important;
  box-shadow:var(--shadow)!important;
  overflow:hidden;
}

.card-content{
  padding:44px 48px 42px!important;
  background:
    linear-gradient(180deg,rgba(255,253,250,.98),rgba(255,253,250,.92))!important;
}

/* Section titles */
.section-title{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:10px!important;
  margin:0 0 9px!important;
  padding:0 0 3px!important;
  color:var(--ink)!important;
  font-family:'Cormorant Garamond',serif!important;
  font-size:29px!important;
  line-height:1.15!important;
  font-weight:600!important;
  letter-spacing:-.25px!important;
}

.section-title i{
  color:var(--gold)!important;
  font-size:14px!important;
}

.section-title small{
  align-self:center;
  font-family:'DM Sans',sans-serif!important;
  font-size:11px!important;
  font-weight:600!important;
  color:var(--muted)!important;
  letter-spacing:0!important;
}

.section-title + .form-group,
.section-title + .form-row{
  margin-top:18px!important;
}

/* Add a refined divider under major sections without adding clutter */
.form-divider{
  margin:34px 0!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
}

/* Form typography */
.form-group{
  margin-bottom:21px!important;
}

.form-label,
label{
  display:block;
  margin-bottom:8px!important;
  color:var(--ink-soft)!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:600!important;
}

.helper,
.form-group small{
  display:block;
  margin-top:6px!important;
  color:var(--muted)!important;
  font-size:12px!important;
  line-height:1.55!important;
}

/* Inputs: larger and calmer */
input,textarea,select{
  width:100%;
  min-height:54px!important;
  padding:13px 15px!important;
  border:1px solid var(--line-strong)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--ink)!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important;
  line-height:1.45!important;
  box-shadow:0 1px 0 rgba(0,0,0,.015)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}

textarea{
  min-height:124px!important;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:#aaa7a1!important;
  opacity:1;
}

input:hover,textarea:hover,select:hover{
  border-color:#c9c3b8!important;
}

input:focus,textarea:focus,select:focus{
  outline:none!important;
  border-color:var(--gold)!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(174,138,82,.10)!important;
}

input[readonly],textarea[readonly]{
  background:#f7f4ee!important;
  color:#65626a!important;
  border-color:#e6e0d5!important;
}

/* Grid */
.form-row,
.grid2,
.card-grid-two{
  gap:18px!important;
}

/* Soft cards for optional/repeated content */
.summary-card,
.gallery-item,
.story-item,
.event-item,
.photo-picker,
.music-picker-wrap{
  background:var(--paper-2)!important;
  border:1px solid var(--line)!important;
  border-radius:17px!important;
  box-shadow:none!important;
}

.summary-card{
  padding:20px!important;
}

.gallery-item,
.story-item,
.event-item{
  padding:16px!important;
  margin-bottom:12px!important;
}

.summary-card h3{
  margin-top:0;
  font-family:'Cormorant Garamond',serif!important;
  font-size:23px!important;
  color:var(--ink)!important;
}

/* Upload actions */
.btn{
  min-height:46px;
  border-radius:12px!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:13px!important;
  font-weight:600!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease!important;
}

.btn-sm{
  min-height:44px!important;
  font-size:13px!important;
}

.btn-primary{
  min-height:54px!important;
  padding:0 22px!important;
  background:var(--ink)!important;
  border:1px solid var(--ink)!important;
  color:#fff!important;
  font-size:14px!important;
  box-shadow:0 10px 25px rgba(37,36,42,.15)!important;
}

.btn-primary:hover{
  background:#35343d!important;
  transform:translateY(-1px)!important;
  box-shadow:0 14px 30px rgba(37,36,42,.18)!important;
}

.btn-outline{
  min-height:54px!important;
  background:#fff!important;
  color:var(--ink-soft)!important;
  border:1px solid var(--line-strong)!important;
}

.btn-outline:hover{
  background:#faf8f4!important;
  border-color:#c8c1b6!important;
}

.btn-secondary,
.btn-small{
  background:#f4f1eb!important;
  border:1px solid #e5dfd4!important;
  color:#625b50!important;
}

.nav-btns{
  display:flex!important;
  gap:12px!important;
  margin-top:30px!important;
}

.nav-btns .btn{
  flex:1;
}

/* Photo previews */
.photo-preview-card{
  position:relative;
  overflow:hidden;
  border-radius:14px!important;
  border:1px solid var(--line)!important;
  background:#f4f1eb;
  box-shadow:var(--shadow-small);
}

.photo-preview-card img{
  display:block;
  width:100%;
  max-height:280px;
  object-fit:cover;
}

.btn-delete{
  width:34px!important;
  height:34px!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  border-radius:50%!important;
  background:rgba(37,36,42,.84)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
}

/* Upload progress: make it feel like part of the product, not a technical panel */
.upload-progress-container{
  width:min(360px,calc(100% - 24px))!important;
  right:12px!important;
  bottom:12px!important;
  padding:15px!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:rgba(255,253,250,.96)!important;
  box-shadow:0 18px 45px rgba(30,28,25,.14)!important;
}

/* Alerts */
.alert{
  border-radius:13px!important;
  padding:13px 15px!important;
  font-size:13px!important;
}

/* Autosave should be quiet */
.autosave-bar{
  margin-top:9px!important;
  color:#99958d!important;
  font-size:11px!important;
}

/* Loader */
.loader-wrap{
  background:rgba(37,36,42,.22)!important;
  backdrop-filter:blur(6px);
}
.spinner{
  width:42px!important;
  height:42px!important;
  border-width:3px!important;
  border-color:#e9e1d4!important;
  border-top-color:var(--gold)!important;
}

/* Success state */
.card-content > div[style*="text-align:center"]{
  max-width:700px!important;
  margin:0 auto!important;
  padding:54px 20px!important;
}

.card-content > div[style*="text-align:center"] h2{
  font-family:'Cormorant Garamond',serif!important;
  font-size:38px!important;
  line-height:1.05!important;
  font-weight:600!important;
  color:var(--ink)!important;
}

.card-content > div[style*="text-align:center"] .success-message{
  font-size:15px!important;
  color:var(--muted)!important;
  line-height:1.75!important;
}

/* Desktop: give the form breathing room without becoming oversized */
@media(min-width:761px){
  .tab-content{
    max-width:820px!important;
    margin:0 auto!important;
    width:100%!important;
  }
}

/* Mobile */
@media(max-width:760px){
  body{font-size:15px}

  .page{
    width:calc(100% - 18px)!important;
    padding:18px 0 30px!important;
  }

  .header-inner{
    padding:12px 10px 10px!important;
  }

  .brand h1{
    font-size:25px!important;
  }

  .brand span{
    font-size:10.5px!important;
  }

  .progress-bar{
    gap:5px!important;
    padding:3px 0!important;
  }

  .step-item{
    height:33px!important;
    padding:0 11px!important;
    font-size:10.5px!important;
  }

  .main-card{
    margin-top:12px!important;
    border-radius:21px!important;
  }

  .card-content{
    padding:28px 18px 26px!important;
  }

  .section-title{
    font-size:27px!important;
  }

  .section-title i{
    font-size:12px!important;
  }

  .form-group{
    margin-bottom:18px!important;
  }

  .form-row,
  .grid2,
  .card-grid-two{
    grid-template-columns:1fr!important;
  }

  input,textarea,select{
    min-height:54px!important;
    font-size:15px!important;
    border-radius:13px!important;
  }

  textarea{
    min-height:120px!important;
  }

  .form-label,label{
    font-size:13px!important;
  }

  .helper,.form-group small{
    font-size:11.5px!important;
  }

  .nav-btns{
    flex-direction:column-reverse!important;
    gap:9px!important;
  }

  .nav-btns .btn{
    width:100%!important;
  }

  .card-content > div[style*="text-align:center"] h2{
    font-size:34px!important;
  }
}

/* Accessibility / comfort */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

  
/* Hide implementation-only UI text if present in legacy fragments */
.google-drive-label,
.drive-label,
.storage-label,
.technical-note,
.manual-url-label{
  display:none!important;
}

  


                .payment-method-card { border:1px solid #ddd; border-radius:10px; padding:10px 6px; text-align:center; cursor:pointer; background:#fff; transition:all 0.2s; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
                .payment-method-card:hover { border-color:var(--gold); }
                .payment-method-card input[type="radio"] { position:absolute; opacity:0; }
                .payment-method-card input[type="radio"]:checked + .pm-content { color:var(--gold); }
                .payment-method-card input[type="radio"]:checked ~ .pm-bg { border:2px solid var(--gold); background:#fffdf8; position:absolute; inset:0; border-radius:10px; z-index:-1; }
                .pm-content { font-size:11px; font-weight:600; color:#444; pointer-events:none; z-index:1; }
                .pm-content small { display:block; font-size:9px; color:#888; font-weight:400; margin-top:2px; }
              

/* =========================================================
   IMORA PREMIUM FORM SYSTEM v2
   Shared visual layer — keeps existing functionality intact.
   ========================================================= */
:root{
  --im-bg:#f4f1ec;
  --im-paper:#fffdf9;
  --im-paper-soft:#faf7f2;
  --im-ink:#26242a;
  --im-text:#4f4c53;
  --im-muted:#85818a;
  --im-line:#e6e0d7;
  --im-line-strong:#d5cec2;
  --im-gold:#ad8953;
  --im-gold-soft:#f1e8d8;
  --im-shadow:0 24px 65px rgba(35,31,25,.09);
  --im-shadow-sm:0 8px 26px rgba(35,31,25,.055);
}
html,body{
  background:
    radial-gradient(800px 340px at 50% -80px,rgba(173,137,83,.13),transparent 70%),
    linear-gradient(180deg,#f6f3ee 0,#f8f6f2 40%,#f2efea 100%) !important;
  color:var(--im-ink) !important;
  font-family:'DM Sans','Poppins',sans-serif !important;
  font-size:15px !important;
  line-height:1.6 !important;
  -webkit-font-smoothing:antialiased;
}
.page{
  width:min(1040px,calc(100% - 28px)) !important;
  margin:0 auto !important;
  padding:34px 0 56px !important;
}
.sticky-header{
  background:rgba(255,253,249,.84) !important;
  border-bottom:1px solid rgba(38,36,42,.08) !important;
  box-shadow:0 8px 28px rgba(35,31,25,.045) !important;
  backdrop-filter:blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(135%) !important;
}
.header-inner{
  max-width:1040px !important;
  padding:14px 16px 12px !important;
}
.brand{gap:4px !important}
.brand h1{
  font-family:'Cormorant Garamond','Playfair Display',serif !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:-.3px !important;
  color:var(--im-ink) !important;
}
.brand span{
  font-family:'DM Sans','Poppins',sans-serif !important;
  font-size:11px !important;
  color:var(--im-muted) !important;
}
.progress-wrap{
  background:rgba(255,253,249,.72) !important;
  border:1px solid var(--im-line) !important;
  border-radius:16px !important;
  padding:9px !important;
  box-shadow:var(--im-shadow-sm) !important;
}
.progress-bar,.step-row{
  gap:6px !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  scrollbar-width:none;
}
.progress-bar::-webkit-scrollbar,.step-row::-webkit-scrollbar{display:none}
.step-item{
  min-width:auto !important;
  height:36px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#89858d !important;
  border:1px solid transparent !important;
  font-size:11px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
.step-item i{font-size:10px !important}
.step-item.active{
  background:var(--im-paper) !important;
  color:var(--im-ink) !important;
  border-color:#d9c8aa !important;
  box-shadow:0 5px 16px rgba(173,137,83,.12) !important;
}
.step-item.done{
  background:var(--im-gold-soft) !important;
  color:#705b3a !important;
  border-color:#e5d7bd !important;
}
.step-item:hover{transform:none !important}
.main-card{
  background:var(--im-paper) !important;
  border:1px solid rgba(38,36,42,.08) !important;
  border-radius:27px !important;
  box-shadow:var(--im-shadow) !important;
  margin-top:16px !important;
  overflow:hidden !important;
}
.card-content{
  padding:42px 46px !important;
  gap:24px !important;
  background:linear-gradient(180deg,rgba(255,253,249,.98),rgba(255,253,249,.94)) !important;
}
.tab-content{animation:imFade .28s ease both !important}
@keyframes imFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.section-title,.section-header{
  font-family:'Cormorant Garamond','Playfair Display',serif !important;
  color:var(--im-ink) !important;
  font-size:29px !important;
  line-height:1.12 !important;
  font-weight:600 !important;
  letter-spacing:-.2px !important;
  margin-bottom:16px !important;
  border-bottom:0 !important;
  padding-bottom:0 !important;
}
.section-title i,.section-header i{color:var(--im-gold) !important}
.section-card{
  background:var(--im-paper-soft) !important;
  border:1px solid var(--im-line) !important;
  border-radius:18px !important;
  box-shadow:none !important;
  padding:21px !important;
  margin-bottom:18px !important;
}
.section-card::before{display:none !important}
.form-group{margin-bottom:20px !important}
.form-label,label,.form-group label{
  display:block !important;
  color:var(--im-text) !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  margin-bottom:8px !important;
}
.form-group small,.helper{
  color:var(--im-muted) !important;
  font-size:12px !important;
  line-height:1.55 !important;
}
input,textarea,select{
  min-height:54px !important;
  border-radius:14px !important;
  border:1px solid var(--im-line-strong) !important;
  background:#fff !important;
  color:var(--im-ink) !important;
  padding:13px 15px !important;
  font-family:'DM Sans','Poppins',sans-serif !important;
  font-size:15px !important;
  line-height:1.45 !important;
  box-shadow:0 1px 0 rgba(0,0,0,.012) !important;
}
textarea{min-height:124px !important}
input::placeholder,textarea::placeholder{color:#aaa6a0 !important;opacity:1}
input:hover,textarea:hover,select:hover{border-color:#c7c0b4 !important}
input:focus,textarea:focus,select:focus{
  outline:none !important;
  border-color:var(--im-gold) !important;
  box-shadow:0 0 0 4px rgba(173,137,83,.10) !important;
}
input[readonly],textarea[readonly]{background:#f6f2eb !important;border-color:#e5ddd0 !important}
.grid2,.grid3,.form-grid-2,.form-grid-3,.form-row{gap:18px !important}
.form-divider{border-color:var(--im-line) !important;margin:32px 0 !important}
.btn{
  border-radius:13px !important;
  font-family:'DM Sans','Poppins',sans-serif !important;
  font-weight:700 !important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease !important;
}
.btn-primary{
  min-height:54px !important;
  background:var(--im-ink) !important;
  color:#fff !important;
  border:1px solid var(--im-ink) !important;
  box-shadow:0 10px 25px rgba(38,36,42,.14) !important;
  font-size:14px !important;
}
.btn-primary:hover{transform:translateY(-1px) !important;background:#35333b !important;box-shadow:0 14px 30px rgba(38,36,42,.18) !important}
.btn-outline{
  min-height:54px !important;
  background:#fff !important;
  color:var(--im-text) !important;
  border:1px solid var(--im-line-strong) !important;
  font-size:14px !important;
}
.btn-outline:hover{background:var(--im-paper-soft) !important;border-color:#c4bbae !important}
.btn-sm,.btn-small{
  min-height:44px !important;
  border-radius:11px !important;
  border:1px solid #d9ccb7 !important;
  background:#fff !important;
  color:#67553a !important;
  font-size:13px !important;
}
.nav-btns{gap:12px !important;margin-top:30px !important}
.alert{border-radius:13px !important;padding:13px 15px !important;font-size:13px !important}
.music-picker-wrap,.photo-picker,.summary-card,.gallery-item,.story-item,.event-item{
  background:var(--im-paper-soft) !important;
  border:1px solid var(--im-line) !important;
  border-radius:17px !important;
  box-shadow:none !important;
}
.gallery-item,.story-item,.event-item{padding:15px !important}
.summary-card{padding:20px !important}
.summary-card h3{font-family:'Cormorant Garamond','Playfair Display',serif !important;font-size:24px !important;color:var(--im-ink) !important}
.autosave-bar{font-size:11px !important;color:#9a958d !important;margin-top:9px !important}
.loader-wrap{background:rgba(38,36,42,.20) !important;backdrop-filter:blur(6px)}
.spinner{border-color:#ebe2d3 !important;border-top-color:var(--im-gold) !important}
.upload-progress-container{
  border:1px solid var(--im-line) !important;
  border-radius:17px !important;
  box-shadow:0 18px 45px rgba(35,31,25,.14) !important;
}
@media(min-width:761px){
  .tab-content{max-width:820px !important;margin:0 auto !important}
}
@media(max-width:760px){
  body{font-size:15px !important}
  .page{width:calc(100% - 18px) !important;padding:18px 0 30px !important}
  .header-inner{padding:12px 10px 10px !important}
  .brand h1{font-size:26px !important}
  .progress-wrap{border-radius:14px !important;padding:7px !important}
  .step-item{height:34px !important;padding:0 11px !important;font-size:10.5px !important}
  .main-card{border-radius:21px !important;margin-top:12px !important}
  .card-content{padding:28px 18px !important}
  .section-title,.section-header{font-size:27px !important;margin-bottom:14px !important}
  .section-card{padding:17px !important;border-radius:16px !important}
  .form-group{margin-bottom:18px !important}
  input,textarea,select{min-height:54px !important;font-size:15px !important}
  .form-grid-2,.form-grid-3,.grid2,.grid3,.form-row{grid-template-columns:1fr !important}
  .nav-btns{flex-direction:column-reverse !important}
  .nav-btns .btn{width:100% !important}
}


/* ============================================================
   IMORA — PREMIUM CUSTOMER FORM / VISUAL REDESIGN
   Clean luxury, large type, comfortable spacing, mobile first.
   ============================================================ */
:root{
  --bg:#f5f3ef;
  --paper:#fffdfa;
  --paper-2:#faf8f4;
  --ink:#25242a;
  --ink-soft:#4f4d55;
  --muted:#817f86;
  --line:#e5e1da;
  --line-strong:#d7d1c7;
  --gold:#ae8a52;
  --gold-2:#c9ad7c;
  --gold-pale:#f2eadc;
  --success:#2e8156;
  --danger:#b44e4e;
  --shadow:0 22px 60px rgba(38,35,30,.08);
  --shadow-small:0 8px 24px rgba(38,35,30,.055);
}

html{
  scroll-behavior:smooth;
  background:var(--bg);
}

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(900px 360px at 50% -90px,rgba(174,138,82,.13),transparent 70%),
    linear-gradient(180deg,#f6f4f0 0%,#f8f6f2 34%,#f3f1ed 100%);
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

*{box-sizing:border-box}

button,input,textarea,select{font:inherit}

/* Header */
.sticky-header{
  background:rgba(250,249,246,.82)!important;
  border-bottom:1px solid rgba(37,36,42,.08)!important;
  box-shadow:0 8px 30px rgba(30,28,25,.045)!important;
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}

.header-inner{
  max-width:1040px!important;
  padding:15px 20px 13px!important;
}

.brand{
  gap:5px!important;
}

.brand h1{
  font-family:'Cormorant Garamond',serif!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:-.3px!important;
  color:var(--ink)!important;
}

.brand span{
  font-family:'DM Sans',sans-serif!important;
  font-size:11px!important;
  color:var(--muted)!important;
  letter-spacing:.15px!important;
}

/* Progress */
.progress-bar{
  max-width:1040px;
  margin:0 auto;
  gap:7px!important;
  padding:4px 0 2px!important;
  overflow-x:auto;
  scrollbar-width:none;
}
.progress-bar::-webkit-scrollbar{display:none}

.step-item{
  min-width:auto!important;
  height:34px;
  padding:0 13px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#8b8882!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.05px;
  box-shadow:none!important;
  transition:.2s ease!important;
  white-space:nowrap;
}
.step-item i{font-size:10px!important}
.step-item:hover{transform:none!important}
.step-item.active{
  background:var(--paper)!important;
  color:var(--ink)!important;
  border-color:#d9c9ad!important;
  box-shadow:0 5px 18px rgba(174,138,82,.12)!important;
}
.step-item.done{
  color:#735d38!important;
  background:var(--gold-pale)!important;
  border-color:#eadfc9!important;
}

/* Page + main shell */
.page{
  width:min(1040px,calc(100% - 32px))!important;
  margin:0 auto!important;
  padding:38px 0 60px!important;
}

.main-card{
  background:rgba(255,253,250,.96)!important;
  border:1px solid rgba(37,36,42,.08)!important;
  border-radius:28px!important;
  box-shadow:var(--shadow)!important;
  overflow:hidden;
}

.card-content{
  padding:44px 48px 42px!important;
  background:
    linear-gradient(180deg,rgba(255,253,250,.98),rgba(255,253,250,.92))!important;
}

/* Section titles */
.section-title{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:10px!important;
  margin:0 0 9px!important;
  padding:0 0 3px!important;
  color:var(--ink)!important;
  font-family:'Cormorant Garamond',serif!important;
  font-size:29px!important;
  line-height:1.15!important;
  font-weight:600!important;
  letter-spacing:-.25px!important;
}

.section-title i{
  color:var(--gold)!important;
  font-size:14px!important;
}

.section-title small{
  align-self:center;
  font-family:'DM Sans',sans-serif!important;
  font-size:11px!important;
  font-weight:600!important;
  color:var(--muted)!important;
  letter-spacing:0!important;
}

.section-title + .form-group,
.section-title + .form-row{
  margin-top:18px!important;
}

/* Add a refined divider under major sections without adding clutter */
.form-divider{
  margin:34px 0!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
}

/* Form typography */
.form-group{
  margin-bottom:21px!important;
}

.form-label,
label{
  display:block;
  margin-bottom:8px!important;
  color:var(--ink-soft)!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:600!important;
}

.helper,
.form-group small{
  display:block;
  margin-top:6px!important;
  color:var(--muted)!important;
  font-size:12px!important;
  line-height:1.55!important;
}

/* Inputs: larger and calmer */
input,textarea,select{
  width:100%;
  min-height:54px!important;
  padding:13px 15px!important;
  border:1px solid var(--line-strong)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--ink)!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:15px!important;
  line-height:1.45!important;
  box-shadow:0 1px 0 rgba(0,0,0,.015)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}

textarea{
  min-height:124px!important;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:#aaa7a1!important;
  opacity:1;
}

input:hover,textarea:hover,select:hover{
  border-color:#c9c3b8!important;
}

input:focus,textarea:focus,select:focus{
  outline:none!important;
  border-color:var(--gold)!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(174,138,82,.10)!important;
}

input[readonly],textarea[readonly]{
  background:#f7f4ee!important;
  color:#65626a!important;
  border-color:#e6e0d5!important;
}

/* Grid */
.form-row,
.grid2,
.card-grid-two{
  gap:18px!important;
}

/* Soft cards for optional/repeated content */
.summary-card,
.gallery-item,
.story-item,
.event-item,
.photo-picker,
.music-picker-wrap{
  background:var(--paper-2)!important;
  border:1px solid var(--line)!important;
  border-radius:17px!important;
  box-shadow:none!important;
}

.summary-card{
  padding:20px!important;
}

.gallery-item,
.story-item,
.event-item{
  padding:16px!important;
  margin-bottom:12px!important;
}

.summary-card h3{
  margin-top:0;
  font-family:'Cormorant Garamond',serif!important;
  font-size:23px!important;
  color:var(--ink)!important;
}

/* Upload actions */
.btn{
  min-height:46px;
  border-radius:12px!important;
  font-family:'DM Sans',sans-serif!important;
  font-size:13px!important;
  font-weight:600!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease!important;
}

.btn-sm{
  min-height:44px!important;
  font-size:13px!important;
}

.btn-primary{
  min-height:54px!important;
  padding:0 22px!important;
  background:var(--ink)!important;
  border:1px solid var(--ink)!important;
  color:#fff!important;
  font-size:14px!important;
  box-shadow:0 10px 25px rgba(37,36,42,.15)!important;
}

.btn-primary:hover{
  background:#35343d!important;
  transform:translateY(-1px)!important;
  box-shadow:0 14px 30px rgba(37,36,42,.18)!important;
}

.btn-outline{
  min-height:54px!important;
  background:#fff!important;
  color:var(--ink-soft)!important;
  border:1px solid var(--line-strong)!important;
}

.btn-outline:hover{
  background:#faf8f4!important;
  border-color:#c8c1b6!important;
}

.btn-secondary,
.btn-small{
  background:#f4f1eb!important;
  border:1px solid #e5dfd4!important;
  color:#625b50!important;
}

.nav-btns{
  display:flex!important;
  gap:12px!important;
  margin-top:30px!important;
}

.nav-btns .btn{
  flex:1;
}

/* Photo previews */
.photo-preview-card{
  position:relative;
  overflow:hidden;
  border-radius:14px!important;
  border:1px solid var(--line)!important;
  background:#f4f1eb;
  box-shadow:var(--shadow-small);
}

.photo-preview-card img{
  display:block;
  width:100%;
  max-height:280px;
  object-fit:cover;
}

.btn-delete{
  width:34px!important;
  height:34px!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  border-radius:50%!important;
  background:rgba(37,36,42,.84)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
}

/* Upload progress: make it feel like part of the product, not a technical panel */
.upload-progress-container{
  width:min(360px,calc(100% - 24px))!important;
  right:12px!important;
  bottom:12px!important;
  padding:15px!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:rgba(255,253,250,.96)!important;
  box-shadow:0 18px 45px rgba(30,28,25,.14)!important;
}

/* Alerts */
.alert{
  border-radius:13px!important;
  padding:13px 15px!important;
  font-size:13px!important;
}

/* Autosave should be quiet */
.autosave-bar{
  margin-top:9px!important;
  color:#99958d!important;
  font-size:11px!important;
}

/* Loader */
.loader-wrap{
  background:rgba(37,36,42,.22)!important;
  backdrop-filter:blur(6px);
}
.spinner{
  width:42px!important;
  height:42px!important;
  border-width:3px!important;
  border-color:#e9e1d4!important;
  border-top-color:var(--gold)!important;
}

/* Success state */
.card-content > div[style*="text-align:center"]{
  max-width:700px!important;
  margin:0 auto!important;
  padding:54px 20px!important;
}

.card-content > div[style*="text-align:center"] h2{
  font-family:'Cormorant Garamond',serif!important;
  font-size:38px!important;
  line-height:1.05!important;
  font-weight:600!important;
  color:var(--ink)!important;
}

.card-content > div[style*="text-align:center"] .success-message{
  font-size:15px!important;
  color:var(--muted)!important;
  line-height:1.75!important;
}

/* Desktop: give the form breathing room without becoming oversized */
@media(min-width:761px){
  .tab-content{
    max-width:820px!important;
    margin:0 auto!important;
    width:100%!important;
  }
}

/* Mobile */
@media(max-width:760px){
  body{font-size:15px}

  .page{
    width:calc(100% - 18px)!important;
    padding:18px 0 30px!important;
  }

  .header-inner{
    padding:12px 10px 10px!important;
  }

  .brand h1{
    font-size:25px!important;
  }

  .brand span{
    font-size:10.5px!important;
  }

  .progress-bar{
    gap:5px!important;
    padding:3px 0!important;
  }

  .step-item{
    height:33px!important;
    padding:0 11px!important;
    font-size:10.5px!important;
  }

  .main-card{
    margin-top:12px!important;
    border-radius:21px!important;
  }

  .card-content{
    padding:28px 18px 26px!important;
  }

  .section-title{
    font-size:27px!important;
  }

  .section-title i{
    font-size:12px!important;
  }

  .form-group{
    margin-bottom:18px!important;
  }

  .form-row,
  .grid2,
  .card-grid-two{
    grid-template-columns:1fr!important;
  }

  input,textarea,select{
    min-height:54px!important;
    font-size:15px!important;
    border-radius:13px!important;
  }

  textarea{
    min-height:120px!important;
  }

  .form-label,label{
    font-size:13px!important;
  }

  .helper,.form-group small{
    font-size:11.5px!important;
  }

  .nav-btns{
    flex-direction:column-reverse!important;
    gap:9px!important;
  }

  .nav-btns .btn{
    width:100%!important;
  }

  .card-content > div[style*="text-align:center"] h2{
    font-size:34px!important;
  }
}

/* Accessibility / comfort */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

  
/* Hide implementation-only UI text if present in legacy fragments */
.google-drive-label,
.drive-label,
.storage-label,
.technical-note,
.manual-url-label{
  display:none!important;
}

  
/* Customer-facing cleanup: implementation details remain internal */
.google-drive-label,.drive-label,.storage-label,.technical-note,.manual-url-label,
.database-label,.supabase-label,.backend-label,.storage-note{display:none!important;}


#kh-fields{display:grid;gap:18px}.kh-section{display:block!important}.kh-section .form-row{align-items:start}.kh-section textarea{min-height:100px}.kh-section input[type=file]{margin-top:8px}.kh-submit{margin-top:20px}.kh-summary{background:#fffbe8;border:1px solid #dfdbcc;border-radius:12px;padding:14px;margin-bottom:18px}.success-result{text-align:center;padding:35px 15px}