/* ==========================================================================

   1. VARIABLES & ROOT

   ========================================================================== */

:root {

    --gcp-bg: #23262d;

    --gcp-card: #2b2e36;

    --gcp-gold: #FAAF00;

    --gcp-text: #fff;

    --gcp-muted: #9aa0a6;

}



/* ==========================================================================

   2. GLOBAL & LAYOUT

   ========================================================================== */

.checkout-columns { display: flex; flex-wrap: wrap; gap: 20px;flex-direction: row; align-items: flex-start;}

.checkout-left { flex: 1 1 60%; }

.checkout-right { flex: 1 1 35%; display: none; }



.checkout-left, .checkout-right {

    border: 1px solid #F8B101;

    padding: 16px;

    border-radius: 16px;

    color: white;

}



.checkout-right .gcp-hidden-row { display: none !important; }

.goldika-mobile-checkout-footer { display: none; }

.checkout-columns h3 { color: white; margin-bottom: 0.5em; }



/* ==========================================================================

   3. TABLE STYLES (Modernized)

   ========================================================================== */

.woocommerce-page.woocommerce-checkout table.shop_table {

    border-collapse: collapse !important;

}



.woocommerce-js table.shop_table, 

table.shop_table thead, 

table.shop_table tbody, 

table.shop_table tr, 

table.shop_table td, 

table.shop_table th {

    background-color: #32343D !important;

}



/* Subtle modern border-top */

.woocommerce-page.woocommerce-checkout table.shop_table tbody tr, 

.woocommerce-page.woocommerce-checkout table.shop_table tfoot tr {

    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

}



.woocommerce-page.woocommerce-checkout table.shop_table th { padding: 16px 0 !important; }

.woocommerce-page.woocommerce-checkout table.shop_table td { padding: 16px 16px 16px 0 !important; }

.shop_table th.product-total { text-align: end; }

table.shop_table .cart_item .product-name { display: flex; }



.woocommerce-js table, 

.woocommerce-checkout table.shop_table td, 

.woocommerce-checkout table.shop_table th {

    border: 0 !important;

}



/* ==========================================================================

   4. MODAL STYLES

   ========================================================================== */

.order-review-modal {

    display: none;

    position: fixed;

    z-index: 9999;

    left: 0; top: 0;

    width: 100%; height: 100%;

    overflow: auto;

    background-color: rgba(0,0,0,0.6);

    backdrop-filter: blur(4px);

}



.order-review-modal-content {

    background-color: #32343D;

    margin: auto;

    padding: 30px;

    border-radius: 16px;

    width: 90%;

    max-width: 800px;

    position: relative;

}



.order-review-modal-content h2 { color: var(--gcp-gold); }

.order-review-modal-content p { margin-block: 0.5em !important; }



.woocommerce-terms-and-conditions-wrapper, 

.order-review-modal-content .woocommerce-shipping-totals.shipping,  

.order-review-modal-content .wc_payment_methods.payment_methods.methods {

    display: none;

}



.close-modal {

    aspect-ratio: 1;

    position: absolute;

    padding: unset;

    left: 1em;

    border-radius: 8px;

    font-size: 28px;

    cursor: pointer;

    width: 40px;

    background: #fa3;

    color: #32343D;

}



/* ==========================================================================

   5. FORM ELEMENTS (SELECT2 & INPUTS)

   ========================================================================== */



/* 1. NUCLEAR RESET: Kill Astra's SVG background arrow */

select, 

.select2-container .select2-selection--single,

.woocommerce-page .select2-container .select2-selection--single {

    background-image: none !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    appearance: none !important;

    padding-right: 12px !important;

}



/* 2. Style the Inputs and Select boxes */

.select2-search__field {

    border-radius: 8px !important;

    background: #141923 !important;

}



.cart-subtotal{

display:none;

}



.form-row input.input-text, span .select2 .selection {

    background: unset !important; 

    color: #9E9E9E !important;

    border-radius: 8px !important;

    height: 48px !important;

}



.woocommerce-js form .form-row.woocommerce-validated input.input-text{

color:white !important;

}

