/*
 * BuilderCE Marketplace Palette
 * Scoped to the marketplace listing and product detail templates.
 * Uses the current BuilderCE storefront palette without changing the
 * shared application/theme tokens outside commerce surfaces.
 *
 * Core:
 * navy #0B2F59
 * blue #0966D6
 * light blue #EDF6FF
 * text #102A43
 * muted #557087
 * border #D7E3EF
 * accents: gold #F2A900, green #2F9B62, teal #0899B7, purple #7B3FD1
 */

.builderce-marketplace,
.builderce-course-page,
.builderce-package-page {
    --bce-market-navy: #0B2F59;
    --bce-market-blue: #0966D6;
    --bce-market-blue-dark: #0755B2;
    --bce-market-blue-light: #EDF6FF;
    --bce-market-text: #102A43;
    --bce-market-muted: #557087;
    --bce-market-border: #D7E3EF;
    --bce-market-gold: #F2A900;
    --bce-market-green: #2F9B62;
    --bce-market-teal: #0899B7;
    --bce-market-purple: #7B3FD1;

    /* Re-map shared Tailwind semantic utilities only inside marketplace UI. */
    --twc-foreground: 209.4 61.4% 16.3%;
    --twc-foreground-alternate: 212.3 78% 19.6%;
    --twc-background: 0 0% 100%;
    --twc-primary: 212.8 91.9% 43.7%;
    --twc-primary-alternate: 212.3 78% 19.6%;
    --twc-secondary: 212.3 78% 19.6%;
    --twc-secondary-alternate: 207.6 22.7% 43.1%;
    --twc-highlight: 41.9 100% 47.5%;
    --twc-panel-primary: 0 0% 100%;
    --twc-panel-secondary: 210 42.9% 89%;
    --twc-panel-light: 210 100% 96.5%;
    --twc-panel-lighter: 210 100% 98.5%;
    --twc-panel-lighter-alternate: 210 100% 98%;
}

/* Marketplace listing */
.builderce-marketplace {
    color: var(--bce-market-text);
    background: #FFFFFF;
}

.builderce-marketplace [data-simple-search] {
    background: linear-gradient(135deg, #F7FBFF 0%, var(--bce-market-blue-light) 100%) !important;
    border-bottom: 1px solid var(--bce-market-border);
}

.builderce-marketplace [data-simple-search] h2,
.builderce-marketplace [data-simple-search] h3 {
    color: var(--bce-market-navy) !important;
}

.builderce-marketplace [data-simple-search] strong {
    color: var(--bce-market-navy) !important;
    text-decoration-color: var(--bce-market-blue) !important;
}

.builderce-marketplace [data-view-mode] {
    border-color: transparent !important;
}

.builderce-marketplace [data-view-mode]:focus-visible,
.builderce-marketplace button:focus-visible,
.builderce-marketplace a:focus-visible {
    outline: 3px solid var(--bce-market-gold) !important;
    outline-offset: 3px !important;
}

.builderce-marketplace [data-filter-search] form > div > div > label {
    color: #FFFFFF !important;
    background: var(--bce-market-navy) !important;
}

.builderce-marketplace [data-filter-search] input,
.builderce-marketplace [data-filter-search] select,
.builderce-marketplace [data-simple-search] input,
.builderce-marketplace [data-simple-search] select {
    color: var(--bce-market-text) !important;
    background: #FFFFFF !important;
    border-color: #B8CDE0 !important;
}

.builderce-marketplace [data-filter-search] input:focus,
.builderce-marketplace [data-filter-search] select:focus,
.builderce-marketplace [data-simple-search] input:focus,
.builderce-marketplace [data-simple-search] select:focus {
    border-color: var(--bce-market-blue) !important;
    box-shadow: 0 0 0 3px rgba(9, 102, 214, .18) !important;
}

/* Product cards */
.builderce-marketplace [data-product-card],
.builderce-course-page [data-product-card],
.builderce-package-page [data-product-card] {
    overflow: hidden;
    color: var(--bce-market-text) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--bce-market-border) !important;
    border-top: 4px solid var(--bce-market-blue) !important;
    border-radius: 12px !important;
    box-shadow: 0 7px 20px rgba(11, 47, 89, .08) !important;
}

