/* ══════════════════════════════════════════════════════════════
   Vanguard — Off-canvas cart drawer
   Ported from the WPCode snippets "Off Canvas" (#954) and
   "Allow off canvas on single product" (#959).
   ══════════════════════════════════════════════════════════════ */

.woc-offcanvas {
    position: fixed;
    top: 0;
    right: -480px;
    width: 440px;
    max-width: 96%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -3px 0 20px rgba(0, 0, 0, .18);
    z-index: 999999999;
    transition: right .33s cubic-bezier(.2, .9, .2, 1);
    color: #000;
}

.woc-offcanvas.open { right: 0; }

.woc-header {
    padding: 18px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.woc-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #000; }

#woc-close { background: none; border: 0; font-size: 22px; cursor: pointer; color: #000; }

.woc-body { padding: 14px 18px; overflow-y: auto; flex: 1; }

.woc-footer { border-top: 1px solid #eee; padding: 14px 18px; background: #fafafa; }

/* ── Line items ─────────────────────────────────────────────── */
.woc-mini-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.woc-mini-cart-item:last-child { border-bottom: none; }

.woc-item-image { flex: 0 0 25%; max-width: 90px; }
.woc-item-image img { width: 100%; height: auto; object-fit: cover; border-radius: 8px; }

.woc-item-details {
    flex: 1;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.woc-product-name { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.woc-product-name a { color: inherit; text-decoration: none; }

/* Cart item meta — Vanguard upgrades / add-ons / promos, or any other
   plugin that hooks woocommerce_get_item_data. */
.woc-item-meta { margin: 2px 0 8px; font-size: 12px; color: #444; line-height: 1.5; }
.woc-item-meta dl,
.woc-item-meta .wc-item-meta { margin: 0; padding: 0; list-style: none; }
.woc-item-meta dl + dl,
.woc-item-meta .wc-item-meta + .wc-item-meta,
.woc-item-meta li + li { margin-top: 2px; }
.woc-item-meta dt,
.woc-item-meta .wc-item-meta-label { font-weight: 600; color: #222; display: inline; margin: 0 4px 0 0; }
.woc-item-meta dd,
.woc-item-meta .wc-item-meta-value { display: inline; margin: 0; }
.woc-item-meta dd p,
.woc-item-meta .wc-item-meta-value p { display: inline; margin: 0; }
.woc-item-meta .amount { font-weight: 500; }

/* ── Quantity + remove ──────────────────────────────────────── */
.woc-quantity-remove { display: flex; align-items: center; gap: 10px; }

.woc-quantity {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.woc-qty-btn {
    color: #000 !important;
    background: #f8f8f8;
    border: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woc-qty-input {
    width: 48px;
    height: 30px;
    border: 0;
    text-align: center;
    font-size: 13px;
    -moz-appearance: textfield;
}
.woc-qty-input::-webkit-outer-spin-button,
.woc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.woc-remove-item { color: #c00; font-weight: bold; text-decoration: none; padding-left: 6px; font-size: 18px; }
.woc-remove-item:hover { color: #a00; }

.woc-item-price { flex: 0 0 20%; text-align: right; font-weight: 600; font-size: 14px; }

/* ── Totals + checkout ──────────────────────────────────────── */
.woc-totals .woc-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.woc-total-row { border-top: 1px solid #eee; padding-top: 10px; margin-top: 8px; font-size: 16px; }

.woc-checkout .woc-checkout-btn {
    display: block;
    width: 100%;
    padding: 11px;
    text-align: center;
    background: #000;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
}
.woc-checkout .woc-checkout-btn:hover { background: #222; }

/* ── Payment method picker ──────────────────────────────────── */
.woc-payment-gateway { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; }

.woc-payment-gateway-button {
    display: block;
    text-align: center;
    margin-bottom: 10px;
    color: #333;
    text-decoration: underline;
    font-size: 13px;
}

.woc-payment-methods { margin-bottom: 15px; }

.woc-payment-method {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all .2s ease;
    cursor: pointer;
}
.woc-payment-method:hover { background-color: #f9f9f9; }
.woc-payment-method.woc-payment-selected { border-color: #0073aa; background-color: #e6f3fa; }

.woc-payment-label { font-size: 14px; font-weight: 500; line-height: 1.4; }
.woc-payment-label img { max-height: 24px; margin-right: 8px; vertical-align: middle; }

.woc-payment-description { font-size: 12px; color: #666; margin-top: 5px; font-weight: normal; }

.woc-payment-method.woc-payment-selected .woc-payment-label { color: #0073aa; }
.woc-payment-method.woc-payment-selected .woc-payment-description { color: #555; }

.woc-selected-gateway { background: #e8f5e8; padding: 8px; border-radius: 4px; font-size: 13px; }
.woc-selected-gateway-text { font-weight: 600; color: #2e7d2e; }

/* ── Overlay ────────────────────────────────────────────────── */
#woc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 999998;
    display: none;
}

/* ── The drawer replaces WooCommerce's "added to cart" notice ── */
.single-product .woocommerce-message,
.single-product .woocommerce-message a.button.wc-forward,
.single-product div.product .woocommerce-message,
.added_to_cart.wc-forward {
    display: none !important;
}

@media (max-width: 600px) {
    .woc-offcanvas { width: 100%; right: -100%; }
    .woc-offcanvas.open { right: 0; }
    .woc-item-image img { height: 60px; }
}