/* ══════════════════════════════════════════════════════════════════════════
   GoldBot.in — Unified Stylesheet
   Canonical palette + shared components across all pages.
   Page-specific styles remain inline in their respective .php files.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── CANONICAL PALETTE ──────────────────────────────────────────────────── */
/* Use these variable names everywhere. Legacy aliases (--gb-gold, --navy-light,
   --off-white, --gold-light) are also defined below for backwards compatibility
   so individual page styles continue to work until they're refactored. */
:root {
    /* Gold */
    --gold:          #FFD700;
    --gold-dark:     #C8960C;
    --gold-lt:       #FFF8DC;

    /* Navy */
    --navy:          #0D1B2A;
    --navy-mid:      #1A2E45;
    --navy-lt:       #243B55;

    /* Neutrals */
    --white:         #FFFFFF;
    --off:           #F5F7FA;
    --muted:         #8A9BB0;

    /* Status colors */
    --green:         #1E8C3C;
    --green-bg:      #E8F5ED;
    --red:           #C0392B;
    --red-bg:        #FDEDEC;
    --orange:        #D68910;
    --orange-bg:     #FEF9E7;
    --blue:          #2471A3;
    --blue-bg:       #EBF5FB;

    /* Layout */
    --radius:        12px;
    --shadow:        0 4px 24px rgba(13, 27, 42, 0.10);
    --shadow-lg:     0 12px 48px rgba(13, 27, 42, 0.18);

    /* ── Legacy aliases (do not remove without auditing all pages) ── */
    --gb-gold:       #FFD700;
    --gb-gold-dark:  #C8960C;
    --gb-navy:       #0D1B2A;
    --gb-navy-mid:   #1A2E45;
    --gb-navy-lt:    #243B55;
    --gb-white:      #FFFFFF;
    --gb-muted:      #8A9BB0;
    --navy-light:    #243B55;
    --gold-light:    #FFF8DC;
    --off-white:     #F5F7FA;
    --text-muted:    #8A9BB0;
}


/* ══════════════════════════════════════════════════════════════════════════
   SHARED LAYOUT UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */

.col-spacing > [class*="col-"] {
    margin-bottom: 24px;
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE TITLE BLOCK
   Used on download, status, partners (sub-page hero).
   ══════════════════════════════════════════════════════════════════════════ */

.gb-page-title {
    position: relative;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
    padding: 80px 0 60px;
    text-align: center;
    overflow: hidden;
}
.gb-page-title::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 215, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
}
.gb-page-title .pt-inner {
    position: relative;
    z-index: 2;
}
.gb-page-title .pt-badge {
    display: inline-block;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    color: var(--navy);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.gb-page-title h1 {
    color: var(--white);
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.15;
}
.gb-page-title h1 span {
    color: var(--gold);
}
.gb-page-title p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    margin-bottom: 22px;
}
.gb-page-title .bread-crumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}
.gb-page-title .bread-crumb li + li::before {
    content: '›';
    margin-right: 8px;
}
.gb-page-title .bread-crumb a {
    color: var(--gold);
    text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   SECTION TITLE (centered h2 with kicker + subtext)
   Used on download, status, partners, index.
   ══════════════════════════════════════════════════════════════════════════ */

.gb-sec-title {
    text-align: center;
    margin-bottom: 40px;
}
.gb-sec-title .sub {
    display: inline-block;
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.gb-sec-title h2 {
    color: var(--navy);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 6px;
}
.gb-sec-title h2 span {
    color: var(--gold-dark);
}
.gb-sec-title p {
    color: var(--muted);
    font-size: 14px;
    margin-top: 6px;
}


/* ══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS
   Used on download, status, contact.
   ══════════════════════════════════════════════════════════════════════════ */

.gb-label {
    display: block;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.gb-input,
.gb-select {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: var(--white);
    color: var(--navy);
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 16px;
}
.gb-input:focus,
.gb-select:focus {
    border-color: var(--gold-dark);
    outline: none;
    background: #FFFDF5;
}

.gb-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9BB0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    appearance: none;
    -webkit-appearance: none;
}

.gb-note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
    text-align: center;
}


/* ══════════════════════════════════════════════════════════════════════════
   ALERT / NOTIFICATION BOX
   Used on download, status (form feedback).
   ══════════════════════════════════════════════════════════════════════════ */

.gb-alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}
.gb-alert.success {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid #A9DFBF;
}
.gb-alert.error {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid #F1948A;
}
.gb-alert.warning {
    background: var(--orange-bg);
    color: var(--orange);
    border: 1px solid #F9E79F;
}
.gb-alert.info {
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid #A9CCE3;
}


/* ══════════════════════════════════════════════════════════════════════════
   CARD SHELL
   Base white card used on download, status (form cards).
   Page-specific card variants keep their own styles inline.
   ══════════════════════════════════════════════════════════════════════════ */

.gb-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 32px;
}


/* ══════════════════════════════════════════════════════════════════════════
   COPY-TO-CLIPBOARD BUTTON
   Used on download (wallet), status (license key).
   ══════════════════════════════════════════════════════════════════════════ */

.gb-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--navy);
    color: var(--gold);
    border: none;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gb-copy-btn:hover {
    background: var(--navy-mid);
    color: var(--gold);
    transform: translateY(-1px);
}


/* ══════════════════════════════════════════════════════════════════════════
   TAB NAVIGATION
   Used on download (free/paid), status (license lookup/my licenses).
   ══════════════════════════════════════════════════════════════════════════ */

.gb-tab-nav {
    display: flex;
    gap: 4px;
    background: var(--off);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 28px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.gb-tab-btn {
    flex: 1;
    background: transparent;
    color: var(--muted);
    border: none;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.gb-tab-btn.active {
    background: var(--white);
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(13, 27, 42, 0.08);
}
.gb-tab-btn:hover:not(.active) {
    color: var(--navy);
}
.gb-tab-pane {
    display: none;
}
.gb-tab-pane.active {
    display: block;
}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — shared breakpoints for extracted components
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .gb-page-title { padding: 56px 0 44px; }
    .gb-page-title h1 { font-size: 30px; }
    .gb-page-title p { font-size: 14px; }

    .gb-sec-title h2 { font-size: 24px; }

    .gb-tab-nav { flex-direction: column; gap: 4px; max-width: none; }
    .gb-tab-btn { width: 100%; }
}