/* ==========================================================================
   Isolation reset — the theme's global CSS (WooCommerce form styles, button
   gradients, uppercase link text, custom box-sizing, etc.) must never leak
   into this widget. Every element inside .vk-widget / .vk-fab-panel gets a
   clean slate here; the specific component rules below then own every
   visual detail themselves instead of inheriting from the page.
   ========================================================================== */
.vk-widget, .vk-widget *, .vk-widget *::before, .vk-widget *::after,
.vk-fab, .vk-fab-panel, .vk-fab-panel *, .vk-fab-panel *::before, .vk-fab-panel *::after {
    box-sizing: border-box !important;
}
.vk-widget, .vk-widget * {
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
    box-shadow: none;
    font-family: inherit;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    background-image: none;
}
.vk-widget ul, .vk-widget ol { list-style: none; margin: 0; padding: 0; }
.vk-widget p, .vk-widget h1, .vk-widget h2, .vk-widget h3, .vk-widget h4 { margin: 0; padding: 0; }
.vk-widget a { text-decoration: none; }
.vk-widget img { max-width: 100%; }

.vk-widget {
    max-width: 480px;
    margin: 24px auto;
    background: #fff;
    border: 1px solid #DFE7D6;
    border-radius: 16px;
    padding: 22px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #1F2A1D;
    text-align: left;
}
.vk-mic-zone { position: relative; height: 100px; display: flex; align-items: center; justify-content: center; }
.vk-ring { position: absolute; border-radius: 50%; border: 2px solid #C1440E; opacity: 0; width: 90px; height: 90px; }
.vk-mic-zone.listening .vk-ring { animation: vkpulse 1.6s ease-out infinite; }
.vk-ring.r2 { animation-delay: .4s; }
.vk-ring.r3 { animation-delay: .8s; }
@keyframes vkpulse {
    0% { width: 90px; height: 90px; opacity: .55; }
    100% { width: 170px; height: 170px; opacity: 0; }
}
.vk-mic-btn {
    width: 84px !important; height: 84px !important;
    min-width: 84px !important; min-height: 84px !important;
    max-width: 84px !important; max-height: 84px !important;
    border-radius: 50% !important;
    background: #C1440E !important; background-image: none !important;
    border: none !important; outline: none !important; color: #fff !important;
    padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer; position: relative; z-index: 2;
    box-shadow: 0 8px 20px rgba(193,68,14,.35);
    transition: background .2s ease, transform .15s ease;
    text-transform: none !important; letter-spacing: normal !important; font: inherit;
    -webkit-appearance: none; appearance: none;
}
.vk-mic-btn:active { transform: scale(.94); }
.vk-mic-zone.listening .vk-mic-btn { background: #2F5233 !important; box-shadow: 0 8px 20px rgba(47,82,51,.35); }
.vk-mic-btn svg {
    width: 30px !important; height: 30px !important;
    max-width: 30px !important; max-height: 30px !important;
    margin: 0 !important; display: block !important; pointer-events: none;
}

.vk-hint { text-align: center; font-size: 14px; color: #5b6b56; margin-top: 4px; min-height: 18px; }

/* Suggested follow-up question chips — sit just above the type-row, refreshed
   after every AI reply with 2-4 short questions the customer is likely to
   ask next. Tapping one sends it exactly like typing it in. */
.vk-suggest-row {
    display: flex !important; align-items: center !important; gap: 8px !important;
    margin: 10px 0 0 !important; padding: 2px 2px 4px !important; width: 100%;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vk-suggest-row:empty { margin: 0 !important; padding: 0 !important; }
.vk-suggest-row::-webkit-scrollbar { display: none; height: 0; }
.vk-suggest-chip {
    flex: 0 0 auto !important; white-space: nowrap !important;
    border-radius: 999px !important; border: 1.5px solid #DFE7D6 !important;
    background: #F9FBF6 !important; color: #2F5233 !important;
    padding: 8px 15px !important; margin: 0 !important;
    font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important;
    cursor: pointer; outline: none !important; box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    text-transform: none !important; letter-spacing: normal !important; font-family: inherit;
    -webkit-appearance: none; appearance: none;
}
.vk-suggest-chip:hover { background: #F3F7EE !important; border-color: #C7D6BC !important; }
.vk-suggest-chip:active { transform: scale(.96); background: #EAF1E2 !important; }

.vk-type-row {
    display: flex !important; align-items: center !important; gap: 8px;
    margin: 8px 0 0 !important; padding: 0 !important; width: 100%;
}
.vk-type-input {
    flex: 1 1 auto !important; width: auto !important;
    height: 44px !important; min-height: 44px !important; max-height: 44px !important;
    border-radius: 22px !important; border: 1.5px solid #DFE7D6 !important;
    background: #F9FBF6 !important; padding: 0 16px !important; margin: 0 !important;
    font-size: 14px !important; font-weight: 400 !important; color: #1F2A1D !important;
    outline: none !important; box-shadow: none !important;
    transition: border-color .15s ease, background .15s ease;
}
.vk-type-input::placeholder { color: #8a9783; opacity: 1; }
.vk-type-input:focus {
    border-color: #2F5233 !important; background: #fff !important;
    box-shadow: 0 0 0 3px rgba(47,82,51,.12) !important;
}
.vk-type-send-btn {
    flex: 0 0 auto !important;
    width: 44px !important; height: 44px !important;
    min-width: 44px !important; min-height: 44px !important;
    max-width: 44px !important; max-height: 44px !important;
    border-radius: 50% !important; border: none !important; outline: none !important;
    background: #2F5233 !important; color: #fff !important;
    padding: 0 !important; margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer; line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(47,82,51,.3) !important;
    transition: background .15s ease, transform .1s ease;
}
.vk-type-send-btn:hover { background: #24401f !important; }
.vk-type-send-btn:active { transform: scale(.94); }
.vk-type-send-btn svg {
    width: 17px !important; height: 17px !important;
    max-width: 17px !important; max-height: 17px !important;
    margin: 0 !important; display: block !important; pointer-events: none;
}
.vk-transcript { text-align: center; font-weight: 600; color: #5B3A62; min-height: 22px; margin-top: 6px; }

.vk-chat-log {
    max-height: 220px; overflow-y: auto; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.vk-bubble {
    max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4;
    animation: vkdrop .25s ease;
}
.vk-bubble-assistant {
    background: #F3F7EE; color: #1F2A1D; align-self: flex-start; border-bottom-left-radius: 4px;
}
.vk-bubble-user {
    background: #2F5233; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px;
}
.vk-bubble-typing {
    display: flex; align-items: center; gap: 4px; padding: 12px 14px;
}
/* Photo-scan results table: item / detected-in-photo / added-to-cart / store status.
   Rendered in the "shown" panel below the chat log (like products/videos/etc.),
   not as a chat bubble, so it doesn't scroll away inside the chat history. */
.vk-shown-scan {
    margin-top: 10px;
}
.vk-shown-scan:empty { margin-top: 0; }
.vk-shown-scan-panel {
    border: 1px solid #DFE7D6; border-radius: 10px; padding: 10px 10px 12px;
    animation: vkdrop .3s ease; background: #F3F7EE;
}
.vk-scan-title {
    font-weight: 700; font-size: 13px; color: #2F5233; margin-bottom: 8px;
}
.vk-scan-table {
    width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff;
    border: 1px solid #DFE7D6; border-radius: 8px; overflow: hidden;
}
.vk-scan-table th, .vk-scan-table td {
    padding: 6px 8px; text-align: center; border-bottom: 1px solid #DFE7D6;
}
.vk-scan-table th {
    background: #EAF1E1; color: #2F5233; font-weight: 700; font-size: 11.5px;
}
.vk-scan-table tr:last-child td { border-bottom: none; }
.vk-scan-table td.vk-scan-name {
    text-align: left; font-weight: 600; color: #1F2A1D;
}
.vk-scan-table td.vk-scan-name .vk-scan-icon { margin-right: 4px; }
.vk-scan-icon {
    display: inline-block; font-weight: 700; font-size: 14px; line-height: 1;
}
.vk-scan-yes { color: #2E7D32; } /* green tick */
.vk-scan-no  { color: #C1440E; } /* red cross */
.vk-scan-store-text {
    font-size: 11px; color: #55624F; vertical-align: middle;
}
.vk-typing-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #6E7C67;
    opacity: .35; animation: vkTypingBlink 1.2s infinite ease-in-out;
}
.vk-typing-dot:nth-child(2) { animation-delay: .2s; }
.vk-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes vkTypingBlink {
    0%, 80%, 100% { opacity: .35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

.vk-results { margin-top: 16px; }
.vk-cart-heading {
    font-weight: 700; font-size: 14px; color: #1F2A1D;
    display: flex; align-items: baseline; gap: 6px;
}
.vk-cart-heading-count { font-weight: 500; font-size: 12.5px; color: #6b7a64; }
.vk-cart-separator { height: 1px; background: #DFE7D6; margin: 8px 0 12px; }
.vk-item-row {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border: 1px solid #DFE7D6; border-radius: 10px; margin-bottom: 8px;
    animation: vkdrop .3s ease;
}
.vk-item-stock-pill { position: absolute; top: 6px; right: 8px; }
/* Item was in stock when added but has since gone out of stock: whole row
   desaturated + dimmed so it reads unmistakably as "not available right
   now" — matches the out-of-stock treatment used in the price table. */
.vk-item-row-oos { filter: grayscale(1); opacity: .65; background: #F7F7F7; }
@keyframes vkdrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.vk-item-row img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: #f2f2f2; }
.vk-item-sno { color: #6b7a64; font-weight: 600; font-size: 12.5px; width: 16px; text-align: center; flex: none; }
.vk-item-thumb-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.vk-item-info { flex: 1; min-width: 0; }
.vk-item-name { font-weight: 700; font-size: 14px; color: #1F2A1D; }
.vk-item-name-link { color: inherit; text-decoration: none; }
.vk-item-name-link:hover { text-decoration: underline; color: #2F5233; }
.vk-item-qty { font-size: 12px; color: #6b7a64; }

/* Small circular "i" info button — cart card: sits below the product
   thumbnail; price table: sits inline next to the product name.
   Deliberately NOT styled with the theme accent color, so it reads as a
   neutral "more info" affordance rather than a CTA. Opens the highlights
   popup for that exact product. */
.vk-info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%; flex: none;
    border: 1px solid #A9B3A2; background: #fff; color: #7c8a76;
    font-size: 10.5px; font-style: italic; font-weight: 700; line-height: 1;
    cursor: pointer; padding: 0; vertical-align: middle;
}
.vk-item-name .vk-info-btn { margin-left: 5px; }
.vk-info-btn:hover { background: #F3F7EE; border-color: #6b7a64; color: #2F5233; }

/* Small circular "▶" video button — same size/shape as the info button,
   shown only when the product actually has a video URL set. Cart card:
   sits below the info button under the thumbnail; price table & product
   info card: sits inline next to the info button. Opens the video modal. */
.vk-video-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%; flex: none;
    border: 1px solid #E0B0A0; background: #fff; color: #C1440E;
    font-size: 8px; font-weight: 700; line-height: 1;
    cursor: pointer; padding: 0 0 0 1px; vertical-align: middle;
}
.vk-item-name .vk-video-btn { margin-left: 5px; }
.vk-shown-product-name .vk-video-btn { margin-left: 5px; }
.vk-video-btn:hover { background: #FBEEEA; border-color: #C1440E; }

/* Product video modal, opened by the "▶" video button. Reuses the same
   embed URL the voice "వీడియో చూపించు" answer/product-info card already has,
   so it opens instantly with no extra network round trip. */
.vk-video-modal-frame {
    position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
    border-radius: 8px; overflow: hidden; background: #000;
}
.vk-video-modal-frame iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Product highlights popup, opened by the "i" info button. Same real
   attribute data (label/value rows) as the voice highlights answer. */
.vk-modal {
    position: fixed; inset: 0; z-index: 999999; display: none;
    align-items: center; justify-content: center;
    background: rgba(15, 20, 12, 0.6); padding: 20px;
}
.vk-modal.vk-modal-open { display: flex; }
.vk-modal-box {
    position: relative; background: #fff; border-radius: 14px;
    width: 100%; max-width: 360px; max-height: 80vh; overflow-y: auto;
    padding: 18px 18px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
    animation: vkdrop .2s ease;
}
.vk-modal-close {
    position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
    border-radius: 50%; border: none; background: #F3F7EE; color: #2F5233;
    font-size: 18px; line-height: 1; cursor: pointer;
}
.vk-modal-close:hover { background: #E9F1E1; }
.vk-modal-title { font-weight: 700; font-size: 15px; color: #1F2A1D; padding-right: 30px; margin-bottom: 10px; }
.vk-modal-loading { color: #6b7a64; font-size: 13px; padding: 6px 0; }
.vk-video-modal-box { max-width: 480px; }

/* Uploaded shopping-list / product photo shown as a small preview bubble
   in the chat log, tap/click to view enlarged. */
.vk-bubble-photo { padding: 5px; background: transparent; }
.vk-bubble-photo-img {
    display: block; max-width: 160px; max-height: 160px; border-radius: 12px;
    object-fit: cover; cursor: zoom-in;
}

/* Any image marked as a lightbox trigger gets a visual "clickable" hint. */
.vk-lightbox-trigger { cursor: zoom-in; }

/* Fullscreen enlarged-image viewer, shared by every clickable image on the widget. */
.vk-lightbox {
    position: fixed; inset: 0; z-index: 999999; display: none;
    align-items: center; justify-content: center;
    background: rgba(15, 20, 12, 0.88); padding: 24px;
}
.vk-lightbox.vk-lightbox-open { display: flex; }
.vk-lightbox-img {
    max-width: min(92vw, 900px); max-height: 88vh; border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5); object-fit: contain;
}
.vk-lightbox-close {
    position: absolute; top: 16px; right: 20px; width: 38px; height: 38px;
    border-radius: 50%; border: none; background: rgba(255,255,255,.15);
    color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.vk-lightbox-close:hover { background: rgba(255,255,255,.28); }

.vk-qty-controls { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vk-qty-btn {
    width: 24px; height: 24px; border-radius: 6px;
    border: 1px solid #DFE7D6; background: #F7FAF2; color: #2F5233;
    font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.vk-qty-btn:hover { background: #E9F1E1; }
.vk-qty-btn:disabled { opacity: .35; cursor: not-allowed; background: #F7FAF2; }
.vk-qty-btn:disabled:hover { background: #F7FAF2; }
.vk-qty-max-note { font-size: 10.5px; color: #C1440E; margin-top: 2px; }
.vk-stock-toast {
    max-height: 0; overflow: hidden; opacity: 0;
    background: #FBEEEA; color: #9A3412; border: 1px solid #E0B0A0;
    border-radius: 8px; font-size: 12.5px; padding: 0 10px;
    transition: max-height .25s ease, opacity .25s ease, padding .25s ease, margin .25s ease;
}
.vk-stock-toast-show { max-height: 60px; opacity: 1; padding: 8px 10px; margin-bottom: 8px; }
.vk-qty-val {
    font-size: 14px; font-weight: 700; color: #1F2A1D;
    min-width: 40px; text-align: center;
    display: inline-flex; align-items: baseline; justify-content: center; gap: 3px;
}
.vk-qty-unit {
    font-size: 10.5px; font-weight: 500; color: #7c8a76;
    background: #F0F4EA; border-radius: 5px; padding: 1px 5px;
    text-transform: lowercase;
}

.vk-item-price { font-weight: 700; color: #2F5233; white-space: nowrap; }
.vk-item-row.vk-unmatched { background: #FFF7EC; border-color: #f0d6b8; color: #7a5c14; font-size: 13px; }

.vk-remove-btn {
    background: none; border: none; color: #b7bfae; font-size: 20px;
    line-height: 1; cursor: pointer; padding: 4px 2px;
}
.vk-remove-btn:hover { color: #C1440E; }

.vk-bottom-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid #DFE7D6;
    flex-wrap: wrap; gap: 10px;
}
.vk-total { font-size: 13px; color: #5b6b56; }
.vk-total strong { color: #1F2A1D; }
.vk-total.hidden { display: none; }
.vk-total-note { font-size: 11px; color: #8a958a; }
.vk-cta {
    background: #2F5233; color: #fff !important; padding: 10px 18px;
    border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14px;
}
.vk-cta.hidden { display: none; }

/* Photo-upload button (sits next to the mic) */
.vk-photo-btn {
    position: absolute !important; right: 6px !important; bottom: 6px !important; z-index: 3;
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
    max-width: 40px !important; max-height: 40px !important;
    border-radius: 50% !important;
    background: #fff !important; background-image: none !important;
    border: 1px solid #DFE7D6 !important; outline: none !important; color: #2F5233 !important;
    padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    text-transform: none !important; letter-spacing: normal !important; font: inherit;
    -webkit-appearance: none; appearance: none;
}
.vk-photo-btn:hover { background: #F7FAF2 !important; }
.vk-photo-btn svg {
    width: 18px !important; height: 18px !important;
    max-width: 18px !important; max-height: 18px !important;
    margin: 0 !important; display: block !important; pointer-events: none;
}

/* Camera / Gallery choice popup shown above the photo button */
.vk-photo-menu {
    position: absolute; right: 4px; bottom: 52px; z-index: 4;
    background: #fff; border: 1px solid #DFE7D6; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14); overflow: hidden;
    display: flex; flex-direction: column; min-width: 148px;
    animation: vkdrop .15s ease;
}
.vk-photo-menu[hidden] { display: none; }
.vk-photo-menu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: none; border: none; cursor: pointer;
    font-size: 13.5px; color: #1F2A1D; text-align: left;
}
.vk-photo-menu-item:hover { background: #F7FAF2; }
.vk-photo-menu-item + .vk-photo-menu-item { border-top: 1px solid #EEF2E8; }
.vk-photo-menu-item svg { flex-shrink: 0; color: #2F5233; }

/* Product photo gallery strip — used both under cart items and for "show me" requests */
.vk-gallery-strip { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; }
.vk-gallery-strip img {
    width: 52px; height: 52px; border-radius: 8px; object-fit: cover;
    background: #f2f2f2; flex: 0 0 auto; border: 1px solid #DFE7D6;
}

.vk-shown-products { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.vk-shown-product {
    border: 1px solid #DFE7D6; border-radius: 10px; padding: 10px; animation: vkdrop .3s ease;
}
.vk-shown-product-name { font-weight: 700; font-size: 13.5px; color: #1F2A1D; margin-bottom: 2px; }
.vk-shown-product-name-link { color: inherit; text-decoration: none; }
.vk-shown-product-name-link:hover { text-decoration: underline; color: #2F5233; }
.vk-shown-product-price-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin: 4px 0 2px;
}
.vk-shown-product-price { font-size: 15px; font-weight: 700; color: #2F5233; }
.vk-shown-product-highlights { margin-top: 8px; border-top: 1px solid #EEF2E8; padding-top: 6px; }
.vk-shown-product-highlights .vk-highlight-row { font-size: 12.5px; }

/* Product video (YouTube/Vimeo) embedded in the chat when a customer asks to see one */
.vk-shown-videos { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.vk-shown-video {
    border: 1px solid #DFE7D6; border-radius: 10px; padding: 10px; animation: vkdrop .3s ease;
}
.vk-shown-video-name { font-weight: 700; font-size: 13.5px; color: #1F2A1D; margin-bottom: 8px; }
.vk-shown-video-frame {
    position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
    border-radius: 8px; overflow: hidden; background: #000;
}
.vk-shown-video-frame iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Category / "today's prices" table, cheapest item pinned to the top and highlighted */
.vk-price-table-wrap { margin-top: 12px; overflow-x: auto; animation: vkdrop .3s ease; }
.vk-price-table {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
    border: 1px solid #DFE7D6; border-radius: 10px; overflow: hidden;
    table-layout: fixed;
}
/* Column widths: s.no/image/stock/price stay compact and fixed;
   the item name column is left unset so it auto-adjusts and absorbs
   all remaining space (table-layout: fixed gives leftover width to
   the one column without an explicit width). */
.vk-col-sno   { width: 40px; }
.vk-col-thumb { width: 46px; }
.vk-col-name  { width: auto; }
.vk-col-stock { width: 68px; }
.vk-col-price { width: 56px; }
.vk-price-table thead th {
    background: #F3F7EE; color: #2F5233; text-align: left;
    font-size: 12px; text-transform: uppercase; letter-spacing: .02em;
    padding: 8px 10px; border-bottom: 1px solid #DFE7D6;
}
.vk-price-table thead th:last-child { text-align: right; }
.vk-price-table td { padding: 8px 10px; border-bottom: 1px solid #EEF2E8; vertical-align: middle; }
.vk-price-table tr:last-child td { border-bottom: none; }
.vk-price-table-thumb img {
    width: 30px; height: 30px; border-radius: 7px; object-fit: cover;
    background: #f2f2f2; display: block;
}
.vk-price-thumb-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vk-price-table-sno { color: #6b7a64; font-weight: 600; text-align: center; }
.vk-price-table-name { color: #1F2A1D; font-weight: 600; word-break: break-word; }
.vk-price-table-name-link { color: inherit; text-decoration: none; }
.vk-price-table-name-link:hover { text-decoration: underline; color: #2F5233; }
.vk-price-unit { color: #6b7a64; font-weight: 400; font-size: 12px; }
.vk-price-table-stock { white-space: nowrap; text-align: center; }
.vk-price-table-price { text-align: right; font-weight: 700; color: #2F5233; white-space: nowrap; }
.vk-price-row-lowest { background: #FBF6E9; }
.vk-price-row-lowest .vk-price-table-price { color: #C1440E; }
.vk-lowest-badge {
    display: inline-block; margin-left: 4px; padding: 1px 7px;
    background: #C1440E; color: #fff; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; vertical-align: middle;
}
.vk-price-row-highest { background: #FCEEF0; }
.vk-price-row-highest .vk-price-table-price { color: #A5334A; }
.vk-highest-badge {
    display: inline-block; margin-left: 4px; padding: 1px 7px;
    background: #A5334A; color: #fff; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; vertical-align: middle;
}

/* In-stock / out-of-stock status pill, shown per row so the customer never
   has to guess availability from the price alone. */
.vk-stock-pill {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.vk-stock-pill-in  { background: #E4F3E1; color: #2F5233; }
.vk-stock-pill-oos { background: #E9E9E9; color: #6b6b6b; }

/* Out-of-stock OR out-of-area (village/pincode restricted) row: whole row
   rendered black & white (desaturated) and dimmed, with the price struck
   through, so either case reads unmistakably as "not available for you
   right now" at a glance rather than looking like a normal buyable row. */
.vk-price-row-oos {
    filter: grayscale(1); opacity: .6; background: #F7F7F7;
}
.vk-price-row-oos .vk-price-table-name,
.vk-price-row-oos .vk-price-table-price { color: #6b6b6b; }
.vk-price-strike { text-decoration: line-through; text-decoration-color: #999; }

/* Product reviews — shown when a customer asks "reviews unnaya" etc. */
.vk-shown-reviews { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.vk-shown-review-group {
    border: 1px solid #DFE7D6; border-radius: 10px; padding: 10px; animation: vkdrop .3s ease;
}
.vk-shown-review-name { font-weight: 700; font-size: 13.5px; color: #1F2A1D; margin-bottom: 4px; }
.vk-no-reviews { font-size: 13px; color: #6b7a64; font-style: italic; }
.vk-review-summary { font-size: 13px; color: #2F5233; margin-bottom: 8px; }
.vk-review-stars { color: #E8A33D; letter-spacing: 1px; }
.vk-review-item { padding: 8px 0; border-top: 1px solid #EEF2E8; }
.vk-review-item:first-of-type { border-top: none; }
.vk-review-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.vk-review-author { font-weight: 600; font-size: 12.5px; color: #1F2A1D; }
.vk-review-excerpt { font-size: 12.5px; color: #46503f; line-height: 1.4; }

/* Product highlights — pulled straight from the product's own WooCommerce attributes */
.vk-shown-highlights { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.vk-highlight-group {
    border: 1px solid #DFE7D6; border-radius: 10px; padding: 10px; animation: vkdrop .3s ease;
}
.vk-highlight-group-name { font-weight: 700; font-size: 13.5px; color: #1F2A1D; margin-bottom: 6px; }
.vk-no-highlights { font-size: 13px; color: #6b7a64; font-style: italic; }
.vk-highlight-row {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 5px 0; border-top: 1px solid #EEF2E8; font-size: 12.5px;
}
.vk-highlight-row:first-of-type { border-top: none; }
.vk-highlight-label { color: #6b7a64; font-weight: 600; }
.vk-highlight-value { color: #1F2A1D; text-align: right; }

/* ==========================================================================
   Floating "quick ball" button — auto-injected on every page (VK_Floating).
   Tapping it slides open a panel containing the same .vk-widget markup the
   [voice_king] shortcode (or its legacy [voice_kirana] alias) renders.
   ========================================================================== */
.vk-fab {
    /* NOTE: right/top/transform are intentionally NOT !important — this is
       only the *default* resting spot before the shopper drags it anywhere.
       Once JS starts positioning the button with inline left/top styles
       (see voice-kirana-woo.js), those inline styles must be able to win.
       If right/top/transform were !important here, the stylesheet would
       always beat the inline style and the button would snap back to this
       spot on every reflow — that was the cause of the jerky drag. */
    position: fixed !important; right: 14px; top: 75%;
    transform: translateY(-50%);
    z-index: 99998 !important;
    width: 64px !important; height: 64px !important;
    min-width: 64px !important; min-height: 64px !important;
    max-width: 64px !important; max-height: 64px !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 50% !important; border: none !important; outline: none !important;
    background: #C1440E !important; background-image: none !important; color: #fff !important;
    box-sizing: border-box !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: grab; line-height: 1 !important; font: inherit;
    text-transform: none !important; letter-spacing: normal !important;
    box-shadow: 0 6px 18px rgba(193,68,14,.4), 0 0 0 1px rgba(255,255,255,.35);
    transition: background .2s ease, box-shadow .15s ease;
    touch-action: none; /* we handle drag ourselves, don't let the browser scroll/zoom on it */
    user-select: none;
    -webkit-appearance: none; appearance: none;
    overflow: hidden;
}
.vk-fab:hover, .vk-fab:focus {
    background: #C1440E !important; color: #fff !important;
}
.vk-fab svg { width: 32px; height: 32px; pointer-events: none; }
.vk-fab-avatar-img {
    display: block !important;
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    border-radius: 50% !important; object-fit: cover !important;
    margin: 0 !important; padding: 0 !important; border: none !important;
    pointer-events: none;
}
.vk-fab:active { cursor: grabbing; }
.vk-fab.vk-fab-dragging { box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.7); }
.vk-fab.vk-fab-active { background: #2F5233 !important; }

/* Speaking state: expanding sound-wave rings around the ball + a subtle
   talking pulse on the avatar image, toggled by JS (vk-fab-speaking class)
   while the TTS voice is actually playing. */
.vk-fab.vk-fab-speaking { position: fixed !important; overflow: visible !important; }
.vk-fab.vk-fab-speaking::before,
.vk-fab.vk-fab-speaking::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(193,68,14,.55);
    animation: vkFabWave 1.6s ease-out infinite;
    pointer-events: none;
}
.vk-fab.vk-fab-speaking.vk-fab-active::before,
.vk-fab.vk-fab-speaking.vk-fab-active::after {
    border-color: rgba(47,82,51,.55);
}
.vk-fab.vk-fab-speaking::after { animation-delay: .55s; }
@keyframes vkFabWave {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(1.9); opacity: 0;  }
}
.vk-fab.vk-fab-speaking .vk-fab-avatar-img {
    animation: vkFabTalk .38s ease-in-out infinite;
    transform-origin: 50% 100%;
}
@keyframes vkFabTalk {
    0%, 100% { transform: scaleY(1)    scaleX(1);    }
    50%      { transform: scaleY(.94)  scaleX(1.03); }
}
.vk-fab.vk-fab-speaking svg {
    animation: vkFabTalk .38s ease-in-out infinite;
}

.vk-fab-overlay {
    position: fixed; inset: 0; z-index: 99997;
    background: rgba(20, 24, 18, .35);
    opacity: 0; transition: opacity .2s ease;
}
.vk-fab-overlay[hidden] { display: none; }
.vk-fab-overlay.vk-fab-overlay-open { opacity: 1; }

.vk-fab-panel {
    position: fixed; left: 50%; top: 50%; z-index: 99999;
    width: 100vw; height: 100vh;
    max-width: 100vw; max-height: 100vh;
    background: #fff; border-radius: 0;
    box-shadow: 0 16px 40px rgba(0,0,0,.22);
    display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; transform: translate(-50%, -50%) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}
.vk-fab-panel[hidden] { display: none; }
.vk-fab-panel.vk-fab-panel-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vk-fab-panel .vk-widget { margin: 0; max-width: none; border: none; border-radius: 0; }

.vk-fab-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #2F5233; color: #fff;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.vk-fab-close {
    background: none; border: none; color: #fff; font-size: 22px;
    line-height: 1; cursor: pointer; padding: 0 2px; opacity: .85;
}
.vk-fab-close:hover { opacity: 1; }

.vk-fab-panel-body { overflow-y: auto; flex: 1; }

/* Product-specific return/exchange policy */
.vk-shown-return-policies { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.vk-return-policy-group {
    border: 1px solid #DFE7D6; border-radius: 10px; padding: 10px; animation: vkdrop .3s ease;
}
.vk-return-policy-name { font-weight: 700; font-size: 13.5px; color: #1F2A1D; margin-bottom: 4px; }
.vk-return-policy-text { font-size: 12.5px; color: #46503f; line-height: 1.4; }

/* Customer's own order list/status/cancel/return-exchange results (voice "my orders" queries) */
.vk-shown-orders { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.vk-order-card {
    border: 1px solid #DFE7D6; border-radius: 10px; padding: 10px; animation: vkdrop .3s ease;
}
.vk-order-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.vk-order-number { font-weight: 700; font-size: 13.5px; color: #1F2A1D; }
.vk-order-status-badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; background: #F3F7EE; color: #2F5233;
    white-space: nowrap;
}
.vk-order-status-completed { background: #E7F5E9; color: #1e7e34; }
.vk-order-status-cancelled, .vk-order-status-failed, .vk-order-status-delivery-failed { background: #FCEAEA; color: #C1440E; }
.vk-order-status-processing, .vk-order-status-out-for-delivery { background: #FBF6E9; color: #8a4b00; }
.vk-order-date { font-size: 11.5px; color: #6b7a64; margin-bottom: 8px; }

/* Vendor-wise delivery date/time box inside an order card */
.vk-delivery-slot-box {
    background: #22993f; border: 1px dashed #1c7d34; border-radius: 6px;
    padding: 4px 10px; margin-bottom: 10px; color: #fff; font-size: 13px;
}
.vk-delivery-slot-title {
    color: #fff; display: flex; align-items: center; gap: 6px;
    margin-bottom: 5px; font-weight: 600;
}
.vk-delivery-line { line-height: 1.5; }

/* Product thumbnails inside an order card */
.vk-order-products { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.vk-order-product { display: flex; align-items: center; gap: 8px; }
.vk-order-product img {
    width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
    background: #f2f2f2; flex: 0 0 auto; border: 1px solid #DFE7D6;
}
.vk-order-product-name { font-size: 12.5px; color: #46503f; line-height: 1.3; }

/* Delivery tracker: line + step circles + time, mirrors the site's own order-details tracker */
.vk-order-tracker { margin: 4px 0 12px; position: relative; }
.vk-order-line {
    position: absolute; top: 7px; left: 0; width: 100%; height: 2px;
    background: #DFE7D6; border-radius: 10px;
}
.vk-order-line-fill { height: 2px; background: #28a745; border-radius: 10px; width: 0; transition: width .5s ease; }
.vk-order-line-rejected .vk-order-line-fill { background: #dc3545; }
.vk-order-steps { display: flex; justify-content: space-between; position: relative; }
.vk-order-step { text-align: center; flex: 1; }
.vk-order-step-circle {
    width: 14px; height: 14px; border-radius: 50%; background: #ccc; margin: 0 auto;
    line-height: 14px; font-size: 9px; color: #fff; position: relative; z-index: 2;
}
.vk-order-step-done .vk-order-step-circle { background: #28a745; }
.vk-order-step-rejected .vk-order-step-circle { background: #dc3545; }
.vk-order-step-label { font-size: 10px; margin-top: 6px; color: #6b7a64; }
.vk-order-step-done .vk-order-step-label { color: #28a745; font-weight: 600; }
.vk-order-step-rejected .vk-order-step-label { color: #dc3545; font-weight: 600; }
.vk-order-step-time { font-size: 9px; color: #999; margin-top: 2px; }

.vk-order-total { font-size: 13px; font-weight: 700; color: #2F5233; margin-bottom: 8px; }
.vk-order-view-btn {
    display: inline-block; padding: 7px 14px; border-radius: 8px;
    background: #2F5233; color: #fff !important; font-size: 12.5px; font-weight: 700;
    text-decoration: none !important; text-align: center;
}
.vk-order-view-btn:hover { background: #24401f; }

/* Customer's own saved delivery address (voice "my address"/"update address" queries) */
.vk-shown-address { margin-top: 10px; }
.vk-address-card {
    border: 1px solid #DFE7D6; border-radius: 10px; padding: 10px; animation: vkdrop .3s ease;
}
.vk-address-row { font-size: 12.5px; color: #46503f; line-height: 1.6; }
.vk-address-label { font-weight: 700; color: #1F2A1D; }
.vk-address-empty { color: #6b7a64; font-style: italic; }
.vk-address-edit-btn {
    display: inline-block; margin-top: 8px; padding: 7px 14px; border-radius: 8px;
    background: #2F5233; color: #fff !important; font-size: 12.5px; font-weight: 700;
    text-decoration: none !important; text-align: center;
}
.vk-address-edit-btn:hover { background: #24401f; }

/* Talk-to-a-real-executive support card (voice "customer care/executive" queries) */
.vk-shown-support { margin-top: 10px; }
.manao-support-box {
    display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid #DFE7D6;
    border-radius: 10px; padding: 10px; animation: vkdrop .3s ease;
}
.manao-support-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    border-radius: 8px; color: #fff !important; font-size: 12.5px; font-weight: 700;
    text-decoration: none !important; text-align: center;
}
.manao-support-btn.call-btn { background: #0d6efd; }
.manao-support-btn.call-btn:hover { background: #084298; }
.manao-support-btn.whatsapp-btn { background: #22993f; }
.manao-support-btn.whatsapp-btn:hover { background: #1c7d33; }
.manao-support-btn.email-btn { background: #212529; }
.manao-support-btn.email-btn:hover { background: #000; }
.manao-support-icon { width: 14px; height: 14px; flex-shrink: 0; }