@import url("./home/home.css");   
@import url("./components/buttons.css");
@import url("./components/colors.css");
@import url("./catalog/profile.css");
@import url("./catalog/my-tickets.css");
@import url("./catalog/order-success.css");
@import url('./catalog/checkout.css');
@import url("./catalog/event-detail.css");

.hero-boletera {
  background: radial-gradient(1200px 500px at 50% -10%, rgba(167, 99, 204, 0.45), transparent),
              linear-gradient(135deg, #6f2dbd, #f72585);
}
html {
  scrollbar-gutter: stable;
}
.seat-selection-container {
  height: calc(100vh - 96px);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-overlay {
  position: absolute; inset: 0; padding: 4rem 2rem; max-width: 900px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0));
}
@media (min-width: 992px){ .hero-overlay { padding: 5rem 4rem; } }

/* Cards y grids */
.bg-cover { background-size:cover; background-position:center; }
.event-card { min-width:300px; margin-right:.75rem; border-radius:16px; overflow:hidden; border:0; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.scroll-row { display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory; }
.scroll-row > * { scroll-snap-align:start; }
.scroll-row::-webkit-scrollbar { height:8px; }
.scroll-row::-webkit-scrollbar-thumb { background:#d0d7e1; border-radius:4px; }

/* Tarjetas “tile” (también para Top eventos y listado) */
.card.tile-card { border:0; border-radius:16px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.06); transition: transform .12s ease, box-shadow .12s ease; }
.card.tile-card:hover { transform: translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.1); }
.card.tile-card .ratio { background:#f2f4f7; position: relative; }
.card.tile-card .ratio > img { width:100%; height:100%; object-fit:cover; }
.card.tile-card .card-body { padding:1rem 1rem 1.1rem; }
.event-card .eyebrow { font-size:.9rem; color:#6b7280; margin-bottom:.25rem; }
.event-card .title { font-weight:600; color:#111827; }
.card.tile-card .ratio::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.18));
  opacity: 1; transition: opacity .2s ease;
  pointer-events:none;
  z-index: 1; /* asegura que quede debajo de las píldoras */
}
.card.tile-card:hover .ratio::after{ opacity:0; }

/* Footer */
.footer-boletera { background: linear-gradient(180deg, #000000, #5e5e5e); }
.link-footer { color:#cfe0ff; text-decoration:none; }
.link-footer:hover { color:#ffffff; text-decoration:underline; }
.icon-social { color:#fff; font-size:1.25rem; }
.icon-social:hover { color:#dfe8ff; }
.border-white-25 { border-color: rgba(255,255,255,.25)!important; }
.shadow {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

/* ====== NAVBAR: categorías ====== */
.nav-cats{
  display:flex; gap:.75rem; align-items:center; flex-wrap:nowrap;
  overflow-x:auto; padding:.25rem 0;
}
.nav-cat{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; padding: 0.8rem 0.6rem; border-radius:.75rem; color:#fff;
  transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}
.nav-cat:hover{
  background:rgba(255,255,255,.08); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.nav-cat-icon{   
  transform: scale(1.5);
  margin-bottom: 0.7rem; 
}
.nav-cat-label{ font-size: 0.9rem; line-height:1; color:#5FB14C; white-space:nowrap; }
.placeholder-black-color::placeholder {
  color: black;
}

/* Dropdown perfil */
.navbar .dropdown-menu{ border-radius:12px; overflow:hidden; }

/* === Logo (desktop se queda igual) === */
.logo{
  transform: scale(1.4);
  display: inline-flex;
  align-items: center;
}
.logo img{
  height: 28px;            /* evita recortes y mantiene proporción */
  display: block;
}

.my-navbar {
  height: 6rem;
  padding: 0rem 7rem;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 8px 11px rgba(0, 0, 0, 0.3);
  align-items: center;
}
.sign-containter {
  padding: 0;
  display: flex;
  flex-direction: row;
  list-style: none;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.flex-row {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  list-style: none;
}
.signup-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  border-radius: 2rem !important;
}
.signin-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.language-container {
  margin-left: 0.5rem;
}
.sign-icons {
  width: 1rem;
}
.accordion-button:not(.collapsed) {
  color: #000000 !important;
  background: none !important;
  background-color: #EFF7ED !important;
}
.login-container {
  border-radius: 2rem;
}
.billing-format-input {
  flex: 1;
}
.green-gradient-text {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  background: linear-gradient(to right, #1C4323, #76db60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;      
  background-size: 100%;
  background-repeat: no-repeat;
  background-clip: text;
  color: transparent; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);   
}
#selectedSeatList li {
  text-decoration: none;
  background: #DFEFDB ;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 0.7rem;
  display: flex;
  justify-content: space-between !important;
}
#selectedSeatList li p {
  margin: 0;
}

@media (min-width: 992px){
  .nav-cats{ gap:1.25rem; justify-content:center; }
  .nav-cat{
    padding: 0.8rem 0.6rem;
    width: 120px;
    border:2px solid rgba(255,255,255,.35);
    border-radius:14px;
  }
  .nav-cat-icon{ 
    transform: scale(1.5);
  }
}
@media (max-width: 991.98px){
  .nav-cats{ display:none; }
}

@media (max-width: 576px){
.billing-format-input-container {
  flex-direction: column !important;
}
.billing-format-input {
  width: 100%;
}
.billing-format-btns-container {
  flex-direction: column;
  gap: 1rem !important;
}
.billing-format-btn {
  width: 100%;
  margin: 0 !important;
}
.main-container-mobile {
  padding-top: 0 !important;
}
}