/* Salon AI — variation picker. Gold on light, matching the salon theme. */
.sai-modal { position: fixed; inset: 0; z-index: 2147483000; }
.sai-modal[hidden] { display: none; }
.sai-modal__backdrop { position: absolute; inset: 0; background: rgba(10,9,8,.55); backdrop-filter: blur(3px); animation: saiFade .2s ease; }
.sai-modal__sheet {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: min(520px, calc(100vw - 32px)); max-height: min(86vh, 760px); overflow-y: auto;
    background: #fff; border-radius: 20px; padding: 26px;
    box-shadow: 0 30px 70px -20px rgba(10,9,8,.5);
    animation: saiPop .24s cubic-bezier(.2,.9,.3,1);
}
.sai-modal__x {
    position: absolute; top: 12px; right: 14px; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: rgba(10,9,8,.06); color: #4b4540;
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sai-modal__x:hover { background: rgba(10,9,8,.12); }
body.sai-modal-open { overflow: hidden; }

@keyframes saiFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes saiPop  { from { opacity: 0; transform: translate(-50%,-46%) scale(.97) } to { opacity: 1; transform: translate(-50%,-50%) scale(1) } }

.sai-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; padding-right: 30px; }
.sai-thumb { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: 0 0 72px; }
.sai-title { margin: 0 0 4px; font-size: 1.12rem; font-weight: 800; line-height: 1.25; color: #1a1a1a; }
.sai-price { font-size: 1rem; font-weight: 700; color: #c9a84c; }
.sai-price del { opacity: .5; font-weight: 400; margin-right: 6px; }
.sai-sub { margin: 0 0 16px; font-size: .84rem; color: #6b7280; }

.sai-attr { margin-bottom: 16px; }
.sai-attr__label { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #4b4540; margin-bottom: 8px; }
.sai-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sai-opt {
    padding: 10px 15px; border: 1.5px solid #e5e7eb; border-radius: 10px;
    background: #fff; color: #1a1a1a; font-size: .86rem; font-weight: 600;
    cursor: pointer; transition: border-color .16s, background .16s, color .16s;
}
.sai-opt:hover:not(:disabled) { border-color: #c9a84c; }
.sai-opt.is-on { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.sai-opt.is-off, .sai-opt:disabled {
    opacity: .38; cursor: not-allowed; text-decoration: line-through;
}

.sai-status { min-height: 20px; margin: 4px 0 14px; font-size: .82rem; color: #6b7280; }
.sai-status.is-bad  { color: #991b1b; font-weight: 600; }
.sai-status.is-warn { color: #92400e; font-weight: 600; }

.sai-actions { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.sai-qty { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #4b4540; }
.sai-qty input { width: 68px; padding: 12px 10px; border: 1.5px solid #e5e7eb; border-radius: 10px; font: inherit; text-align: center; }
.sai-btn {
    flex: 1 1 auto; min-width: 150px; padding: 14px 20px; border: 0; border-radius: 11px;
    font-size: .92rem; font-weight: 800; cursor: pointer; text-align: center;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.sai-btn--add { background: linear-gradient(135deg,#c9a84c,#e8c97a); color: #fff; box-shadow: 0 4px 14px -4px rgba(201,168,76,.5); }
.sai-btn--add:hover:not(:disabled) { filter: brightness(1.06); }
.sai-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.sai-btn--ghost { background: transparent; border: 1.5px solid #e5e7eb; color: #1a1a1a; }

.sai-full { display: block; margin-top: 14px; text-align: center; font-size: .82rem; color: #6b7280; }
.sai-full:hover { color: #c9a84c; }

.sai-load, .sai-err, .sai-done { text-align: center; padding: 40px 10px; }
.sai-spin {
    display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px;
    border: 2px solid rgba(201,168,76,.3); border-top-color: #c9a84c; border-radius: 50%;
    animation: saiSpin .7s linear infinite;
}
@keyframes saiSpin { to { transform: rotate(360deg) } }
.sai-err p { color: #991b1b; margin-bottom: 16px; }
.sai-err .sai-btn { min-width: 120px; flex: 0 0 auto; }
.sai-done__tick {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
    background: #dcfce7; color: #166534; font-size: 1.8rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.sai-done__msg { font-size: 1rem; font-weight: 700; color: #1a1a1a; margin-bottom: 20px; }

@media (max-width: 560px) {
    /* Bottom sheet on phones — closer to a native app. */
    .sai-modal__sheet {
        top: auto; bottom: 0; left: 0; transform: none;
        width: 100%; max-width: none; max-height: 90vh;
        border-radius: 20px 20px 0 0; padding: 22px 18px 28px;
        animation: saiUp .26s cubic-bezier(.2,.9,.3,1);
    }
    @keyframes saiUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
    .sai-btn, .sai-qty { flex: 1 1 100%; }
    .sai-qty { justify-content: space-between; }
    .sai-qty input { width: 100%; }
}