/* ============================================
   TICKETS SECTION
   4-card pricing grid.
   - STANDARD: gradient border + "Популярный" badge + gradient button
   - GENERAL / VIP / EXECUTIVE: solid dark border + dark grey button
   - "Not included" items: faint icon + faint text
   ============================================ */

.tickets {
  padding: 10rem 10rem;
}

.tickets__title {
  font-size: 7.2rem;            /* 72px */
  font-weight: 700;
  line-height: 0.9;             /* 90% */
  letter-spacing: -0.05em;      /* -5% */
  color: var(--color-white);    /* white — not the gradient this time */
  margin-bottom: 6rem;
}

.tickets__inner {
  width: 100%;
  max-width: 148rem;             /* working area — matches other sections */
  margin: 0 auto;
}

/* ============================================
   GRID
   ============================================ */

.tickets__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: stretch;          /* all cards equal height */
}

/* ============================================
   CARD
   ============================================ */

.ticket-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;                 /* ← add this line */
  padding: 4rem 3rem;
  background: rgba(15, 18, 32, 0.65);
  border-radius: 2.8rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.1);
}

/* POPULAR (Standard) — gradient border via mask, replaces the solid border */
.ticket-card--popular {
  border: none;
}

.ticket-card--popular::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 0.25rem;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(45deg, #FF6B2D 0%, #8B5CF6 60%, #6C2EFF 100%);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* BADGE — straddles the top edge of the popular card */
.ticket-card__badge {
  position: absolute;
  top: 0;
  left: 3rem;
  transform: translateY(-50%);
  z-index: 1;

  padding: 0.8rem 1.8rem;
  border-radius: 10rem;

    background: linear-gradient(90deg, #8B5CF6 0%, #FF6B2D 100%);

  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-white);
  white-space: nowrap;
}

/* ============================================
   TIER TITLE — 72px white bold (Figma spec)
   ============================================ */

.ticket-card__tier {
  font-size: 4.2rem;            /* 42px — was 7.2rem */
  font-weight: 700;
  line-height: 1.2;             /* 120% */
  letter-spacing: -0.05em;      /* -5% */
  text-align: justify;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 3rem;
}

/* ============================================
   FEATURE LIST — icons drawn via CSS ::before
   ============================================ */

.ticket-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-bottom: 3rem;
}

.ticket-feature {
  position: relative;
  padding-left: 3.4rem;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--color-white);
}

/* check icon — purple circle, white tick */
.ticket-feature::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2.2rem;
  height: 2.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%236C2EFF'/%3E%3Cpath d='M7 12l3.4 3.4L17 9' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* "not included" — faint icon + faint text */
.ticket-feature--off {
  color: rgba(255, 255, 255, 0.35);
}

.ticket-feature--off::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23ffffff' fill-opacity='0.1'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================
   NOTES (Executive)
   ============================================ */

.ticket-card__notes {
  font-size: 1.4rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 2rem;
}

/* ============================================
   PRICING — pushed to the bottom of the card
   ============================================ */

.ticket-card__pricing {
  margin-top: auto;              /* pushes pricing + button to the bottom */
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-bottom: 3rem;
}

/* STANDARD-style plan label: "1 день — 9 990 ₸" */
.ticket-price__label {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-white);
}

.ticket-price__label s {
  font-weight: 400;
  color: rgba(255, 255, 255);
  margin-left: 0.4rem;
}

/* standalone strikethrough (General / VIP / Executive) */
.ticket-price__old {
  font-size: 2.2rem;
  color: rgba(255, 255, 255);
  text-decoration: line-through;
}

.ticket-price__note {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.4rem;
}

.ticket-price__current {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.ticket-price__amount {
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;

  background: linear-gradient(90deg, #8B5CF6 0%, #FF6B2D 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.ticket-price__deadline {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

/* ============================================
   BUTTON
   ============================================ */

.ticket-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.8rem;
  border-radius: 10rem;

  font-size: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--color-white);

  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.ticket-card__btn:hover {
  transform: translateY(-0.1rem);
}

/* STANDARD — gradient button */
.ticket-card__btn--gradient {
  background: linear-gradient(90deg, #8B5CF6 0%, #FF6B2D 100%);
}

.ticket-card__btn--gradient:hover {
  box-shadow: 0 1rem 3rem rgba(139, 92, 246, 0.35);
}

/* GENERAL / VIP / EXECUTIVE — dark grey button */
.ticket-card__btn--dark {
  background: #292D3B;
}

.ticket-card__btn--dark:hover {
  filter: brightness(1.15);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1100px) {
  .tickets__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }

  .tickets__title {
  font-size: 4rem; 
  }
}

@media (max-width: 700px) {
  .tickets {
    padding: 8rem 4rem;
  }

  .tickets__grid {
    grid-template-columns: 1fr;
  }

  .ticket-card__tier {
    font-size: 5.6rem;
  }
}