/**
 * Box Interiors - My Account Orders tab
 */

/* 1. Orders Row - Structural Centering */
.box-order-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e2e2;
    padding: 20px 0 0 0;
}
.box-orders-wrapper .box-orders-title {
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
    font-weight: 500;
    font-size: 30px;

}
.box-order-thumbnail {
    flex: 0 0 80px;
    margin-right: 30px;
}

.box-order-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #666
}

/* 3. Meta Wrap - The "Pipe" Layout */
.box-order-meta-wrap {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Centers the meta row exactly */
}

.box-order-meta-inner.meta-item-order-number {margin-bottom:10px;}
.box-order-meta-inner {
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
    font-size: 16px;
    letter-spacing:1px;
    display: flex;
    align-items: center;
    color: #000;
}

.meta-divider {
    padding: 0 15px;
    color: #ccc;
    font-weight: 200;
}

.meta-item {
    white-space: nowrap;
    text-transform: uppercase;
}

/* Status specific color - SHIPPED/PROCESSED */
.status-processing {
    color: #000;
    font-weight: 500;
}

/* 4. Action Button - Minimalist */
.box-view-link {
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 5px;
    color: #000;
    font-weight: 400;
    letter-spacing: 0.1em;
}
woocommerce-Address-title .title .box-adress-title{ 
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
    font-size: 22px!important;
    letter-spacing:1px;
    color:#000;
}
.woocommerce-MyAccount-navigation-link .woocommerce-MyAccount-navigation-link--orders .is-active {background-color: inherit; color:inherit;}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a {background-color: inherit;}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:hover  {background-color: inherit; color:#000!important; }

.woocommerce-account .addresses .title .edit {text-transform: uppercase;}
/* Hide Dashboard and Payment Methods Globally */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods {
    display: none !important;
}
/* Mobile Fix */
/* =========================================
   MOBILE OPTIMIZATION (Max 991px)
   ========================================= */
@media (max-width: 991px) {
    
    /* 1. Switch to a 2-Column Grid */
    .box-order-row { 
        display: grid !important;
        grid-template-columns: 120px 1fr !important; /* 120px Image | Remaining space for text */
        grid-template-rows: auto auto auto;
        align-items: center;
        text-align: left !important;
        gap: 5px 25px !important; /* 5px vertical gap, 25px horizontal gap */
        padding:20px 0 0 0!important;
    }
    
    /* 2. Anchor the Image to the Left spanning all rows */
    .box-order-thumbnail { 
        grid-column: 1;
        grid-row: 1 / span 3;
        margin-right: 0 !important; 
    }
    
    .box-order-thumbnail img {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 1 / 1; /* Forces the perfect square look from your mockup */
    }

    /* 3. Stack the Text Elements on the Right */
    .meta-item-order-number { 
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0 !important;
        align-self: end;
    }
    
    .box-order-meta-wrap { 
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start !important; /* Kills desktop center alignment */
    }
    
    .box-order-actions { 
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        margin-top: 5px;
    }

    /* 4. Format the inner text lines */
    .box-order-meta-inner { 
        flex-direction: column !important; 
        align-items: flex-start !important;
        gap: 6px !important; /* Tight spacing between Date and Status */
    }
    
    .meta-divider { 
        display: none !important; /* Hide the desktop "|" pipe */
    }
    
    /* 5. Refine Typography to match the thin/clean mockup */
    .box-order-meta-inner .meta-item,
    .meta-item-order-number .meta-item {
        font-size: 16px !important;
        line-height: 1.4 !important;
        font-weight: 300 !important;
        letter-spacing: 0.5px !important;
    }
    
    .box-view-link {
        font-size: 16px !important;
    }
}

/**
 * Account Details & Address Styling (Bulletproof)
 */

/* 1. Hide Labels completely */
body .woocommerce-address-fields label,
body .woocommerce-EditAccountForm label {
    display: none !important;
}

/* 2. Force 1px Border & Minimalist Inputs for ALL forms */
body .woocommerce-address-fields input.input-text,
body .woocommerce-address-fields select,
body .woocommerce-address-fields .select2-container--default .select2-selection--single,
body .woocommerce-EditAccountForm input.input-text,
body .woocommerce-EditAccountForm input[type="password"],
body .woocommerce-EditAccountForm input[type="email"] {
    border: none !important;
    border-bottom: 1px solid #e2e2e2 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif !important;
    font-size: 16px !important;
    height: auto !important;
    padding: 10px 0 !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
    outline: none !important;
    color: #000 !important;
    width: 100% !important;
}

/* 3. Focus state (Darken border on click) */
body .woocommerce-address-fields input.input-text:focus,
body .woocommerce-EditAccountForm input.input-text:focus,
body .woocommerce-EditAccountForm input[type="password"]:focus,
body .woocommerce-EditAccountForm input[type="email"]:focus {
    border-bottom-color: #000 !important;
}

/* 4. Placeholder Styling */
body .woocommerce-address-fields input::placeholder,
body .woocommerce-EditAccountForm input::placeholder {
    color: #000 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    letter-spacing: 0.1em !important;
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif !important;
    opacity: 1 !important;
}

/* 5. Address Grid Split (First/Last name, City/Postcode) */
body .woocommerce-address-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 40px !important; 
}

body #billing_first_name_field, body #billing_last_name_field,
body #shipping_first_name_field, body #shipping_last_name_field,
body #billing_city_field, body #billing_postcode_field {
    width: calc(50% - 20px) !important;
}

/* 6. Account Details Grid Split (First/Last name) */
body .woocommerce-EditAccountForm .woocommerce-form-row--first,
body .woocommerce-EditAccountForm .woocommerce-form-row--last {
    width: calc(50% - 20px) !important;
    float: left !important;
}
body .woocommerce-EditAccountForm .woocommerce-form-row--last {
    float: right !important;
}
body .woocommerce-EditAccountForm .clear {
    clear: both !important;
}

/* 7. Password Section Header (Account Details) */
body .woocommerce-EditAccountForm fieldset {
    margin-top: 40px !important;
    border: none !important;
    padding: 0 !important;
}
body .woocommerce-EditAccountForm fieldset legend {
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid #e2e2e2 !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    color: #000 !important;
}

/* 8. Select2 (Country Selector) Styling Fix */
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    color: #000 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif !important;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

/* 9. Mobile Overrides for Forms */
@media (max-width: 768px) {
    body #billing_first_name_field, body #billing_last_name_field,
    body #shipping_first_name_field, body #shipping_last_name_field,
    body #billing_city_field, body #billing_postcode_field,
    body .woocommerce-EditAccountForm .woocommerce-form-row--first,
    body .woocommerce-EditAccountForm .woocommerce-form-row--last {
        width: 100% !important;
        float: none !important;
    }
}