/* ==========================================================================
   Evolve Bundle Builder — Stylesheet v1.2
   ========================================================================== */

/* --------------------------------------------------------------------------
   Builder container
   -------------------------------------------------------------------------- */
.ebb-bundle-builder {
    margin-top:    var(--ebb-builder-margin-top, 24px);
    margin-bottom: var(--ebb-builder-margin-bot, 24px);
    padding-top:    var(--ebb-builder-pad-top, 28px);
    padding-bottom: var(--ebb-builder-pad-bot, 28px);
    padding-left:   var(--ebb-builder-pad-lft, 28px);
    padding-right:  var(--ebb-builder-pad-rgt, 28px);
    background:    var(--ebb-builder-bg, #f9fafb);
    border:        var(--ebb-builder-border-width, 0px) solid var(--ebb-builder-border, #e2e6ea);
    border-radius: var(--ebb-builder-radius, 8px);
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Size picker (shown at top)
   -------------------------------------------------------------------------- */
.ebb-size-picker {
    margin-bottom: 20px;
    padding-top: 30px;
}

.ebb-size-picker .ebb-slot-label {
    display: block;
    margin-bottom: 8px;
}

.ebb-size-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ebb-size-select {
    flex: 0 0 auto;
    min-width: 160px;
    max-width: 260px;
    padding: 10px 14px;
    background:    var(--ebb-select-bg, #fff);
    border:        1px solid var(--ebb-select-border, #ced4da);
    border-radius: var(--ebb-select-radius, 6px);
    font-size:     var(--ebb-select-size, 15px);
    box-sizing: border-box;
}

/* Reset button */
.ebb-reset-btn {
    display: inline-block;
    cursor: pointer;
    background:    var(--ebb-reset-bg, #e8ecef) !important;
    color:         var(--ebb-reset-color, #333) !important;
    border:        1px solid var(--ebb-reset-border, #ccc) !important;
    border-radius: var(--ebb-reset-radius, 4px) !important;
    font-size:     var(--ebb-reset-font-size, 13px) !important;
    padding:       var(--ebb-reset-pad-v, 8px) var(--ebb-reset-pad-h, 14px) !important;
    margin-top:    var(--ebb-reset-margin-top, 0px) !important;
    margin-bottom: var(--ebb-reset-margin-bot, 0px) !important;
    line-height:   1.4;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.ebb-reset-btn:hover { opacity: 0.8; }

/* --------------------------------------------------------------------------
   Grid + price summary width wrapper
   The wrapper is itself a grid with the same column definition so the
   price summary can span exactly the filled columns and no further.
   -------------------------------------------------------------------------- */
.ebb-grid-wrap {
    display: grid;
    grid-template-columns: repeat(var(--ebb-columns, 5), minmax(120px, 180px));
    gap: var(--ebb-grid-gap, 12px);
    justify-content: start;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   5-column course grid — nested inside ebb-grid-wrap, inherits column def
   -------------------------------------------------------------------------- */
.ebb-course-grid {
    display: contents; /* slots flow directly into the wrapper grid */
    /* gap and columns are controlled by .ebb-grid-wrap */
}

@media (max-width: 900px) {
    .ebb-grid-wrap { grid-template-columns: repeat(3, minmax(120px, 180px)) !important; }
}
@media (max-width: 600px) {
    .ebb-grid-wrap { grid-template-columns: repeat(2, minmax(110px, 1fr)) !important; }
}
@media (max-width: 400px) {
    .ebb-grid-wrap { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   Price summary — spans all columns of the wrapper grid
   -------------------------------------------------------------------------- */
.ebb-price-summary {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 16px 18px;
    background:    var(--ebb-price-bg, #fff);
    border:        2px solid var(--ebb-price-border, #e2e6ea);
    border-radius: 6px;
}
.ebb-slot {
    display: flex;
    flex-direction: column;
}

.ebb-slot-label {
    display: block;
    font-size:   var(--ebb-label-size, 15px);
    color:       var(--ebb-label-color, #333);
    font-weight: 600;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ebb-required {
    color: #c0392b;
    margin-left: 2px;
}

.ebb-course-select {
    width: 100%;
    padding: 8px 10px;
    background:    var(--ebb-select-bg, #fff);
    border:        1px solid var(--ebb-select-border, #ced4da);
    border-radius: var(--ebb-select-radius, 6px);
    font-size:     var(--ebb-select-size, 15px);
    box-sizing: border-box;
    transition: border-color 0.15s;
    flex: 1;
}

.ebb-course-select:focus {
    outline: none;
    border-color: var(--ebb-select-focus, #0073aa);
    box-shadow: 0 0 0 2px rgba(0,115,170,0.15);
}

.ebb-course-select.ebb-invalid {
    border-color: #c0392b;
    background: #fff5f5;
}

.ebb-opt-taken { color: #aaa; }


.ebb-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1em;
    gap: 24px;
}
.ebb-price-row:last-of-type { border-bottom: none; }

.ebb-price-label { flex: 1; }
.ebb-price-value { text-align: right; white-space: nowrap; }

.ebb-total-row {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 2px solid #e2e6ea;
    border-bottom: none;
    font-size: 1.08em;
}

.ebb-total-row .ebb-price-value strong {
    color: var(--ebb-total-color, #1a7340);
}

.ebb-discount-value {
    color:       var(--ebb-discount-color, #1a7340);
    font-weight: 600;
}

.ebb-discount-label { font-style: italic; }

.ebb-volume-note {
    margin: 10px 0 0;
    font-size: 0.82em;
    color: #6c757d;
}

/* --------------------------------------------------------------------------
   Error / notice
   -------------------------------------------------------------------------- */
.ebb-error-msg {
    margin-top: 10px;
    padding: 10px 14px;
    background:   var(--ebb-error-bg, #fff0f0);
    border:       1px solid #f5c2c2;
    border-radius: 5px;
    color:        var(--ebb-error-color, #c0392b);
    font-size: 0.9em;
    font-weight: 500;
}

.ebb-notice {
    padding: 12px 16px;
    background: #fff8e1;
    border-left: 4px solid #f0ad4e;
    border-radius: 4px;
    font-size: 0.95em;
}

.ebb-price-placeholder {
    font-style: italic;
    color: #6c757d;
    font-size: 0.9em;
}

/* ==========================================================================
   ADMIN — Settings page
   ========================================================================== */

.ebb-admin-wrap .ebb-intro {
    max-width: 800px;
    color: #444;
    margin-bottom: 16px;
}

.ebb-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
    max-width: 1000px;
}

.ebb-settings-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 18px 20px;
}

.ebb-settings-card h2 {
    margin: 0 0 10px;
    font-size: 1.02em;
    font-weight: 700;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* Per-level discount table */
.ebb-level-table tbody tr:nth-child(even) { background: #f8f9fa; }
.ebb-level-table td { padding: 7px 10px; vertical-align: middle; }
.ebb-level-table th { padding: 8px 10px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; }
.ebb-level-table input.small-text { width: 72px; }

/* Volume tiers table */
.ebb-discount-table td,
.ebb-discount-table th { padding: 8px 10px; }
.ebb-discount-table input.small-text { width: 68px; }

.ebb-remove-row { color: #a00 !important; font-size: 0.85em; }
.ebb-remove-row:hover { color: #c00 !important; }

.ebb-discount-suffix { margin-left: 4px; font-weight: 600; color: #555; }

.ebb-example-table td,
.ebb-example-table th { padding: 7px 12px; font-size: 0.9em; }

/* Toggle switch */
.ebb-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
}
.ebb-toggle-label { font-weight: 600; font-size: 0.93em; }

.ebb-switch {
    position: relative;
    display: inline-block;
    width: 46px; height: 24px;
    flex-shrink: 0;
}
.ebb-switch input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; }
.ebb-switch input[type="hidden"]   { display: none; }
.ebb-slider {
    position: absolute; inset: 0;
    background: #ccc; border-radius: 24px;
    cursor: pointer; transition: background 0.2s;
}
.ebb-slider::before {
    content: ''; position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.ebb-switch input[type="checkbox"]:checked + .ebb-slider               { background: #0073aa; }
.ebb-switch input[type="checkbox"]:checked + .ebb-slider::before { transform: translateX(22px); }

/* Style grid */
.ebb-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
    max-width: 1100px;
    align-items: start;
}

.ebb-style-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 10px;
}
.ebb-style-field:last-child { border-bottom: none; }
.ebb-style-field > label { font-size: 0.88em; color: #444; flex: 1; min-width: 110px; }

.ebb-color-wrap { display: flex; align-items: center; gap: 6px; }
.ebb-color-input { width: 38px; height: 30px; border: 1px solid #ccc; border-radius: 4px; padding: 2px; cursor: pointer; background: none; }
.ebb-color-text  { width: 80px !important; font-family: monospace; font-size: 0.87em; }

@media (max-width: 782px) {
    .ebb-settings-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Course slot images
   ========================================================================== */

.ebb-bundle-builder .ebb-slot-img-wrap {
    width: 100%;
    overflow: hidden;
    margin-bottom: 2px;
    line-height: 0;
    border-radius: var(--ebb-img-radius, 4px);
}

.ebb-bundle-builder .ebb-slot-img {
    display: block !important;
    width:         var(--ebb-img-width, 100%) !important;
    height:        var(--ebb-img-height, 80px) !important;
    min-height:    var(--ebb-img-height, 80px) !important;
    max-height:    none !important;
    object-fit:    var(--ebb-img-fit, cover) !important;
    border-radius: var(--ebb-img-radius, 4px) !important;
    overflow: hidden !important;
    transition: opacity 0.2s ease;
}

.ebb-bundle-builder .ebb-slot-img.ebb-img-hidden {
    display: none !important;
}

/* Cart controls below builder: handled by inline CSS via build_cart_layout_css() */

/* ==========================================================================
   Admin — image fit select width fix
   ========================================================================== */

#ebb_style_img_fit,
#ebb_style_columns {
    min-width: 160px;
}