Admin Control Panel v2.0

✎ Editing: comprar.css ← Back

/* ===== Checkout (padrão visual do site) ===== */

:root{
    /* usa as mesmas variáveis já definidas no seu base */
    /* se já existirem em baseingressos.css, isso aqui é apenas fallback */
    --cor-primaria: #ff2b67;
    --texto: #111;
    --borda: #e5e7eb;
    --bg-page:#f6f7f9;
  }

body {
    padding-top: 70px;
  }
  
  html, body{ margin:0; }
  body{ background: var(--bg-page); color: var(--texto); }
  
  .page-checkout{
    padding: 16px 16px;
    display:flex;
    justify-content:center;
  }
  
  .checkout-card{
    width: 100%;
    max-width: 920px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 24px;
    box-sizing: border-box;
  }
  
  .checkout-card h2{
    margin: 4px 0 12px;
    text-align: center;
    font-weight: 700;
  }
  
  .hello{
    margin: 0 0 16px;
    text-align: center;
    color:#444;
  }
  .hello .link-logout{
    margin-left: 8px;
    color: var(--cor-primaria);
    text-decoration: none;
  }
  .hello .link-logout:hover{ text-decoration: underline; }
  
  /* ===== Tabela ===== */
  .table-scroll{ overflow: auto; }
  
  .table-checkout{
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 8px;
  }
  .table-checkout th,
  .table-checkout td{
    padding: 12px 10px;
    border-bottom: 1px solid var(--borda);
    text-align: left;
    font-size: 15px;
  }
  .table-checkout th{
    color:#333;
    font-weight: 600;
  }
  .table-checkout .td-actions{
    width: 50px;
    text-align: center;
  }
  .remover{
    width: 100%;
    border: none;
    background: transparent;
    color: #e11d48; /* vermelho-primário */
    cursor: pointer;
    font-size: 16px;
    padding: 6px;
  }
  .remover:hover{ color:#9f1239; }
  
  /* ===== Total + ações ===== */
  .checkout-actions{
    display:flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 6px 0 12px;
  }
  .total{
    font-weight: 700;
    font-size: 18px;
    margin: 0;
  }
  
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #f3f4f6;
    color:#111;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s ease, background .2s ease, border-color .2s ease;
    font-weight: 600;
  }
  .btn:hover{ filter: brightness(.97); }
  .btn:disabled{ opacity:.6; cursor:not-allowed; }
  
  .btn-primary{
    background: var(--cor-primaria);
    color: #fff;
  }
  .btn-primary:hover{ filter: brightness(.95); }
  
  .btn-outline{
    background:#fff;
    border-color: var(--borda);
  }
  
  .btn-desativado{
    background:#ccc !important;
    color:#777 !important;
    cursor:not-allowed !important;
  }
  
  /* dica de checkout */
  .hint-checkout{
    margin: 10px 0 12px;
    font-size: 14px;
    color:#555;
  }
  
  /* botão grande ao final */
  #btn-comprar{
    width: 100%;
    justify-content: center;
    font-size: 16px;
  }
  
  /* ===== Mobile ===== */
  /* ===== Mobile ===== */
@media (max-width: 680px){
    .checkout-card{ padding: 20px; }
  
    /* Esconde o cabeçalho e transforma linhas em cards */
    .table-checkout thead{ display:none; }
    .table-checkout{ border-collapse: separate; border-spacing: 0 10px; }
    .table-checkout tr{
      display:block;
      background:#fff;
      border:1px solid var(--borda);
      border-radius:12px;
      padding:10px;
      margin:0;
    }
  
    /* Cada célula vira uma linha "rótulo : valor" */
    .table-checkout td{
      display:block;
      border:0;
      padding:6px 8px;
      position:relative;
      text-align:right;           /* valor à direita */
      line-height:1.35;
      word-break: break-word;     /* não corta */
      overflow-wrap:anywhere;
    }
  
    /* Rótulo no lado esquerdo */
    .table-checkout td::before{
      content: attr(data-label);
      font-weight:600;
      color:#333;
      float:left;
      text-align:left;
    }
  
    /* separação visual entre linhas do mesmo item */
    .table-checkout td + td{
      border-top:1px dashed var(--borda);
    }
  
    /* A célula de ações (lixeira) não precisa de rótulo */
    .table-checkout .td-actions{
      width: auto;
      text-align:center;
      background: #ffede5;
      border-radius: 8px;
      padding-top:4px;
    }
    .table-checkout .td-actions::before{ content:none !important; float:none; }
  
    /* Ações e total em coluna */
    .checkout-actions{
      flex-direction: column;
      align-items: stretch;
      gap:10px;
    }
    .checkout-actions .btn{ justify-content:center; }
    .total{ text-align:center; width:100%; margin-bottom: 4px; }
  }

Cancel