/* ==========================================================================
   UpSell Wholesale — brand layer for the "upsell" Academy LMS theme
   --------------------------------------------------------------------------
   Loaded after every other stylesheet.

   IMPORTANT: these values are sampled from upsellwholesale.com as it actually
   RENDERS (computed styles in the browser), not from the WoodMart CSS custom
   properties. Those variables (--wd-alternative-color, --btn-accented-bgcolor)
   are theme defaults the site does not visibly use, and reading them produced a
   gold/blue palette that was wrong. The real site is yellow + orange + black.

     header bar        #FFD813   solid yellow bar behind the nav
     button            #F7F420   yellow, BLACK label, radius 3px
     accent / icons    #F59A17   orange discs
     headings          #242424
     body text         #777777
     nav links         #333333
     cards             white, radius 18px, shadow 0 10px 25px rgba(0,0,0,.06)
     panels            radius 20px
     typeface          Jost

   Contrast note: the source site puts BLACK text on its yellow buttons. Yellow
   with white text fails contrast badly, and an LMS has far more buttons than a
   brochure site, so orange (#F59A17) carries the primary actions that need
   white labels and yellow is used for surfaces and secondary actions with dark
   labels. Both are the brand's own colours.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&display=swap');

:root {
    --upsell-yellow: #ffd813;
    --upsell-yellow-btn: #f7f420;
    --upsell-yellow-soft: #fff9e0;
    --upsell-orange: #f59a17;
    --upsell-orange-hover: #dd8a10;
    --upsell-orange-soft: #fef1de;
    --upsell-ink: #242424;
    --upsell-body: #777777;
    --upsell-nav: #333333;
    --upsell-line: #ececec;
    --upsell-surface: #f7f7f7;
    --upsell-radius-card: 18px;
    --upsell-radius-panel: 20px;
    --upsell-radius-btn: 3px;
    --upsell-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    --upsell-font: 'Jost', Arial, Helvetica, sans-serif;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

body,
button,
input,
select,
textarea,
.body-font {
    font-family: var(--upsell-font);
    color: var(--upsell-body);
}

h1, h2, h3, h4, h5, h6,
.title,
.section-title {
    font-family: var(--upsell-font);
    color: var(--upsell-ink);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Accents — yellow for highlight, orange for action
   -------------------------------------------------------------------------- */

.rating i,
.rating-star i,
.star-rating i,
.fa-star,
.fa-star-half-alt,
.course1-rating i {
    color: var(--upsell-orange);
}

.badge.bg-warning {
    background-color: var(--upsell-yellow) !important;
    color: var(--upsell-ink) !important;
}

mark,
.text-highlight {
    background: linear-gradient(180deg, transparent 58%, var(--upsell-yellow) 58%);
    padding: 0 2px;
    color: inherit;
}

/* --------------------------------------------------------------------------
   Buttons
   Primary actions in orange (white label, accessible). Yellow is reserved for
   secondary actions, which take a black label exactly as on the source site.
   -------------------------------------------------------------------------- */

.btn-primary,
.eBtn,
.view-more-btn,
.purchase-btn,
.review-btn {
    background: var(--upsell-orange);
    border-color: var(--upsell-orange);
    color: #fff;
    border-radius: var(--upsell-radius-btn);
    font-weight: 600;
}

.btn-primary:hover,
.eBtn:hover,
.view-more-btn:hover,
.purchase-btn:hover,
.review-btn:hover {
    background: var(--upsell-orange-hover);
    border-color: var(--upsell-orange-hover);
    color: #fff;
}

.btn-outline-primary {
    color: var(--upsell-ink);
    border-color: var(--upsell-orange);
    border-radius: var(--upsell-radius-btn);
}

.btn-outline-primary:hover {
    background: var(--upsell-yellow);
    border-color: var(--upsell-yellow);
    color: var(--upsell-ink);
}

/* Brand yellow secondary action — black label, per the source site. */
.btn-gold,
.btn-accent,
.gift-btn {
    background: var(--upsell-yellow-btn);
    border-color: var(--upsell-yellow-btn);
    color: #000;
    border-radius: var(--upsell-radius-btn);
    font-weight: 700;
}

.btn-gold:hover,
.btn-accent:hover,
.gift-btn:hover {
    background: var(--upsell-yellow);
    border-color: var(--upsell-yellow);
    color: #000;
}

a {
    color: var(--upsell-nav);
}

a:hover {
    color: var(--upsell-orange);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
    border-radius: var(--upsell-radius-btn);
    border-color: var(--upsell-line);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--upsell-orange);
    box-shadow: 0 0 0 3px rgba(245, 154, 23, 0.14);
}

/* --------------------------------------------------------------------------
   Login as the landing page
   Selectors match the theme's real markup: section.sign-up > .sing-up-right
   (the theme's own spelling), .log-in wrapping the submit button.
   -------------------------------------------------------------------------- */

section.sign-up {
    background:
        radial-gradient(circle at 12% 16%, rgba(255, 216, 19, 0.22), transparent 42%),
        radial-gradient(circle at 88% 84%, rgba(245, 154, 23, 0.14), transparent 46%),
        var(--upsell-surface);
}

.sing-up-right {
    background: #fff;
    border: 1px solid var(--upsell-line);
    border-radius: var(--upsell-radius-panel);
    padding: 34px 30px;
    box-shadow: var(--upsell-shadow);
}

.sing-up-right h3 {
    color: var(--upsell-ink);
    font-weight: 800;
}

.sing-up-right h3 span {
    color: var(--upsell-orange);
}

.sing-up-right > p {
    color: var(--upsell-body);
}

.sing-up-right h5 {
    color: var(--upsell-nav);
    font-weight: 600;
}

.log-in .btn-primary {
    width: 100%;
    padding: 12px 20px;
    font-weight: 700;
    background: var(--upsell-orange);
    border-color: var(--upsell-orange);
}

.log-in .btn-primary:hover {
    background: var(--upsell-orange-hover);
    border-color: var(--upsell-orange-hover);
}

.sing-up-right .another a {
    color: var(--upsell-orange);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bank transfer notices (offline_payment addon)
   -------------------------------------------------------------------------- */

.upsell-offline-pending {
    border: 1px solid var(--upsell-yellow);
    background: var(--upsell-yellow-soft);
    border-radius: var(--upsell-radius-card);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.upsell-offline-pending .upsell-offline-title {
    font-weight: 700;
    color: var(--upsell-ink);
    margin-bottom: 6px;
}

.upsell-offline-pending .upsell-offline-meta {
    color: var(--upsell-body);
    font-size: 13px;
}