.builderce-marketplace [data-product-card]:hover,
.builderce-course-page [data-product-card]:hover,
.builderce-package-page [data-product-card]:hover {
    border-color: #9FC5EC !important;
    border-top-color: var(--bce-market-blue) !important;
    box-shadow: 0 12px 28px rgba(11, 47, 89, .13) !important;
}

.builderce-marketplace [data-product-card]:focus-visible,
.builderce-course-page [data-product-card]:focus-visible,
.builderce-package-page [data-product-card]:focus-visible {
    outline: 3px solid var(--bce-market-gold) !important;
    outline-offset: 3px !important;
}

.builderce-marketplace [data-product-card] > div:first-of-type,
.builderce-course-page [data-product-card] > div:first-of-type,
.builderce-package-page [data-product-card] > div:first-of-type {
    background: #F1F7FC !important;
}

/* Price badges: high-contrast navy/white. */
.builderce-marketplace [data-product-card] > div:first-of-type > div[class*="top-4"][class*="right-4"],
.builderce-course-page [data-product-card] > div:first-of-type > div[class*="top-4"][class*="right-4"],
.builderce-package-page [data-product-card] > div:first-of-type > div[class*="top-4"][class*="right-4"] {
    color: #FFFFFF !important;
    background: var(--bce-market-navy) !important;
    border-color: rgba(255,255,255,.75) !important;
}

/* Package marker: strong blue instead of inherited steel. */
.builderce-marketplace [data-product-card] > div:first-of-type > div[class*="top-16"],
.builderce-course-page [data-product-card] > div:first-of-type > div[class*="top-16"],
.builderce-package-page [data-product-card] > div:first-of-type > div[class*="top-16"] {
    color: #FFFFFF !important;
    background: var(--bce-market-blue) !important;
    border-color: #FFFFFF !important;
}

.builderce-marketplace [data-product-card] > div:first-of-type > div[class*="top-16"] span,
.builderce-course-page [data-product-card] > div:first-of-type > div[class*="top-16"] span,
.builderce-package-page [data-product-card] > div:first-of-type > div[class*="top-16"] span {
    color: #FFFFFF !important;
}

.builderce-marketplace [data-product-card] h3,
.builderce-course-page [data-product-card] h3,
.builderce-package-page [data-product-card] h3 {
    color: var(--bce-market-navy) !important;
}

.builderce-marketplace [data-product-card] .text-secondary-alternate,
.builderce-course-page [data-product-card] .text-secondary-alternate,
.builderce-package-page [data-product-card] .text-secondary-alternate {
    color: var(--bce-market-muted) !important;
}

/* Keep cart and primary actions unmistakably actionable. */
.builderce-marketplace [data-product-card] [data-cart-action],
.builderce-course-page [data-product-card] [data-cart-action],
.builderce-package-page [data-product-card] [data-cart-action] {
    color: #FFFFFF !important;
    background: var(--bce-market-blue) !important;
    border-color: var(--bce-market-blue) !important;
}

.builderce-marketplace [data-product-card] [data-cart-action]:hover,
.builderce-course-page [data-product-card] [data-cart-action]:hover,
.builderce-package-page [data-product-card] [data-cart-action]:hover {
    background: var(--bce-market-blue-dark) !important;
}

/* List/table view */
.builderce-marketplace table thead {
    color: #FFFFFF;
    background: var(--bce-market-navy);
}

.builderce-marketplace table tbody tr:nth-child(even) {
    background: #F7FBFF;
}

.builderce-marketplace table tbody tr:hover {
    background: var(--bce-market-blue-light);
}

/* Course and package detail pages */
.builderce-course-page,
.builderce-package-page {
    color: var(--bce-market-text) !important;
    background: #F7FBFF !important;
    /* Product pages begin below the fixed BuilderCE header instead of under it. */
    padding-top: 5.25rem;
}

@media (min-width: 640px) {
    .builderce-course-page,
    .builderce-package-page {
        padding-top: 5.5rem;
    }
}

@media (min-width: 1024px) {
    .builderce-course-page,
    .builderce-package-page {
        padding-top: 6rem;
    }
}

