/* --- Demfati Tickets Bento Grid Design System --- */

:root {
  --demf-bent-bg: #ffffff;
  --demf-bent-surface: #f5fafd;
  --demf-bent-primary: #0598d7;
  --demf-bent-secondary: #fc6435;
  --demf-bent-text: #000000;
  --demf-bent-text-secondary: #666666;
  --demf-bent-border: #121213;
  --demf-bent-border-light: #e8ecf0;

  --demf-bent-font-heading: 'Inter', system-ui, sans-serif;
  --demf-bent-font-body: -apple-system, system-ui, sans-serif;

  --demf-bent-space-1: 4px;
  --demf-bent-space-2: 8px;
  --demf-bent-space-3: 12px;
  --demf-bent-space-4: 16px;
  --demf-bent-space-5: 24px;
  --demf-bent-space-6: 32px;

  --demf-bent-radius: 8px;
  --demf-bent-radius-sm: 6px;
  --demf-bent-radius-card: 16px;
  --demf-bent-radius-pill: 100px;

  --demf-bent-shadow-low: none;
  --demf-bent-shadow-mid: none;
  --demf-bent-shadow-deep: none;
  --demf-bent-transition: all 0.25s ease;
}

/* --- Global --- */
body {
  font-family: var(--demf-bent-font-body);
  background: var(--demf-bent-bg);
  color: var(--demf-bent-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--demf-bent-font-heading);
  font-weight: 700;
  color: var(--demf-bent-text);
}

/* --- Page Wrapper --- */
.demf-bent-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2px 80px;
}

@media (max-width: 1080px) {
  .demf-bent-page { max-width: 100%; }
}

/* --- Bento Grid Layout --- */
.demf-bent-grid {
  display: grid;
  gap: var(--demf-bent-space-4);
  width: 100%;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .demf-bent-grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* --- Column spans --- */
@media (min-width: 640px) {
  .demf-bent-col-1  { grid-column: span 1; }
  .demf-bent-col-2  { grid-column: span 2; }
  .demf-bent-col-3  { grid-column: span 3; }
  .demf-bent-col-4  { grid-column: span 4; }
  .demf-bent-col-5  { grid-column: span 5; }
  .demf-bent-col-6  { grid-column: span 6; }
  .demf-bent-col-7  { grid-column: span 7; }
  .demf-bent-col-8  { grid-column: span 8; }
  .demf-bent-col-9  { grid-column: span 9; }
  .demf-bent-col-10 { grid-column: span 10; }
  .demf-bent-col-11 { grid-column: span 11; }
  .demf-bent-col-12 { grid-column: span 12; }
}

/* --- Sub-grid (nested) --- */
.demf-bent-subgrid {
  display: grid;
  gap: var(--demf-bent-space-3);
}

.demf-bent-subgrid--2 { grid-template-columns: repeat(2, 1fr); }
.demf-bent-subgrid--3 { grid-template-columns: repeat(3, 1fr); }
.demf-bent-subgrid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 639px) {
  .demf-bent-subgrid--2,
  .demf-bent-subgrid--3,
  .demf-bent-subgrid--4 {
    grid-template-columns: 1fr;
  }
}

/* --- Card --- */
.demf-bent-card {
  background: var(--demf-bent-bg);
  border: 1px solid rgba(5, 152, 215, 0.08);
  border-radius: var(--demf-bent-radius-card);
  padding: 22px 20px;
  margin-bottom: 20px;
}

.demf-bent-card--sm {
  padding: var(--demf-bent-space-4);
}

.demf-bent-card--lg {
  padding: var(--demf-bent-space-6);
}

.demf-bent-card--no-pad {
  padding: 0;
}

.demf-bent-card--surface {
  background: linear-gradient(145deg, #f5fafd 0%, #eef6fb 100%);
  border: 1px solid rgba(5, 152, 215, 0.12);
}

.demf-bent-card--surface h5 {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--demf-bent-primary);
  margin-bottom: 14px;
}

.demf-bent-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.demf-bent-card__title {
  font-family: var(--demf-bent-font-heading);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.demf-bent-card__body > :last-child {
  margin-bottom: 0;
}

/* --- Section Title --- */
.demf-bent-section-title {
  font-size: 22px;
  font-weight: 800;
  margin: 36px 0 18px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  position: relative;
  padding-left: 14px;
}

/* --- Meta Row --- */
.demf-bent-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--demf-bent-text);
}

.demf-bent-meta-row i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(5, 152, 215, 0.08);
  color: var(--demf-bent-primary);
  font-size: 16px;
  flex-shrink: 0;
}

/* --- Badge --- */
.demf-bent-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--demf-bent-radius-pill);
  font-family: var(--demf-bent-font-heading);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 20px;
}

