/* ===================================================================
   VibraCart — V2 dark restyle + responsive.
   Loaded on the shop and product pages AFTER /vibracard/vibracartstyle3.css,
   so these rules win. The cart markup is injected by /vibracard/vibracart.js;
   we only restyle its classes and override the JS inline sizing (!important).
   All original click handlers live on the <img> buttons, which we keep in the
   DOM as transparent, full-size click targets over CSS-styled buttons.
   =================================================================== */

/* ---- floating cart indicator: dark panel (like the shop) + explicit, identical
   placement on both pages: content-edge horizontally (product-like), and the
   shop's vertical anchor (top:302, matching the #frag_23 wrapper). ---- */
#kosikdiv {
    right: max(20px, calc((100vw - 1520px) / 2 + 12px)) !important;
    left: auto !important;
    top: 302px !important;
    bottom: auto !important;
    background: var(--gs-surface, #1a1e22) !important;
    border: 1px solid var(--gs-border-strong, rgba(255,255,255,.12));
    border-radius: .5rem !important;
    padding: .65rem .85rem !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.5);
    color: var(--gs-text, #e6e8ea) !important;
}
#kosikdiv font, #kosikdiv span { color: var(--gs-text, #e6e8ea) !important; }

/* ---- popup shell: centered + responsive + dark ---- */
#vibracart.vibracart {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(380px, 94vw) !important;
    height: auto !important;
    max-height: 82vh !important;
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    background: var(--gs-surface, #1a1e22) !important;
    border: 1px solid var(--gs-border-strong, rgba(255,255,255,.12)) !important;
    border-radius: .8rem !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.6) !important;
    color: var(--gs-text, #e6e8ea) !important;
    font-family: 'Inter','Helvetica Neue',Arial,sans-serif !important;
    overflow: hidden !important;
    z-index: 100000 !important;
}

/* ---- header ---- */
#vibracart .vibracart_header {
    height: auto !important;
    min-height: 0 !important;
    display: flex; align-items: center;
    padding: .7rem 1rem !important;
    background: var(--gs-bg-2, #131619) !important;
    border-bottom: 1px solid var(--gs-border, rgba(255,255,255,.06)) !important;
}
#vibracart .vibracart_header::before {
    content: "Your cart";
    color: #fff; font-weight: 700; font-size: .98rem; letter-spacing: .01em;
}
#vibracart div.vibracart_closebutton {
    position: relative; margin-left: auto;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--gs-surface-2, #20252b);
}
#vibracart div.vibracart_closebutton::after {
    content: "\00D7";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--gs-muted, #9aa0a6); font-size: 1.3rem; line-height: 1; pointer-events: none;
}
#vibracart div.vibracart_closebutton:hover::after { color: #fff; }
#vibracart img.vibracart_closebutton {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important; cursor: pointer;
}

/* ---- items ---- */
#vibracart .vibracart_content {
    height: auto !important;
    flex: 1 1 auto;
    overflow-y: auto !important;
    padding: .35rem 1rem !important;
    background: var(--gs-surface, #1a1e22) !important;
}
#vibracart .vibracart_table { width: 100% !important; border-collapse: collapse; margin: 0 !important; }
#vibracart .vibracart_table td {
    padding: .6rem .3rem !important;
    border-bottom: 1px solid var(--gs-border, rgba(255,255,255,.06)) !important;
    font-size: .86rem; color: var(--gs-text, #e6e8ea); vertical-align: middle;
    background: transparent !important;
}
/* delete button: replace the red X image with a clean trash icon.
   The <img> stays as a transparent, full-size click target (keeps removeFromCart). */
#vibracart td.vibracart_itemdelete { width: 32px; }
#vibracart p.vibracart_itemdelete { position: relative; width: 24px; height: 24px; margin: 0 auto; padding: 0; }
#vibracart p.vibracart_itemdelete::before {
    content: "\F5DE";                 /* bootstrap-icons: trash */
    font-family: "bootstrap-icons" !important;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--gs-muted, #9aa0a6); font-size: 1.05rem; line-height: 1; pointer-events: none;
    transition: color .15s ease, transform .15s ease;
}
#vibracart p.vibracart_itemdelete:hover::before { color: var(--gs-danger, #ff6b6b); transform: scale(1.1); }
#vibracart img.vibracart_itemdelete {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important; cursor: pointer;
}
#vibracart .vibracart_itemdescription { color: var(--gs-text); line-height: 1.4; }
#vibracart .vibracart_itemtotal { text-align: right; white-space: nowrap; color: #fff; font-weight: 700; }
/* kill the light row backgrounds + black item text from the original CSS */
#vibracart tr.vibracart_item_odd,
#vibracart tr.vibracart_item_even,
#vibracart .vibracart_table tr { background: transparent !important; }
#vibracart p[class^="vibracart_item"] { color: var(--gs-text, #e6e8ea) !important; }
#vibracart p.vibracart_itemid { color: var(--gs-muted, #9aa0a6) !important; }
#vibracart p.vibracart_itemdescription { color: #fff !important; font-weight: 700 !important; }
#vibracart p.vibracart_itemtotal { color: #fff !important; font-weight: 700 !important; }

