:root {
    /* Brand palette */
    --gigz-purple: #7C3AED;
    --gigz-royal-purple: #6D28D9;
    --gigz-deep-purple: #5B21B6;
    --gigz-light-purple: #A855F7;
    --gigz-lavender: #C084FC;
    --gigz-midnight: #111827;
    --gigz-charcoal: #1F2937;
    --gigz-white: #FFFFFF;
    --gigz-off-white: #F9FAFB;
    --gigz-light-gray: #E5E7EB;

    /* Vendor theme token overrides */
    --mainColor: var(--gigz-purple);
    --mainColor01: rgba(124, 58, 237, 0.1);
    --headingColor: var(--gigz-midnight);
    --headingColor01: rgba(17, 24, 39, 0.1);
    --darkBodyBgColor: var(--gigz-midnight);
    --darkCardBgColor: var(--gigz-charcoal);
}

/* Brand gradient, for hero/accent surfaces */
.gigz-gradient {
    background-image: linear-gradient(135deg, var(--gigz-royal-purple), var(--gigz-deep-purple));
}

/* partials/brand-logo.blade.php ships both a light-bg and dark-bg wordmark
   (wordmark.png's "Geegz" is baked in black — invisible once .dark-theme
   flips the surface behind it dark; a raster image can't respond to a CSS
   color override the way the sidebar/header's live text logos do). Toggled
   here, centrally, rather than per-view, to stay in sync with both the
   vendor `dark-theme` class and Bootstrap's `data-bs-theme`. */
.brand-logo-dark {
    display: none;
}
.dark-theme .brand-logo-light {
    display: none;
}
.dark-theme .brand-logo-dark {
    display: inline;
}

/* Portrait recording popups (TikTok, Instagram Reels, YouTube Shorts) — see
   public/js/geegzhub-theme.js's `.popup-embed-portrait` binding. Overrides
   magnific-popup's own fixed 16:9 `.mfp-iframe-scaler`/`.mfp-content` rules
   (assets/css/magnific-popup.min.css) with a tall, narrow box instead. */
.mfp-portrait-embed .mfp-content {
    max-width: 380px;
}
.mfp-portrait-embed .mfp-iframe-scaler {
    padding-top: 177.78%;
}

/* Auth pages: brand accent bar on the login/register/reset card */
.login-area .card {
    overflow: hidden;
}
.login-area .card::before {
    content: "";
    display: block;
    height: 4px;
    background-image: linear-gradient(90deg, var(--gigz-royal-purple), var(--gigz-purple), var(--gigz-lavender));
}

/* Appearance > font size (Settings). The theme's own utility classes (.fs-14,
   etc.) are hard-coded pixel values, so `zoom` is the only approach that
   actually scales the whole UI the way a real zoom level would, with no
   changes to the vendor theme's CSS. Medium (default) applies no zoom. */
html.font-size-small {
    zoom: 0.9;
}
html.font-size-large {
    zoom: 1.1;
}

/* The vendor theme gives .form-control an explicit height:50px + padding
   (style.css), but never gave .form-select the same generic treatment (only
   a handful of one-off .form-select rules scoped to specific narrow filter
   dropdowns elsewhere). That gap, not a missing form-control class, is why a
   <select class="form-select"> renders shorter than a text input next to it
   (Bootstrap's own default select padding is smaller). Using .form-control
   on a <select> isn't the fix: it lacks the appearance:none + custom arrow
   background-image .form-select provides, and would break the dropdown
   arrow. Matching height/padding here keeps the correct element class. */
.form-select {
    height: 50px;
    padding: 10px 40px 10px 20px !important;
    border: 1px solid var(--formBorderColor09);
    border-radius: var(--borderRadius);
    font-size: var(--fontSize14);
}

/* Dark mode gaps in the vendor theme: it styles plain text inputs
   (.dark-theme .form-control) but not <select> or the chip-picker's
   checkable buttons (.btn-check + .btn-outline-primary), which are used
   throughout the profile-setup wizard (skills, genres, experience level,
   portfolio type, etc.) */
.dark-theme .form-select {
    background-color: var(--darkBodyBgColor);
    color: var(--whiteColor);
    border-color: var(--darkBorderColor);
}
.dark-theme .form-select option {
    background-color: var(--darkBodyBgColor);
    color: var(--whiteColor);
}
.dark-theme .btn-check + .btn-outline-primary {
    color: var(--darkBodyColor);
    border-color: var(--darkBorderColor);
    background-color: var(--darkCardBgColor);
}
.dark-theme .btn-check + .btn-outline-primary:hover {
    color: var(--whiteColor);
    background-color: var(--darkBorderColor);
}
.dark-theme .btn-check:checked + .btn-outline-primary,
.dark-theme .btn-check:active + .btn-outline-primary {
    color: var(--whiteColor);
    background-color: var(--mainColor);
    border-color: var(--mainColor);
}

/* .btn-primary-transparent (Settings row actions, "Resume" on My Gigs, ...)
   guaranteed-readable in both states in dark mode. */
.dark-theme .btn-primary-transparent {
    color: var(--whiteColor);
}
.dark-theme .btn-primary-transparent:hover {
    color: var(--whiteColor);
    background-color: var(--mainColor);
    border-color: var(--mainColor);
}