/* ===== MODERN RESPONSIVE DESIGN SYSTEM ===== */
/* 
 * This CSS uses modern techniques for universal device compatibility:
 * 1. CSS Custom Properties (variables) with clamp() for fluid scaling
 * 2. Container Queries instead of Media Queries for better component isolation
 * 3. Viewport units (vw, vh) for responsive sizing
 * 4. No fixed aspect-ratios - uses flexible height/width combinations
 * 
 * Benefits:
 * - Works on ALL devices (iPhone Pro, Mini, Plus, Android, Tablets)
 * - Future-proof for new device sizes
 * - Better performance (less CSS, no multiple media queries)
 * - Easier maintenance (one set of rules for all devices)
 */

:root{
    --bg1:#0c0f14; --bg2:#141922;
    --white:#fff; --radius:24px;
    
    /* Modern responsive variables using clamp() for fluid scaling */
    --container-padding: clamp(8px, 2.5vw, 18px);
    --card-padding: clamp(14px, 4vw, 26px);
    --title-size: clamp(16px, 4.5vw, 24px);
    --subtitle-size: clamp(11px, 3vw, 14px);
    --input-padding: clamp(10px, 3vw, 13px) clamp(12px, 3.5vw, 14px);
    --btn-padding: clamp(10px, 3vw, 13px) clamp(12px, 3.5vw, 16px);
    --story-padding: clamp(6px, 2vw, 14px);
    --glass-padding: clamp(14px, 4vw, 26px);
    --cover-size: clamp(70px, 15vw, 96px);
    --album-title-size: clamp(16px, 4.5vw, 22px);
    --album-subtitle-size: clamp(10px, 2.5vw, 13px);
    --val-size: clamp(14px, 3.5vw, 18px);
}