.demf-bent-badge--danger  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.demf-bent-badge--warning { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.demf-bent-badge--info    { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.demf-bent-badge--success { background: rgba(4, 139, 255, 0.1); color: var(--demf-bent-primary); }
.demf-bent-badge--neutral { background: #f5f5f5; color: var(--demf-bent-text-secondary); }

/* --- Pill --- */
.demf-bent-pill {
  display: inline-block;
  background: rgba(5, 152, 215, 0.10);
  color: var(--demf-bent-primary);
  border-radius: var(--demf-bent-radius-pill);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--demf-bent-font-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Input --- */
.demf-bent-input {
  border-radius: var(--demf-bent-radius);
  border: 1px solid #d0d5dd;
  font-size: 15px;
  padding: 12px 16px;
  color: var(--demf-bent-text);
  background: var(--demf-bent-bg);
  transition: var(--demf-bent-transition);
  width: 100%;
  outline: none;
}

.demf-bent-input:focus {
  border-color: var(--demf-bent-primary);
}

/* --- Button Primary --- */
.demf-bent-btn-primary {
  width: 100%;
  padding: 15px 24px;
  background: linear-gradient(135deg, var(--demf-bent-primary) 0%, #0481c0 100%);
  border: none;
  border-radius: var(--demf-bent-radius);
  color: #fff;
  font-family: var(--demf-bent-font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--demf-bent-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--demf-bent-space-2);
}

.demf-bent-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #059fde 0%, #036fa3 100%);
}

.demf-bent-btn-primary:active:not(:disabled) { transform: translateY(0); }
.demf-bent-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Button Outline --- */
.demf-bent-btn-outline {
  background: transparent;
  color: var(--demf-bent-primary);
  border-radius: var(--demf-bent-radius-pill);
  border: 1.5px solid var(--demf-bent-primary);
  font-family: var(--demf-bent-font-heading);
  font-size: 13px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--demf-bent-transition);
  display: inline-flex;
  align-items: center;
  gap: var(--demf-bent-space-2);
}

.demf-bent-btn-outline:hover {
  background: var(--demf-bent-primary);
  color: #fff;
}

/* --- Coupon Card --- */
.demf-bent-coupon {
  background: #f9fffd;
  border: 1.5px dashed rgba(5, 152, 215, 0.35);
  border-radius: var(--demf-bent-radius-card);
  margin-bottom: 16px;
}

.demf-bent-coupon > p {
  font-size: 13px;
  font-weight: 700;
  color: var(--demf-bent-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* --- Summary --- */
.demf-bent-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  font-size: 14px;
  gap: 12px;
}

.demf-bent-summary-row:last-child { border-bottom: none; }

.demf-bent-summary-row span:first-child {
  color: var(--demf-bent-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.demf-bent-summary-row span:last-child {
  text-align: right;
  font-weight: 600;
  word-break: break-word;
}

.demf-bent-summary-row.total {
  border-top: 2px solid var(--demf-bent-text);
  border-bottom: none;
  margin-top: 8px;
  padding-top: 14px;
  font-weight: 800;
  font-size: 16px;
}

.demf-bent-summary-row.discount { color: #16a34a; }

/* --- Gallery Grid --- */
.demf-bent-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

/* --- Sponsor Grid --- */
.demf-bent-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

/* --- Merch / Vendor Slot Grid --- */
.demf-bent-merch-grid,
.demf-bent-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

/* --- Countdown --- */
.demf-bent-countdown {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}

.demf-bent-countdown > div {
  background: var(--demf-bent-primary);
  color: #fff;
  padding: 12px 8px;
  border-radius: var(--demf-bent-radius);
  text-align: center;
  width: 66px;
  font-size: 10px;
  text-transform: uppercase;
  font-family: var(--demf-bent-font-heading);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.demf-bent-countdown > div span {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}

/* --- Hero --- */
.demf-bent-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.demf-bent-hero figure { margin: 0; }

.demf-bent-hero img {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 0 0 var(--demf-bent-radius-card) var(--demf-bent-radius-card);
}

/* --- Skeleton --- */
.demf-bent-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demf-bent-skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: #f0f0f0;
  animation: demfBentShimmer 1.5s ease-in-out infinite;
}

@keyframes demfBentShimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- Utility --- */
.demf-bent-hide { display: none !important; }
.demf-bent-link { color: var(--demf-bent-primary); font-weight: 500; text-decoration: none; }
.demf-bent-link:hover { text-decoration: underline; }
.demf-bent-text-muted { color: var(--demf-bent-text-secondary); }
.demf-bent-text-center { text-align: center; }

/* --- Responsive --- */
@media (max-width: 639px) {
  .demf-bent-card { padding: var(--demf-bent-space-4); }
  .demf-bent-hero img { max-height: 300px; border-radius: 0; }
  .demf-bent-section-title { font-size: 18px; }
}