.woocommerce-validated .select2-container--default .select2-selection--single .select2-selection__rendered {

    color: white !important;

}



/* Optional: Add a subtle gold border to the container when validated to match your theme */

.woocommerce-validated .select2-container--default .select2-selection--single {

    border-color: #69bf29 !important;

}

.woocommerce-page input:focus { border: 1px solid #F8B101 !important; }



.select2-dropdown.select2-dropdown--below, #shipping_state, #shipping_city {

    background: #232832;

    color: #F8B100;

}



.select2-selection__rendered, .select2-selection__placeholder { color: #9E9E9E !important; }



.woocommerce-page .select2-container { z-index: unset !important; }



.woocommerce-page .select2-container .select2-selection--single {

    height: 48px !important;

    border-radius: 8px !important;

    display: flex;

    padding: 12px !important;

    align-items: center;

    background-color: unset !important;

    position: relative;

}



/* 3. NEW GOLDEN CHEVRON (CSS Only) */

.select2-selection__arrow b { display: none !important; } /* Hide old triangle */



.select2-selection__arrow::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gcp-gold);
    border-bottom: 2px solid var(--gcp-gold);
    transform: rotate(45deg);
    position:absolute;
    top: 35%;
}



/* RTL Positioning (Persian) */
.select2-container--default[dir="rtl"] .select2-selection__arrow::after {
    left: 15px;
}

/* Rotate when open */

.select2-container--open .select2-selection__arrow::after {
    transform: rotate(-135deg);
    top: 45%;
}

/* ==========================================================================
   6. SHIPPING CARDS & ROWS
   ========================================================================== */
.shipping-options-cards { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }

