/* ============================================= */
/* MODERN LIGHT ROUNDED THEME - Updated for debate.blessingfans.org */
/* ============================================= */

.btn-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 22px 28px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
    border: none;
    border-radius: 9999px;           /* Extra round pill */
    background: #ffffff;
    color: transparent;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: all 0.35s cubic-bezier(0.34, 1.61, 0.7, 1.3);
    text-decoration: none;
    margin-bottom: 8px;
}

.btn-pill:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(6, 132, 171, 0.25);
    background: #f8f9fa;
}

/* Gradient Text ONLY on Buttons */
.btn-pill span,
.btn-pill {
    background: linear-gradient(310deg, #00b4eb, #b864ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Active State */
.btn-pill.active {
    background: linear-gradient(310deg, #00b4eb, #b864ff) !important;
    box-shadow: 0 10px 25px rgba(6, 132, 171, 0.35);
}
.btn-pill.active span {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* ======================== LIGHT MODERN ROUNDED CARDS ======================== */
.card {
    border-radius: 24px !important;           /* Big modern rounded cards */
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: #ffffff;
}

.card-body {
    padding: 2rem;
}

/* Headings - Primary Gradient Text */
h1, h2, h3, h4, h5, h6 {
    background: linear-gradient(310deg, #00b4eb, #b864ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Make sure normal text stays dark (light theme) */
p, .text-dark, .lead, strong, small, .card-text {
    color: #212529 !important;
}

/* ======================== MORE ROUNDED ELEMENTS ======================== */
.btn {
    border-radius: 9999px !important;   /* All buttons super rounded */
}

.form-control, .form-select, textarea {
    border-radius: 16px !important;
}

.badge, .btn-pill {
    border-radius: 9999px !important;
}

.alert {
    border-radius: 20px !important;
}

/* ======================== LIGHT THEME BACKGROUNDS ======================== */
body {
    background: #f8f9fa;
}

.bg-gradient-faded-primary,
.bg-gradient-faded-light {
    background: #f8f9fa;
}

/* Keep some soft accents but keep overall light */
.bg-gradient-faded-primary-vertical {
  background-image: radial-gradient(200px circle at 50% 70%, rgba(6,132,171,.08) 0, #f8f9fa 100%);
}

/* ======================== UPDATED GRADIENTS (Soft for Light Theme) ======================== */
.bg-gradient-primary {
  background-image: linear-gradient(310deg, #00b4eb, #b864ff);
}

.text-gradient.text-primary {
  background-image: linear-gradient(310deg, #00b4eb, #b864ff);
}

/* Keep your other gradients but tone them down for light theme if needed */
.alert-success { background-image: linear-gradient(310deg, #17ad37, #84dc14); }
.alert-danger  { background-image: linear-gradient(310deg, #ea0606, #ff667c); }

/* ======================== UTILITY ======================== */
.shadow-sm { box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; }
.shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; }

/* Make sure modal is also modern */
.modal-content {
    border-radius: 28px !important;
}








/* ============================================= */
/* FIXED XL FATTER PILL BUTTONS - Gradient Text Visible */
/* ============================================= */

.btn-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 22px 28px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
    border: none;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: all 0.35s cubic-bezier(0.34, 1.61, 0.7, 1.3);
    text-decoration: none;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

/* Gradient Text - Works on direct text AND on <span> */
.btn-pill,
.btn-pill span {
    background: linear-gradient(310deg, #00b4eb, #b864ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;           /* Only for gradient effect */
}

/* Hover State */
.btn-pill:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(6, 132, 171, 0.25);
    background: #f8f9fa;
}

/* Active State */
.btn-pill.active {
    background: linear-gradient(310deg, #00b4eb, #b864ff) !important;
}
.btn-pill.active,
.btn-pill.active span {
    -webkit-text-fill-color: #fff;
    color: #fff;
}

/* Fix for buttons that have no <span> inside */
.btn-pill:not(:has(span)) {
    -webkit-text-fill-color: transparent;
}




/* EMERGENCY FIX - Make sure ALL pill button text is visible */
.btn-pill, 
.btn.btn-pill,
a.btn-pill {
    color: transparent !important;
    background: linear-gradient(310deg, #00b4eb, #b864ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}