/* ======================================================
   EB10 Early Bird Coupon — a punched ticket

   Rendered by korean-event/eb10-offer.php (event hero and
   registration sidebar) and conf/coupan.php (payment page
   support column).

   SELF-CONTAINED SIZING. The payment page loads Bootstrap 3,
   which sets html{font-size:10px}, so rem there is 10px while
   the korean-event pages get 16px. Everything below is anchored
   to an explicit font-size on .eb10-ticket and expressed in em,
   so the ticket renders identically on both pages and a single
   variable rescales the whole thing.

   GEOMETRY. The tear line and both notches read --eb10-foot,
   and .eb10-foot is given that exact height, so the cut always
   lands on the counterfoil's top edge no matter what the stub
   above it contains.

   The notches are punched by two mask layers that have to
   intersect. Browsers without mask-composite union them instead,
   which resolves to "no holes" — the ticket then renders as a
   plain rounded panel. Graceful either way, never broken.
====================================================== */
.eb10-strip {
  display: flex;
  justify-content: center;
}

/* The wrapper carries the shadow: filter follows the punched
   outline, whereas box-shadow on the ticket itself is clipped
   away by the mask. */
.eb10-card {
  width: 100%;
  max-width: 320px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .32));
  transition: transform .3s ease;
}
.eb10-card:hover { transform: translateY(-4px); }

.eb10-ticket {
  font-size: 16px;          /* the one knob: rescales the whole ticket */
  line-height: 1.4;

  --eb10-btn-h: 2.6em;
  --eb10-chip-h: 2.4em;
  --eb10-gap: .55em;
  --eb10-pad-b: 1.1em;
  /* clear air between the tear line and the first control below it */
  --eb10-foot-pad: 1em;
  --eb10-foot-h: calc(var(--eb10-btn-h) + var(--eb10-foot-pad));
  --eb10-foot: calc(var(--eb10-foot-h) + var(--eb10-pad-b));
  --eb10-notch: .9em;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.7em 1.15em var(--eb10-pad-b);
  border-radius: 1em;
  overflow: hidden;
  isolation: isolate;

  -webkit-mask-image:
    radial-gradient(circle var(--eb10-notch) at 0 calc(100% - var(--eb10-foot)), rgba(0,0,0,0) 99%, #000 100%),
    radial-gradient(circle var(--eb10-notch) at 100% calc(100% - var(--eb10-foot)), rgba(0,0,0,0) 99%, #000 100%);
  mask-image:
    radial-gradient(circle var(--eb10-notch) at 0 calc(100% - var(--eb10-foot)), rgba(0,0,0,0) 99%, #000 100%),
    radial-gradient(circle var(--eb10-notch) at 100% calc(100% - var(--eb10-foot)), rgba(0,0,0,0) 99%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.eb10-ticket > * { position: relative; z-index: 1; }

/* slow gloss sweep across the foil */
.eb10-ticket::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 55%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: rotate(18deg);
  pointer-events: none;
  z-index: 0;
  animation: eb10-shine 7s ease-in-out infinite;
}
@keyframes eb10-shine {
  0%, 68% { left: -70%; }
  100%    { left: 135%; }
}

/* Corner ribbon. Geometry in px, not em: the bar has to be longer than the
   corner it crosses, and its centre has to sit on the corner's diagonal, so
   both numbers are fixed while only the type scales. right:-30 with width:130
   puts the centre 35px in from the right edge and top:24 puts it 35px down —
   equal offsets, so the bar meets the corner square on and the centred text
   lands in the widest part of the visible run. */
.eb10-ribbon {
  position: absolute;
  top: 24px;
  right: -30px;
  z-index: 3;
  width: 130px;
  padding: 5px 0;
  text-align: center;
  transform: rotate(45deg);
  background: linear-gradient(180deg, #fb3238, #c8161c);
  color: #fff;
  font-size: .6em;
  font-weight: 800;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  line-height: 1.35;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
}

/* ---- Stub: the offer ---- */
.eb10-kicker {
  font-size: .75em;
  font-weight: 700;
  letter-spacing: .33em;
  text-indent: .33em;          /* balances the trailing letter-space */
  text-transform: uppercase;
  margin: 0 0 .5em;
}
.eb10-code {
  font-size: 3.5em;
  font-weight: 900;
  line-height: .92;
  letter-spacing: .02em;
  margin: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 3px 5px rgba(90, 70, 10, .32);
}
.eb10-title {
  font-size: 1.375em;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: .22em 0 0;
}
.eb10-sub {
  font-size: .875em;
  font-weight: 600;
  line-height: 1.45;
  margin: .85em 0 0;
}

/* ---- The cut, level with the counterfoil's top edge ---- */
.eb10-tear {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--eb10-foot);
  height: 0;
  border-top: 2px dashed rgba(120, 92, 12, .5);
}

/* ---- Counterfoil: the action ----
   Its top edge is where the tear and the notches land, so the padding-top
   here is exactly the gap between the cut and the button. */
.eb10-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--eb10-gap);
  box-sizing: border-box;
  width: 100%;
  height: var(--eb10-foot-h);
  padding-top: var(--eb10-foot-pad);
  margin-top: 1.35em;
}

.eb10-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 210px;
  /* flex decides the height, so the em-inside-var trap never bites:
     var(--eb10-btn-h) would resolve against the button's own smaller
     font-size rather than the ticket's. */
  flex: 1 1 auto;
  font-family: inherit;
  font-size: .875em;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .2s ease, transform .2s ease;
}
.eb10-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.eb10-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- Code chip: same width and centre line as the button ---- */
.eb10-coupon-row {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: 210px;
  flex: 0 0 var(--eb10-chip-h);
}
.eb10-coupon-row #cpnCode {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px dashed #7a6110;
  border-right: 0;
  border-radius: .35em 0 0 .35em;
  background: rgba(255, 255, 255, .82);
  color: #3a2c04;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: .12em;
  text-indent: .12em;
}
.eb10-coupon-row #cpnBtn {
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 2px solid #4a3806;
  border-radius: 0 .35em .35em 0;
  background: #3a2c04;
  color: #f3e0a0;
  padding: 0 .95em;
  font-family: inherit;
  font-size: .75em;
  font-weight: 800;
  letter-spacing: .1em;
  cursor: pointer;
  white-space: nowrap;
}
.eb10-coupon-row #cpnBtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* payment ticket: two rows below the cut, so the cut moves down by exactly
   the extra row and its gap — the tear and notches follow on their own */
.eb10-ticket--pay {
  --eb10-foot-h: calc(var(--eb10-chip-h) + var(--eb10-gap) + var(--eb10-btn-h) + var(--eb10-foot-pad));
}

/* ---- Gold foil ---- */
.eb10-ticket--gold {
  background: linear-gradient(155deg, #fdf5d4 0%, #ecd280 24%, #c9a227 58%, #f7e7b2 100%);
  color: #3a2c04;
}
.eb10-ticket--gold .eb10-kicker { color: #6b5310; }
.eb10-ticket--gold .eb10-btn {
  background: linear-gradient(180deg, #4a3806, #2b2002);
  border-color: #7a6110;
  color: #f7e7b0;
}

/* ---- Section wrapper (sidebar + support column) ---- */
.eb10-side { margin: 0 0 20px; }
.eb10-side .eb10-heading {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--primary, #092c43);
  text-align: center;
}

/* ---- Responsive: one knob rescales the whole ticket ---- */
@media (max-width: 991.98px) {
  .eb10-card { max-width: 300px; }
  .eb10-ticket { font-size: 15px; }
}
@media (max-width: 575.98px) {
  .eb10-card { max-width: 340px; }
  .eb10-card:hover { transform: none; }
  .eb10-ticket { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .eb10-card, .eb10-btn { transition: none; }
  .eb10-card:hover, .eb10-btn:hover { transform: none; }
  .eb10-ticket::before { animation: none; opacity: 0; }
}