/*
 * Site-level overrides for the Turulav theme (light version).
 * Loaded after theme/css/style.css so these rules win on equal specificity.
 *
 * Brand palette
 *   Primary purple : #210053  (button bg, accents)
 *   Body bg        : #ffffff  (page background — set by theme)
 *   Brand pink     : #df314d  (hover, focus, links)
 *   Hover pink     : #a8243a  (darker pink for link hover on white)
 *   Body text      : #212529  (Bootstrap default dark)
 *   Muted text     : #6c757d  (Bootstrap default muted)
 *   Hairline       : rgba(0,0,0,.08) / rgba(0,0,0,.12) for stronger
 */

/* --------------------------------------------------------------------------
 * Header
 * --------------------------------------------------------------------------
 * The theme sets .header-section to position:absolute, which means it sits on
 * top of the page content. Theme pages compensate with a hard-coded
 * padding-top: 200px on the banner / page-header. Any page that doesn't use
 * those wrappers has its content hidden behind the header.
 *
 * Put the header back into normal document flow so it always reserves its
 * own height. The .header-fixed class (added by functions.js after a 300px
 * scroll) keeps its own position:fixed rule, so sticky behaviour is intact.
 */
.header-section {
    position: relative;
}

/* The theme styles `.login` as a white pill (paired with the pink `.signup`
 * pill — designed for the original LOG IN / SIGN UP layout). When we reuse
 * `.login` for icon-only header actions (messages, notifications, photos) the
 * white pill is taller than the icofont glyph, so the icon floats in the
 * middle and white slivers show above and below it. Restyle these as flat
 * icon buttons that sit on the header background instead.
 *
 * The text-only LOG IN button (unauthenticated state) gets the same flat
 * treatment for visual consistency with the menu items. */
.header-wrapper .menu-area .login {
    background-color: transparent;
    color: #210053;
    border-radius: 0;
    padding: 10px 12px;
    line-height: 1;
    position: relative;
    transition: color 0.2s ease;
}

.header-wrapper .menu-area .login:hover,
.header-wrapper .menu-area .login:focus {
    background-color: transparent;
    color: #df314d;
}

.header-wrapper .menu-area .login > i {
    font-size: 1.25rem;
    vertical-align: middle;
}

.header-wrapper .menu-area .login .badge {
    position: absolute;
    top: 2px;
    right: -2px;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 10px;
    line-height: 1;
}

/* The 200/270px padding existed only to clear the absolute header.
 * With the header in normal flow that becomes a huge empty gap. */
.banner-section {
    padding-top: 60px;
}
@media (min-width: 576px) {
    .banner-section {
        padding-top: 80px;
    }
}