.builderce-course-page > div:first-child,
.builderce-package-page > div:first-child {
    background: #082A4A !important;
}

.builderce-course-page > section:first-of-type,
.builderce-package-page > section:first-of-type {
    background: var(--bce-market-navy) !important;
}

.builderce-course-page > section:nth-of-type(2),
.builderce-package-page > section:nth-of-type(2) {
    background: #0B3E70 !important;
}

/* Gold is reserved for compact emphasis/icons against the navy hero.
 * Primary commerce actions remain blue/white for the strongest hierarchy.
 */
.builderce-course-page svg[class*="text-[#F2A900]"],
.builderce-package-page svg[class*="text-[#F2A900]"] {
    color: var(--bce-market-gold) !important;
}

.builderce-course-page aside [data-cart-action],
.builderce-package-page aside [data-cart-action],
.builderce-course-page > div:last-child [data-cart-action],
.builderce-package-page > div:last-child [data-cart-action] {
    color: #FFFFFF !important;
    background: var(--bce-market-blue) !important;
    border-color: var(--bce-market-blue) !important;
}

.builderce-course-page aside [data-cart-action]:hover,
.builderce-package-page aside [data-cart-action]:hover,
.builderce-course-page > div:last-child [data-cart-action]:hover,
.builderce-package-page > div:last-child [data-cart-action]:hover {
    background: var(--bce-market-blue-dark) !important;
}

/* Purchase-card checkmarks and benefit icons. */
.builderce-course-page aside span[class*="bg-[#0D2B45]"],
.builderce-package-page aside span[class*="bg-[#0D2B45]"],
.builderce-course-page main span[class*="bg-[#0D2B45]"],
.builderce-package-page main span[class*="bg-[#0D2B45]"] {
    color: #FFFFFF !important;
    background: var(--bce-market-navy) !important;
}

/* Compliance / approval panel moves from old yellow to pale BuilderCE blue. */
.builderce-course-page section[class*="border-[#F2A900]"],
.builderce-package-page section[class*="border-[#F2A900]"] {
    border-color: #8AB9EC !important;
    background: var(--bce-market-blue-light) !important;
}

.builderce-course-page section[class*="border-[#F2A900]"] h2,
.builderce-package-page section[class*="border-[#F2A900]"] h2 {
    color: var(--bce-market-navy) !important;
}

/* Buttons and links should still have clearly different roles. */
.builderce-course-page main a:not([data-product-card]),
.builderce-package-page main a:not([data-product-card]) {
    color: var(--bce-market-blue);
}

.builderce-course-page main a:not([data-product-card]):hover,
.builderce-package-page main a:not([data-product-card]):hover {
    color: var(--bce-market-navy);
}

@media (prefers-reduced-motion: reduce) {
    .builderce-marketplace [data-product-card],
    .builderce-course-page [data-product-card],
    .builderce-package-page [data-product-card] {
        transition: none !important;
    }
}


/* Marketplace listing hierarchy
 * Keep navy/blue for brand typography and primary actions, while distinct
 * accent roles make the catalog easier to scan.
 */
.builderce-marketplace [data-simple-search] {
    background: linear-gradient(135deg, #FFFFFF 0%, #F7FAFC 62%, #FFF8E1 100%) !important;
}

.builderce-marketplace [data-filter-search] form > div > div > label {
    color: #0B2F59 !important;
    background: #FFF8E1 !important;
    border-left: 4px solid var(--bce-market-gold) !important;
}

.builderce-marketplace [data-view-mode] {
    color: var(--bce-market-text) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--bce-market-border) !important;
}

.builderce-marketplace [data-view-mode][aria-current="true"] {
    color: #FFFFFF !important;
    background: var(--bce-market-blue) !important;
    border-color: var(--bce-market-blue) !important;
}

.builderce-marketplace [data-view-mode][aria-current="false"]:hover {
    color: #0B2F59 !important;
    background: #FFF8E1 !important;
    border-color: #E1C15A !important;
}

.builderce-marketplace [data-product-card] {
    border-top-color: var(--bce-market-teal) !important;
}

.builderce-marketplace [data-product-card][data-product-type="course"] {
    border-top-color: var(--bce-market-teal) !important;
}

