/* ============================================================
   MBK SMART — styles for the intelligence & AI features
   (toast, search suggestions, AI assistant, key points, smart
   cart/checkout/shop additions). Brand: #ff6900 / #172033.
   ============================================================ */

:root {
    --mbk-orange: #ff6900;
    --mbk-ink: #172033;
    --mbk-muted: #667085;
    --mbk-line: #e6e9ee;
    --mbk-green: #067647;
    --mbk-green-bg: #ecfdf3;
    --mbk-red: #b42318;
    --mbk-soft: #fff6ef;
}

/* ---------- Toast ---------- */

.mbk-toast {
    position: fixed;
    left: 50%;
    bottom: 88px;
    z-index: 99999;
    max-width: min(92vw, 420px);
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--mbk-ink);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .25);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity .2s ease, transform .2s ease;
}

.mbk-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mbk-toast.is-error {
    background: var(--mbk-red);
}

/* ---------- Smart search suggestions ---------- */

.mbk-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 9999;
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--mbk-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .14);
    text-align: left;
}

.mbk-suggest[hidden] {
    display: none;
}

.mbk-suggest-corrected {
    padding: 6px 8px;
    color: var(--mbk-muted);
    font-size: 12px;
}

.mbk-suggest-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 6px 8px;
}

.mbk-suggest-cat {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--mbk-soft);
    color: var(--mbk-orange);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.mbk-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    color: var(--mbk-ink);
    text-decoration: none;
}

.mbk-suggest-item:hover,
.mbk-suggest-item.is-active {
    background: #f6f7f9;
}

.mbk-suggest-item img,
.mbk-suggest-noimg {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f2f4f7;
    object-fit: contain;
}

.mbk-suggest-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mbk-suggest-name {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mbk-suggest-price {
    color: var(--mbk-orange);
    font-size: 12px;
    font-weight: 700;
}

.mbk-suggest-empty {
    padding: 12px 8px;
    color: var(--mbk-muted);
    font-size: 13px;
}

.mbk-suggest-all {
    display: block;
    margin-top: 4px;
    padding: 9px 8px;
    border-top: 1px solid var(--mbk-line);
    color: var(--mbk-orange);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.mbk-search-corrected {
    color: var(--mbk-muted);
}

/* ---------- Product: key points ---------- */

.mbk-highlights {
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid #ffe2cc;
    border-radius: 14px;
    background: var(--mbk-soft);
}

.mbk-highlights[hidden] {
    display: none;
}

.mbk-highlights h2 {
    margin: 0 0 8px;
    color: var(--mbk-ink);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mbk-highlights ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mbk-highlights li {
    position: relative;
    margin: 6px 0;
    padding-left: 22px;
    color: #344054;
    font-size: 14px;
    line-height: 1.45;
}

.mbk-highlights li::before {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--mbk-orange);
    font-weight: 800;
    content: "✓";
}

/* ---------- Product: AI assistant ---------- */

.mbk-ai-assistant {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--mbk-line);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #fafbfc);
}

.mbk-ai-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--mbk-ink);
    font-size: 14px;
}

.mbk-ai-spark {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mbk-orange);
    color: #fff;
    font-size: 12px;
}

.mbk-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.mbk-ai-chip {
    padding: 6px 10px;
    border: 1px solid #ffd3b3;
    border-radius: 999px;
    background: #fff;
    color: #b93815;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

.mbk-ai-chip:hover {
    background: var(--mbk-soft);
}

.mbk-ai-form {
    display: flex;
    gap: 6px;
}

.mbk-ai-form input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    font-size: 14px;
}

.mbk-ai-form input:focus {
    border-color: var(--mbk-orange);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 105, 0, .12);
}

.mbk-ai-form button {
    width: 42px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--mbk-orange);
    color: #fff;
    cursor: pointer;
}

.mbk-ai-answer {
    margin-top: 10px;
    padding: 12px;
    border-radius: 10px;
    background: #f6f7f9;
    color: #344054;
    font-size: 14px;
    line-height: 1.5;
}

.mbk-ai-answer[hidden] {
    display: none;
}

.mbk-ai-assistant.is-loading .mbk-ai-answer {
    opacity: .7;
}