/* ---- terms rows ---- */
#vibracart .vibracart_terms {
    display: flex; align-items: center; gap: .55rem;
    height: auto !important; min-height: 0 !important;
    padding: .5rem 1rem !important;
    font-size: .78rem; line-height: 1.35;
    background: var(--gs-surface, #1a1e22) !important;
    border: 0 !important;
}
#vibracart .vibracart_termscheckbox,
#vibracart .vibracart_termslink,
#vibracart a.vibracart_termslink { background: transparent !important; float: none !important; margin: 0 !important; }
#vibracart .vibracart_termscheckbox { flex: 0 0 auto; display: flex; align-items: center; }
#vibracart .vibracart_termscheckbox input { accent-color: var(--gs-accent, #1db3c5); width: auto; }
#vibracart .vibracart_termslink { flex: 1 1 auto; }
#vibracart a.vibracart_termslink,
#vibracart a.vibracart_termslink:link,
#vibracart a.vibracart_termslink:visited {
    color: var(--gs-accent, #1db3c5) !important; font-weight: 600 !important; text-decoration: underline;
}
#vibracart a.vibracart_termslink:hover { color: #fff !important; text-decoration: underline; }

/* ---- footer + buttons ---- */
#vibracart .vibracart_footer {
    height: auto !important;
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem !important;
    background: var(--gs-bg-2, #131619) !important;
    border-top: 1px solid var(--gs-border, rgba(255,255,255,.06)) !important;
}
#vibracart .vibracart_total {
    order: -1;               /* total on the left, action buttons on the right */
    margin-right: auto;
    float: none !important;
    color: #fff !important; font-weight: 800; font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

#vibracart div.vibracart_updatebutton,
#vibracart div.vibracart_checkoutbutton {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; border-radius: .4rem; cursor: pointer;
    font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#vibracart div.vibracart_updatebutton {
    padding: 0 1rem;
    background: var(--gs-surface-2, #20252b);
    border: 1px solid var(--gs-border-strong, rgba(255,255,255,.12));
    color: var(--gs-text, #e6e8ea);
}
#vibracart div.vibracart_updatebutton:hover { border-color: var(--gs-accent, #1db3c5); color: var(--gs-accent, #1db3c5); }
#vibracart div.vibracart_checkoutbutton {
    padding: 0 1.5rem;
    background: var(--gs-accent, #1db3c5);
    color: #0b0d10;
    box-shadow: 0 0 16px var(--gs-glow, rgba(29,179,197,.25));
}
#vibracart div.vibracart_checkoutbutton:hover { background: #fff; transform: translateY(-1px); }
#vibracart div.vibracart_updatebutton::after { content: "Update"; }
#vibracart div.vibracart_checkoutbutton::after { content: "Checkout"; }
#vibracart img.vibracart_updatebutton,
#vibracart img.vibracart_checkoutbutton {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important; cursor: pointer;
}
/* Narrow screens: stack the total over the two buttons so they never clip.
   Only wrap here — on wider carts the footer stays a single row so Checkout
   never jumps to a new line when the total changes width. */
@media (max-width: 430px) {
    #vibracart .vibracart_footer { flex-wrap: wrap; gap: .5rem; padding: .7rem .8rem !important; }
    #vibracart .vibracart_total { flex: 1 0 100%; margin: 0 0 .1rem !important; font-size: 1.05rem; }
    #vibracart div.vibracart_updatebutton,
    #vibracart div.vibracart_checkoutbutton {
        flex: 1 1 0; height: 40px; padding: 0 .4rem !important; font-size: .72rem; letter-spacing: .03em;
    }
}

/* ---- waiting / alert overlays: keep them centered + on-theme ---- */
#vibracartwaiting, #vibracartalert {
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(340px, 90vw) !important; height: auto !important;
    min-height: 80px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gs-surface, #1a1e22) !important;
    border: 1px solid var(--gs-border-strong, rgba(255,255,255,.12)) !important;
    border-radius: .8rem !important;
    color: var(--gs-text, #e6e8ea) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.65) !important;
    padding: 1.4rem 1.5rem !important;
    z-index: 100001 !important;
}
/* alert text: V2 instead of the jarring white box */
#vibracartalert p.vibracart_alerterror,
#vibracart p.vibracart_alerterror {
    background: transparent !important; color: #ff8a8a !important;
    font-family: 'Inter','Helvetica Neue',Arial,sans-serif !important;
    font-size: 1rem !important; line-height: 1.45 !important; margin: 0 !important;
}
#vibracartalert p.vibracart_alertmessage,
#vibracart p.vibracart_alertmessage {
    background: transparent !important; color: var(--gs-text, #e6e8ea) !important;
    font-family: 'Inter','Helvetica Neue',Arial,sans-serif !important;
    font-size: 1rem !important; line-height: 1.45 !important; margin: 0 !important;
}