:root{
  --wap-accent: #434242;
  --wap-bg: #fff;
  --wap-text: #fff;
  --wap-muted: #434242;
  --wap-border: #434242;
}

.wap-wrap{max-width:1100px;margin:0 auto;padding:24px;color:var(--wap-text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.wap-title{font-size:28px;font-weight:700;margin-bottom:18px}

.wap-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
.wap-card{display:flex;flex-direction:column;gap:6px;padding:18px 16px;background:var(--wap-bg);border:1px solid var(--wap-border);border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.06);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.wap-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
.wap-card-title{font-size:18px;font-weight:700}
.wap-card-tag{font-size:14px;color:var(--wap-muted)}

.wap-main{display:grid;grid-template-columns:2fr 1.1fr;gap:24px;align-items:flex-start}
.wap-questions{display:flex;flex-direction:column;gap:18px}
.wap-q{background:#fff;border:1px solid var(--wap-border);border-radius:14px;padding:16px}
.wap-q-title{font-weight:700;margin-bottom:10px}

/* pills */
.wap-pills{display:flex;flex-wrap:wrap;gap:10px}
.wap-pill{position:relative}
.wap-pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.wap-pill span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--wap-border);background:#fafafa;font-weight:600}
.wap-pill input:checked + span{background:var(--wap-accent);color:#fff;border-color:var(--wap-accent);box-shadow:0 6px 14px rgba(255,122,0,.35)}

/* chart */
.wap-chartbox{background:#fff;border:1px solid var(--wap-border);border-radius:14px;padding:16px;position:sticky;top:16px}

/* actions */
.wap-actions{margin-top:16px}
.wap-btn{background:var(--wap-accent);color:#fff;border:none;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer;box-shadow:0 10px 22px rgba(255,122,0,.28)}
.wap-btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}

/* modal */
.wap-modal{position:fixed;inset:0;background:rgba(17,24,39,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}
.wap-modal.show{display:flex}
.wap-modal-dialog{background:#fff;border-radius:16px;max-width:640px;width:100%;box-shadow:0 30px 60px rgba(0,0,0,.25);overflow:hidden}
.wap-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--wap-border)}
.wap-modal-title{font-weight:700}
.wap-modal-close{background:none;border:none;font-size:24px;line-height:1;cursor:pointer}
.wap-modal-body{padding:16px}
.wap-modal-foot{padding:16px;border-top:1px solid var(--wap-border);display:flex;justify-content:flex-end}
.wap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wap-grid input{width:100%;border:1px solid var(--wap-border);border-radius:10px;padding:10px}
.wap-hint{color:var(--wap-muted);font-size:13px;margin-top:10px}

@media (max-width: 900px){
  .wap-main{grid-template-columns:1fr}
  .wap-chartbox{position:relative;top:auto}
  .wap-grid{grid-template-columns:1fr}
}


/* === Custom Overrides for Card Colors === */
.wheel-card, 
.wheel-card-header {
    background-color: #434242 !important;
}

.wheel-card h2, 
.wheel-card h3, 
.wheel-card p, 
.wheel-card span {
    color: #ffffff !important;
}


/* === Custom Overrides for Tab Headers === */
.wheel-tabs .nav-link,
.wheel-tabs .nav-link.active {
    background-color: #434242 !important;
    color: #ffffff !important;
}

.wheel-tabs .nav-link small,
.wheel-tabs .nav-link span {
    color: #ffffff !important;
}

.wheel-tabs .nav-link:hover {
    background-color: #434242 !important;
    color: #ffffff !important;
}


/* --- Custom Fix for Card Text & Hover --- */
.card, .card * {
    color: white !important;
}

.card:hover, .card:hover * {
    color: white !important; /* Prevent hover color change */
    transform: scale(1.05);  /* Keep scaling on hover */
    transition: transform 0.2s ease-in-out;
}


/* === Custom Modifications === */

/* Card style - outline only */
.card {
  background-color: transparent !important;
  border: 2px solid #333 !important;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: none !important;
}

/* Card container: side by side on desktop */
.cards-container {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .cards-container {
    flex-direction: column;
    align-items: center;
  }
}