.page-header-section.style-1 {
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (min-width: 992px) {
    .page-header-section.style-1 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* --------------------------------------------------------------------------
 * Form controls (site-wide light theme)
 * --------------------------------------------------------------------------
 * The theme sets generic input text colour for the original dark palette, so
 * we re-theme inputs/selects/textareas for the light background and ensure a
 * visible focus ring in brand pink.
 */
.form-control,
.form-select {
    background-color: #fff;
    border: 1px solid #d0d0d8;
    color: #212529;
    height: auto;
    padding: 10px 14px;
    border-radius: 6px;
}

.form-control::placeholder {
    color: #6c757d;
}

.form-control:focus,
.form-select:focus {
    background-color: #fff;
    border-color: #df314d;
    color: #212529;
    box-shadow: 0 0 0 0.2rem rgba(223, 49, 77, 0.2);
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f3f4f6;
    color: #6c757d;
}

select.form-control,
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #6c757d 50%),
                      linear-gradient(135deg, #6c757d 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

select.form-control option,
.form-select option {
    background: #fff;
    color: #212529;
}

textarea.form-control {
    min-height: 100px;
}

label,
.form-label {
    color: #212529;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Bootstrap 5 dropped .form-group / .form-row — every template still uses
 * them, so without this every field collapses against the next. Restore a
 * sensible bottom margin and put the row-children back on a small gap. */
.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px;
}

.form-row > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

.form-text,
small.text-muted {
    color: #6c757d !important;
}

.invalid-feedback {
    color: #dc3545;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
}

/* Bootstrap custom checkboxes / switches */
.custom-control-label,
.custom-control-label a {
    color: #212529;
}

.custom-control-label a {
    text-decoration: underline;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #df314d;
    border-color: #df314d;
}

/* --------------------------------------------------------------------------
 * Cards & list groups (site-wide light theme)
 * --------------------------------------------------------------------------
 * Bootstrap's .card defaults are fine on a white body, but we add a hairline
 * border and gentle shadow so cards still read as distinct surfaces against
 * the page background (otherwise multiple stacked cards visually merge).
 */
.card {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    color: #212529;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-header,
.card-footer {
    background-color: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.08);
    color: #212529;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: #212529;
    margin: 0;
}

.card-body {
    color: #212529;
}

.list-group {
    background: transparent;
}

.list-group-item {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.08);
    color: #212529;
}

.list-group-item a {
    color: #df314d;
    text-decoration: none;
}

.list-group-item a:hover {
    color: #a8243a;
}

/* --------------------------------------------------------------------------
 * Tables (site-wide light theme)
 * --------------------------------------------------------------------------
 * Let Bootstrap's defaults do most of the work on a light background, but
 * pin the variables explicitly so staff/moderation tables (dashboard, report
 * queue, audit log, user lists, verification queues, etc.) stay consistent
 * if a parent rule changes them.
 */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.03);
    --bs-table-striped-color: #212529;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.06);
    --bs-table-hover-color: #212529;
    --bs-table-active-bg: rgba(0, 0, 0, 0.08);
    --bs-table-active-color: #212529;
    color: #212529;
    border-color: rgba(0, 0, 0, 0.12);
}

.table > thead {
    color: #212529;
    border-color: rgba(0, 0, 0, 0.18);
}

.table > thead th {
    border-bottom-color: rgba(0, 0, 0, 0.18);
    font-weight: 600;
}

.table code {
    color: #a8243a;
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 5px;
    border-radius: 3px;
}

.table a {
    color: #df314d;
}

.table a:hover {
    color: #a8243a;
}

/* --------------------------------------------------------------------------
 * Unified button styling (site-wide)
 * --------------------------------------------------------------------------
 * Every Bootstrap .btn variant (.btn-primary, .btn-warning, .btn-outline-*,
 * etc.) and the theme's .lab-btn render identically: solid deep-purple with
 * white text, fills brand pink on hover/focus/active. No primary/secondary
 * distinction — every action button on the site looks the same.
 *
 * Targeting .btn directly (not enumerating variants) means new Bootstrap
 * classes get the brand look automatically. The :not() chain raises
 * specificity above Bootstrap's variant-specific state rules
 * (.btn-primary:active, .btn-warning:focus, etc.) so they can't sneak
 * through and re-introduce Bootstrap's default blue/yellow/etc.
 *
 * The colour declarations also carry !important: a few theme rules paint
 * <a> and <button> elements with #210053 deep-purple text (matching the
 * button background), and inline-styled wrappers can flip text colour on
 * descendant <a> tags. !important on this one design system guarantees
 * a button is always readable, no matter the surrounding context.
 *
 * Exceptions:
 *   .btn-link   — text-only link (Cancel / Clear filters)
 *   .btn-close  — Bootstrap's "×" dismiss icon for alerts/modals
 *   .btn-group  — layout wrapper (not a button itself)
 */
.btn:not(.btn-link):not(.btn-close):not(.btn-group),
.lab-btn {
    display: inline-block;
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 0.95rem;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid #210053 !important;
    background-color: #210053 !important;
    color: #fff !important;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.15s ease;
}

.btn:not(.btn-link):not(.btn-close):not(.btn-group):hover,
.btn:not(.btn-link):not(.btn-close):not(.btn-group):focus,
.btn:not(.btn-link):not(.btn-close):not(.btn-group):focus-visible,
.btn:not(.btn-link):not(.btn-close):not(.btn-group):active,
.btn:not(.btn-link):not(.btn-close):not(.btn-group).active,
.lab-btn:hover,
.lab-btn:focus,
.lab-btn:focus-visible,
.lab-btn:active,
.lab-btn.active {
    background-color: #df314d !important;
    border-color: #df314d !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(223, 49, 77, 0.35);
    text-decoration: none;
}

