/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ═══════════════════════════════════════════════════════════════════════════
   WooCommerce Side-panel Mini Cart
   Structure (Elementor Pro Menu Cart + WPR template):
     .elementor-menu-cart__main          ← fixed panel, full-height flex column
       .elementor-menu-cart__close-button
       .widget_shopping_cart_content     ← flex: 1, flex column, overflow hidden
         ul.wpr-woo-mini-cart            ← scrollable items list
           li.woocommerce-mini-cart-item
             .wpr-mini-cart-image
             .wpr-mini-cart-name-and-quantity
               .wpr-mini-cart-product-name
               dl.variation  (dt + dd pairs)
               .wpr-mini-cart-quantity
             .wpr-mini-cart-remove
         .wpr-mini-cart-separator        ← stays at bottom
         p.woocommerce-mini-cart__total  ← stays at bottom
         p.woocommerce-mini-cart__buttons← stays at bottom
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Panel ───────────────────────────────────────────────────────────── */
/* Elementor Pro already sets position:fixed top:0 bottom:0 display:flex
   flex-direction:column. We just set colours, remove its padding, and guard
   against overflow so only the list scrolls. */
.elementor-menu-cart__main {
    background-color: #020C45 !important;
    color: #FFFFFF;
    padding: 0 !important;
    overflow: hidden !important;
    max-width: 100%;
}

/* ── 2. Close button ────────────────────────────────────────────────────── */
.elementor-menu-cart__close-button,
.elementor-menu-cart__close-button-custom {
    flex-shrink: 0 !important;
    align-self: flex-end !important;
    padding: 16px 20px 8px !important;
    margin: 0 !important;
    cursor: pointer;
}
/* Cross icon bars */
.elementor-menu-cart__close-button::before,
.elementor-menu-cart__close-button::after {
    background: rgba(255, 255, 255, 0.75) !important;
}
.elementor-menu-cart__close-button:hover::before,
.elementor-menu-cart__close-button:hover::after {
    background: #FFFFFF !important;
}
/* Custom SVG / icon variant */
.elementor-menu-cart__close-button-custom .e-close-cart-custom-icon,
.elementor-menu-cart__close-button-custom svg {
    color: rgba(255, 255, 255, 0.75) !important;
    fill:  rgba(255, 255, 255, 0.75) !important;
}
.elementor-menu-cart__close-button-custom:hover .e-close-cart-custom-icon,
.elementor-menu-cart__close-button-custom:hover svg {
    color: #FFFFFF !important;
    fill:  #FFFFFF !important;
}

/* ── 3. Cart fragment container ─────────────────────────────────────────── */
/* Elementor Pro gives this height:100% which causes overflow when the close
   button is above it. We switch to flex:1 + height:auto so the panel's
   remaining height is divided correctly. */
.elementor-menu-cart__main .widget_shopping_cart_content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* ── 4. Scrollable cart-items list ─────────────────────────────────────── */
.elementor-menu-cart__main ul.wpr-woo-mini-cart {
    flex: 1 1 auto;
    min-height: 0;           /* lets a flex child shrink below content size */
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px 20px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.elementor-menu-cart__main ul.wpr-woo-mini-cart::-webkit-scrollbar {
    width: 4px;
}
.elementor-menu-cart__main ul.wpr-woo-mini-cart::-webkit-scrollbar-track {
    background: transparent;
}
.elementor-menu-cart__main ul.wpr-woo-mini-cart::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 2px;
}

