/* =========================================================
   Product Options UI — polish
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
    --opt-brand:        var(--brand, #0cc3ce);
    --opt-brand-strong: var(--brand-strong, #3a2e85);
    --opt-border:       var(--border, #e9defc);
    --opt-border-hover: var(--border-hover, #cdb5ff);
    --opt-shadow:       var(--shadow, rgba(58,46,133,.12));
    --opt-card-bg:      var(--bg-card, #fff);
    --opt-muted:        var(--text-muted, #6b7280);
    --opt-radius-sm:    10px;
    --opt-radius-md:    14px;
    --opt-focus-ring:   0 0 0 3px rgba(58,46,133,.22);
    --opt-speed:        .16s;
}

@media (prefers-color-scheme: dark){
    :root{ --opt-muted:#bdbdbd; }
}

/* =========================================================
   SWATCHES (radio color/texture)
   ========================================================= */

.bb-product-attribute-swatch-list{
    list-style:none; padding:0; margin:0;
    display:flex; gap:12px; flex-wrap:wrap;
}

.bb-product-attribute-swatch-item{ position:relative; cursor:pointer; }

.bb-product-attribute-swatch-item label{ display:inline-block; }

/* “ponto” do swatch */
.bb-product-attribute-swatch-display{
    position:relative;
    display:inline-block;
    width:34px; height:34px;  /* levemente maior p/ desktop */
    border-radius:50%;
    border:2px solid var(--opt-border);
    box-shadow: 0 2px 10px var(--opt-shadow);
    transition: border-color var(--opt-speed), box-shadow var(--opt-speed), transform var(--opt-speed);
    background-size:cover; background-position:center;
}

/* tamanhos opcionais */
.swatch-small  .bb-product-attribute-swatch-display{ width:24px; height:24px; }
.swatch-large  .bb-product-attribute-swatch-display{ width:44px; height:44px; }
.swatch-shape-square .bb-product-attribute-swatch-display{ border-radius:8px; }

/* hover */
.bb-product-attribute-swatch-item:hover .bb-product-attribute-swatch-display{
    border-color:var(--opt-border-hover);
    transform: translateY(-1px);
}

/* foco (teclado) */
.bb-product-attribute-swatch-item input[type="radio"]:focus-visible + .bb-product-attribute-swatch-display{
    outline:none; box-shadow: var(--opt-focus-ring), 0 2px 10px var(--opt-shadow);
}

/* checked: aro + “check” sutil */
.bb-product-attribute-swatch-item input[type="radio"]:checked + .bb-product-attribute-swatch-display{
    border-color:var(--opt-brand-strong);
    box-shadow: 0 0 0 2px rgba(58,46,133,.15), inset 0 0 0 2px #fff, 0 2px 10px var(--opt-shadow);
}
.bb-product-attribute-swatch-item input[type="radio"]:checked + .bb-product-attribute-swatch-display::after{
    content:"";
    position:absolute; inset:0;
    background:
            radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 40%),
            url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12' /%3E%3C/svg%3E") center/14px no-repeat;
    border-radius:inherit;
    mix-blend-mode: overlay;
    pointer-events:none;
}

/* disabled: desatura + hachura leve */
.bb-product-attribute-swatch-item input[disabled] + .bb-product-attribute-swatch-display{
    filter: grayscale(.45) brightness(.98);
    opacity:.65; cursor:not-allowed;
}
.bb-product-attribute-swatch-item input[disabled] + .bb-product-attribute-swatch-display::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:
            repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 6px, transparent 6px 12px);
}

/* Tooltip */
.bb-product-attribute-swatch-item-tooltip{
    position:absolute; left:50%; top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
    min-width: 120px; max-width: 220px;
    background:#2a2140; color:#fff;
    font-size:12px; line-height:1.35;
    padding:8px 10px; border-radius:10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    z-index: 30; opacity:0; pointer-events:none;
    transition: opacity var(--opt-speed), transform var(--opt-speed);
    text-align:center; white-space:normal;
}
.bb-product-attribute-swatch-item-tooltip::before{
    content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
    border-width:6px; border-style:solid; border-color: transparent transparent #2a2140 transparent;
}
.bb-product-attribute-swatch-item:hover .bb-product-attribute-swatch-item-tooltip,
.bb-product-attribute-swatch-item:focus-within .bb-product-attribute-swatch-item-tooltip{
    opacity:1; transform: translateX(-50%) translateY(0);
}

