/*++++++++++++++++++++++++++++++++
        GATE120
*/
  
  
  :root{
    --brand-purple:#0077ff; --brand-blue:#2563eb; --brand-sky:#93c5fd; --brand-white:#fff; --segunda-cor: #ffe600; --terceira_cor: #05a500;
    --bg-grad-1:#eef2ff; --bg-grad-2:#e0e7ff;
    --card-bg:rgba(255,255,255,.78); --card-border:rgba(255,255,255,.6);
    --text-1:#0f172a; --text-2:#475569;
    --accent:var(--brand-purple); --accent-strong:#5b4bf0; --accent-soft:rgba(108,92,231,.15);
    --radius-xl:12px; --radius-md:14px; --radius-sm:12px;
    --shadow-lg:0 20px 40px rgba(31,41,55,.15); --shadow-md:0 10px 24px rgba(31,41,55,.12);
    --gap:16px; --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    --segunda-cor: #ffc400; --bg-overlay: rgba(0, 0, 0, 0.8);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family:var(--font); color:var(--text-1);
    background:
      radial-gradient(1100px 700px at 10% -10%, rgba(147,197,253,.35), transparent 70%),
      radial-gradient(900px 600px at 100% 0%, rgba(108,92,231,.22), transparent 60%),
      linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
    display:flex; flex-direction:column; min-height:100vh;animation: opac 2s;
  }


  @keyframes opac{

    0%{
       opacity: 0;
    }
    100%{
        opacity: 1;
    }
  }




  /* ====== Header ====== */
    .header-evento,
    .navigation_header{
      font-family: var(--font);
      display: flex;
      flex-direction: row;
      align-items: center;
      z-index: 10;
    }

    /*
    .header-evento{
          background-image: linear-gradient(to bottom, var(--brand-purple),
          var(--bg-grad-1), var(--brand-purple));
          justify-content: space-between;
          padding: 5px 10%;
          width: 100%;
          height: 130px;
          color: #FFF;
          }
          */

           .header-evento{
                background-image: url("/img/header.png");
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;

                justify-content: space-between;
                padding: 5px 10%;
                width: 100%;
                height: 130px;
                color: #FFF;
            }

    .header-evento .logo{
        width: 30%;
    }

    .esquerda header{
    font-family: var(--font);
}

    .btn_icon_header{
        display: none;
        background-color: transparent;
        border: none;
        color: var(--text-1);
        cursor: pointer;
    }

    .logo-header{
        display: flex;
        flex-direction: row;
        gap: 20px;
        padding: 20px;
        align-items: center;
    }

    .navigation_header a{
      font-family: var(--font);
      text-decoration: none;
      color: var(--text-1);
      transition: 0.5s;
      /*text-shadow: 1px 1px 2px #000;*/
    }
    .navigation_header a:hover{

        background-color: var(--brand-purple);
        padding: 10px;
        border-radius: 6px;
        color: var(--text-1);
        /*text-shadow: 2px 2px 2px #000;*/   
    }

    .txt-menu{
      background-color: #e0e7ff;
      padding: 6px;
      font-weight: bold;
      border-radius: 6px;
    }
    
    /* ====== Header ====== */



  

  
  main{flex:1; padding:14px; margin-top: 80px;}
  .container{max-width:1150px; margin:0 auto; display:grid; gap:30px}
  


 /* 1 coluna SEMPRE (mobile → desktop) */
.container{
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr; /* <- chave: sempre uma coluna */
  gap: 30px;
}

/* garante que o conteúdo não “trave” a largura do item */
.container > * { min-width: 0; }

/* garante que o conteúdo não “trave” a largura do item */
.container > * { min-width: 0; }

