/* ============================================================================
   Custom Field – Frontend (radio / dropdown options on product page)
   ============================================================================ */

.sc-cf-wrap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 14px;
    margin: 24px 0;
}

.sc-cf-field {
    display: flex; flex-direction: column; gap: 2px;
    grid-column: span 12;            /* fallback */
    min-width: 0;                    /* prevent grid blowout from long content */
}
.sc-cf-field.sc-cf-col-12 { grid-column: span 12; }
.sc-cf-field.sc-cf-col-6  { grid-column: span 6; }
.sc-cf-field.sc-cf-col-4  { grid-column: span 4; }
.sc-cf-field.sc-cf-col-3  { grid-column: span 3; }

/* Hidden discount fields take no space in the grid */
.sc-cf-discount-field { display: none !important; }

/* Mobile: collapse all to full width */
@media (max-width: 640px) {
    .sc-cf-wrap > .sc-cf-field { grid-column: span 12 !important; }
}
/* Tablet: at most 2 columns */
@media (min-width: 641px) and (max-width: 900px) {
    .sc-cf-field.sc-cf-col-4,
    .sc-cf-field.sc-cf-col-3 { grid-column: span 6; }
}

.sc-cf-field__label {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}
.sc-cf-req { color: #dc2626; font-weight: 700; }

.sc-cf-radios {
    display: flex; flex-wrap: wrap; gap: 8px;
}

.sc-cf-radio {
    display: inline-flex; align-items: center; gap: 0 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 2px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: inherit;
    background: #fff;
    transition: all 0.15s;
    flex: 1 1 calc(33% - 8px);
    min-width: 140px;
    position: relative;
}
.sc-cf-radio:hover { border-color: rgba(0,0,0,0.3); }
.sc-cf-radio input[type="radio"] {
    margin: 0 !important;
    flex: 0 0 auto;
}
.sc-cf-radio input[type="radio"]:checked + .sc-cf-radio__label { font-weight: 600; }
.sc-cf-radio:has(input:checked) {
    border-color: #2271b1;
    background: #eaf3fb;
    color: #1a4870;
}
.sc-cf-radio__label { flex: 1 1 auto; }
/* v0.10.57: price diletak BAWAH title (label) — flex-basis 100% paksa
   wrap ke baris baru, margin-left jajar bawah teks label (lepas bulatan radio). */
.sc-cf-radio__price {
    flex-basis: 100%;
    margin-left: 26px;
    margin-top: 1px;
    font-weight: 600;
    color: #16a34a;
    font-size: 12px;
}

.sc-cf-field select.sc-cf-input {
    padding: 10px 12px !important;
    font-size: 14px !important;
    border: 2px solid rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    background: #fff;
}
.sc-cf-field select.sc-cf-input:focus {
    border-color: #2271b1 !important;
    outline: none !important;
}

@media (max-width: 600px) {
    .sc-cf-radio { flex-basis: 100%; }
}

/* ---- Text / Textarea / File frontend ---- */
.sc-cf-field input.sc-cf-text,
.sc-cf-field textarea.sc-cf-textarea,
.sc-cf-field input.sc-cf-file {
    padding: 10px 12px !important;
    font-size: 14px !important;
    border: 2px solid rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    background: #fff;
    font-family: inherit;
}
.sc-cf-field input.sc-cf-text:focus,
.sc-cf-field textarea.sc-cf-textarea:focus,
.sc-cf-field input.sc-cf-file:focus {
    border-color: #2271b1 !important;
    outline: none !important;
}
.sc-cf-field textarea.sc-cf-textarea { resize: vertical; }
.sc-cf-file-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.65;
}
/* v0.10.59: file field description (selepas hint max MB) */
.sc-cf-file-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: inherit;
    opacity: 0.85;
}
.sc-cf-file-desc p { margin: 0 0 4px; }
.sc-cf-file-desc p:last-child { margin-bottom: 0; }