.builderce-marketplace [data-product-card][data-product-type="package"] {
    border-top-color: var(--bce-market-purple) !important;
}

.builderce-marketplace [data-product-card][data-theme="master-course"] {
    border-top-color: var(--bce-market-gold) !important;
}

.builderce-marketplace [data-product-card]:hover {
    border-color: var(--bce-market-border) !important;
}

.builderce-marketplace [data-product-card][data-product-type="course"]:hover {
    border-top-color: var(--bce-market-teal) !important;
}

.builderce-marketplace [data-product-card][data-product-type="package"]:hover {
    border-top-color: var(--bce-market-purple) !important;
}

.builderce-marketplace [data-product-card][data-theme="master-course"]:hover {
    border-top-color: var(--bce-market-gold) !important;
}

.builderce-marketplace [data-product-card] > div:first-of-type {
    background: #F3F6F8 !important;
}

.builderce-marketplace [data-product-card] > div:first-of-type > div[class*="top-4"][class*="right-4"] {
    color: #1E6541 !important;
    background: #EAF7F0 !important;
    border-color: #A8D8BF !important;
}

.builderce-marketplace [data-product-card] > div:first-of-type > div[class*="top-16"] {
    color: #FFFFFF !important;
    background: var(--bce-market-purple) !important;
    border-color: #FFFFFF !important;
}

.builderce-marketplace [data-product-actions] {
    align-items: stretch;
}

.builderce-marketplace .bce-marketplace-action,
.builderce-marketplace [data-product-actions] [data-cart-action] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4rem;
    border-radius: 8px !important;
    padding: .7rem .9rem !important;
    font-weight: 800 !important;
    line-height: 1.15;
    text-decoration: none !important;
    white-space: nowrap;
}

.builderce-marketplace .bce-marketplace-action--primary {
    color: #FFFFFF !important;
    background: var(--bce-market-blue) !important;
    border: 1px solid var(--bce-market-blue) !important;
}

.builderce-marketplace .bce-marketplace-action--primary:hover {
    color: #FFFFFF !important;
    background: var(--bce-market-blue-dark) !important;
    border-color: var(--bce-market-blue-dark) !important;
}

.builderce-marketplace [data-product-actions] [data-cart-action] {
    color: var(--bce-market-navy) !important;
    background: var(--bce-market-gold) !important;
    border: 1px solid var(--bce-market-gold) !important;
    box-shadow: none !important;
}

.builderce-marketplace [data-product-actions] [data-cart-action]:hover {
    color: var(--bce-market-navy) !important;
    background: #D69A00 !important;
    border-color: #D69A00 !important;
}

.builderce-marketplace table thead {
    color: var(--bce-market-text) !important;
    background: #EEF2F5 !important;
    border-bottom: 3px solid var(--bce-market-teal);
}

.builderce-marketplace table tbody tr:nth-child(even) {
    background: #FAFBFC;
}

.builderce-marketplace table tbody tr:hover {
    background: #FFFBEF;
}


/* Marketplace card action correction.
 * The card footer uses a full-width metadata row followed by two equal actions,
 * and an already-enrolled product reports status instead of duplicating View.
 */
.builderce-marketplace [data-product-card] [data-product-actions] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: .6rem !important;
    width: 100% !important;
    align-items: stretch !important;
}

.builderce-marketplace [data-product-card] [data-product-actions] .bce-marketplace-action,
.builderce-marketplace [data-product-card] [data-product-actions] [data-cart-action] {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

.builderce-marketplace [data-product-card] [data-product-actions] svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.builderce-marketplace [data-product-card] [data-cart-action="owned"] {
    color: #1E6541 !important;
    background: #EAF7F0 !important;
    border-color: #A8D8BF !important;
    cursor: default !important;
}

.builderce-marketplace [data-product-card] [data-cart-action="owned"]:hover {
    color: #1E6541 !important;
    background: #EAF7F0 !important;
    border-color: #A8D8BF !important;
}

.builderce-marketplace [data-product-card] span.font-ui.font-bold.text-sm.text-foreground {
    white-space: nowrap;
}

@media (max-width: 360px) {
    .builderce-marketplace [data-product-card] [data-product-actions] {
        grid-template-columns: 1fr !important;
    }
}