/* Page bg */
.redeem-wrap{
    min-height:100vh; 
    padding: var(--container-padding);
    background:
        radial-gradient(1200px 700px at 15% -10%, #1b2330 0%, transparent 60%),
        radial-gradient(1200px 700px at 85% 110%, #0d1220 0%, transparent 60%),
        linear-gradient(180deg,var(--bg1),var(--bg2));
    color:var(--white);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Stack layout: form on top, preview below */
.stack{ max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:22px }

/* Card (form) */
.card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius);
    padding: var(--card-padding);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    backdrop-filter:saturate(140%) blur(14px);
    box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.title{font-weight:900;font-size: var(--title-size);margin:0 0 8px}
.subtitle{color:#e6eef8;font-size: var(--subtitle-size);margin:0 0 16px}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:12px}

.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row + .row{margin-top:12px}
.row > div{min-width:0}

/* Modern responsive grid using container queries */
@container (max-width: 680px) { 
    .row{grid-template-columns:1fr} 
}

label{font-size:12.5px;color:#f7fbff;display:block;margin:6px 2px}
input{
    width:100%;
    padding: var(--input-padding);
    border-radius:14px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.10);
    color:#fff;
    outline:none;
    box-sizing:border-box;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
input::placeholder{color:#d6deea}
input:focus{border-color:#ffffff;box-shadow:0 0 0 4px rgba(255,255,255,.10)}

.hint{color:#cfe0f3;font-size:12.5px;margin-top:6px}
.btn{
    display:inline-flex;justify-content:center;align-items:center;gap:8px;
    padding: var(--btn-padding);
    border-radius:14px;
    border:1px solid rgba(255,255,255,.26);
    background:#0f172a;color:#fff;font-weight:900;cursor:pointer;
    direction: rtl; /* Default RTL for buttons */
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.ok{color:#34d399}.error{color:#f87171}
.sep{height:1px;background:rgba(255,255,255,.12);margin:16px 0}

/* Radio buttons removed - direct download only */

/* RTL/LTR Text Direction Fixes */
.ltr {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: left;
}

/* LTR text in buttons - stronger specificity */
.btn .ltr,
button .ltr,
#downloadBtn .ltr {
    direction: ltr !important;
    unicode-bidi: plaintext !important;
    text-align: left !important;
    display: inline-block !important;
    font-family: inherit !important;
}

.rtl-auto {
    direction: auto;
    unicode-bidi: plaintext;
}

/* Fix punctuation in RTL text */
.rtl-punctuation {
    direction: rtl;
    unicode-bidi: plaintext;
}

.rtl-punctuation::after {
    content: "\200F"; /* RLM - Right-to-Left Mark */
}

/* Specific fix for subtitle punctuation */
.subtitle.rtl-punctuation {
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: right;
}

/* Modern responsive design - using CSS variables and clamp() */
/* All responsive behavior is now handled by CSS variables defined in :root */
/* This approach eliminates the need for multiple media queries and provides */
/* universal compatibility across all device sizes and aspect ratios */

/* Ensure proper spacing and prevent overlap */
.row > div { 
    min-width: 0; 
    overflow: hidden; 
}

.hint { 
    margin-top: 6px; 
    word-wrap: break-word; 
    line-height: 1.4; 
}

/* Options removed - direct download only */

/* Better button layout - Modern responsive */
.btn-container { 
    display: flex; 
    gap: clamp(8px, 2vw, 12px); 
    align-items: center; 
    margin-top: 14px; 
    flex-wrap: wrap; 
}

/* Container query for button layout */
@container (max-width: 480px) {
    .btn-container { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 8px; 
    }
    .btn-container .btn { 
        width: 100%; 
        justify-content: center; 
    }
}

/* Story preview responsiveness - Now handled by CSS variables and clamp() */
/* All responsive behavior is automatically handled by the modern CSS approach */

/* Preview holder (phone frame style) - Modern responsive approach */
.story{
    border-radius:28px; 
    padding: var(--story-padding);
    width: 100%;
    max-width: min(90vw, 400px);
    height: clamp(500px, 80vh, 800px);
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter:saturate(140%) blur(16px);
    backdrop-filter:saturate(140%) blur(16px);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    margin: 0 auto;
}

/* Glass card itself */
.glass{
    width:92%; 
    height:94%; 
    position:relative; 
    display:flex; 
    flex-direction:column; 
    gap: clamp(8px, 2vw, 12px);
    background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.12));
    border:1px solid rgba(255,255,255,.28);
    border-radius:28px; 
    padding: var(--glass-padding); 
    color:#ecf3ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.glass .cap{position:absolute; left:50%; top:-12px; transform:translateX(-50%); width:64px;height:30px;border-radius:0 0 18px 18px;background:#0b0d10; box-shadow:0 6px 20px rgba(0,0,0,.25)}
.head{ display:flex;justify-content:space-between;align-items:center;margin-bottom:6px }
.brand{font-weight:900;font-size:14px;color:#fff}
.badge{font-size:12px;background:#0f172a;color:#fff;border-radius:999px;padding:7px 12px}

.album{display:flex;gap: clamp(12px, 3vw, 18px);align-items:center}
.cover{
    width: var(--cover-size);
    height: var(--cover-size);
    border-radius:16px;
    border:1px solid rgba(255,255,255,.22);
    object-fit:cover;
    flex-shrink: 0;
}
.album .t{font-weight:900;font-size: var(--album-title-size);color:#fff}
.album .s{font-size: var(--album-subtitle-size);color:#e7edf6}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Modern responsive grid for key-value pairs */
@container (max-width: 600px){ 
    .kv{grid-template-columns:1fr} 
}
.box{border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.22);border-radius:16px;padding:14px}
.lbl{font-size:13px;color:#f3f7ff;margin-bottom:6px}
.val{font-weight:800;font-size: var(--val-size);color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.congrats{border-radius:16px;padding:12px 14px;background:linear-gradient(135deg,rgba(248,250,255,.95),rgba(236,241,255,.85));border:1px solid rgba(255,255,255,.28);color:#0b1220;font-weight:800;font-size:14px}
.serial{margin-top:auto; display:flex;justify-content:space-between;align-items:center;border:1px dashed rgba(255,255,255,.45); border-radius:16px;padding:14px}
.serial .small{font-size:12.5px;color:#e6edf6;margin-bottom:6px}
.serial .code{font-weight:900;font-size:22px;color:#ffffff}
.chip{background:#0f172a;color:#fff;border-radius:999px;padding:9px 14px;font-weight:800;font-size:13px}
.foot{display:flex;justify-content:space-between;align-items:center;color:#e2e8f0;font-size:12.5px}
.foot .me{font-weight:700}.foot .at{font-weight:900;color:#ffffff}


/* === Uniform style for email & date fields (same as other inputs) === */
.redeem-wrap input[type="email"],
.redeem-wrap input[type="date"]{
  width:100%;
  height: clamp(40px, 8vh, 43px);
  padding: var(--input-padding);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size: clamp(14px, 3.5vw, 16px);
  box-sizing:border-box;
  direction:ltr;
  text-align:left;
}
.redeem-wrap input[type="email"]:focus,
.redeem-wrap input[type="date"]:focus{
  border-color:#ffffff;
  box-shadow:0 0 0 4px rgba(255,255,255,.10);
}


/* === Birth Date field: exactly like other inputs === */
.redeem-wrap input#birth_date,
.redeem-wrap input[type="text"]#birth_date,
.redeem-wrap input[readonly]#birth_date{
  height: clamp(40px, 8vh, 43px);
  padding: var(--input-padding);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size: clamp(14px, 3.5vw, 16px);
  box-sizing:border-box;
  direction:ltr;
  text-align:left;
  cursor:text;
}
.redeem-wrap input#birth_date::placeholder{ color:#94a3b8; }
.redeem-wrap input#birth_date:focus{
  border-color:#ffffff;
  box-shadow:0 0 0 4px rgba(255,255,255,.10);
}

/* === Jalali picker panel: same theme as inputs === */
.pcal-container{ z-index:999999; }
.pcal-panel{
  background:rgba(30,41,59,.75) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:14px !important;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.45),
             0 10px 10px -5px rgba(0,0,0,.35) !important;
}
.pcal-btn{ border-radius:12px; }
.pcal-cell{ border-radius:10px; }


/* Birth date placeholder style (muted), same as other placeholders */
input#birth_date::placeholder{ color:#94a3b8; opacity:1; }
/* Optional visual cue when empty (keeps same box style) */
input#birth_date.is-empty{ color:#cbd5e1; }


/* === Calendar icon inside birth_date field === */
.redeem-wrap .date-field-wrapper{
  position: relative;
  display: flex;
  align-items: center;
}
.redeem-wrap .date-field-wrapper input#birth_date{
  padding-right: 40px; /* space for icon */
}
.redeem-wrap .date-field-wrapper .calendar-icon{
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  pointer-events: auto;
  cursor: pointer;
  color:#94a3b8;
}
.redeem-wrap .date-field-wrapper .calendar-icon:hover{ color:#fff; }

/* === Calendar grid cleanup: remove empty filler boxes === */
.pcal-cell.muted{ 
  visibility: hidden !important; 
  pointer-events: none !important;
}


/* Center calendar icon vertically within the input */
.redeem-wrap .date-field-wrapper{ position:relative; }
.redeem-wrap .date-field-wrapper .calendar-icon{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto; cursor:pointer; color:#94a3b8;
}
.redeem-wrap .date-field-wrapper .calendar-icon svg{ width:20px; height:20px; display:block; }