/* Mouse-driven lift only on :hover — keyboard focus and click-stuck states
 * shouldn't make the button bounce. */
.btn:not(.btn-link):not(.btn-close):not(.btn-group):hover,
.lab-btn:hover {
    transform: translateY(-1px);
}

.btn i,
.lab-btn i {
    color: inherit;
}

/* Sizing variants — same colour, smaller footprint */
.btn-sm,
.lab-btn.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-width: 1px;
}

.btn-xs {
    padding: 3px 10px;
    font-size: 0.75rem;
    border-radius: 3px;
    border-width: 1px;
}

.btn.w-100,
.lab-btn.w-100 {
    width: 100%;
}

/* Plain text links (Bootstrap .btn-link) — kept text-only on purpose so a
 * "Clear filters" or "Cancel" link doesn't read as a primary action.
 * Targeted by the .btn-link class alone; the .btn unified rule excludes it
 * via :not(.btn-link). */
.btn-link,
.btn.btn-link {
    background: none !important;
    border: none !important;
    color: #df314d !important;
    padding: 4px 8px;
    text-decoration: none;
    text-transform: none;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}

.btn-link:hover,
.btn-link:focus,
.btn.btn-link:hover,
.btn.btn-link:focus {
    color: #a8243a !important;
    text-decoration: underline;
    background: none !important;
    box-shadow: none;
    transform: none;
}

/* Disabled state — applies to every variant. */
.btn:disabled,
.btn.disabled,
.lab-btn:disabled,
.lab-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
 * Gift / boost chip buttons (messaging)
 * --------------------------------------------------------------------------
 * Used in the thread reply form and the profile-page "send first message"
 * modal. One-of-N pill chips that toggle a hidden input on click.
 *
 * Selection has to be unambiguous, so every active chip carries THREE
 * independent visual signals:
 *   1) Fill colour flip      (base → brand pink, or super/mega/diamond accent)
 *   2) Inset white ring      (looks "engraved" — clearly a depressed state)
 *   3) ✓ prefix via ::before (iconographic, universal "selected" semantic)
 *
 * Hover MUST NOT look like selection — pink fill is reserved for active.
 * Hover only swaps the border to pink and lifts the bg slightly. That way a
 * user sweeping the mouse across the row never confuses "I'm pointing at
 * this" with "I picked this".
 *
 * Diamond keeps its premium gold→pink gradient even when unselected (brand
 * decision: it advertises itself as the statement gift). The ring + ✓ make
 * the selected vs. just-flashy distinction obvious.
 *
 * "clear" is a text-link reset — small ✕ prefix so it visibly differs from
 * the chips and reads as "remove selection" not "another choice".
 */
.gift-row,
.tier-row,
.receipt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.gift-choice,
.tier-choice {
    background: #f3f4f6;
    border: 1px solid #d0d0d8;
    color: #212529;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover — border-only treatment so it never looks like the active fill */
.gift-choice:hover,
.tier-choice:hover {
    background: #e9ecef;
    border-color: #df314d;
    color: #212529;
}

/* Selected — fill + inset ring + ✓ prefix (three signals) */
.gift-choice.active,
.tier-choice.active {
    background: #df314d;
    border-color: #df314d;
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85),
                0 4px 14px rgba(223, 49, 77, 0.45);
}
.gift-choice.active::before,
.tier-choice.active::before {
    content: '✓\00a0';
    font-weight: 700;
}

/* Premium diamond gift — gradient persists across states; ring + ✓ mark
   "selected" so it can't be confused with merely flashy. */
