/**
 * Credit Bundle Flyout adapter — restyles FunnelKit's quick-view "Select
 * options" drawer into the Design comp, scoped to the drawer only.
 *
 * Two halves:
 *   1. Token bridge + components injected by cfe-flyout.js / the PHP banner
 *      (.ic-picker chips, .uni-pick partner, .ic-eq equation, .cfe-fly-banner).
 *      These reuse Design's exact values; vars below map to canon --cfe-ds-*.
 *   2. Adapters over FK's own elements (header, thumbnail, name, qty, button).
 *
 * Load order: enqueued without deps after FK's style.min.css so these win on
 * the cascade without !important wherever practical.
 */

/* ---- token bridge: define Design's locals from canon tokens ---- */
#fkcart-modal .fkcart-quick-view-drawer {
    --ink:         var(--cfe-ds-color-ink,         #1B2A3B);
    --graphite:    var(--cfe-ds-color-graphite,    #5B6573);
    --fog:         var(--cfe-ds-color-fog,         #F4F5F7);
    --mist:        var(--cfe-ds-color-mist,        #E8EAED);
    --hairline:    #EEF0F3;
    --subtle:      #9CA3AF;
    --mint:        var(--cfe-ds-color-mint-text,   #0F7A2A);
    --mint-bg:     var(--cfe-ds-color-mint-bg,     #ECFDF5);
    --mint-border: var(--cfe-ds-color-mint-border, #6EE7B7);
    --sky:         var(--cfe-ds-color-sky-text,    #3E8AB8);
    --sky-bg:      var(--cfe-ds-tint-sky,          #EFF6FF);
    --sky-border:  #93C5FD;
    --font-display: var(--cfe-ds-font-display, 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif);
    --font-body:    var(--cfe-ds-font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif);
    font-family: var(--font-body);
    color: var(--ink);
}

/* ===================================================================
 * 1. FK chrome adapters
 * =================================================================== */

/* Header: turn FK's heading bar into the Design header (eyebrow + title). */
#fkcart-modal .fkcart-quick-view-drawer .fkcart-drawer-header-panel {
    padding: 20px 24px 16px;
    height: auto;
    border-bottom: 1px solid var(--hairline);
    align-items: flex-start;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-drawer-header-heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.005em;
    color: var(--ink);
    line-height: 1.2;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-drawer-header-heading::before {
    content: 'Edit your selection';
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--graphite);
    margin-bottom: 6px;
}

/* Thumbnail + title side-by-side; form fields below. */
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-wrap {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 18px 24px 0;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-thumbnail {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-thumbnail .fkcart-image-wrapper,
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-thumbnail a {
    margin: 0;
    padding: 0;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-thumbnail img {
    margin: 0;
    width: 56px;
    height: 56px;
    max-width: 56px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--mist);
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-name-thumbnail {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-name-thumbnail .fkcart-item-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--ink);
    text-align: left;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-fields {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0;
}

/* "View details" link removed from the drawer entirely. */
#fkcart-modal .fkcart-quick-view-drawer .fkcart-view-link {
    display: none !important;
}
/* The original View-details panel (now empty) collapses. */
#fkcart-modal .fkcart-quick-view-drawer .fkcart-view-link-wrap:empty {
    display: none;
}

/* Clear / reset link, top-right of the fields. */
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-reset-form {
    text-align: right;
    padding: 0 24px;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-reset-form a {
    font-size: 12px;
    color: var(--graphite);
    text-decoration: underline;
    text-underline-offset: 3px;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-reset-form a:hover {
    color: var(--ink);
}

/* Hide the native variations table + FK's variation price; the redesign owns
   these. Not gated on .cfe-fly-form (a JS-added class) so the native dropdowns
   never flash before the chip picker is built. */
#fkcart-modal .fkcart-quick-view-drawer table.variations {
    display: none !important;
}
#fkcart-modal .fkcart-quick-view-drawer .woocommerce-variation-price {
    display: none !important;
}
/* FK's own price-range displays are redundant — the .ic-eq equation owns pricing. */
#fkcart-modal .fkcart-quick-view-drawer .fkcart-item-custom,
#fkcart-modal .fkcart-quick-view-drawer .fkcart-item-product-stock {
    display: none !important;
}

/* Clean loading: drop FK's gray skeleton entirely; use a centered spinner. */
#fkcart-modal .fkcart-drawer-shimmer { display: none !important; }
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-spinner {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
}
#fkcart-modal .fkcart-quick-view-drawer.is-loading .cfe-fly-spinner { display: flex; }
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-spinner__dot {
    width: 38px;
    height: 38px;
    border: 3px solid var(--mist);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: cfe-fly-spin .7s linear infinite;
}
@keyframes cfe-fly-spin { to { transform: rotate(360deg); } }
/* Courses are bought one at a time — stock status is noise in the drawer. */
#fkcart-modal .fkcart-quick-view-drawer .woocommerce-variation-availability,
#fkcart-modal .fkcart-quick-view-drawer .single_variation p.stock,
#fkcart-modal .fkcart-quick-view-drawer p.stock {
    display: none !important;
}

/* Field labels above chips / partner. */
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-field {
    padding: 18px 24px 0;
}
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-field .lbl {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--graphite);
    margin-bottom: 8px;
}

/* Courses are always a single course (qty 1). Hide the label + stepper; the
   hidden quantity input stays in the DOM and still posts value="1". */
#fkcart-modal .fkcart-quick-view-drawer .woocommerce-variation-add-to-cart > label,
#fkcart-modal .fkcart-quick-view-drawer .fkcart-form-input-wrap {
    display: none !important;
}
#fkcart-modal .fkcart-quick-view-drawer .woocommerce-variation-add-to-cart {
    padding: 0;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mist);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-quantity-button {
    width: 32px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-quantity-button:hover {
    background: var(--fog);
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-quantity__input {
    width: 40px;
    height: 36px;
    border: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
}

/* Footer Update button. */
#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-button {
    margin-top: auto;
    padding: 16px 24px;
    border-top: 1px solid var(--hairline);
    position: sticky;
    bottom: 0;
    background: #fff;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-add-variant-product {
    width: 100%;
    background: var(--ink);
    color: #fff;
    padding: 13px 22px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s ease;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-add-variant-product:hover {
    background: #0F1A28;
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-add-variant-product.is-saved {
    background: var(--mint);
}
#fkcart-modal .fkcart-quick-view-drawer .fkcart-add-variant-product:disabled,
#fkcart-modal .fkcart-quick-view-drawer .fkcart-add-variant-product[aria-disabled="true"] {
    background: var(--mist);
    color: var(--graphite);
    cursor: not-allowed;
}

/* ===================================================================
 * 2. Injected components (Design values, verbatim)
 * =================================================================== */

/* ---- bundle banner (PHP-injected) ---- */
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-banner {
    margin: 18px 24px 0;
    padding: 12px 14px;
    background: var(--mint-bg);
    border: 1px solid var(--mint-border);
    border-radius: 10px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-banner svg {
    width: 16px;
    height: 16px;
    color: var(--mint);
    flex-shrink: 0;
    margin-top: 1px;
}
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-banner__body {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
}
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-banner__body b,
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-banner__body strong {
    color: var(--mint);
    font-weight: 600;
}
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-banner--sky {
    background: var(--sky-bg);
    border-color: var(--sky-border);
}
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-banner--sky svg {
    color: var(--sky);
}
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-banner--sky .cfe-fly-banner__body b,
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-banner--sky .cfe-fly-banner__body strong {
    color: var(--sky);
}

/* ---- credit chips ---- */
#fkcart-modal .fkcart-quick-view-drawer .ic-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    min-width: 0;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--mist);
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile:hover {
    border-color: var(--ink);
    transform: translateY(-1px);
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(27, 42, 59, 0.15);
    border-color: var(--ink);
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile__top {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 2px;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile__n {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile__l {
    font-size: 10px;
    color: var(--graphite);
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile__foot {
    padding-top: 2px;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile__cost {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    transition: color .15s ease;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile.is-active {
    background: var(--ink);
    border-color: var(--ink);
}
#fkcart-modal .fkcart-quick-view-drawer .ic-tile.is-active .ic-tile__n,
#fkcart-modal .fkcart-quick-view-drawer .ic-tile.is-active .ic-tile__l,
#fkcart-modal .fkcart-quick-view-drawer .ic-tile.is-active .ic-tile__cost {
    color: #fff;
}

/* ---- partner row ---- */
#fkcart-modal .fkcart-quick-view-drawer .uni-pick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--mist);
    border-radius: 10px;
    padding: 10px 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick:hover {
    border-color: #CBD0D8;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick .crest {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick .uni-name {
    flex: 1;
    min-width: 0;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick .uni-name b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick .uni-name small {
    font-size: 10px;
    color: var(--graphite);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick .chev {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--graphite);
    border-bottom: 1.5px solid var(--graphite);
    transform: translateY(-25%) rotate(45deg);
    margin-right: 6px;
    flex-shrink: 0;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick.is-open .chev {
    transform: translateY(15%) rotate(225deg);
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick--ro {
    cursor: default;
}

/* Partner crest as the official UoP seal (picker + option rows). */
#fkcart-modal .fkcart-quick-view-drawer .crest--logo {
    background: none !important;
    padding: 0;
    overflow: hidden;
}
#fkcart-modal .fkcart-quick-view-drawer .crest--logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick--ro:hover {
    border-color: var(--mist);
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick--ro .ro-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--graphite);
    background: var(--fog);
    padding: 3px 8px;
    border-radius: 999px;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick--ro .ro-tag svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* partner dropdown popover (multi-partner future) */
#fkcart-modal .fkcart-quick-view-drawer .cfe-fly-field--partner {
    position: relative;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 24px;
    right: 24px;
    background: #fff;
    border: 1px solid var(--mist);
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 12px 32px rgba(27, 42, 59, 0.15);
    z-index: 10;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    max-height: 240px;
    overflow: auto;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-pick.is-open + .uni-pop {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-opt:hover,
#fkcart-modal .fkcart-quick-view-drawer .uni-opt.is-cur {
    background: var(--fog);
}
#fkcart-modal .fkcart-quick-view-drawer .uni-opt .crest {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    flex-shrink: 0;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-opt .uni-name b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-opt .uni-name small {
    font-size: 10px;
    color: var(--graphite);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-opt .check {
    margin-left: auto;
    width: 14px;
    height: 14px;
    stroke: var(--mint);
    fill: none;
    stroke-width: 2.2;
    opacity: 0;
    flex-shrink: 0;
}
#fkcart-modal .fkcart-quick-view-drawer .uni-opt.is-cur .check {
    opacity: 1;
}

/* ---- equation ---- */
#fkcart-modal .fkcart-quick-view-drawer .ic-eq {
    margin: 18px 24px 0;
    padding: 14px 16px;
    background: var(--fog);
    border-radius: 10px;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq__empty {
    font-size: 13px;
    color: var(--graphite);
    text-align: center;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--graphite);
    padding: 4px 0;
    font-variant-numeric: tabular-nums;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq--mix .ic-eq__row {
    padding: 5px 0;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq__row small {
    color: var(--graphite);
    font-size: 12px;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq__row b {
    color: var(--ink);
    font-weight: 500;
    font-family: var(--font-display);
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq__row--mint b {
    color: var(--mint);
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq__row s {
    color: var(--subtle);
    font-weight: 400;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq__sum {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px dashed var(--mist);
    color: var(--ink);
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq__sum b {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
#fkcart-modal .fkcart-quick-view-drawer .ic-eq__save {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mint);
    background: var(--mint-bg);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ---- mobile (FK goes full-width at <=480px) ---- */
@media screen and (max-width: 480px) {
    #fkcart-modal .fkcart-quick-view-drawer .ic-picker {
        gap: 6px;
    }
    #fkcart-modal .fkcart-quick-view-drawer .ic-tile {
        padding: 4px 2px;
        gap: 2px;
    }
}