/* opcional: em telas muito pequenas, só reduz o gap */
@media (max-width: 580px){
  .container { gap: 60px; }
 
}






  /* bloco base */
  .block{
    backdrop-filter: blur(8px);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding:14px;
    margin-top: 10px;
  }
  /*PAGAMENTO CONTAINERS*/
  .block-header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .block-title{ margin:0; font-size:clamp(18px,2.2vw,22px); letter-spacing:-0.01em; }
  .block-icon{
    width:35px;height:35px;border-radius:6px; display:grid; place-items:center; color:#fff;
    background:linear-gradient(90deg,var(--brand-purple),var(--brand-blue));
    box-shadow:0 8px 18px rgba(37,99,235,.20);
  }
  .row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
  .spacer{flex:1}

  /* Botões */
  .btn{
    border:0; border-radius:12px; padding:10px 14px; font-weight:700; font-size:14px; cursor:pointer;
    transition: transform .05s ease, filter .2s ease, box-shadow .2s ease; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-primary{ background: linear-gradient(90deg, var(--brand-purple), var(--brand-blue)); color:#fff; box-shadow: 0 8px 18px rgba(37,99,235,.20); }
  .btn-ghost{ background:#fff; border:1px solid #e5e7eb; color:#0f172a; }
  .btn[disabled]{ opacity:.6; cursor:not-allowed; }

  /* Bloco 1 */
  .user-card{
    background:#fff; border:1px solid var(--segunda-cor); border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .avatar{
    width:42px;height:42px;border-radius:12px; display:grid; place-items:center; color:#fff;
    background:linear-gradient(90deg,var(--brand-purple),var(--brand-blue));
    font-weight:800;
  }
  .user-meta{min-width:220px}
  .user-name{margin:0; font-weight:800}
  .user-email{margin:0; font-size:12px; color:#64748b}

  /* Bloco 2 – evento/preços */
  .event-card{
    background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px;
    display:grid; gap:12px;
  }
  .event-head{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
  .event-name{margin:0; font-size:18px; letter-spacing:-0.01em}
  .event-date{margin:2px 0 0; color:#475569; font-size:14px}
  .price-grid{
    display:grid; gap:10px;
    grid-template-columns: 1fr;
  }
  @media (min-width:780px){ .price-grid{ grid-template-columns: repeat(5, 1fr); } }
  .price-card{
    border:1px solid var(--segunda-cor); border-radius:12px; padding:12px; text-align:center; background:#fff; box-shadow:0 4px 10px rgba(0, 0, 0, 0.04);
  }
  .price-title{font-weight:800; margin:0 0 6px; color: var(--brand-blue);}
  .price-row{display:flex; justify-content:center; gap:10px; font-size:14px}
  .badge{font-size:11px; padding:3px 8px; border-radius:999px; background:rgba(108,92,231,.12); color:#3730a3; border:1px solid rgba(108,92,231,.22)}

  /* Bloco 3 – tipo de ingresso */
  .type-wrap{display:grid; gap:12px}
  .type-grid{display:grid; gap:12px; grid-template-columns:1fr; }
  @media (min-width:780px){ .type-grid{ grid-template-columns:1fr 1fr; } }
  .type-card{
    border:1px solid #e5e7eb; border-radius:14px; background:#fff; padding:14px; display:grid; gap:8px;
  }
  .radio-chip{
    display:inline-flex; align-items:center; gap:8px; border:1px solid #e5e7eb; padding:8px 10px; border-radius:999px; cursor:pointer; user-select:none;
  }
  .radio-chip input{ appearance:none; width:16px;height:16px;border-radius:50%; border:2px solid #94a3b8; display:inline-block; position:relative; }
  .radio-chip input:checked{ border-color:var(--brand-blue); }
  .radio-chip input:checked::after{ content:""; position:absolute; inset:3px; background:linear-gradient(90deg,var(--brand-purple),var(--brand-blue)); border-radius:50%; }
  .type-desc{color:#475569; font-size:14px; line-height:1.5}

  /* Bloco 4 – cupom */
  .coupon{
    border:1px dashed var(--brand-sky);
    background:linear-gradient(180deg, rgba(147,197,253,.18), rgba(108,92,231,.10));
    border-radius:14px; padding:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  }
  .coupon input{
    flex:1; min-width:220px; height:44px; border:1px solid #e5e7eb; border-radius:10px; padding:0 12px; font-size:14px; outline:none; background:#fff;
  }
  .coupon input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }

  /* Bloco 5 – seleção de dia(s) */
  .days-grid{display:grid; gap:10px; grid-template-columns:1fr; }
  @media (min-width:780px){ .days-grid{ grid-template-columns: repeat(5, 1fr); } }
  .day-btn{
    border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:10px 12px; text-align:center; cursor:pointer;
    transition: transform .05s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .day-btn:hover{ border-color:#d6dae2; box-shadow:0 6px 16px rgba(0,0,0,.06) }
  .day-btn[aria-pressed="true"]{
    background:linear-gradient(90deg,var(--brand-purple),var(--brand-blue)); color:#fff; border-color:transparent;
    box-shadow:0 10px 22px rgba(37,99,235,.25);
  }
  .muted{ color:#64748b; font-size:13px }

  
  /* Resumo (opcional) */
  .summary{
    margin-top:8px; border:1px solid #e5e7eb; background:#fff; border-radius:14px; padding:12px;
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  }
  .summary .tag{ padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; font-size:13px; }
  .summary .total{ margin-left:auto; font-weight:800; font-size:18px; }













  /* ===== Destaque do tipo selecionado ===== */
.type-card{
  position: relative;
  transition: box-shadow .2s, transform .08s, border-color .2s, background .2s;
}
.type-card.is-selected{
  /* “anel” com borda em gradiente */
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, var(--brand-purple), var(--brand-blue)) border-box;
  box-shadow: 0 16px 36px rgba(37,99,235,.18);
  transform: translateY(-2px);
}
.type-card.is-selected::after{
  /* badge de check no canto */
  content: "✓";
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900; font-size: 13px; color: #fff;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  box-shadow: 0 6px 14px rgba(34,197,94,.35);
}

/* Chip (label) quando marcado — usa :has (moderno) e .is-on (fallback JS) */
.radio-chip{
  transition: box-shadow .2s, filter .2s, border-color .2s, background .2s, color .2s;
}
.radio-chip:has(input:checked),
.radio-chip.is-on{
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-blue));
  color:#fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(37,99,235,.22);
}
.radio-chip:focus-within{
  box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 18px rgba(37,99,235,.14);
}
.radio-chip input{ /* mantém teu visual do radio */
  appearance:none; width:16px; height:16px; border-radius:50%;
  border:2px solid #94a3b8; position:relative; background:#fff;
}
.radio-chip input:checked{ border-color:#fff; }
.radio-chip input:checked::after{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:#fff;
}














/* ===== Bloco 5 com quantidade ===== */
.days-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:880px){ .days-grid{ grid-template-columns: repeat(5, 1fr); } }

.day-card{
  border:1px solid var(--segunda-cor); background:#fff; border-radius:12px; padding:12px;
  display:grid; gap:10px; box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition: border-color .2s, box-shadow .2s, transform .08s, background .2s;
}
.day-card.active{
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, var(--brand-purple), var(--brand-blue)) border-box;
  border:1px solid transparent;
  box-shadow:0 12px 26px rgba(37,99,235,.18);
  transform: translateY(-2px);
}

.day-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.day-title{ font-weight:800; }
.unit-price{
  font-size:12px; padding:4px 8px; border-radius:6px;
  background:rgba(108,92,231,.12); color:#3730a3; border:1px solid rgba(108,92,231,.22);
}

.qty{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
}
.qty-ctrl{
  display:flex; align-items:center; gap:6px; border:1px solid #e5e7eb; border-radius:10px; padding:6px;
  background:#fff;
}
.qty-ctrl button{
  width:30px; height:30px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer;
  font-weight:800;
}
.qty-ctrl button:active{ transform: translateY(1px); }
.qty-ctrl input{
  width:46px; height:30px; border:0; text-align:center; font-weight:700; font-size:14px; outline:none;
}
.line-sub{ font-weight:800; }






/* ===== Lista visual (cart) ===== */
.cart{
  margin-top:12px; border:1px solid #e5e7eb; background:#fff;
  border-radius:14px; padding:12px; display:grid; gap:10px;
}
.cart-header{ display:flex; align-items:center; gap:8px; font-weight:800; color:#0f172a; }
.cart-header svg{ width:18px; height:18px; color:#2563eb; }
.cart-empty{ color:#64748b; font-size:14px; }

.cart-item{
  display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center;
  border:1px solid #eef2ff; border-radius:12px; padding:10px;
}
.cart-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:#fff;
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-blue));
  box-shadow: 0 8px 16px rgba(37,99,235,.12);
}
.cart-title{ font-weight:700; }
.cart-meta{ font-size:14px; color:#0000FF }
.cart-sub{ font-weight:800; text-align:right; min-width:92px; }

.cart-badge{
  font-size:11px; padding:2px 8px; border-radius:999px; margin-left:6px;
  background: rgba(108,92,231,.12); color:#3730a3; border:1px solid rgba(108,92,231,.22);
}















/* ===== BLOCO 6 — Pagamento ===== */
.pay-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.05); display:grid; gap:12px;
}
.pay-methods{
  display:grid; gap:10px; grid-template-columns:1fr; 
}
@media (min-width:780px){ .pay-methods{ grid-template-columns: repeat(3, 1fr); } }

.method{
  border:1px solid #e5e7eb; border-radius:12px; padding:12px; cursor:pointer; display:flex; gap:10px; align-items:center;
  background:#fff; transition: border-color .2s, box-shadow .2s, transform .08s;
}
.method:hover{ border-color:#d6dae2; box-shadow:0 10px 22px rgba(0,0,0,.06); }
/*card dos metodos de pagamento*/
.method.is-active{
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, var(--brand-purple), var(--brand-blue)) border-box;
  border:1px solid transparent; box-shadow:0 14px 28px rgba(37,99,235,.18); transform: translateY(-1px);
}
.method input{ display:none; }
.method-icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(90deg,var(--brand-purple),var(--brand-blue));
}
.method-title{ font-weight:800; }
.method-desc{ font-size:12px; color:#64748b; margin-top:2px; }

.pay-panels{ border:1px solid #eef2ff; border-radius:12px; padding:12px; background:#fafbff; }
.pay-panel{ display:none; color:#1f2a44; line-height:1.6; }
.pay-panel.active{ display:block; }

.pay-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pay-row input{
  height:44px; border:1px solid #e5e7eb; border-radius:10px; padding:0 12px; outline:none; background:#fff;
}
.pay-row input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }

.order-total{
  display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
  border-top:1px dashed #e5e7eb; padding-top:10px;
}
.order-total .label{ font-size:12px; font-weight:600; color:#64748b }
.order-total .value{ font-size:20px; font-weight:800 }

.note{
  font-size:12px; color:#475569; background:linear-gradient(180deg, rgba(147,197,253,.20), rgba(108,92,231,.10));
  border:1px dashed var(--brand-sky); border-radius:10px; padding:8px 10px;
}



.cont-lot-vig{background-color: var(--accent-strong); padding: 4px; padding-left: 10px; color: #FFF; border-radius: 6px;}

.separete{width: 100%;}








/* ===== Bloco 7 — Geração de ingressos ===== */
.ticket-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:900px){ .ticket-grid{ grid-template-columns:1fr 1fr; } }

.ticket-card{
  border:1px solid var(--segunda-cor); border-radius:14px; background:#fff; padding:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.06); display:grid; gap:10px;
}
.ticket-head{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
.ticket-title{ font-weight:800; }
.ticket-badge{
  font-size:11px; padding:3px 8px; border-radius:999px;
  background:rgba(108,92,231,.12); color:#3730a3; border:1px solid rgba(108,92,231,.22);
}
.ticket-body{ display:grid; gap:8px; }
.ticket-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ticket-row input{
  height:44px; border:1px solid #e5e7eb; border-radius:10px; padding:0 12px; outline:none; background:#fff;
}
.ticket-row input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }

.gen-status{
  border:1px solid #eef2ff; background:#fafbff; border-radius:12px; padding:10px; color:#1f2a44;
}
.gen-status.ok{ border-color:#c7f9cc; background:#ecfdf5; }
.gen-status.warn{ border-color:#fde68a; background:#fffbeb; }
.gen-status.err{ border-color:#fecaca; background:#fef2f2; }


/* bloco 7 card de cada compra*/
.purchase-card{margin-top: 30px;
  border:1px solid #e5e7eb; border-radius:16px;
  background: var(--card-bg, #fff); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-md, 0 10px 24px rgba(31,41,55,.12));
  margin-bottom:14px; overflow:hidden;
}
.purchase-head{
  padding:12px 14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(147,197,253,.18), rgba(108,92,231,.10));
  border-bottom:1px solid #eef2ff;
}
.purchase-body{ padding:12px 14px; }
.purchase-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }



.guest-first-toggle{
  display:flex; align-items:center; gap:8px; margin-top:6px;
  font-size:12px; color:#334155; opacity:.9;
}
.guest-first-toggle input[type="checkbox"]{
  width:16px; height:16px; accent-color:#6c5ce7; cursor:pointer;
}
.guest-first-toggle span{ user-select:none; }





.pay-gate{
  position: relative;
  margin-top: 8px;
  border-radius: 14px;
  overflow: hidden;
}
.pay-gate::before{
  content: "";
  position: absolute; inset: 0;
  backdrop-filter: blur(3px);
  background: rgba(15,23,42,.06);
  pointer-events: none;
}
.pay-gate .pay-gate-msg{
  position: relative;
  z-index: 1;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  border: 1px dashed rgba(108,92,231,.35);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(147,197,253,.12), rgba(108,92,231,.08));
}



.pay-status{
  color: #0000FF;
  font-weight: bold;
  font-size: 17px;
}






/* SPINNER */
/* SPINNER */
/* SPINNER */
/* SPINNER */
/* SPINNER */
:root{
  --ld-accent: #2563eb;
  --ld-text: #0f172a;
}

.ld-modal{
  position: fixed; inset: 0;
  display: none;            /* escondido por padrão */
  align-items: center; justify-content: center;
  z-index: 9999;
}

.ld-modal.is-open{ display: flex; }

.ld-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);   /* sem blur = mais leve */
}

.ld-card{
  position: relative;
  width: min(360px, 92vw);
  padding: 20px 18px 18px;
  border-radius: 16px;
  background: #fff;              /* sem sombra pesada */
  text-align: center;
  opacity: 0; transform: translateY(6px) scale(.98);
  transition: transform .18s ease-out, opacity .18s ease-out; /* leve */
}

.is-open .ld-card{ opacity: 1; transform: translateY(0) scale(1); }

.ld-logo{
  width: 170px; height: 50px; object-fit: contain;
  margin: 0 auto 12px;
}

.ld-text{
  margin-top: 10px;
  font: 600 1rem/1.3 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--ld-text);
}

/* Spinner leve: só border + rotate (GPU) */
.ld-spinner{
  --size: 56px;
  width: var(--size); height: var(--size);
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--ld-accent);
  border-left-color: var(--ld-accent);
  animation: ld-rot .7s linear infinite;
  will-change: transform; /* ok aqui */
}

@keyframes ld-rot { to { transform: rotate(360deg); } }

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .ld-card, .ld-spinner{ animation: none; transition: none; }
}
.no-scroll{ overflow: hidden; touch-action: none; }
/* SPINNER */
/* SPINNER */
/* SPINNER */
/* SPINNER */
/* SPINNER */



.badge-cancel{
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.note-cancel{
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: 12px;
}


.ticket-badge {
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px;
  background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff;
}

.ticket-badge[title] { cursor: help; }

.shirt{display: flex; flex-direction: column; align-items:flex-start;}
.shirt img{ height: 50px; width: 50px; }
.txt-shirt{font-size: 9px;margin-top: -1px; text-align: center;line-height: 10px;}
.txt-shirt-ing{font-size: 13px;margin-top: 3px; font-weight: bold; }

.btn-c{border:0; border-radius:12px; padding:5px 14px; font-weight:700; font-size:14px; cursor:pointer;
     display:inline-flex; align-items:center; gap:8px; text-decoration:none; background-color: #c0c0c0; color: #000;}





 /* ---------- MODAL ---------- */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-overlay); /* fundo escuro com opacity */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease forwards;
  }

  .modal {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    width: 90%;
    padding: 24px;
    text-align: center;
    animation: slideIn 0.3s ease forwards;
  }

  .modal h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-purple);
    margin-bottom: 12px;
  }

  .modal p {
    color: var(--text-soft);
    line-height: 1.5;
    font-size: 0.95rem;
  }

  .modal button {
    margin-top: 20px;
    background: var(--brand-purple);
    padding: 10px 22px;
    border-radius: var(--radius-lg);
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }


  .button-m {
    padding: 12px 24px;
    background: var(--brand-blue);
    color: white;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .button-m {
    background: var(--brand-purple);
    transform: translateY(-2px);
  }




  

/* Container check patro */
.ticket-row {
  margin-top: 12px;
}

.patro-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff9800, #ffb347);
  color: #1f1f1f;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}


.patro-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}


.patro-box input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: #1f1f1f;
  cursor: pointer;
}


.patro-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.patro-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}


.patro-sub {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.95;
}


@media (max-width: 480px) {
  .patro-box {
    padding: 12px;
  }

  .patro-title {
    font-size: 13px;
  }

  .patro-sub {
    font-size: 12px;
  }
}


/* Botão Saiba Mais */
.patro-more {
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.25);
  color: #1f1f1f;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, transform 0.15s ease;
}

/* Hover */
.patro-more:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

/* Ícone */
.patro-more-icon {
  font-size: 13px;
}

/* Mobile */
@media (max-width: 480px) {
  .patro-more {
    font-size: 11px;
    padding: 5px 10px;
  }
}