/* ═══════════════════════════════════════════════
   INISFF-2026 Delegate ID Card Styles
   ═══════════════════════════════════════════════ */

:root {
  --card-w:      380px;
  --card-bg:     #8B0000;    /* deep crimson — matches original */
  --card-radius: 18px;
  --gold:        #FFD700;
  --white:       #FFFFFF;
  --purple:      #7B2D8B;
  --pink:        #E040FB;
  --frame-grad:  linear-gradient(135deg, #E040FB 0%, #7B2D8B 50%, #FFD700 100%);
  --font-title:  'Arial Black', 'Impact', sans-serif;
  --font-body:   'Arial', sans-serif;
}

/* ── Wrapper ─────────────────────────────────── */
.inisff-id-wrapper {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             16px;
  padding:         24px 16px;
  font-family:     var(--font-body);
}

/* ── Print button ────────────────────────────── */
.inisff-print-bar { display: flex; justify-content: center; }
.inisff-print-btn {
  background:    var(--card-bg);
  color:         var(--white);
  border:        none;
  padding:       10px 28px;
  border-radius: 8px;
  font-size:     15px;
  font-weight:   700;
  cursor:        pointer;
  letter-spacing: 0.5px;
  transition:    opacity .2s;
}
.inisff-print-btn:hover { opacity: .85; }

/* ── Card shell ──────────────────────────────── */
.inisff-card {
  width:            var(--card-w);
  background:       var(--card-bg);
  border-radius:    var(--card-radius);
  overflow:         hidden;
  box-shadow:       0 8px 40px rgba(0,0,0,.45);
  color:            var(--white);
  position:         relative;
}

/* ── Top logos bar ───────────────────────────── */
.inisff-top-bar {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          10px 14px 6px;
  background:       var(--white);
}
.inisff-logo {
  font-size:        9px;
  line-height:      1.3;
  color:            #222;
  text-align:       center;
}
.inisff-logo-tsoi { display: flex; align-items: center; gap: 4px; }
.tsoi-mark {
  font-size:    18px;
  font-weight:  900;
  color:        #000;
  border-right: 2px solid #000;
  padding-right: 5px;
}
.tsoi-sub { font-size: 8px; font-weight: 700; text-align: left; line-height:1.2; }

.inisff-festival-badge {
  text-align:  center;
  line-height: 1.2;
}
.inisff-badge-stars { font-size: 10px; color: var(--gold); letter-spacing:2px; }
.inisff-badge-icon  { font-size: 26px; }
.inisff-badge-year  { font-size: 10px; font-weight: 900; color: #333; }

.inisff-logo-famsi {
  font-size:   8px;
  text-align:  right;
  line-height: 1.3;
}
.inisff-logo-famsi strong { display: block; font-size: 18px; font-weight:900; color:#000; }

/* ── Festival title ──────────────────────────── */
.inisff-title {
  text-align:  center;
  padding:     12px 14px 8px;
}
.inisff-title h1 {
  font-family:    var(--font-title);
  font-size:      16px;
  font-weight:    900;
  color:          var(--white);
  text-transform: uppercase;
  line-height:    1.25;
  margin:         0;
  letter-spacing: 0.5px;
}

/* ── Body (photo + badge side by side) ──────── */
.inisff-body {
  display:         flex;
  align-items:     flex-start;
  gap:             0;
  padding:         0 14px 0;
}

/* ── Photo section ───────────────────────────── */
.inisff-photo-section {
  flex:            0 0 auto;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             6px;
  width:           190px;
}
.inisff-photo-frame {
  width:           186px;
  height:          220px;
  border-radius:   16px;
  padding:         4px;
  background:      var(--frame-grad);
}
.inisff-photo {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  border-radius:   13px;
  display:         block;
}
.inisff-id-no-box {
  background:      rgba(255,255,255,0.12);
  border-radius:   8px;
  padding:         5px 10px;
  font-size:       11px;
  font-weight:     700;
  color:           var(--white);
  width:           100%;
  box-sizing:      border-box;
}
.inisff-id-label { opacity: .8; margin-right: 4px; }
.inisff-id-value { color: var(--gold); }

/* ── DELEGATE vertical badge ─────────────────── */
.inisff-delegate-badge {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  gap:             2px;
  padding-top:     6px;
  position:        relative;
}
.inisff-delegate-badge span {
  font-family:    var(--font-title);
  font-size:      30px;
  font-weight:    900;
  color:          var(--white);
  line-height:    1;
  text-shadow:    1px 1px 0 rgba(0,0,0,.4);
  display:        block;
  text-transform: uppercase;
}
.inisff-arrow {
  font-size:   36px;
  color:       var(--gold);
  margin-top:  6px;
  animation:   inisff-pulse 1.8s ease-in-out infinite;
}
@keyframes inisff-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* ── Info fields ─────────────────────────────── */
.inisff-info-fields {
  padding:     12px 16px 4px;
  display:     flex;
  flex-direction: column;
  gap:         7px;
}
.inisff-field-row {
  font-size:   13px;
  font-weight: 700;
  display:     flex;
  align-items: baseline;
  gap:         6px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 5px;
}
.inisff-field-label { opacity: .85; white-space: nowrap; min-width: 105px; }
.inisff-field-value { color: var(--gold); flex: 1; }

/* ── Validity row ────────────────────────────── */
.inisff-validity-row {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  padding:          10px 16px 8px;
  font-size:        10px;
  font-weight:      700;
}
.inisff-filmfreeway { color: var(--gold); font-size:12px; font-weight:900; }
.inisff-valid       { color: var(--white); text-align: center; }
.inisff-website     { color: var(--gold); font-size:10px; }

/* ── Sponsors bar ────────────────────────────── */
.inisff-sponsors {
  background:       rgba(255,255,255,0.06);
  display:          flex;
  align-items:      center;
  justify-content:  space-around;
  padding:          8px 10px;
  gap:              4px;
  flex-wrap:        wrap;
  border-top:       2px solid rgba(255,255,255,0.15);
}
.inisff-sponsor {
  font-size:     8px;
  font-weight:   700;
  text-align:    center;
  color:         var(--white);
  line-height:   1.2;
  white-space:   nowrap;
}

/* ═══════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════ */
@media print {
  body * { visibility: hidden; }
  .inisff-card,
  .inisff-card * { visibility: visible; }
  .inisff-id-wrapper { padding: 0; }
  .inisff-print-bar  { display: none; }
  .inisff-card {
    position:   absolute;
    left:       50%;
    top:        10mm;
    transform:  translateX(-50%);
    box-shadow: none;
    width:      85mm;   /* standard ID card width */
  }
  .inisff-title h1  { font-size: 11px; }
  .inisff-delegate-badge span { font-size: 22px; }
  .inisff-photo-frame { height: 160px; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 420px) {
  :root { --card-w: 320px; }
  .inisff-photo-frame { width:156px; height:185px; }
  .inisff-photo-section { width:160px; }
  .inisff-delegate-badge span { font-size: 24px; }
  .inisff-title h1 { font-size: 13px; }
}