.gift-choice.diamond {
    background: linear-gradient(135deg, #f7c948, #df314d);
    border-color: transparent;
    color: #1a0e2e;
    font-weight: 600;
}
.gift-choice.diamond:hover {
    background: linear-gradient(135deg, #f7c948, #df314d);
    color: #1a0e2e;
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 12px rgba(247, 201, 72, 0.4);
}
.gift-choice.diamond.active {
    background: linear-gradient(135deg, #f7c948, #df314d);
    color: #1a0e2e;
    box-shadow: inset 0 0 0 2px #fff,
                0 4px 16px rgba(247, 201, 72, 0.6);
}
.gift-choice.diamond.active::before {
    content: '✓\00a0';
    color: #1a0e2e;
}

/* Boost tiers — gold (super) / magenta (mega) actives keep their colour
   identity, but inherit the same inset ring + ✓ pattern. */
.tier-choice.super.active {
    background: #ffc107;
    border-color: #ffc107;
    color: #1a0e2e;
    box-shadow: inset 0 0 0 2px rgba(26, 14, 46, 0.35),
                0 4px 14px rgba(255, 193, 7, 0.45);
}
.tier-choice.super.active::before {
    color: #1a0e2e;
}
.tier-choice.mega.active {
    background: #e91e63;
    border-color: #e91e63;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85),
                0 4px 14px rgba(233, 30, 99, 0.45);
}

/* "clear" — small text-link reset with an ✕ prefix so it doesn't read as a
   fourth option. */
.gift-clear,
.tier-clear {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 0.78rem;
    color: #6c757d;
    text-decoration: none;
}
.gift-clear::before,
.tier-clear::before {
    content: '✕\00a0';
}
.gift-clear:hover,
.gift-clear:focus,
.tier-clear:hover,
.tier-clear:focus {
    color: #df314d;
    background: transparent;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Flash messages container
 * --------------------------------------------------------------------------
 * Flash messages render in their own container between the header and the
 * page content. Most pages wrap content in <section class="padding-tb">
 * which has 80-120px top padding — that piles on top of the alert and
 * leaves a giant empty gap below it. Compress the following section's top
 * padding when a flash alert is present, so the alert sits naturally above
 * the page content. */
.flash-messages {
    padding-top: 18px;
    margin-bottom: 0;
}

.flash-messages + section,
.flash-messages + main > section:first-child {
    padding-top: 24px;
}

/* --------------------------------------------------------------------------
 * Alert links
 * --------------------------------------------------------------------------
 * Bootstrap alerts have light backgrounds (yellow/blue/green/red) and dark
 * contextual text colours, so links inside an alert should inherit the
 * alert's own text colour and be underlined so they read as links. */
.alert a,
.alert a:visited {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.alert a:hover,
.alert a:focus {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}

/* Footer newsletter subscribe button — the theme sets line-height:56px on
 * this specific button, which combined with the unified-button padding makes
 * it ~76px tall. Match the theme selector so the override wins on cascade. */
.footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item-3 .fm-item-content form button,
.footer-section .footer-middle .footer-middle-item-wrapper .footer-middle-item-3 .fm-item-content form .lab-btn {
    line-height: 1.4;
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
 * Auth pages (signup, login, password reset, verification, etc.)
 * --------------------------------------------------------------------------
 * The auth templates reference .log-reg / .log-reg-inner but those classes
 * were never carried over from the source theme — so the forms rendered with
 * no card, no spacing, and no input styling. Give them a card wrapper that
 * matches the rest of the site. (Inputs, labels and buttons inherit from the
 * site-wide rules above.)
 */
.log-reg {
    padding: 80px 0;
}

.log-reg-inner {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

@media (max-width: 575.98px) {
    .log-reg-inner { padding: 28px 22px; }
}

.log-reg-inner .section-header {
    text-align: center;
    margin-bottom: 28px;
}

.log-reg-inner .section-header h2,
.log-reg-inner .section-header .title {
    color: #212529;
    margin-bottom: 8px;
}

.log-reg-inner .section-header p {
    color: #6c757d;
    margin-bottom: 0;
}

.log-reg-inner .form-group {
    margin-bottom: 20px;
}

.log-reg-inner a {
    color: #df314d;
}

.log-reg-inner a:hover {
    color: #a8243a;
}

.log-reg-inner .lab-btn {
    margin-top: 6px;
}