/* ---- Price Table mode (like Sticker Calculator's price box) ---- */
.sc-cf-table {
    background: #1a1a2e;
    border-radius: 12px;
    padding: 14px;
}
.sc-cf-table__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 4px 14px 8px;
    color: #ffffff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    opacity: 0.85;
}
.sc-cf-table__header span:last-child { text-align: right; }
.sc-cf-table__rows {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.sc-cf-table-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 14px 16px;
    background: #2d2d4e;
    color: #cccccc;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    margin: 0 !important;
    transition: all 0.15s;
    align-items: center;
}
.sc-cf-table-row input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.sc-cf-table-row:hover { transform: translateY(-1px); }
.sc-cf-table-row.is-active,
.sc-cf-table-row:has(input:checked) {
    background: #ffffff;
    color: #1a1a2e;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sc-cf-table-row__label { text-align: left; }
.sc-cf-table-row__price {
    text-align: right;
    font-weight: 700;
}

/* ---- Defensive overrides to prevent theme conflicts on table mode ---- */
.sc-cf-field[hidden] { display: none !important; }
.sc-cf-table__rows { 
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sc-cf-table-row {
    list-style: none !important;
}

/* ============================================================ */
/* Price-table THEMES — applied via .sc-cf-theme-* on .sc-cf-table */
/* ============================================================ */

/* DARK theme (default — unchanged behaviour) */
.sc-cf-table.sc-cf-theme-dark {
    background: #1a1a2e;
}
.sc-cf-table.sc-cf-theme-dark .sc-cf-table__header {
    color: #ffffff;
}
.sc-cf-table.sc-cf-theme-dark .sc-cf-table-row {
    background: #2d2d4e;
    color: #cccccc;
}
.sc-cf-table.sc-cf-theme-dark .sc-cf-table-row.is-active,
.sc-cf-table.sc-cf-theme-dark .sc-cf-table-row:has(input:checked) {
    background: #ffffff;
    color: #1a1a2e;
}

/* LIGHT theme */
.sc-cf-table.sc-cf-theme-light {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 12px;
}
.sc-cf-table.sc-cf-theme-light .sc-cf-table__header {
    color: #6b7280;
}
.sc-cf-table.sc-cf-theme-light .sc-cf-table-row {
    background: #ffffff;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.sc-cf-table.sc-cf-theme-light .sc-cf-table-row:hover { background: #f3f4f6; }
.sc-cf-table.sc-cf-theme-light .sc-cf-table-row.is-active,
.sc-cf-table.sc-cf-theme-light .sc-cf-table-row:has(input:checked) {
    background: #1f2937;
    color: #ffffff;
    border-color: #1f2937;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* SOFT BLUE theme */
.sc-cf-table.sc-cf-theme-blue {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 12px;
}
.sc-cf-table.sc-cf-theme-blue .sc-cf-table__header {
    color: #1e40af;
}
.sc-cf-table.sc-cf-theme-blue .sc-cf-table-row {
    background: #ffffff;
    color: #1e3a8a;
    border: 1px solid #dbeafe;
}
.sc-cf-table.sc-cf-theme-blue .sc-cf-table-row:hover { background: #f0f7ff; }
.sc-cf-table.sc-cf-theme-blue .sc-cf-table-row.is-active,
.sc-cf-table.sc-cf-theme-blue .sc-cf-table-row:has(input:checked) {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}

/* ---- Option images (frontend radio + table) ---- */
.sc-cf-opt-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 36px;
    margin-right: 8px;
    vertical-align: middle;
    background: #f3f4f6;
}
.sc-cf-radio--has-img {
    align-items: center !important;
}
.sc-cf-table-row__label {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
}

/* Table-mode without price column → single column layout */
.sc-cf-table-row.sc-cf-no-price,
.sc-cf-table--no-price .sc-cf-table-row {
    grid-template-columns: 1fr !important;
}
.sc-cf-table--no-price .sc-cf-table__header {
    grid-template-columns: 1fr !important;
}

/* ============================================================ */
/* Bug fixes (v0.7.2)                                           */
/* ============================================================ */

/* ---- Add-to-cart button: don't hide the price span on hover ---- */
.single_add_to_cart_button:hover .sc-button-price,
.single_add_to_cart_button:focus .sc-button-price,
.single_add_to_cart_button:active .sc-button-price,
button[name="add-to-cart"]:hover .sc-button-price,
button[name="add-to-cart"]:focus .sc-button-price {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    transform: none !important;
}
.sc-button-price {
    color: inherit !important;
    opacity: 1 !important;
}
.sc-button-price s {
    opacity: 0.6 !important;
}

/* ---- Price-table header: explicit left/right alignment ---- */
.sc-cf-table__header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
.sc-cf-table__header > span:first-child {
    text-align: left !important;
    flex: 1 1 auto;
}
.sc-cf-table__header > span:last-child {
    text-align: right !important;
    flex: 0 0 auto;
}
.sc-cf-table--no-price .sc-cf-table__header > span:first-child {
    text-align: left !important;
}

/* ---- selectWoo dropdown sizing fix (was clipping text) ---- */
.sc-cf-field .select2-container { width: 100% !important; }
.sc-cf-field .select2-container--default .select2-selection--single {
    height: auto !important;
    min-height: 42px !important;
    padding: 6px 10px !important;
    border: 2px solid rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}
.sc-cf-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
    padding: 0 24px 0 0 !important;
    color: inherit !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
}
.sc-cf-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 6px !important;
}
.sc-cf-field .select2-container--default.select2-container--focus .select2-selection--single,
.sc-cf-field .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #2271b1 !important;
}

/* ---- Image in dropdown options (selectWoo template result) ---- */
.sc-cf-dd-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sc-cf-dd-img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 28px;
    background: #f3f4f6;
}
.select2-results__option .sc-cf-dd-item {
    padding: 2px 0;
}
.select2-selection__rendered .sc-cf-dd-img {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

/* ---- .sc-button-price rendered INSIDE the button (v0.7.2 layout) ---- */
.sc-button-price {
    display: inline;
    color: inherit;
    font-weight: inherit;
    white-space: nowrap;
}
.sc-button-price s {
    opacity: 0.55;
    font-weight: 500;
}
.sc-button-price:empty {
    display: none;
}

/* ============================================================
   v0.10.65 — Add-to-cart button: full width, 18px, text center.
   Divi guna selector ber-ID (#page-container … .button) yang
   spesifisiti tinggi. Kita pakai #page-container + 2 class butang
   (.single_add_to_cart_button.button) supaya menang & override
   padding asimetri Divi (1px/25px → teks tak center vertikal).
   ============================================================ */
#page-container form.cart .single_add_to_cart_button.button,
#page-container form.cart button[name="add-to-cart"].button,
#page-container form.cart .single_add_to_cart_button,
#page-container form.cart button[name="add-to-cart"],
.woocommerce div.product form.cart .single_add_to_cart_button,
body form.cart .single_add_to_cart_button,
body form.cart button[name="add-to-cart"],
.sc-summary-box__cta .single_add_to_cart_button.button,
.sc-summary-box__cta .single_add_to_cart_button,
.sc-summary-box__cta button[name="add-to-cart"] {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 18px !important;
    text-align: center !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    line-height: 1.4 !important;
    float: none !important;
    display: block !important;
}
/* Price span kekal sebaris dengan teks button */
.single_add_to_cart_button .sc-button-price,
button[name="add-to-cart"] .sc-button-price {
    display: inline !important;
    white-space: nowrap;
}

/* ---- Cart image thumbnail (in cart/checkout/order display) ---- */
.sc-cart-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
    vertical-align: middle;
    margin-right: 6px;
    background: #f3f4f6;
    transition: transform 0.15s;
}
.sc-cart-img:hover { transform: scale(1.05); }

/* Lightbox overlay */
.sc-img-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: scImgFadeIn 0.15s ease-out;
}
.sc-img-overlay img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 60px rgba(0,0,0,0.5);
}
@keyframes scImgFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================ */
/* v0.7.3 — stronger hover fix + cart image lightbox            */
/* ============================================================ */

/* ---- Aggressive hover color preservation (uses --sc-btn-color set by JS) ---- */
.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus,
.single_add_to_cart_button:active,
button[name="add-to-cart"]:hover,
button[name="add-to-cart"]:focus,
button[name="add-to-cart"]:active,
.single_add_to_cart_button.wp-element-button:hover,
.single_add_to_cart_button.wp-element-button:focus {
    color: var(--sc-btn-color, #ffffff) !important;
}
.sc-button-price,
.single_add_to_cart_button:hover .sc-button-price,
.single_add_to_cart_button:focus .sc-button-price,
.single_add_to_cart_button:active .sc-button-price {
    color: var(--sc-btn-color, currentColor) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline !important;
    text-shadow: none !important;
}

/* ---- Cart line option image + lightbox ---- */
.sc-cart-opt-img-link {
    display: inline-block;
    line-height: 0;
    margin-right: 6px;
    vertical-align: middle;
}
.sc-cart-opt-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
    transition: transform 0.15s;
    display: inline-block;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}
