/* ============================================ */
/* GIFT CARDS - ESTILOS PREMIUM */
/* Integrado con el diseño de Billons Capital */
/* ============================================ */

/* ============================================ */
/* HERO GIFT CARDS */
/* ============================================ */
.giftcards-hero{
  padding:120px 0 80px;
  position:relative;
  overflow:hidden;
  min-height:600px;
  display:flex;
  align-items:center;
}

/* Background Image Container */
.giftcards-hero__background{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

/* Background Image */
.giftcards-hero__background-image{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
}

/* Overlay para mejorar legibilidad del texto */
.giftcards-hero__overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(
    135deg,
    rgba(5,6,9,0.88) 0%,
    rgba(5,6,9,0.78) 50%,
    rgba(5,6,9,0.88) 100%
  );
  z-index:1;
  pointer-events:none;
}

.giftcards-hero .container{
  position:relative;
  z-index:2;
}

.giftcards-hero__content{
  text-align:center;
  max-width:700px;
  margin:0 auto;
  position:relative;
}

.giftcards-hero__title{
  font-size:clamp(2.5rem,5vw,3.5rem);
  font-weight:800;
  margin:0 0 20px;
  background:linear-gradient(135deg,var(--text),var(--gold-soft));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.5px;
}

.giftcards-hero__subtitle{
  font-size:1.2rem;
  color:var(--muted);
  line-height:1.7;
  margin:0 0 32px;
}

@media (max-width:768px){
  .giftcards-hero{
    padding:100px 0 60px;
    min-height:500px;
  }
  .giftcards-hero__subtitle{
    font-size:1.1rem;
  }
}

/* ============================================ */
/* SECCIÓN PRINCIPAL */
/* ============================================ */
.giftcards-section{
  position:relative;
}

.giftcards-container{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:40px;
  align-items:start;
}

.giftcards-section__title{
  font-size:2rem;
  font-weight:800;
  margin:0 0 32px;
  color:var(--gold);
  text-align:center;
}

@media (max-width:1024px){
  .giftcards-container{
    grid-template-columns:1fr;
    gap:32px;
  }
}

/* ============================================ */
/* GRID DE GIFT CARDS */
/* ============================================ */
.giftcards-grid-wrapper{
  position:relative;
}

.giftcards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-bottom:40px;
}

.giftcard-card{
  background:linear-gradient(180deg,rgba(15,17,21,.98),rgba(11,13,18,.98));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position:relative;
  overflow:hidden;
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  /* Asegurar que el contenido sea clickeable */
  pointer-events:auto;
  z-index:1;
}

.giftcard-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hover));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.2s ease;
  /* Asegurar que no bloquee clicks */
  pointer-events:none;
  z-index:0;
}

.giftcard-card:hover{
  border-color:var(--border-hover);
  box-shadow:var(--shadow-lg),var(--shadow-gold),inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(-2px);
  /* Optimización: evitar repaint costoso en hover */
  will-change:transform, box-shadow;
}

.giftcard-card:hover::before{
  transform:scaleX(1);
}

/* Asegurar que el botón sea siempre clickeable */
.giftcard-card__btn{
  position:relative;
  z-index:10;
  pointer-events:auto;
  cursor:pointer;
}

.giftcard-card__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:16px;
  gap:16px;
}

.giftcard-card__name{
  font-size:1.3rem;
  font-weight:700;
  color:var(--gold);
  margin:0;
  flex:1;
}

.giftcard-card__price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

.giftcard-card__price-amount{
  font-size:1.8rem;
  font-weight:800;
  color:var(--text);
  font-family:'Montserrat',monospace;
}

.giftcard-card__price-currency{
  font-size:0.9rem;
  color:var(--muted);
  font-weight:600;
}

.giftcard-card__price-label{
  font-size:0.95rem;
  color:var(--gold);
  font-weight:600;
}

.giftcard-card__description{
  color:var(--silver);
  line-height:1.6;
  margin:0 0 24px;
  font-size:0.95rem;
}

.giftcard-card__custom{
  margin-bottom:20px;
}

.giftcard-card__custom label{
  display:block;
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
  font-size:0.9rem;
}

.giftcard-card__custom-input{
  width:100%;
  background:rgba(5,6,9,.7);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  outline:none;
  font-family:'Montserrat',sans-serif;
  font-size:1rem;
  transition:all var(--transition-fast);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
  margin-bottom:8px;
}

.giftcard-card__custom-input:focus{
  border-color:var(--border-hover);
  box-shadow:0 0 0 3px rgba(212,175,55,.15),var(--shadow-gold);
  background:rgba(5,6,9,.9);
}

#giftcard-custom-error{
  display:none;
  color:#ef4444;
  font-size:0.85rem;
  margin-bottom:8px;
  padding:8px 12px;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.3);
  border-radius:var(--radius-sm);
}

.giftcard-card__custom-input:focus{
  border-color:var(--border-hover);
  box-shadow:0 0 0 3px rgba(212,175,55,.15),var(--shadow-gold);
  background:rgba(5,6,9,.9);
}