/* ── 5. Each cart item row ──────────────────────────────────────────────── */
.elementor-menu-cart__main .woocommerce-mini-cart-item.mini_cart_item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.elementor-menu-cart__main .woocommerce-mini-cart-item.mini_cart_item:first-child {
    padding-top: 6px;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item.mini_cart_item:last-child {
    border-bottom: none;
}

/* ── 6. Product thumbnail ───────────────────────────────────────────────── */
.elementor-menu-cart__main .wpr-mini-cart-image {
    flex: 0 0 72px;
}
.elementor-menu-cart__main .wpr-mini-cart-image a {
    display: block;
}
.elementor-menu-cart__main .wpr-mini-cart-image img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* ── 7. Product info column ─────────────────────────────────────────────── */
.elementor-menu-cart__main .wpr-mini-cart-name-and-quantity {
    flex: 1;
    min-width: 0;
}

/* Product name */
.elementor-menu-cart__main .wpr-mini-cart-product-name {
    margin-bottom: 4px;
}
.elementor-menu-cart__main .wpr-mini-cart-product-name a {
    display: block;
    text-decoration: none;
    line-height: 1.35;
}
.elementor-menu-cart__main .wpr-mini-cart-product-name a .wpr-mini-cart-name {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    word-break: break-word;
}
.elementor-menu-cart__main .wpr-mini-cart-product-name a:hover .wpr-mini-cart-name {
    color: #e05c6e;
}

/* ── 8. Variation list (Color / Size / Personalization …) ──────────────── */
/* WooCommerce injects a clearfix ::before / ::after on .cart_list li dl.
   In CSS Grid every direct child — including pseudo-elements — becomes a
   grid item, so ::before occupies column 1 row 1 and bumps dt to column 2,
   making dd fall to the left of the next row.
   Fix: suppress both pseudo-elements so only dt/dd are grid items.         */
.elementor-menu-cart__main .woocommerce-mini-cart-item .variation::before,
.elementor-menu-cart__main .woocommerce-mini-cart-item .variation::after {
    content: none !important;
    display: none !important;
}
/* WooCommerce also adds padding-left + border-left to .cart_list li dl.   */
.elementor-menu-cart__main .woocommerce-mini-cart-item .variation {
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 5px;
    row-gap: 2px;
    margin: 0 0 5px;
    padding-left: 0 !important;
    border-left: none !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item .variation dt {
    font-size: 10px;
    font-weight: 700;
    color: #7b93b8;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    white-space: nowrap;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item .variation dd {
    font-size: 10px;
    color: #a8bdd8;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart-item .variation dd p {
    display: inline;
    margin: 0;
}

/* ── 9. Quantity × price ────────────────────────────────────────────────── */
.elementor-menu-cart__main .wpr-mini-cart-quantity .quantity {
    font-size: 12px;
    color: #d0dce8;
}
.elementor-menu-cart__main .wpr-mini-cart-quantity .woocommerce-Price-amount {
    color: #e05c6e;
    font-weight: 700;
}

/* ── 10. Remove (×) button ──────────────────────────────────────────────── */
.elementor-menu-cart__main .wpr-mini-cart-remove {
    flex: 0 0 auto;
    padding-top: 2px;
}
.elementor-menu-cart__main .wpr-mini-cart-remove .wpr-remove-item-from-mini-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    text-decoration: none;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}
.elementor-menu-cart__main .wpr-mini-cart-remove .wpr-remove-item-from-mini-cart:hover {
    background: #A1192E;
    color: #FFFFFF;
}
.woocommerce a.remove {
    line-height: 0.8;
}

/* ── 11. Separator ──────────────────────────────────────────────────────── */
.elementor-menu-cart__main .wpr-mini-cart-separator {
    flex-shrink: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 0;
}

/* ── 12. Subtotal — pinned to bottom of panel ───────────────────────────── */
.elementor-menu-cart__main p.woocommerce-mini-cart__total.total {
    flex-shrink: 0;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    margin: 0;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #020C45;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.elementor-menu-cart__main .woocommerce-mini-cart__total strong {
    font-weight: 600;
    color: #e8eef5;
}
.elementor-menu-cart__main .woocommerce-mini-cart__total .woocommerce-Price-amount {
    color: #e05c6e;
    font-weight: 700;
    font-size: 16px;
}

/* ── 13. Cart + Checkout buttons — pinned to bottom of panel ────────────── */
.elementor-menu-cart__main p.woocommerce-mini-cart__buttons.buttons {
    flex-shrink: 0;
    display: flex !important;
    gap: 10px;
    padding: 6px 20px 20px;
    margin: 0;
    background-color: #020C45;
}
/* iOS safe-area (home bar) padding */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .elementor-menu-cart__main p.woocommerce-mini-cart__buttons.buttons {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
}

.elementor-menu-cart__main .woocommerce-mini-cart__buttons .button {
    flex: 1;
    display: inline-block !important;
    padding: 11px 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    transition: background 0.2s, border-color 0.2s;
    letter-spacing: 0.35px;
    box-sizing: border-box;
}
.elementor-menu-cart__main .woocommerce-mini-cart__buttons .button:hover {
    background: #A1192E !important;
    border-color: #A1192E;
    color: #FFFFFF !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart__buttons .button.checkout {
    background: #A1192E !important;
    border-color: #A1192E;
    color: #FFFFFF !important;
}
.elementor-menu-cart__main .woocommerce-mini-cart__buttons .button.checkout:hover {
    background: #8a1526 !important;
    border-color: #8a1526;
}

/* ── 14. Empty cart message ─────────────────────────────────────────────── */
.elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    padding: 20px;
    margin: 0;
    text-align: center;
}

