:root {
  --darkgold: #826131;
  --gold: #c9a96e;
  --dark: #151515;
  --text: #f0f0f0;
  --card-bg: #1f1f1f;
  --primary-glow: rgba(0, 255, 204, 0.6);
  --bg-dark: #0f0f0f;
  --card-glass: rgba(255, 255, 255, 0.05);
  --side-spacing: 0.35rem;
  --dourado: #c9a96e;
  --preto: #0f0f0f;
  --texto-cinza: #777;
  --cartao-fundo: #151515;
  --transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* {
      margin: 0; 
      padding: 0; 
      box-sizing: border-box;
}

body {
      font-family: 'Monteserrat', sans-serif;
      background: var(--dark);
      color: var(--text);
      line-height: 1.7;
}

.navbar {
      position: fixed; top: 0; left: 0; width: 100%;
      background: rgba(21,21,21,0.50); backdrop-filter: blur(12px);
      z-index: 2000; padding: 1.25rem 5%;
      display: flex; justify-content: space-between; align-items: center;
      box-shadow: 0 4px 25px rgba(0,0,0,0.6);
    }

.logo h2 { 
  font-family: 'Monteserrat', sans-serif;
  color: var(--gold); 
  font-size: 1.35rem; 
  letter-spacing: 3px; 
  font-weight: normal;
}

.back-store { 
      color: var(--gold);
      text-decoration: none; 
      font-weight: 500; 
}
  
.container {
      max-width: 1100px;
      margin: 140px auto 100px;
      padding: 0 5%;
}

    .title { text-align: center; font-size: 2.25rem; color: var(--gold); margin-bottom: 3rem; }

    .step {
      background: var(--card);
      border-radius: 28px;
      padding: 45px;
      margin-bottom: 40px;
      box-shadow: 0 15px 50px rgba(0,0,0,0.6);
      border: 1px solid rgba(255,255,255,0.05);
    }

    .step-title {
      font-size: 1.45rem;
      color: var(--gold);
      margin-bottom: 35px;
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .step-title i { width: 30px; text-align: center; }

    .summary {
      display: flex;
      gap: 35px;
      flex-wrap: wrap;
      align-items: center;
      background: #252525;
      padding: 30px;
      border-radius: 22px;
      position: relative;
    }
    .summary img { width: 230px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
    .summary-info h3 { font-size: 2.1rem; margin-bottom: 10px; }
    .price-total { font-size: 2.5rem; color: var(--gold); font-weight: 700; }

    .remove-btn {
      position: absolute;
      top: 20px; right: 20px;
      background: #3a3a3a;
      color: #ff6666;
      border: none;
      width: 42px; height: 42px;
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      transition: 0.3s;
    }
    .remove-btn:hover { background: #ff6666; color: white; }

    .method-selector { display: flex; gap: 20px; margin-bottom: 40px; }
    .method-btn {
      flex: 1;
      padding: 24px 30px;
      background: #252525;
      border: 2px solid #444;
      border-radius: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.4s ease;
    }
    .method-btn.active {
      background: var(--gold);
      color: #151515;
      border-color: var(--gold);
      transform: translateY(-4px);
    }
    .method-btn i { font-size: 1.9rem; margin-bottom: 12px; display: block; }

    .payment-methods {
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin-top: 30px;
    }
    .payment-card {
      background: #252525;
      padding: 20px;
      border-radius: 15px;
      cursor: pointer;
      text-align: center;
      transition: 0.3s;
    }
    .payment-card.active { background: var(--gold); color: #151515; font-weight: 600; }

    .payment-info {
      display: none;
      margin-top: 30px;
      padding: 25px;
      background: #111;
      border-radius: 18px;
      border-left: 4px solid var(--gold);
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 22px;
    }
    .form-group { margin-bottom: 20px; }
    
    label {
      display: block;
      margin-bottom: 10px;
      color: #ccc;
      font-weight: 500;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    label i { color: var(--gold); margin-right: 10px; width: 20px; text-align: center; }

    input, textarea {
      width: 100%;
      padding: 15px 18px;
      background: #252525;
      border: 1px solid #444;
      border-radius: 12px;
      color: white;
      font-size: 1.05rem;
    }
    input:focus, textarea:focus { border-color: var(--gold); outline: none; }

    .submit-btn {
      width: 100%;
      background: var(--gold);
      color: #151515;
      padding: 22px;
      font-size: 0.85rem;
      font-weight: 800;
      border: none;
      border-radius: 50px;
      margin-top: 40px;
      cursor: pointer;
      transition: 0.4s;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .submit-btn:hover { background: #e0c080; transform: translateY(-5px); }

    .alert { padding: 16px 22px; margin: 20px 0; border-radius: 12px; display: none; }

    .alert-error { background: #4a1f1f; color: #ff8888; border: 1px solid #8b3a3a; }