/* =========================================================
   CHECKBOX CARDS (btn-check + label.custom-option-box)
   — versão compacta + adaptativa (sem espaço morto)
   ========================================================= */

.custom-option-box{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;          /* NADA de espaço livre */
    gap:6px;                         /* espaçamento enxuto */
    width: 100px;                    /* ajusta se quiser 132–160 */
    padding:10px 12px;               /* menos padding vertical */
    background: var(--opt-card-bg)!important;
    border:2px solid var(--opt-border);
    border-radius: var(--opt-radius-md);
    color: var(--opt-brand-strong);
    cursor:pointer; text-align:center;
    transition: border-color var(--opt-speed), box-shadow var(--opt-speed), transform var(--opt-speed), color var(--opt-speed), background var(--opt-speed);
    box-shadow: 0 3px 14px var(--opt-shadow);
}

/* mídia (cor/imagem) menores e sem reservar espaço quando não existem */
.custom-option-box .color-circle{
    width:22px; height:22px; border-radius:50%;
    border:2px solid currentColor; margin:0;    /* sem margin extra */
}
.custom-option-box img{
    display:block; width:28px; height:28px;
    border-radius:8px; object-fit:cover; margin:0;
}

/* quando NÃO há cor nem imagem → reduz ainda mais o “gap” */
.custom-option-box:not(:has(img, .color-circle)){
    gap:4px; padding-block:10px;
    background:
            radial-gradient(120px 16px at 50% 0%, rgba(58,46,133,.05), transparent 70%),
            var(--opt-card-bg);
}

/* tipografia mais densa */
.custom-option-box > .fw-bold{
    font-size:14px; line-height:1.1;
}
.custom-option-box > small{
    margin-top:2px; color: var(--opt-muted);
    font-weight:600;
}

/* “Indisponível” (texto) */
.custom-option-box .opt-unavailable{
    color:#f06478; font-size:12px; font-weight:600;
}

