/**
 * WooCommerce UI Enhancer - Slide Cart Drawer Stylesheet
 * Author: Afghan Awalfajari
 */

/* 1. Backdrop Overlay */
.woo-ui-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999990;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.woo-ui-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 2. Slide Drawer Panel */
.woo-ui-slide-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 90vw;
    height: 100%;
    background: #FFFFFF;
    box-shadow: none;
    z-index: 9999995;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, visibility 0.35s ease;
    box-sizing: border-box;
}

.woo-ui-slide-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
}

/* 3. Drawer Header */
.woo-ui-drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--woo-ui-border, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--woo-ui-primary, #0065B3);
    color: #FFFFFF;
}

.woo-ui-drawer-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
}

.woo-ui-drawer-close {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #FFFFFF !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.woo-ui-drawer-close svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    stroke: #FFFFFF !important;
    stroke-width: 2.5px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
}

.woo-ui-drawer-close:hover {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: #FFFFFF !important;
    transform: rotate(90deg) scale(1.05);
}

/* 4. Drawer Body & Cart List (Resetting all bullets & fixing Astra/Woo item layout) */
.woo-ui-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
}

.woo-ui-drawer-body .widget_shopping_cart_content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Remove default list styles, bullets, circles and pseudo-element markers */
.woo-ui-slide-drawer ul,
.woo-ui-slide-drawer ul.cart_list,
.woo-ui-slide-drawer ul.woocommerce-mini-cart,
.woo-ui-slide-drawer ul.product_list_widget {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.woo-ui-slide-drawer ul.cart_list li,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li,
.woo-ui-slide-drawer ul.product_list_widget li,
.woo-ui-slide-drawer .woocommerce-mini-cart-item {
    list-style: none !important;
    list-style-type: none !important;
    position: relative !important;
    display: block !important;
    padding: 12px 30px 12px 0 !important;
    min-height: auto !important;
    border-bottom: 1px solid var(--woo-ui-border, #E2E8F0) !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.woo-ui-slide-drawer ul.cart_list li::before,
.woo-ui-slide-drawer ul.cart_list li::after,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li::before,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li::after,
.woo-ui-slide-drawer .woocommerce-mini-cart-item::before,
.woo-ui-slide-drawer .woocommerce-mini-cart-item::after {
    display: none !important;
    content: none !important;
}

/* 4a. Hide Product Thumbnail Image on Slide Cart */
.woo-ui-slide-drawer ul.cart_list li img,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li img,
.woo-ui-slide-drawer .woocommerce-mini-cart-item img,
.woo-ui-slide-drawer ul.cart_list li > a img,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li > a img,
.woo-ui-slide-drawer .attachment-woocommerce_thumbnail,
.woo-ui-slide-drawer .wp-post-image {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Product Link & Title */
.woo-ui-slide-drawer ul.cart_list li > a:not(.remove),
.woo-ui-slide-drawer ul.woocommerce-mini-cart li > a:not(.remove),
.woo-ui-slide-drawer .woocommerce-mini-cart-item > a:not(.remove) {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--woo-ui-text, #1E293B) !important;
    text-decoration: none !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    border: none !important;
    word-break: break-word !important;
}

.woo-ui-slide-drawer ul.cart_list li > a:not(.remove):hover,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li > a:not(.remove):hover {
    color: var(--woo-ui-primary, #0065B3) !important;
}

/* Quantity & Price info */
.woo-ui-slide-drawer ul.cart_list li .quantity,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li .quantity,
.woo-ui-slide-drawer .woocommerce-mini-cart-item .quantity {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--woo-ui-text-muted, #64748B) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woo-ui-slide-drawer ul.cart_list li .quantity .woocommerce-Price-amount,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li .quantity .woocommerce-Price-amount {
    color: var(--woo-ui-primary, #0065B3) !important;
    font-weight: 700 !important;
}

/* Variations and Meta */
.woo-ui-slide-drawer ul.cart_list li dl.variation,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li dl.variation,
.woo-ui-slide-drawer .woocommerce-mini-cart-item dl.variation {
    margin: 4px 0 0 0 !important;
    font-size: 11.5px !important;
    color: var(--woo-ui-text-muted, #64748B) !important;
    border: none !important;
    padding: 0 !important;
}

.woo-ui-slide-drawer ul.cart_list li dl.variation dt,
.woo-ui-slide-drawer ul.cart_list li dl.variation dd,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li dl.variation dt,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li dl.variation dd {
    margin: 0 !important;
    display: inline !important;
}

/* Remove Item Button (Positioned at top right of each item) */
.woo-ui-slide-drawer ul.cart_list li a.remove,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li a.remove,
.woo-ui-slide-drawer .woocommerce-mini-cart-item a.remove {
    position: absolute !important;
    right: 0 !important;
    top: 14px !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #FEE2E2 !important;
    color: #EF4444 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
}

.woo-ui-slide-drawer ul.cart_list li a.remove:hover,
.woo-ui-slide-drawer ul.woocommerce-mini-cart li a.remove:hover {
    background: #EF4444 !important;
    color: #FFFFFF !important;
    transform: scale(1.1);
}

/* 5. Subtotal & Totals */
.woo-ui-slide-drawer .woocommerce-mini-cart__total {
    margin-top: auto !important;
    padding: 16px 0 12px 0 !important;
    border-top: 1px solid var(--woo-ui-border, #E2E8F0) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--woo-ui-text, #1E293B) !important;
}

.woo-ui-slide-drawer .woocommerce-mini-cart__total strong {
    font-weight: 700 !important;
    color: var(--woo-ui-text, #1E293B) !important;
}

.woo-ui-slide-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount {
    color: var(--woo-ui-primary, #0065B3) !important;
}

/* 6. Buttons: "Lihat Keranjang" & "Pembayaran" (Equal Height, Compact & Spaced) */
.woo-ui-slide-drawer .woocommerce-mini-cart__buttons,
.woo-ui-slide-drawer .buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woo-ui-slide-drawer .woocommerce-mini-cart__buttons a,
.woo-ui-slide-drawer .buttons a {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 16px !important;
    border-radius: var(--woo-ui-btn-radius, 6px) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Secondary Button (Lihat Keranjang / View Cart) */
.woo-ui-slide-drawer .woocommerce-mini-cart__buttons a:not(.checkout),
.woo-ui-slide-drawer .buttons a:not(.checkout) {
    background: #F1F5F9 !important;
    color: var(--woo-ui-text, #1E293B) !important;
    border: 1.5px solid var(--woo-ui-border, #CBD5E1) !important;
}

.woo-ui-slide-drawer .woocommerce-mini-cart__buttons a:not(.checkout):hover,
.woo-ui-slide-drawer .buttons a:not(.checkout):hover {
    background: #E2E8F0 !important;
    color: var(--woo-ui-primary, #0065B3) !important;
    border-color: var(--woo-ui-primary, #0065B3) !important;
}

/* Primary Action Button (Pembayaran / Checkout) */
.woo-ui-slide-drawer .woocommerce-mini-cart__buttons a.checkout,
.woo-ui-slide-drawer .buttons a.checkout {
    background: var(--woo-ui-accent, #ED7D31) !important;
    color: var(--woo-ui-btn-text, #FFFFFF) !important;
    border: 1.5px solid transparent !important;
    box-shadow: 0 4px 12px rgba(237, 125, 49, 0.3) !important;
}

.woo-ui-slide-drawer .woocommerce-mini-cart__buttons a.checkout:hover,
.woo-ui-slide-drawer .buttons a.checkout:hover {
    background: #d96a22 !important;
    box-shadow: 0 6px 16px rgba(237, 125, 49, 0.4) !important;
}