.shipping-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.shipping-card.selected { border-color: #F8B101; }
.shipping-card:hover {
    border-color: #F8B101;
    background: #141923 !important;
}

.shipping-row { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.shipping-row .form-row, .item-details { flex: 1; }

/* ==========================================================================
   7. PRODUCT & CART ITEMS
   ========================================================================== */
.item-metadata { display: flex; justify-content: space-between; }
.cart-item { gap: 8px; display: flex; color: white; align-items: center; }
.item-weight-custom { min-width: 70px; text-align: end; }
.item-weight-custom, .item-code-group { font-size: 0.8em; color: #ccc; }
.item-price-meta { align-items: flex-end; }
.item-code { color: #ccc !important; }

.item-image {
    display: flex;
    aspect-ratio: 1;
    width: 100px;
    border: 1px solid #F8B101;
    border-radius: 8px;
    background: linear-gradient(225deg, rgba(55, 57, 67, 1) -50%, rgba(14, 16, 20, 1) 150%);
    filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
}

.item-image img {
    margin: auto;
    padding: 8px;
    object-fit: scale-down;
    height: 100px !important;
}

.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #ccc;
}

/* ==========================================================================
   8. PRICING & TOTALS
   ========================================================================== */
.woocommerce-Price-amount.amount, 
.woocommerce-Price-amount.amount bdi, 
.summary-row bdi {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.woocommerce-Price-currencySymbol { color: #F8B101; }
.summary-row { justify-content: space-between; padding-bottom: 1em; display: flex; color: white; align-items: center; }

.cart-summary-totals .total-row {
    padding-top: 1em;
    border-top: 1px solid #ccc;
}

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */
.open-order-review-btn { margin-top: 20px; }

.woocommerce-checkout #payment #place_order { 
    background: var(--gcp-gold); 
    color: #000; 
    border-radius: 8px; 
    font-weight: 600; 
    text-decoration: none; 
    border: 1px solid var(--gcp-gold);
}

.woocommerce-checkout #payment #place_order:hover { 
    background: var(--gcp-bg); 
    color: var(--gcp-gold); 
    border: 1px solid var(--gcp-gold);
}

/* ==========================================================================
   10. MEDIA QUERIES & MOBILE
   ========================================================================== */
@media (min-width: 1024px) { 
    .checkout-right { display: block;position: sticky;top: 88px; } 
	 .open-order-review-btn { background: var(--gcp-gold); color: #000; border-radius: 8px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-size: 15px; width:100%; }
 .open-order-review-btn:hover { background: var(--gcp-bg); color: var(--gcp-gold); border: 1px solid var(--gcp-gold); }
}

@media screen and (max-width: 1024px) {
    .goldika-mobile-checkout-footer.gcp-mobile-footer { display: flex; flex-direction: column; position: fixed !important; bottom: 0; left: 0; width: 100%; z-index: 9999; background: var(--gcp-card); border-top: 1px solid rgba(255,255,255,0.05); color: var(--gcp-text); }
    .gcp-drawer-toggle { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: var(--gcp-card); cursor: pointer; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--gcp-text); }
    .gcp-chevron { margin-left: 10px; color: var(--gcp-gold); }
    .gcp-drawer { padding: 0 15px; overflow: hidden; display: none; }
    .gcp-drawer hr { border-color: rgba(255,255,255,0.05); margin: 10px 0; }
    .gcp-drawer .gcp-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
    .gcp-drawer .total-final { font-weight: bold; font-size: 16px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; margin-top: 5px; }
    .gcp-bottom-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: var(--gcp-card); border-top: 1px solid rgba(255,255,255,0.05); }
    .gcp-total-sum { font-weight: 700; font-size: 18px; }
    .gcp-checkout, .open-order-review-btn { margin-top: unset !important; background: var(--gcp-gold); color: #000; padding: 8px 12px; border-radius: 8px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-size: 15px; }
    .gcp-checkout:hover, .open-order-review-btn:hover { background: var(--gcp-bg); color: var(--gcp-gold); border: 1px solid var(--gcp-gold); }
    .form-row.place-order{padding:0 !important;}

}

/* Your manual loader used in the left form */
.checkout-loader {
    position: absolute; 
    inset: 0;
    background: rgba(35, 38, 45, 0.8) !important; /* Fixed: use rgba for alpha */
    display: none; /* Hidden by default, JS shows it */
    align-items: center; 
    justify-content: center;
    z-index: 999; 
    border-radius: 12px;
}
/* ==========================================================================
   WOOCOMMERCE SPINNER OVERWRITE
   ========================================================================== */

/* 1. Reset the BlockUI Message (The white box/dots) */
.blockUI.blockMsg.blockElement {
    border: none !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 2. Remove default WC loading icons/GIFs */
.woocommerce .blockUI.blockOverlay::before,
.woocommerce-page .blockUI.blockOverlay::before,
.woocommerce-checkout .blockUI.blockOverlay::before {
    background: none !important;
    content: none !important;
}

/* 3. Create the Gold Spinner on the Overlay */
.blockUI.blockOverlay::after ,
.checkout-loader .spinner{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    
    /* Matching your reference exactly */
    width: 28px !important;
    height: 28px !important;
    margin: -14px 0 0 -14px !important;
    
    border: 3px solid rgba(250, 175, 0, 0.2) !important;
    border-top-color: var(--gcp-gold) !important;
    border-radius: 50% !important;
    
    /* Using the exact same animation as your other items */
    animation: gcp-spin 0.8s linear infinite !important;
    z-index: 1001 !important;
}

/* 4. Ensure the background is dark and consistent */
.blockUI.blockOverlay {
    background: rgba(35, 38, 45, 0.8) !important;
    opacity: 1 !important;
    backdrop-filter: blur(2px);
}

/* 5. Hide any pulsing dots that might remain */
.blockUI.blockMsg .loading, 
.woocommerce .loader {
    display: none !important;
}

/* Shared Animation Keyframes */
@keyframes gcp-spin { 
    to { transform: rotate(360deg); } 
}
/* Hide everything while loading */
.custom-checkout-wrapper.is-loading .checkout-columns,
.custom-checkout-wrapper.is-loading .goldika-mobile-checkout-footer {
    display: none !important;
}

/* Loader Styling */
.initial-checkout-loader {
    display: none;
    min-height: 400px;
    align-items: center;
    justify-content: center;
}

.custom-checkout-wrapper.is-loading .initial-checkout-loader {
    display: flex;
}

.initial-checkout-loader .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(250, 175, 0, 0.1);
    border-top: 4px solid #FAAF00; /* Gold color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }