/* #region ULAZNICE ------------------------------------------- */

/* ------------------- */
/* *TICKET CARD GRID SYSTEM ------------------ */
/* ------------------- */
section.ulaznice {
  display: grid;
  justify-items: center;
  gap: 2rem;
  margin: 2rem 0;
}

@media screen and (max-width: 768px) {
  section.ulaznice {
    gap: 1rem;
  }
}

/* ------------------- */
/* *CARDS styling ------------------- */
/* ------------------- */
/* BOTH CARDS CONTAINER */
.card-container {
  display: flex;
  gap: 2.5rem;
}

/* -------------------------------------- */
/* ULAZNICA SIDEWAYS SCROLLING  */
/* ------------------------------------- */
@media (max-width: 768px) {
  .card-container {
    width: 100%;
    max-width: 100%;
    /* Prevents grid container blowout */
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* Smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Snaps cards cleanly into place */
    scroll-snap-type: x mandatory;
    /* Keeps shadows and edges from clipping */
    padding: 1rem 1.5rem;
    gap: 1.5rem;
    /* Hide scrollbar (Firefox & IE/Edge) */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Hide scrollbar (Chrome, Safari, Opera) */
  .card-container::-webkit-scrollbar {
    display: none;
  }
}
/* -------------------------------------- */

/* CARD FLEX COLUMN */
.card-left,
.card-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-primary);
  color: white;
}

/* ZAKAZIVANJE ----------------------- */

/* zakazivanje block inside left ticket card */
.ulaznice .zakazivanje {
  font-size: var(--font-size-base-desktop);
  text-align: left;
  border-radius: 0.75rem;
  padding: 1rem;
  color: white;
  background: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .ulaznice .zakazivanje {
    text-align: center;
    line-height: 1.2;
  }
}

.ulaznice .zakazivanje a {
  font-size: var(--font-size-text-xl);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.ulaznice .zakazivanje a i {
  padding-right: 10px;
}

/* zakazivanje tekst */
.ulaznice .zakazivanje p {
  line-height: 1.2;
  text-align: center;
}

.ulaznice .zakazivanje p:first-of-type {
  font-size: var(--font-size-text-xl);
}

.ulaznice .zakazivanje p+p {
  margin-top: 0.35rem;
}

/* phone number */
.ulaznice .zakazivanje div {
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--font-size-text-xl);
  text-align: center;
  margin: 1rem 0;
}

/* LEFT CARD styling ---------------------- */

.card-left {
  width: 18rem;
  max-width: 23rem;
  border-radius: 1.6rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

/* PRICE HEADINGS  */
.card-left h2,
.card-right h2 {
  color: #FFF;
  text-shadow: 2px 3px 0px rgba(0, 0, 0, 0.25);
  font-size: var(--font-size-text-xl);
  font-style: normal;
  line-height: normal;
  text-align: center;
}

/* price styling */
.card-left .text-up p:nth-child(2),
.card-left .text-down p:nth-child(2) {
  color: var(--color-accent);
  margin-top: 1rem;
}

/* gap between prices */
.text-down {
  margin-top: 1.5rem;
}

/* PRICE font size */
.card-left .text-up p:first-of-type,
.card-left .text-down p:first-of-type {
  font-size: var(--font-size-display-ticket-price);
  line-height: 5rem;
}

/* din, din po osobi */
.card-left .text-up p:last-of-type,
.card-left .text-down p:last-of-type {
  font-size: var(--font-size-text-lg);
  margin-bottom: 10px;
}

/* RIGHT CARD ------------------------ */

.card-right {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
  border-radius: 18px;
  padding: 2rem;
  width: 25rem;
  max-width: 100%;
  text-align: left;
}

/* right card - small separation from heading */
.card-right h2 {
  margin-bottom: 2rem;
}

/* RIGHT CARD ul styling */
.card-right ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}

.card-right li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: var(--font-size-base-desktop);
  font-weight: 300;
  color: rgba(249, 246, 241, 0.72);
  line-height: 1.35;
  transition: color 0.2s ease;
}

.card-right li:last-child {
  border-bottom: none;
}

.card-right li::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.5rem;
}

/* MOBILE CARD SIZING ---------------- */
/* placed after the card rules so it overrides their desktop widths */
@media (max-width: 768px) {
  .card-left,
  .card-right {
    /* Prevents cards from getting crushed */
    flex-shrink: 0;
    /* Snaps card to the center on swipe */
    scroll-snap-align: center;
    /* Cards take 85% of mobile screen width */
    width: 85vw;
    max-width: 22rem;
  }
}

/* ULAZNICE INFO ------------------------ */

/* ulaznica info */
section.ulaznice .ulaznice-info h2 {
  padding-top: 10px;
  border-top: 1px solid var(--color-accent);
  color: var(--color-accent);
}

/* #endregion ULAZNICE */