.mbk-ai-q {
    margin: 0 0 6px;
    color: var(--mbk-muted);
    font-size: 12px;
    font-style: italic;
}

.mbk-ai-a {
    margin: 0;
}

.mbk-ai-human,
.mbk-seller-whatsapp {
    display: inline-block;
    margin-top: 8px;
    color: var(--mbk-green);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Product: misc ---------- */

.mbk-low-stock {
    color: #b54708 !important;
    font-weight: 700;
}

.mbk-variation-options.mbk-attention {
    border-radius: 12px;
    animation: mbk-attention 1.6s ease;
}

@keyframes mbk-attention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 105, 0, 0); }
    30% { box-shadow: 0 0 0 4px rgba(255, 105, 0, .35); }
}

.mbk-show-all-thumbs .mbk-product-thumb {
    display: block !important;
}

.mbk-gallery-favorite.is-active {
    color: #e11d48;
}

.mbk-add-cart-button:disabled,
.mbk-buy-now-button:disabled,
.mbk-mobile-add-cart:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- Cart ---------- */

details.mbk-order-note {
    display: block;
}

details.mbk-order-note > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

details.mbk-order-note > summary::-webkit-details-marker {
    display: none;
}

details.mbk-order-note small {
    display: block;
    margin-top: 2px;
    color: #6e777d;
    font-size: 11px;
}

details.mbk-order-note textarea {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #cfe3da;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.mbk-order-note-status {
    display: block;
    min-height: 16px;
    margin-top: 4px;
    color: var(--mbk-green);
    font-size: 12px;
}

.mbk-shipping-estimate {
    text-align: right;
}

.mbk-shipping-estimate small {
    display: block;
    color: var(--mbk-muted);
    font-size: 11px;
    font-weight: 400;
}

.mbk-stock-out {
    color: var(--mbk-red) !important;
}

.mbk-recommendation-subtitle {
    margin: 2px 0 0;
    color: var(--mbk-muted);
    font-size: 13px;
}

.mbk-quick-add {
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--mbk-orange);
    border-radius: 999px;
    background: #fff;
    color: var(--mbk-orange);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mbk-quick-add:hover {
    background: var(--mbk-orange);
    color: #fff;
}

.mbk-no-rating {
    color: var(--mbk-green);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Checkout ---------- */

.mbk-field-hint {
    margin: -6px 0 12px;
    font-size: 12px;
}

.mbk-field-hint[hidden] {
    display: none;
}

.mbk-field-hint.is-valid {
    color: var(--mbk-green);
}

.mbk-field-hint.is-error {
    color: #b54708;
}

.mbk-summary-free {
    color: var(--mbk-green);
    font-weight: 800;
}

.mbk-summary-nudge {
    margin: 6px 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--mbk-green-bg);
    color: var(--mbk-green);
    font-size: 12px;
}

/* ---------- Shop ---------- */

.mbk-product-grid-shop.is-list {
    grid-template-columns: 1fr !important;
}

.mbk-product-grid-shop.is-list .mbk-shop-product-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
}

@media (max-width: 600px) {
    .mbk-product-grid-shop.is-list .mbk-shop-product-card {
        grid-template-columns: 110px minmax(0, 1fr);
    }
}

.mbk-card-cart.is-disabled {
    opacity: .4;
    cursor: not-allowed;
}

.mbk-card-cart.is-adding {
    opacity: .6;
    pointer-events: none;
}

.mbk-card-cart.is-added {
    background: var(--mbk-green) !important;
    color: #fff !important;
}

.mbk-card-price small {
    color: var(--mbk-muted);
    font-size: 11px;
    font-weight: 400;
}

.mbk-card-favorite.is-favorited {
    color: #e11d48;
}

.mbk-nl-trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.mbk-newsletter-status {
    margin: 8px 0 0;
    color: var(--mbk-green);
    font-size: 13px;
}

.mbk-newsletter-status.is-error {
    color: var(--mbk-red);
}

@media (prefers-reduced-motion: reduce) {
    .mbk-toast,
    .mbk-variation-options.mbk-attention {
        transition: none;
        animation: none;
    }
}