/* ── 15. Mobile & tablet responsive ─────────────────────────────────────── */
@media (max-width: 767px) {
    /* On small screens let the panel fill the full width */
    .elementor-menu-cart__main {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0 !important;
        left: 0 !important;
    }
}

@media (max-width: 480px) {
    /* Tighter padding and smaller thumbnail on phones */
    .elementor-menu-cart__main ul.wpr-woo-mini-cart {
        padding-left: 16px;
        padding-right: 16px;
    }
    .elementor-menu-cart__main .wpr-mini-cart-image {
        flex: 0 0 60px;
    }
    .elementor-menu-cart__main .wpr-mini-cart-image img {
        width: 60px;
        height: 60px;
    }
    .elementor-menu-cart__main p.woocommerce-mini-cart__total.total,
    .elementor-menu-cart__main p.woocommerce-mini-cart__buttons.buttons {
        padding-left: 16px;
        padding-right: 16px;
    }
    .elementor-menu-cart__main .wpr-mini-cart-product-name a .wpr-mini-cart-name {
        font-size: 12px;
    }
}

/* ── WooCommerce Order Received (Thank You) page — full width ───────────── */

/* 1. Remove Hello Elementor's site-main container cap. */
body.woocommerce-order-received .site-main {
    max-width: 100% !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

/* 2. The checkout page uses Elementor's Container (flexbox) layout, not the
      classic Section/Column layout, so parent elements are .e-con, not
      .elementor-column.  The container holding the checkout widget uses
      flex-direction:row which splits children to ~50% each.  Switch it to
      column so the widget fills the full width on order-received.           */
body.woocommerce-order-received .e-con:has(.elementor-widget-woocommerce-checkout-page) {
    flex-direction: column !important;
}

/* 3. Force the checkout widget itself to full width regardless of any
      flex-basis / --container-widget-width set by the Elementor editor.     */
body.woocommerce-order-received .elementor-widget-woocommerce-checkout-page {
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* 4. Hide the "Checkout" page-header title injected by Hello Elementor. */
body.woocommerce-order-received .page-header {
    display: none !important;
}

/* ── WooCommerce My Account page ────────────────────────────────────────── */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.woocommerce-button,
.woocommerce-Button {
    background-color: var(--e-global-color-secondary) !important;
    color: var(--e-global-color-accent) !important;
}
.woocommerce-button:hover,
.woocommerce-Button:hover {
    background-color: var(--e-global-color-primary) !important;
}
button.woocommerce-Button.button {
    margin-top: 20px;
}

/* ── Layout: nav 20 % left / content 75 % right with 5 % gap ────────────── */
/* Elementor Pro's My Account widget sets nav to 25 % and content to
   float:inline-end (right) with specificity 0,3,0 – 0,4,0.
   Use !important to override and keep the intended 20/5/75 split.          */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 20% !important;
    float: left !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
    display: block !important;          /* not inline-block */
    float: left !important;             /* override Elementor's float:inline-end */
    margin-left: 5% !important;
    width: 75% !important;
    padding-inline-start: 0 !important; /* remove Elementor's built-in 6% padding */
}

/* ── Navigation list ─────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    padding: 0;
    border-top: 1px solid #eee;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    list-style: none;
    border-bottom: 1px solid #eee;
    padding-bottom: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: 10px 5px;
    display: block;
}

/* ── Navigation icons via Font Awesome 5 Free (solid, font-weight:900) ───── */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-style: normal;
    margin-right: 10px;
    opacity: .25;
    display: inline-block;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover::before {
    opacity: 1;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--e-global-color-primary, #A1192E) !important;
}
/* FA5 solid unicodes (two changed from FA4: dashboard f3fd, logout f2f5) */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard      a::before { content: "\f3fd"; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders         a::before { content: "\f290"; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads      a::before { content: "\f1c6"; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address   a::before { content: "\f015"; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "\f09d"; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account   a::before { content: "\f007"; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f2f5"; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist         a::before { content: "\f004"; }

/* ── Content area ─────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}
.woocommerce-account p.order-again {
    text-align: right;
}
.woocommerce-account .woocommerce-EditAccountForm input[type="submit"] {
    margin-top: 50px;
    float: right;
}