/* =============================================================
   Horia SA – Sidecart
   File: /inc/horia-sidecart/horia-sidecart.css
   ============================================================= */

/* ---------- Trigger ---------- */
.horia-sidecart-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: currentColor;
    transition: color 0.2s ease;
    line-height: 1;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}
.horia-sidecart-trigger:hover { color: var(--uicore-primary-color, #0860A8); }

.horia-sidecart-trigger__count {
    position: absolute;
    top: -2px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    background: var(--uicore-primary-color, #0860A8);
    color: #fff;
    border-radius: 99px;
    font-family: var(--uicore-primary-font-family, "Titillium Web"), sans-serif;
    font-size: 10px; font-weight: 700;
    line-height: 18px; text-align: center;
    transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
.horia-sidecart-trigger__count.is-bumping { transform: scale(1.45); }

/* ---------- Overlay ---------- */
.horia-sidecart-overlay {
    position: fixed; inset: 0;
    z-index: 998;
    background: rgba(7,7,7,.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s ease;
    cursor: pointer;
}
.horia-sidecart-overlay[hidden]  { display: none; }
.horia-sidecart-overlay.is-vis   { opacity: 1; }

/* ---------- Panel ---------- */
.horia-sidecart-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999;
    width: 400px;
    max-width: 95vw;
    background: var(--uicore-white-color, #fff);
    display: flex !important;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(7,7,7,.12);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    /* visibility keeps it in the render tree so transition works */
    visibility: hidden;
    pointer-events: none;
}
.horia-sidecart-panel.is-open {
    transform: translateX(0) !important;
    visibility: visible;
    pointer-events: auto;
}

/* ---------- Header ---------- */
.hsc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 20px 18px 24px;
    border-bottom: 1px solid var(--ui-border-color, #ebebeb);
    flex-shrink: 0;
}
.hsc-header__title {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
    font-family: var(--uicore-primary-font-family, "Titillium Web"), sans-serif;
    font-size: 15px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--uicore-headline-color, #070707);
}
.hsc-header__title svg { color: var(--uicore-primary-color, #0860A8); flex-shrink: 0; }

.hsc-close {
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    padding: 6px;
    color: var(--uicore-body-color, #596475);
    border-radius: var(--ui-radius-sm, 0);
    transition: color .15s, background .15s;
}
.hsc-close:hover { color: var(--uicore-dark-color, #070707); background: rgba(0,0,0,.05); }

/* ---------- Body ---------- */
.hsc-body {
    flex: 1; overflow-y: auto; padding: 0;
    scrollbar-width: thin;
    scrollbar-color: #c8d5e0 transparent;
}
.hsc-body::-webkit-scrollbar       { width: 4px; }
.hsc-body::-webkit-scrollbar-track { background: transparent; }
.hsc-body::-webkit-scrollbar-thumb { background: #c8d5e0; border-radius: 99px; }
.hsc-body::-webkit-scrollbar-thumb:hover { background: #9fb5c4; }

.hsc-body.is-updating { opacity: .45; pointer-events: none; }

.hsc-loading, .hsc-empty {
    padding: 48px 24px; text-align: center;
    color: var(--uicore-body-color, #596475);
    font-family: var(--uicore-text-font-family, "Fira Sans"), sans-serif;
    font-size: 14px;
}
.hsc-empty svg { display: block; margin: 0 auto 16px; opacity: .22; }

/* ---------- Items ---------- */
.hsc-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px; align-items: start;
    padding: 14px 18px 14px 14px;
    border-bottom: 1px solid var(--ui-border-color, #ebebeb);
    transition: background .15s;
}
.hsc-item:hover { background: var(--uicore-light-color, #F8FCFC); }

.hsc-item__img {
    width: 64px; height: 64px;
    object-fit: cover;
    border: 1px solid var(--ui-border-color, #ebebeb);
    flex-shrink: 0;
}

.hsc-item__info { min-width: 0; }

.hsc-item__name {
    display: block;
    font-family: var(--uicore-primary-font-family, "Titillium Web"), sans-serif;
    font-size: 13px; font-weight: 600;
    text-transform: uppercase;
    color: var(--uicore-dark-color, #070707);
    line-height: 1.4; margin-bottom: 5px;
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hsc-item__name:hover { color: var(--uicore-primary-color, #0860A8); }

.hsc-item__unit {
    display: block;
    font-size: 12px; color: var(--uicore-body-color, #596475);
    font-family: var(--uicore-text-font-family, "Fira Sans"), sans-serif;
    margin-bottom: 8px;
}

/* Qty */
.hsc-qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--ui-border-color, #ebebeb);
    border-radius: var(--ui-radius-sm, 0);
    overflow: hidden;
}
.hsc-qty__btn {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    background: none; border: none; cursor: pointer;
    color: var(--uicore-body-color, #596475);
    font-size: 16px; line-height: 1; padding: 0;
    transition: background .12s, color .12s;
}
.hsc-qty__btn:hover { background: var(--uicore-primary-color, #0860A8); color: #fff; }

.hsc-qty__val {
    width: 32px; height: 26px;
    text-align: center; border: none;
    border-left: 1px solid var(--ui-border-color, #ebebeb);
    border-right: 1px solid var(--ui-border-color, #ebebeb);
    font-size: 13px; font-family: var(--uicore-text-font-family, "Fira Sans"), sans-serif;
    color: var(--uicore-dark-color, #070707);
    -moz-appearance: textfield; appearance: textfield;
    background: #fff; padding: 0px !important;
}
.hsc-qty__val::-webkit-outer-spin-button,
.hsc-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Right col */
.hsc-item__right {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.hsc-item__price {
    font-family: var(--uicore-primary-font-family, "Titillium Web"), sans-serif;
    font-size: 14px; font-weight: 600;
    color: var(--uicore-dark-color, #070707);
    white-space: nowrap;
}
.hsc-item__remove {
    background: none; border: none; cursor: pointer;
    padding: 2px; color: var(--uicore-body-color, #596475);
    opacity: .45; transition: opacity .15s, color .15s;
    display: flex; line-height: 1;
}
.hsc-item__remove:hover { opacity: 1; color: #c0392b; }

/* ---------- Footer ---------- */
.hsc-footer {
    flex-shrink: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--ui-border-color, #ebebeb);
    background: var(--uicore-light-color, #F8FCFC);
}
.hsc-footer[hidden] { display: none; }

.hsc-subtotal {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2px;
}
.hsc-subtotal span {
    font-family: var(--uicore-primary-font-family, "Titillium Web"), sans-serif;
    font-size: 14px; font-weight: 700;
    text-transform: uppercase;
    color: #040404;
}
.hsc-subtotal strong {
    font-family: var(--uicore-primary-font-family, "Titillium Web"), sans-serif;
    font-size: 18px; font-weight: 700;
    color: var(--uicore-dark-color, #070707);
}
.hsc-subtotal__note {
    margin: 0 0 14px;
    font-size: 11px; color: var(--uicore-body-color, #596475);
    font-family: var(--uicore-text-font-family, "Fira Sans"), sans-serif;
}

.hsc-actions { display: flex; flex-direction: column; gap: 8px; }

.hsc-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 12px 20px;
    font-family: var(--uicore-primary-font-family, "Titillium Web"), sans-serif;
    font-size: 14px; font-weight: 500; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    border-radius: var(--ui-radius, 0);
    border: 1px solid transparent;
    transition: background .18s, color .18s, border-color .18s;
    line-height: 1.4;
}
.hsc-btn--primary {
    background: var(--uicore-primary-color, #0860A8);
    color: #fff !important;
    border-color: var(--uicore-primary-color, #0860A8);
}
.hsc-btn--primary:hover { background: #064f8c; border-color: #064f8c; }

.hsc-btn--outline {
    background: transparent;
    color: var(--uicore-primary-color, #0860A8);
    border-color: var(--uicore-primary-color, #0860A8);
}
.hsc-btn--outline:hover {
    background: var(--uicore-primary-color, #0860A8);
    color: #fff;
}

.hsc-link {
    display: block; text-align: center;
    font-family: var(--uicore-text-font-family, "Fira Sans"), sans-serif;
    font-size: 12px;
    color: var(--uicore-body-color, #596475);
    text-decoration: underline; text-underline-offset: 3px;
    transition: color .15s;
}
.hsc-link:hover { color: var(--uicore-primary-color, #0860A8); }

/* ---------- iOS scroll lock ---------- */
body.hsc-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    .horia-sidecart-panel {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}