/* hover/seleção */
.custom-option-box:hover{
    border-color: var(--opt-border-hover);
    transform: translateY(-1px);
}
.btn-check:checked + .custom-option-box{
    border-color: var(--opt-brand);
    color: var(--opt-brand);
    box-shadow: 0 0 0 3px rgba(12,195,206,.18), 0 6px 20px var(--opt-shadow);
    background: linear-gradient(180deg, #ffffff, #fbfaff);
}
.btn-check:checked + .custom-option-box::after{
    content:"";
    position:absolute; right:10px; top:10px; width:14px; height:14px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='14' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%233a2e85' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity:.9;
}

/* foco acessível */
.btn-check:focus-visible + .custom-option-box{ box-shadow: var(--opt-focus-ring); }

/* desabilitado/sem estoque (usa classe .is-unavailable no label) */
.btn-check:disabled + .custom-option-box,
.custom-option-box.is-unavailable{
    opacity:.7; cursor:not-allowed;
    filter: grayscale(.1);
    border-style:dashed;
}

/* responsivo */
@media (max-width:640px){
    .custom-option-box{ width: calc(50% - 8px); }
}

/* =========================================================
   TEXT / TEXTAREA
   ========================================================= */

.custom-text-input,
.custom-textarea{
    background:#fff;
    border:2px solid var(--opt-border);
    color:#334155;
    border-radius: var(--opt-radius-sm);
    transition: border-color var(--opt-speed), box-shadow var(--opt-speed), background var(--opt-speed);
}
.custom-text-input::placeholder,
.custom-textarea::placeholder{ color: var(--opt-muted); }
.custom-text-input:focus,
.custom-textarea:focus{
    border-color: var(--opt-brand-strong);
    box-shadow: var(--opt-focus-ring);
    background:#fff;
}
.custom-textarea{ resize: vertical; min-height:120px; }

/* inválido opcional */
.custom-text-input.is-invalid,
.custom-textarea.is-invalid{ border-color:#ff3551; }

/* =========================================================
   UPLOAD
   ========================================================= */

.custom-upload-btn{
    display:inline-block; width:100%;
    background: var(--opt-card-bg);
    border:2px dashed var(--opt-border);
    color: var(--opt-brand-strong);
    padding:14px 16px; font-weight:600;
    border-radius: var(--opt-radius-sm);
    transition: border-color var(--opt-speed), color var(--opt-speed), background var(--opt-speed), box-shadow var(--opt-speed), transform var(--opt-speed);
    text-align:center; cursor:pointer;
    box-shadow: 0 3px 14px var(--opt-shadow);
}
.custom-upload-btn:hover,
.custom-upload-btn:focus{
    border-color: var(--opt-brand);
    background: #f7f5ff;
    color:#1f2a44;
    transform: translateY(-1px);
}
.custom-upload-btn[aria-busy="true"]{ opacity:.75; cursor:progress; }

/* =========================================================
   DATE / DATETIME
   ========================================================= */

.custom-date-input,
.custom-datetime-input{
    background:#fff;
    border:2px solid var(--opt-border);
    color:#1f2937;
    font-weight:500;
    border-radius: var(--opt-radius-sm);
    padding: 10px 12px;
    transition: border-color var(--opt-speed), box-shadow var(--opt-speed);
}
.custom-date-input:focus,
.custom-datetime-input:focus{
    outline:0; border-color: var(--opt-brand);
    box-shadow: var(--opt-focus-ring);
}

.custom-date-btn{
    background:#fff; border:2px solid var(--opt-border);
    color: var(--opt-brand-strong);
    border-radius: var(--opt-radius-sm);
    margin-left:8px; cursor:pointer;
    padding: 10px 12px;
    transition: border-color var(--opt-speed), box-shadow var(--opt-speed), transform var(--opt-speed);
}
.custom-date-btn:hover{ border-color: var(--opt-border-hover); transform: translateY(-1px); }
.custom-date-btn:focus-visible{ box-shadow: var(--opt-focus-ring); }

/* =========================================================
   Responsividade e motion
   ========================================================= */

@media (max-width:640px){
    .custom-option-box{ width: calc(50% - 8px); }
    .bb-product-attribute-swatch-list{ gap:10px; }
    .bb-product-attribute-swatch-display{ width:30px; height:30px; }
}

@media (prefers-reduced-motion: reduce){
    :root{ --opt-speed: 0s; }
    .bb-product-attribute-swatch-item-tooltip{ transition:none; }
}

/* Tooltip para checkbox cards usando data-tooltip no <label> */
.custom-option-box[data-tooltip]{ position:relative; }

.custom-option-box[data-tooltip]::after{
    content: attr(data-tooltip);
    position:absolute;
    left:50%; top: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background:#2a2140; color:#fff;
    font-size:12px; line-height:1.35;
    padding:8px 10px; border-radius:8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    z-index:9999;
    opacity:0; pointer-events:none;
    transition: opacity var(--opt-speed), transform var(--opt-speed);
    white-space:nowrap; max-width:260px; text-overflow:ellipsis; overflow:hidden;
}
.custom-option-box[data-tooltip]::before{
    content:"";
    position:absolute; top: calc(100% + 2px); left:50%;
    transform: translateX(-50%);
    border:6px solid transparent; border-bottom-color:#2a2140;
    opacity:0; transition: opacity var(--opt-speed);
}

.custom-option-box:hover::after,
.custom-option-box:focus-within::after,
.custom-option-box:hover::before,
.custom-option-box:focus-within::before{
    opacity:1; transform: translateX(-50%) translateY(0);
}

/* opcional: em telas pequenas, permite quebrar linha no tooltip */
@media (max-width:480px){
    .custom-option-box[data-tooltip]::after{
        white-space: normal; max-width: 220px;
    }
}

/* largura cheia */
.select2-container { width: 100% !important; }

/* caixa selecionada */
.select2-container--default .select2-selection--single{
    height: 48px; padding: 8px 12px;
    border: 2px solid #e9defc; border-radius: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 30px; font-weight:600; color:#2a2a2a;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 46px; right: 10px;
}

/* foco (cor da sua marca) */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--single:focus{
    border-color:#3a2e85; box-shadow: 0 0 0 3px rgba(58,46,133,.18);
}

/* dropdown */
.select2-dropdown{
    border:2px solid #e9defc; border-radius:12px; overflow:hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.select2-results__option{
    padding:8px 10px; display:flex; align-items:center; gap:10px;
}
.select2-results__option--highlighted[aria-selected]{
    background:#f6f6fc; color:#3a2e85;
}
.select2-results__option[aria-disabled=true]{
    opacity:.55;
}

/* miniatura e bolinha dentro do dropdown (caso queira ajustar) */
.opt-thumb{ border-radius:8px; }
.opt-swatch{ border-radius:50%; }