.sc-cart-opt-img-link:hover .sc-cart-opt-img {
    transform: scale(1.1);
}

.sc-cart-lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.sc-cart-lightbox[hidden] { display: none !important; }
.sc-cart-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
.sc-cart-lightbox__backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    cursor: zoom-out;
}
.sc-cart-lightbox__img {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 6px;
    box-shadow: 0 10px 60px rgba(0,0,0,0.55);
    cursor: default;
    display: block;
}
.sc-cart-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.18);
    border: 0;
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s;
}
.sc-cart-lightbox__close:hover {
    background: rgba(255,255,255,0.32);
}

/* ============================================================ */
/* Bug fixes (v0.7.3)                                           */
/* ============================================================ */

/* ---- Force add-to-cart button text visible on hover/focus ---- */
/* Many themes use .button:hover { color: transparent } or text-indent: -9999px */
/* with a label::before/::after overlay. Force the original color back. */
form.cart .single_add_to_cart_button:hover,
form.cart .single_add_to_cart_button:focus,
form.cart .single_add_to_cart_button:active,
form.cart button[name="add-to-cart"]:hover,
form.cart button[name="add-to-cart"]:focus,
form.cart button[name="add-to-cart"]:active {
    color: var(--sc-btn-color, #ffffff) !important;
    text-indent: 0 !important;
    opacity: 1 !important;
}

/* Price chip inside button — inherit button colors, no background */
form.cart .sc-button-price,
form.cart:hover .sc-button-price,
form.cart:focus-within .sc-button-price {
    color: inherit !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
}

/* ---- Dropdown selected display with image (selectWoo) — defensive ---- */
.sc-cf-field .select2-selection__rendered .sc-cf-dd-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.2 !important;
    overflow: hidden;
    max-width: 100%;
    height: auto !important;
    padding: 0 !important;
}
.sc-cf-field .select2-selection__rendered .sc-cf-dd-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}
.sc-cf-field .select2-selection__rendered .sc-cf-dd-img {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    object-fit: cover;
    border-radius: 3px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e5e7eb;
}

/* Dropdown options (open list) — image larger */
.select2-results__option .sc-cf-dd-item {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    width: 100%;
}
.select2-results__option .sc-cf-dd-img {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}

/* ---- Cart-page anchor link wrapping the thumbnail ---- */
.sc-cart-img-link {
    display: inline-block;
    text-decoration: none !important;
    margin-right: 6px;
    vertical-align: middle;
}
.sc-cart-img-link:hover { opacity: 0.85; }

/* ============================================================ */
/* v0.7.5 — Custom dropdown + ATC wrapper                       */
/* ============================================================ */

/* ---- Custom image-enabled dropdown (replaces selectWoo for image fields) ---- */
.sc-cf-native-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sc-cf-dd {
    position: relative;
    width: 100%;
    font-size: 14px;
}
.sc-cf-dd__trigger {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    padding: 8px 12px !important;
    background: #ffffff !important;
    border: 2px solid rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    cursor: pointer;
    text-align: left !important;
    min-height: 44px;
    color: #1f2937 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: none !important;
}
.sc-cf-dd__trigger:hover {
    border-color: rgba(0,0,0,0.3) !important;
}
.sc-cf-dd.is-open .sc-cf-dd__trigger {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 3px rgba(34,113,177,0.15) !important;
}
.sc-cf-dd__trigger .sc-cf-dd__img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: cover;
    border-radius: 4px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}
.sc-cf-dd__trigger .sc-cf-dd__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-cf-dd__placeholder {
    flex: 1 1 auto;
    color: #9ca3af;
}
.sc-cf-dd__arrow {
    flex: 0 0 auto;
    margin-left: 4px;
    color: #6b7280;
    font-size: 12px;
    transition: transform 0.15s;
}
.sc-cf-dd.is-open .sc-cf-dd__arrow {
    transform: rotate(180deg);
}

.sc-cf-dd__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    display: none;
    overflow: hidden;
    max-height: 360px;
}
.sc-cf-dd.is-open .sc-cf-dd__panel {
    display: flex;
    flex-direction: column;
}

.sc-cf-dd__search {
    width: 100%;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    background: #f9fafb !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.sc-cf-dd__search:focus {
    background: #ffffff !important;
}

.sc-cf-dd__list {
    overflow-y: auto;
    max-height: 320px;
}

.sc-cf-dd__option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.sc-cf-dd__option:hover {
    background: #f3f4f6;
}
.sc-cf-dd__option.is-selected {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 600;
}
.sc-cf-dd__option .sc-cf-dd__img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: cover;
    border-radius: 4px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}