.giftcard-card__btn{
  width:100%;
  margin-top:8px;
  position:relative;
  z-index:10;
  pointer-events:auto;
  cursor:pointer;
}

/* ============================================ */
/* CARRITO */
/* ============================================ */
.giftcards-cart{
  position:sticky;
  top:100px;
  background:linear-gradient(180deg,rgba(15,17,21,.98),rgba(11,13,18,.98));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-lg),var(--shadow-gold),inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:var(--blur-md);
  -webkit-backdrop-filter:var(--blur-md);
  max-height:calc(100vh - 120px);
  display:flex;
  flex-direction:column;
}

.giftcards-cart__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}

.giftcards-cart__header h3{
  font-size:1.5rem;
  font-weight:800;
  color:var(--gold);
  margin:0;
}

.giftcards-cart__close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:2rem;
  cursor:pointer;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  transition:all var(--transition-fast);
  line-height:1;
  padding:0;
}

.giftcards-cart__close:hover{
  background:rgba(212,175,55,.1);
  color:var(--gold-hover);
}

.giftcards-cart__content{
  flex:1;
  overflow-y:auto;
  margin-bottom:16px;
}

.giftcards-cart__content::-webkit-scrollbar{
  width:6px;
}

.giftcards-cart__content::-webkit-scrollbar-track{
  background:rgba(255,255,255,.03);
  border-radius:10px;
}

.giftcards-cart__content::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold),var(--gold-dark));
  border-radius:10px;
}

.giftcards-cart__empty{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}

.giftcards-cart__empty-hint{
  font-size:0.9rem;
  margin-top:8px;
  color:var(--muted);
}

.giftcards-cart__items{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.giftcards-cart__item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  background:rgba(5,6,9,.5);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  gap:16px;
}

.giftcards-cart__item-info{
  flex:1;
}

.giftcards-cart__item-name{
  font-size:0.95rem;
  font-weight:600;
  color:var(--text);
  margin:0 0 4px;
}

.giftcards-cart__item-price{
  font-size:0.9rem;
  color:var(--gold);
  font-weight:700;
  font-family:'Montserrat',monospace;
}

.giftcards-cart__item-controls{
  display:flex;
  align-items:center;
  gap:12px;
}

.giftcards-cart__item-btn{
  width:32px;
  height:32px;
  border:1px solid var(--border);
  background:rgba(5,6,9,.7);
  color:var(--text);
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:1.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--transition-fast);
  line-height:1;
  padding:0;
}

.giftcards-cart__item-btn:hover{
  border-color:var(--border-hover);
  background:rgba(212,175,55,.1);
  color:var(--gold-hover);
}

.giftcards-cart__item-quantity{
  min-width:32px;
  text-align:center;
  font-weight:700;
  color:var(--text);
  font-size:1rem;
}

.giftcards-cart__item-remove{
  width:28px;
  height:28px;
  border:none;
  background:rgba(239,68,68,.1);
  color:#ef4444;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--transition-fast);
  line-height:1;
  padding:0;
}

.giftcards-cart__item-remove:hover{
  background:rgba(239,68,68,.2);
  transform:scale(1.1);
}

.giftcards-cart__summary{
  padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.giftcards-cart__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.95rem;
}

.giftcards-cart__row:not(.giftcards-cart__row--total){
  color:var(--silver);
}

.giftcards-cart__row--total{
  font-size:1.2rem;
  font-weight:800;
  color:var(--gold);
  padding-top:12px;
  border-top:1px solid var(--border);
  margin-top:4px;
}

.giftcards-cart__checkout{
  width:100%;
  margin-top:8px;
}

/* Botón flotante del carrito (móvil) */
.giftcards-cart__toggle{
  position:fixed;
  bottom:100px;
  right:20px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  border:2px solid var(--gold);
  color:#050609;
  font-size:1.5rem;
  cursor:pointer;
  box-shadow:var(--shadow-lg),var(--shadow-gold);
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--transition);
  display:none;
}

.giftcards-cart__toggle:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:var(--shadow-lg),0 0 30px rgba(212,175,55,.4);
}

.giftcards-cart__toggle-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  width:24px;
  height:24px;
  background:#ef4444;
  color:#fff;
  border-radius:50%;
  font-size:0.75rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #050609;
}

@media (max-width:1024px){
  .giftcards-cart{
    position:fixed;
    top:0;
    right:-100%;
    width:100%;
    max-width:420px;
    height:100vh;
    max-height:100vh;
    z-index:200;
    transition:right var(--transition);
    border-radius:0;
    border-left:1px solid var(--border);
    overflow:hidden;
  }

  .giftcards-cart--open{
    right:0;
  }

  .giftcards-cart__toggle{
    display:flex;
  }

  .giftcards-grid-wrapper{
    margin-bottom:80px;
  }
}

@media (max-width:640px){
  .giftcards-cart{
    max-width:100%;
    width:100%;
  }
}

/* ============================================ */
/* CHECKOUT */
/* ============================================ */
.giftcards-checkout{
  background:linear-gradient(180deg,var(--bg-alt),var(--bg));
}