.sc-cf-dd__option .sc-cf-dd__img--placeholder {
    background: linear-gradient(135deg, #f3f4f6 25%, #e5e7eb 25%, #e5e7eb 50%, #f3f4f6 50%, #f3f4f6 75%, #e5e7eb 75%);
    background-size: 8px 8px;
}
.sc-cf-dd__option .sc-cf-dd__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Disabled option state (shown but not selectable) ---- */
.sc-cf-table-row.is-disabled,
.sc-cf-radio.is-disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
    filter: grayscale(0.4);
}
.sc-cf-table-row.is-disabled input,
.sc-cf-radio.is-disabled input {
    cursor: not-allowed !important;
    pointer-events: none;
}
.sc-cf-table-row.is-disabled .sc-cf-table-row__label,
.sc-cf-radio.is-disabled .sc-cf-radio__label {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Custom dropdown disabled option */
.sc-cf-dd__option.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.sc-cf-dd__option.is-disabled .sc-cf-dd__label {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.sc-cf-dd__option.is-disabled:hover {
    background: transparent;
}

/* Native dropdown <option disabled> — most browsers grey it out automatically */
.sc-cf-input option:disabled {
    color: #9ca3af;
}

/* ============================================================ */
/* Matrix (Size & Quantity) field                               */
/* ============================================================ */
.sc-cf-matrix {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.sc-cf-matrix thead th {
    background: #1e3a8a;
    color: #ffffff;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.sc-cf-matrix__col-qty,
.sc-cf-matrix__col-price { text-align: center !important; }
.sc-cf-matrix__col-x { width: 36px; }

.sc-cf-matrix tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
}
.sc-cf-matrix tbody td:first-child {
    text-align: left;
}

.sc-cf-matrix__option {
    width: 100%;
    padding: 8px 10px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    font-size: 14px;
}

.sc-cf-matrix__qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}
.sc-cf-matrix__qty-minus,
.sc-cf-matrix__qty-plus {
    background: #f3f4f6 !important;
    border: 0 !important;
    color: #374151 !important;
    width: 36px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding: 0 !important;
    transition: background 0.12s;
}
.sc-cf-matrix__qty-minus:hover,
.sc-cf-matrix__qty-plus:hover { background: #e5e7eb !important; }
.sc-cf-matrix__qty-input {
    border: 0 !important;
    width: 64px !important;
    text-align: center !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600;
    padding: 6px 4px !important;
    -moz-appearance: textfield;
}
.sc-cf-matrix__qty-input::-webkit-outer-spin-button,
.sc-cf-matrix__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

.sc-cf-matrix__row-price {
    text-align: center;
    line-height: 1.3;
}
.sc-cf-matrix__row-price-total {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
}
.sc-cf-matrix__row-price-each {
    color: #2563eb;
    font-size: 11px;
    display: block;
}

.sc-cf-matrix__remove {
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 8px !important;
    border-radius: 50%;
    width: 28px; height: 28px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.sc-cf-matrix__remove:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.sc-cf-matrix tfoot td {
    padding: 10px 12px;
}
.sc-cf-matrix__addrow td { background: #f9fafb; border-top: 1px solid #e5e7eb; }
.sc-cf-matrix__add {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px dashed #3b82f6 !important;
    color: #1e40af !important;
    padding: 10px 12px !important;
    font-weight: 600 !important;
    cursor: pointer;
    border-radius: 6px !important;
    transition: background 0.12s;
    font-size: 14px;
}
.sc-cf-matrix__add:hover { background: #eff6ff !important; }

.sc-cf-matrix__total {
    background: #f9fafb;
    font-weight: 700;
}
.sc-cf-matrix__total td {
    border-top: 2px solid #e5e7eb;
    font-size: 14px;
}
.sc-cf-matrix__total-qty,
.sc-cf-matrix__total-price { text-align: center; color: #1f2937; }
.sc-cf-matrix__total-price { color: #059669; font-size: 15px; }

@media (max-width: 640px) {
    .sc-cf-matrix thead { display: none; }
    .sc-cf-matrix tbody td { display: block; padding: 4px 10px; }
    .sc-cf-matrix tbody tr.sc-cf-matrix__row {
        display: block; padding: 10px;
        border-bottom: 8px solid #f9fafb;
    }
}

/* ============================================================ */
/* Order Summary box (sticky right sidebar)                     */
/* ============================================================ */
/* Outer wrapper sits AROUND form.cart so we don't fight theme rules
   that style form.cart itself. */
.sc-summary-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    max-width: 100%;
}
.sc-summary-wrap > form.cart {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    max-width: none !important;
}
.sc-summary-box {
    position: sticky;
    top: 20px;
    align-self: start;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    font-size: 14px;
}
.sc-summary-box__header {
    background: #1e3a8a;
    color: #ffffff;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.sc-summary-box__rows {
    padding: 14px 16px;
    max-height: 320px;
    overflow-y: auto;
}
.sc-summary-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    gap: 10px;
}
.sc-summary-row:last-child { border-bottom: 0; }
.sc-summary-row__label {
    color: #6b7280;
    flex: 0 0 42%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
}
.sc-summary-row__value {
    flex: 1 1 auto;
    color: #1f2937;
    font-weight: 600;
    word-break: break-word;
}
.sc-summary-row--empty {
    color: #9ca3af;
    font-style: italic;
    display: block;
    text-align: center;
    padding: 12px 0;
}

.sc-summary-box__footer {
    border-top: 2px solid #e5e7eb;
    padding: 14px 16px;
    background: #f9fafb;
}
.sc-summary-totals { margin-bottom: 12px; }
.sc-summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 14px;
}
.sc-summary-total-row.sc-summary-discount { color: #dc2626; }
.sc-summary-total-row.sc-summary-total {
    border-top: 1px solid #e5e7eb;
    margin-top: 6px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
}

.sc-summary-box__cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-summary-box__cta .quantity { flex: 0 0 auto; margin: 0 !important; }
.sc-summary-box__cta .quantity input { width: 70px !important; }
.sc-summary-box__cta .single_add_to_cart_button,
.sc-summary-box__cta button[name="add-to-cart"] {
    flex: 1 1 auto;
    width: 100%;
    margin: 0 !important;
}

/* Hide product image AND collapse the column it occupied. */
body.sc-summary-hide-image .woocommerce-product-gallery,
body.sc-summary-hide-image .product-gallery,
body.sc-summary-hide-image .single-product__image,
body.sc-summary-hide-image .wc-block-product-image,
body.sc-summary-hide-image .wp-block-woocommerce-product-image-gallery,
body.sc-summary-hide-image .product .images {
    display: none !important;
}

/* Expand .summary (and its kin) to fill available width once gallery is gone. */
body.sc-summary-hide-image .summary,
body.sc-summary-hide-image .entry-summary,
body.sc-summary-hide-image .product .summary,
body.sc-summary-hide-image .wp-block-woocommerce-product-summary,
body.sc-summary-hide-image .product-summary,
body.sc-summary-hide-image .single-product__details {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    flex: 1 1 100% !important;
}

/* Neutralize the .product wrapper layout (classic themes use float / flex here). */
body.sc-summary-hide-image .product,
body.sc-summary-hide-image div.product,
body.sc-summary-hide-image .single-product .product,
body.sc-summary-hide-image .type-product {
    display: block !important;
    grid-template-columns: 1fr !important;
}

/* Block themes: product is composed via wp-block-group / wp-block-columns. */
body.sc-summary-hide-image .wp-block-columns,
body.sc-summary-hide-image .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}
body.sc-summary-hide-image .wp-block-columns {
    display: block !important;
}

/* Modern browsers: target ANY parent that holds the gallery as a direct child. */
body.sc-summary-hide-image *:has(> .woocommerce-product-gallery),
body.sc-summary-hide-image *:has(> .wp-block-woocommerce-product-image-gallery),
body.sc-summary-hide-image *:has(> .wc-block-product-image),
body.sc-summary-hide-image *:has(> .product-gallery) {
    display: block !important;
    grid-template-columns: 1fr !important;
}

@media (max-width: 900px) {
    .sc-summary-wrap {
        grid-template-columns: 1fr !important;
    }
    .sc-summary-box {
        position: static;
        margin-top: 16px;
    }
}

/* ---- Hide WC quantity field (independent toggle) ---- */
body.sc-hide-qty form.cart .quantity,
body.sc-hide-qty .sc-summary-box__cta .quantity {
    display: none !important;
}
/* If qty is hidden, ensure value=1 stays submitted (button must own full width). */
body.sc-hide-qty .sc-summary-box__cta .single_add_to_cart_button,
body.sc-hide-qty .sc-summary-box__cta button[name="add-to-cart"] {
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* ---- Matrix entries shown as chips in the Order Summary ---- */
.sc-summary-row__chips {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
}
.sc-summary-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    color: #1e3a8a;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

/* ============================================================ */
/* Layout fields: section header, divider, HTML                 */
/* ============================================================ */
.sc-cf-field--layout {
    gap: 4px;
}

/* Section header */
.sc-cf-section {
    padding: 6px 0 4px 0;
}
.sc-cf-section__title {
    margin: 0 0 4px 0 !important;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
    padding: 0;
}
.sc-cf-section__desc {
    margin: 0 !important;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
}

/* Divider */
.sc-cf-divider-wrap {
    padding: 4px 0;
}
.sc-cf-divider {
    border: 0;
    border-top: 1px solid #d1d5db;
    margin: 8px 0;
}
.sc-cf-divider--solid  { border-top-style: solid; }
.sc-cf-divider--dashed { border-top-style: dashed; }
.sc-cf-divider--dotted { border-top-style: dotted; }
.sc-cf-divider--double { border-top: 3px double #9ca3af; }

/* HTML block */
.sc-cf-html {
    color: inherit;
    line-height: 1.5;
}
.sc-cf-html p { margin: 0 0 8px 0; }
.sc-cf-html p:last-child { margin-bottom: 0; }
.sc-cf-html ul, .sc-cf-html ol { margin: 0 0 8px 20px; }
.sc-cf-html img { max-width: 100%; height: auto; border-radius: 4px; }
.sc-cf-html a { color: #1e3a8a; text-decoration: underline; }

/* ============================================================ */
/* Remove the thick blue focus stroke on all CF fields          */
/* (theme + browser default outlines disabled inside .sc-cf-wrap)*/
/* ============================================================ */
.sc-cf-wrap input:focus,
.sc-cf-wrap input:focus-visible,
.sc-cf-wrap select:focus,
.sc-cf-wrap select:focus-visible,
.sc-cf-wrap textarea:focus,
.sc-cf-wrap textarea:focus-visible,
.sc-cf-wrap button:focus,
.sc-cf-wrap button:focus-visible,
.sc-cf-wrap label:focus,
.sc-cf-wrap label:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

/* Matrix table cells */
.sc-cf-matrix input:focus,
.sc-cf-matrix select:focus,
.sc-cf-matrix button:focus,
.sc-cf-matrix input:focus-visible,
.sc-cf-matrix select:focus-visible,
.sc-cf-matrix button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Custom dropdown — neutralize the blue glow ring */
.sc-cf-dd__trigger:focus,
.sc-cf-dd__trigger:focus-visible,
.sc-cf-dd__option:focus,
.sc-cf-dd__search:focus,
.sc-cf-dd.is-open .sc-cf-dd__trigger {
    outline: none !important;
    box-shadow: none !important;
}
/* Keep a thin border-color change as a soft focus indicator (no thick ring) */
.sc-cf-dd.is-open .sc-cf-dd__trigger {
    border-color: #d1d5db !important;
}

/* Radio + checkbox themselves — browsers add a colored outline */
.sc-cf-wrap input[type="radio"]:focus,
.sc-cf-wrap input[type="checkbox"]:focus,
.sc-cf-wrap input[type="radio"]:focus-visible,
.sc-cf-wrap input[type="checkbox"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* selectWoo (searchable dropdown without images) */
.sc-cf-field .select2-container--default.select2-container--focus .select2-selection--single,
.sc-cf-field .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #d1d5db !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Summary box CTA — moved add-to-cart inherits focus from theme; clear it */
.sc-summary-box__cta button:focus,
.sc-summary-box__cta button:focus-visible,
.sc-summary-box__cta input:focus,
.sc-summary-box__cta input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================================
 * Matrix minimum order warning (frontend)
 * ============================================================ */
.sc-cf-matrix-warning {
    margin: 8px 0 12px 0;
    padding: 10px 14px;
    background: #fef3c7;
    border-left: 3px solid #d97706;
    border-radius: 4px;
    color: #78350f;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.sc-cf-matrix--under-min thead th {
    background: #d97706 !important;
}

/* ============================================================
   v0.10.11 — radio_pro (aggressive override)
   --------------------------------------------------
   Tema WooCommerce/storefront sering tambah padding, margin, dan
   min-height pada <label> yang menjadikan kotak option terlalu tinggi.
   Versi ini guna !important pada perkara-perkara kritikal supaya
   layout & ukuran tidak boleh dipatahkan oleh tema kedai.
   ============================================================ */

/* === Container: paksa column, full-width === */
.sc-cf-radios.sc-cf-radios--pro {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px;
}

/* === Setiap option (label) — paksa lebar penuh & buang margin tema === */
.sc-cf-radio.sc-cf-radio--pro {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    line-height: 1.4 !important;
    gap: 10px !important;
}

/* === Kes TIADA description: __body lenyap, layout = Radio biasa === */
.sc-cf-radio--pro:not(:has(.sc-cf-radio__desc)) .sc-cf-radio__body {
    display: contents;
}

/* === Saiz teks dalam (lebih besar) === */
.sc-cf-radio--pro .sc-cf-radio__label {
    font-size: 14.5px;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    flex: 1;
}

/* === Prices container — lalai inline; column bila ada description === */
.sc-cf-radio--pro .sc-cf-radio__prices {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}
.sc-cf-radio__price-reg,
.sc-cf-radio__price-now {
    margin: 0;
    padding: 0;
    line-height: 1.3;
}
.sc-cf-radio__price-reg {
    font-size: 12px;
    color: rgba(0,0,0,0.5);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.sc-cf-radio__price-now {
    font-weight: 600;
    color: #16a34a;
    font-size: 13.5px;
}
.sc-cf-radio--pro.has-sale .sc-cf-radio__price-now,
.sc-cf-radio.has-sale .sc-cf-radio__price-now {
    color: #dc2626;
    font-weight: 700;
}
.sc-cf-radio--pro.has-sale:has(input:checked) .sc-cf-radio__price-now,
.sc-cf-radio.has-sale:has(input:checked) .sc-cf-radio__price-now {
    color: #b91c1c;
}
/* v0.10.64: non-pro radio sale — reg & now sebaris dengan gap */
.sc-cf-radio:not(.sc-cf-radio--pro) .sc-cf-radio__price .sc-cf-radio__price-reg {
    margin-right: 6px;
}

/* === Kes ADA description: layout 2-baris, rapat === */
.sc-cf-radio--pro:has(.sc-cf-radio__desc) {
    align-items: flex-start !important;
}
.sc-cf-radio--pro:has(.sc-cf-radio__desc) input[type="radio"] {
    margin-top: 3px !important;
}
.sc-cf-radio--pro:has(.sc-cf-radio__desc) .sc-cf-radio__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sc-cf-radio--pro:has(.sc-cf-radio__desc) .sc-cf-radio__label {
    font-weight: 600;
}
.sc-cf-radio--pro:has(.sc-cf-radio__desc) .sc-cf-radio__prices {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
    gap: 2px !important;
}
.sc-cf-radio__desc {
    display: block;
    font-size: 13px;
    color: rgba(0,0,0,0.6);
    line-height: 1.45;
    white-space: pre-line;
    margin: 0;
    padding: 0;
}

/* ============================================================
   v0.10.12 — radio_pro: varian 2-per-row (side-by-side)
   Diaktifkan oleh checkbox "2 per row" dalam admin → tambah class
   .sc-cf-radios--pro-2col. CSS Grid untuk dua lajur sama lebar.
   Pada mobile (≤480px) jatuh kembali ke 1-lajur.
   ============================================================ */
.sc-cf-radios.sc-cf-radios--pro-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: initial !important;
    gap: 8px;
}
.sc-cf-radios--pro-2col .sc-cf-radio.sc-cf-radio--pro {
    width: auto !important;
}
@media (max-width: 480px) {
    .sc-cf-radios.sc-cf-radios--pro-2col {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   v0.10.16 — dropdown_pro: description + dwi-harga ditunjuk
   TERUS DALAM panel dropdown (setiap option). Panel detail di
   bawah <select> tidak digunakan lagi.
   ============================================================ */
.sc-cf-dd__option--pro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
}
.sc-cf-dd__option--pro .sc-cf-dd__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sc-cf-dd__option--pro .sc-cf-dd__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}
.sc-cf-dd__option--pro .sc-cf-dd__desc {
    font-size: 12.5px;
    color: rgba(0,0,0,0.6);
    line-height: 1.45;
    white-space: pre-line;
}
.sc-cf-dd__option--pro .sc-cf-dd__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    flex: 0 0 auto;
    text-align: right;
}
.sc-cf-dd__option--pro .sc-cf-dd__price-reg {
    font-size: 12px;
    color: rgba(0,0,0,0.5);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.sc-cf-dd__option--pro .sc-cf-dd__price-now {
    font-weight: 600;
    color: #16a34a;
    font-size: 13px;
    white-space: nowrap;
}
.sc-cf-dd__option--pro.has-sale .sc-cf-dd__price-now {
    color: #dc2626;
    font-weight: 700;
}
.sc-cf-dd__option--pro.is-selected {
    background: rgba(30,58,138,0.06);
}
.sc-cf-dd__option--pro:hover:not(.is-disabled) {
    background: rgba(0,0,0,0.04);
}

/* ============================================================
   v0.10.17 — option dimatikan oleh per-option conditional rules.
   Visual sama macam `is-disabled` (option yang admin tanda disable)
   tetapi dengan opacity yang sedikit lebih tinggi supaya nampak
   tetapi jelas tidak boleh dipilih.
   ============================================================ */
.sc-cf-radio.is-cond-disabled,
.sc-cf-table-row.is-cond-disabled,
.sc-cf-dd__option.is-cond-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.sc-cf-radio.is-cond-disabled input[type="radio"],
.sc-cf-table-row.is-cond-disabled input[type="radio"] {
    cursor: not-allowed;
}

/* ============================================================
   v0.10.23 — Badge per option (e.g. "Best Seller", "Hot", "New")
   Pill kecil sebelah label dalam radio_pro & dropdown_pro.
   ============================================================ */
.sc-cf-opt-badge {
    display: inline-block;
    padding: 2px 7px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    margin-left: 6px;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.sc-cf-opt-badge__icon {
    display: inline-block;
    margin-right: 1px;
    font-size: 11px;
    text-transform: none;
    vertical-align: -1px;
}

/* v0.10.30 — Badge style variants */
.sc-cf-opt-badge--thumbup {
    background: linear-gradient(135deg, #34d399, #059669);
}
.sc-cf-opt-badge--hot {
    background: linear-gradient(135deg, #f87171, #dc2626);
}
.sc-cf-opt-badge--new {
    background: linear-gradient(135deg, #60a5fa, #2563eb);
}
.sc-cf-opt-badge--sale {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}
.sc-cf-opt-badge--star {
    background: linear-gradient(135deg, #fcd34d, #d97706);
    color: #422006;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.sc-cf-opt-badge--best {
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #422006;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

/* ============================================================
   v0.10.24 — Per-field STYLE classes
   Diaplikasikan pada wrapper .sc-cf-field via attribut yang
   dikira dari $f['style'] dalam cf.php.
   ============================================================ */

/* Text size */

/* ============================================================
   v0.10.28 — Columns: 1 / 2 / 3 / fit (auto-size to content)
   Pakai !important untuk override base CSS .sc-cf-radios--pro
   (display: flex !important) dan .sc-cf-radio (flex:1 1 33%; min-width:140px).
   ============================================================ */

/* === 1 column — single column, setiap card lebar penuh === */
.sc-cf-field.sc-cf-cols-1 .sc-cf-radios,
.sc-cf-field.sc-cf-cols-1 .sc-cf-radios--pro {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px;
}
.sc-cf-field.sc-cf-cols-1 .sc-cf-radio,
.sc-cf-field.sc-cf-cols-1 .sc-cf-radio--pro {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* === 2 columns === */
.sc-cf-field.sc-cf-cols-2 .sc-cf-radios,
.sc-cf-field.sc-cf-cols-2 .sc-cf-radios--pro {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
}
.sc-cf-field.sc-cf-cols-2 .sc-cf-radio,
.sc-cf-field.sc-cf-cols-2 .sc-cf-radio--pro {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
}

/* === 3 columns === */
.sc-cf-field.sc-cf-cols-3 .sc-cf-radios,
.sc-cf-field.sc-cf-cols-3 .sc-cf-radios--pro {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
}
.sc-cf-field.sc-cf-cols-3 .sc-cf-radio,
.sc-cf-field.sc-cf-cols-3 .sc-cf-radio--pro {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
}

/* === Fit content — setiap card sebesar content sahaja, wrap baris baru === */
.sc-cf-field.sc-cf-cols-fit .sc-cf-radios,
.sc-cf-field.sc-cf-cols-fit .sc-cf-radios--pro {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px;
}
.sc-cf-field.sc-cf-cols-fit .sc-cf-radio,
.sc-cf-field.sc-cf-cols-fit .sc-cf-radio--pro {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Mobile: non-pro radio/dropdown cards 2/3/4 col → 2 col (v0.10.61).
   Pro cards (ada description) kekal 1 col sebab terlalu sempit kalau 2. */
@media (max-width: 560px) {
    .sc-cf-field.sc-cf-cols-2 .sc-cf-radios,
    .sc-cf-field.sc-cf-cols-3 .sc-cf-radios,
    .sc-cf-field.sc-cf-cols-4 .sc-cf-radios {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .sc-cf-field.sc-cf-cols-2 .sc-cf-radios--pro,
    .sc-cf-field.sc-cf-cols-3 .sc-cf-radios--pro,
    .sc-cf-field.sc-cf-cols-4 .sc-cf-radios--pro {
        grid-template-columns: 1fr !important;
    }
}

/* Image position — top (image atas, text bawah) untuk radio variants */
.sc-cf-field.sc-cf-img-top .sc-cf-radio {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.sc-cf-field.sc-cf-img-top .sc-cf-radio .sc-cf-opt-img {
    margin: 0 0 4px 0;
    max-width: 100%;
    height: auto;
}
.sc-cf-field.sc-cf-img-top .sc-cf-radio__body {
    align-items: center;
    text-align: center;
}
.sc-cf-field.sc-cf-img-top .sc-cf-radio__prices {
    align-items: center;
    text-align: center;
}
/* v0.10.57: img-top center → price tak perlu indent margin-left */
.sc-cf-field.sc-cf-img-top .sc-cf-radio__price {
    margin-left: 0;
    text-align: center;
}

/* ============================================================
   v0.10.27 — Image size dalam radio + hide radio circle
   ============================================================ */
.sc-cf-field.sc-cf-img-size-32  .sc-cf-opt-img { width:  32px; height:  32px; object-fit: cover; }
.sc-cf-field.sc-cf-img-size-48  .sc-cf-opt-img { width:  48px; height:  48px; object-fit: cover; }
.sc-cf-field.sc-cf-img-size-64  .sc-cf-opt-img { width:  64px; height:  64px; object-fit: cover; }
.sc-cf-field.sc-cf-img-size-96  .sc-cf-opt-img { width:  96px; height:  96px; object-fit: cover; }
.sc-cf-field.sc-cf-img-size-128 .sc-cf-opt-img { width: 128px; height: 128px; object-fit: cover; }
.sc-cf-field.sc-cf-img-size-160 .sc-cf-opt-img { width: 160px; height: 160px; object-fit: cover; }

/* Hide native radio circle, treat the whole label as the clickable card */
.sc-cf-field.sc-cf-hide-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
/* Selected state for the card itself — pakai :has(input:checked) untuk modern browsers */
.sc-cf-field.sc-cf-hide-radio .sc-cf-radio {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 8px 10px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.sc-cf-field.sc-cf-hide-radio .sc-cf-radio:hover:not(.is-disabled):not(.is-cond-disabled) {
    background: rgba(0,0,0,0.025);
}
.sc-cf-field.sc-cf-hide-radio .sc-cf-radio:has(input[type="radio"]:checked) {
    border-color: #1e3a8a;
    background: rgba(30,58,138,0.06);
    box-shadow: 0 0 0 1px rgba(30,58,138,0.15);
}
/* Fallback untuk browser tanpa :has — class is-active boleh ditambah oleh JS jika perlu */
.sc-cf-field.sc-cf-hide-radio .sc-cf-radio.is-active {
    border-color: #1e3a8a;
    background: rgba(30,58,138,0.06);
    box-shadow: 0 0 0 1px rgba(30,58,138,0.15);
}

/* ============================================================
   v0.10.31 — Wholesale_qty field (frontend)
   ============================================================ */
.sc-cf-wholesale {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sc-cf-wholesale-qty {
    max-width: 240px;
    padding: 14px 18px;
    font-size: 20px;
    font-weight: 600;
    border: 2px solid rgba(0,0,0,0.18);
    border-radius: 8px;
    background: #fff;
}
.sc-cf-wholesale-qty:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34,113,177,0.15);
}

/* Collapsible toggle button */
.sc-cf-wholesale-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 4px 0;
    margin: 0;
    color: #2271b1;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
}
.sc-cf-wholesale-toggle:hover {
    color: #0a4b78;
    text-decoration: underline;
}
.sc-cf-wholesale-toggle__icon {
    font-size: 10px;
    display: inline-block;
    transition: transform 0.12s;
}

/* Tier table */
.sc-cf-wholesale-tiers {
    margin-top: 4px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.sc-cf-wholesale-tiers[hidden] {
    display: none !important;
}
.sc-cf-wholesale-tiers table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sc-cf-wholesale-tiers th,
.sc-cf-wholesale-tiers td {
    padding: 14px 22px !important;
    text-align: left !important;
    vertical-align: middle !important;
}
.sc-cf-wholesale-tiers th {
    background: rgba(0,0,0,0.04);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    border: 1px solid rgba(0,0,0,0.1);
}
.sc-cf-wholesale-tiers td {
    border: 1px solid rgba(0,0,0,0.08);
}
.sc-cf-wholesale-tier-row.is-active {
    background: rgba(30,58,138,0.08);
    font-weight: 700;
}
.sc-cf-wholesale-tier-row.is-active td:first-child::before {
    content: '✓ ';
    color: #059669;
    font-weight: 700;
}
.sc-cf-wholesale-tier-reg {
    text-decoration: line-through;
    color: #888;
    margin-right: 6px;
}
.sc-cf-wholesale-tier-sale {
    color: #dc2626;
    font-weight: 700;
}

/* ============================================================
   v0.10.33 — Badge position dalam radio cards (default: top-right)
   v0.10.45 — 3 pilihan: top-right / top-left / inline (next to text)
   ============================================================ */

/* Default & top-right (default behavior) */
.sc-cf-bp-top-right .sc-cf-radio > .sc-cf-opt-badge,
.sc-cf-radio > .sc-cf-opt-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    left: auto;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}
/* Top-left corner */
.sc-cf-bp-top-left .sc-cf-radio > .sc-cf-opt-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    right: auto;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}
/* Inline — render next to label text (static position, no absolute) */
.sc-cf-bp-inline .sc-cf-radio > .sc-cf-opt-badge {
    position: static;
    margin: 0 0 0 6px;
    pointer-events: auto;
}
/* Untuk image-top mode, badge tetap di corner */
.sc-cf-img-top .sc-cf-radio > .sc-cf-opt-badge {
    top: 4px;
}

/* ============================================================
   v0.10.43 — Inline SVG (bukan <img>) untuk badge `like`.
   Chrome Auto Dark Mode tidak invert inline SVG seperti images.
   ============================================================ */
.sc-cf-opt-badge__svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    line-height: 0;
}
.sc-cf-opt-badge__svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* `like` style — transparent wrapper, SVG stand alone (Chrome won't
   auto-dark inline SVG content) */
.sc-cf-opt-badge--like {
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 11px !important;
    font-weight: 600;
    text-shadow: none !important;
    border: 0 !important;
}

/* ============================================================
   v0.10.44 — Collapsible info field (type=collapse)
   Header clickable, body toggles. Style: Field Title → header,
   Option Text → body content.
   ============================================================ */
.sc-cf-field--collapse {
    display: block;  /* override the default flex column */
}
/* v0.10.48: spacing antara multiple accordion items dalam satu field */
.sc-cf-field--collapse .sc-cf-collapse + .sc-cf-collapse {
    margin-top: 8px;
}
.sc-cf-collapse {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    background: #fafafa;
    overflow: hidden;
}
.sc-cf-collapse__header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    transition: background 0.12s;
}
.sc-cf-collapse__header:hover {
    background: rgba(0,0,0,0.03);
}
.sc-cf-collapse__header:focus {
    outline: 2px solid #2271b1;
    outline-offset: -2px;
}
.sc-cf-collapse__icon {
    font-size: 12px;
    display: inline-block;
    transition: transform 0.15s;
    flex: 0 0 auto;
    color: #666;
}
.sc-cf-collapse__title {
    flex: 1;
    min-width: 0;
}
.sc-cf-collapse__body {
    padding: 4px 16px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: inherit;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.sc-cf-collapse__body[hidden] {
    display: none !important;
}
/* Style for HTML elements within collapse body */
.sc-cf-collapse__body p:first-child { margin-top: 0; }
.sc-cf-collapse__body p:last-child { margin-bottom: 0; }
.sc-cf-collapse__body ul,
.sc-cf-collapse__body ol {
    margin: 6px 0;
    padding-left: 22px;
}

/* ============================================================
   v0.10.46 — HTML field content body
   Apply OPTION TEXT style (font-size, color, font-family) inline
   from admin Style tab. Defaults provided so theme CSS doesn't make
   content text too large (h-tag inheritance issue Mus reported).
   ============================================================ */
.sc-cf-html-content {
    font-size: 14px;
    line-height: 1.6;
    color: inherit;
}
.sc-cf-html-content p {
    margin: 0 0 8px;
}
.sc-cf-html-content p:last-child {
    margin-bottom: 0;
}
.sc-cf-html-content h1,
.sc-cf-html-content h2,
.sc-cf-html-content h3,
.sc-cf-html-content h4 {
    margin: 8px 0 4px;
    font-weight: 600;
    line-height: 1.3;
}
.sc-cf-html-content h1 { font-size: 1.4em; }
.sc-cf-html-content h2 { font-size: 1.25em; }
.sc-cf-html-content h3 { font-size: 1.12em; }
.sc-cf-html-content h4 { font-size: 1em; }
.sc-cf-html-content ul,
.sc-cf-html-content ol {
    margin: 4px 0 8px;
    padding-left: 22px;
}
.sc-cf-html-content li {
    margin-bottom: 2px;
}
.sc-cf-html-content a {
    color: #2271b1;
    text-decoration: underline;
}

/* ============================================================
   v0.10.46 — Collapse field templates (4 visual variants).
   Pilih via Settings → "Template (frontend look)"
   ============================================================ */

/* CARD — soft shadow, rounded, no border */
.sc-cf-collapse--card {
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
.sc-cf-collapse--card .sc-cf-collapse__header {
    padding: 14px 18px;
}
.sc-cf-collapse--card .sc-cf-collapse__body {
    background: transparent;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding: 10px 18px 16px;
}

/* PLAIN — borderless, just chevron + underline */
.sc-cf-collapse--plain {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.sc-cf-collapse--plain .sc-cf-collapse__header {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.15);
}
.sc-cf-collapse--plain .sc-cf-collapse__header:hover {
    background: transparent;
    color: #2271b1;
}
.sc-cf-collapse--plain .sc-cf-collapse__body {
    background: transparent;
    border-top: 0;
    padding: 8px 0 4px;
}

/* FILLED — colored header bar, blue accent */
.sc-cf-collapse--filled {
    border: 0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.sc-cf-collapse--filled .sc-cf-collapse__header {
    background: #2271b1;
    color: #fff;
    padding: 12px 18px;
    font-weight: 600;
}
.sc-cf-collapse--filled .sc-cf-collapse__header:hover {
    background: #1a5a8f;
}
.sc-cf-collapse--filled .sc-cf-collapse__icon {
    color: #fff;
}
.sc-cf-collapse--filled .sc-cf-collapse__body {
    background: #fafbfc;
    border-top: 0;
    padding: 12px 18px;
}

/* ============================================================
   v0.10.60 — Required field validation error state (client-side)
   ============================================================ */
.sc-cf-field.sc-has-error {
    outline: 2px solid #dc2626;
    outline-offset: 4px;
    border-radius: 6px;
}
.sc-cf-field.sc-has-error .sc-cf-field__label {
    color: #dc2626;
}
.sc-cf-field-error {
    margin-top: 6px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sc-cf-field-error::before {
    content: "⚠";
    font-size: 13px;
}

/* v1.0.1: Field Addon (frontend) */
.sc-cf-addon__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}
.sc-cf-addon__toggle input { flex: 0 0 auto; margin: 0; }
.sc-cf-addon__price {
    font-weight: 600;
    color: #16a34a;
}
.sc-cf-addon__desc {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 4px;
    margin-left: 26px;
}
.sc-cf-addon__note {
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
    margin-left: 26px;
}