.giftcards-checkout__wrapper{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:40px;
  margin-top:40px;
}

.giftcards-checkout__form{
  background:linear-gradient(180deg,rgba(15,17,21,.98),rgba(11,13,18,.98));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:40px;
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
}

.giftcards-checkout__error{
  display:none;
  margin:12px 0 0;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(239,68,68,.4);
  background:rgba(239,68,68,.12);
  color:#fecaca;
  font-size:0.95rem;
  line-height:1.5;
}

.giftcards-checkout__error--show{
  display:block;
}

.giftcards-checkout__summary{
  position:sticky;
  top:100px;
  height:fit-content;
}

.giftcards-checkout__summary-card{
  background:linear-gradient(180deg,rgba(15,17,21,.98),rgba(11,13,18,.98));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-lg),var(--shadow-gold),inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:var(--blur-md);
  -webkit-backdrop-filter:var(--blur-md);
}

.giftcards-checkout__summary-card h3{
  font-size:1.5rem;
  font-weight:800;
  color:var(--gold);
  margin:0 0 24px;
}

.giftcards-checkout__items{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}

.giftcards-checkout__empty{
  color:var(--muted);
  text-align:center;
  font-size:0.95rem;
  margin:0;
}

.giftcards-checkout__item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.95rem;
}

.giftcards-checkout__item-name{
  color:var(--silver);
}

.giftcards-checkout__item-price{
  color:var(--text);
  font-weight:600;
  font-family:'Montserrat',monospace;
}

.giftcards-checkout__totals{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.giftcards-checkout__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.95rem;
  color:var(--silver);
}

.giftcards-checkout__row--total{
  font-size:1.3rem;
  font-weight:800;
  color:var(--gold);
  padding-top:16px;
  border-top:1px solid var(--border);
  margin-top:4px;
}

.giftcards-checkout__submit{
  width:100%;
  margin-top:24px;
}

@media (max-width:1024px){
  .giftcards-checkout__wrapper{
    grid-template-columns:1fr;
  }

  .giftcards-checkout__summary{
    position:static;
  }
}

/* ============================================ */
/* NOTIFICACIONES */
/* ============================================ */
.giftcards-notification{
  position:fixed;
  top:100px;
  right:20px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#050609;
  padding:16px 24px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg),var(--shadow-gold);
  font-weight:600;
  z-index:300;
  opacity:0;
  transform:translateX(100px);
  transition:all var(--transition);
  backdrop-filter:var(--blur-sm);
  -webkit-backdrop-filter:var(--blur-sm);
}

.giftcards-notification--show{
  opacity:1;
  transform:translateX(0);
}

.giftcards-confirmation{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(5,6,9,.95);
  backdrop-filter:var(--blur-lg);
  -webkit-backdrop-filter:var(--blur-lg);
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition);
}

.giftcards-confirmation--show{
  opacity:1;
  pointer-events:auto;
}

.giftcards-confirmation__content{
  background:linear-gradient(180deg,rgba(15,17,21,.98),rgba(11,13,18,.98));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:48px;
  max-width:500px;
  width:90%;
  text-align:center;
  box-shadow:var(--shadow-lg),var(--shadow-gold);
  backdrop-filter:var(--blur-md);
  -webkit-backdrop-filter:var(--blur-md);
}

.giftcards-confirmation__content h3{
  font-size:2rem;
  font-weight:800;
  color:var(--gold);
  margin:0 0 16px;
}

.giftcards-confirmation__content p{
  color:var(--silver);
  line-height:1.7;
  margin:0 0 32px;
  font-size:1.1rem;
}

/* ========= GIFTCARDS: ESTADO DE CUENTA Y WALLET ========= */
.giftcards-status{
  background:var(--card);
  border-radius:12px;
  padding:1.5rem;
  margin-bottom:1.5rem;
  border:1px solid rgba(212,175,55,0.3);
}

.giftcards-status h2{
  margin-bottom:0.75rem;
  font-size:1.25rem;
  font-weight:600;
  color:var(--gold);
}

.giftcards-status-user,
.giftcards-status-wallet{
  margin:0.25rem 0;
  font-size:0.9rem;
  color:var(--text);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.giftcards-user-email{
  font-weight:600;
  color:var(--gold);
}

.giftcards-wallet-label{
  color:var(--muted);
}

.giftcards-wallet-address{
  font-family:monospace;
  margin-left:0.25rem;
  font-weight:600;
  color:var(--gold);
  word-break:break-all;
}

.giftcards-wallet-link{
  display:inline-flex;
  margin-top:0.75rem;
  font-size:0.9rem;
  text-decoration:underline;
  cursor:pointer;
  color:var(--gold);
  transition:all var(--transition-fast);
}

.giftcards-wallet-link:hover{
  color:var(--gold-hover);
}

@media (max-width:640px){
  .giftcards-status{
    padding:1.25rem;
    margin-bottom:1.25rem;
  }
  .giftcards-status h2{
    font-size:1.125rem;
  }
  .giftcards-status-user,
  .giftcards-status-wallet{
    font-size:0.875rem;
  }
}