/*
Theme Name: Twenty Twenty-Five SAKANiTech Child
Theme URI: https://www.sakanitech.ae
Description: A child theme for Twenty Twenty-Five customized for SAKANiTech.
Author: SAKANiTech
Author URI: https://www.sakanitech.ae
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-SAKANiTech-child
*/



/* === AQ Codes Start Here | Enable Smooth Scrolling for the Whole Page === */
html {
    scroll-behavior: smooth; /* This makes all internal links scroll smoothly */
    -webkit-scroll-behavior: smooth; /* Add this for Safari */
}


/* --------------------------------------------------------------
Define Colors of the Website
   -------------------------------------------------------------- */


/* Common Colors */
:root {
    --primary-color: #BC996E;
    --primary-color-light: #F0EDE6;
    --background-color: #F0EDE6;
    --text-color: #2D2926;
}


/* --------------------------------------------------------------
Woo Commerce Product Listing Customization (size of product images, etc.)
   -------------------------------------------------------------- */

/* Reduce size of product container */
.wc-block-product {
    max-width: 250px; /* Adjust width as needed */
    margin: auto; /* Center it */
}

/* Ensure image and price are properly aligned */
.wc-block-product img {
    max-width: 100%; /* Keep image responsive */
    height: auto;
}

.wc-block-grid__product-price {
    text-align: center;
    font-size: 1rem; /* Adjust font size if needed */
}




.wps_sfw_free_trial,
.wps_sfw_signup_fee {
    display: none !important;
}



/*
*******************************************************
style of all buttons
*******************************************************


/***********************************************************/


input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #F0EDE6; /* Default border color */
  border-radius: 50%;
  outline: none;
  background-color: transparent;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/* Checked Radio Button - Gold */
input[type="radio"]:checked {
    background: #BC996E /* beige */
    
}

/* --------------------------------------------------------------
   Custom Form Styling for All Forms on the Website
   ==== ALL FORMS, ALL LABELS, ALL FORM INPUTS, ALL FORM ERRORS, ALL PLACEHOLDERS,  ====
   These styles are applied to all forms across the website.
   -------------------------------------------------------------- */

/* Form container styling */
form {
/*
Disabled for the checkout form to work - apply max width localy in forms, where needed.
max-width: 400px; // Set maximum width for the form to ensure it doesn't stretch too wide
*/

    margin: 20px auto; /* Center the form horizontally and give it 20px of margin from top and bottom */
    padding: 20px; /* Add padding inside the form for spacing */
    border-radius: 50px; /* Apply rounded corners to the form container */
    border: 1px solid #BC996E; /* Set a gold-colored border around the form */
    background-color: #F0EDE6; /* Light beige background to match the theme */
    text-align: left; /* Center the text inside the form for better visual appeal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: #F0EDE6;

}


/* Labels */
form label {
    display: block; /* Ensure the label and the form input are separate from the next label */
    font-weight: bold;
    max-width: 100%; /* Prevents labels from overflowing the form */
    word-wrap: break-word; /* Ensures long labels wrap inside the form */
    overflow-wrap: break-word; /* Alternative for better compatibility */

}


/* Styling for all input fields within forms */
form input {
    width: 100%; /* Set input fields to take the full width of the form container */
    padding: 10px; /* Add padding inside input fields for better readability */
    margin: 5px 0; /* Tight vertical spacing between input fields */
    border: 1px solid #BC996E; /* Gold-colored border for each input field */
    border-radius: 5px; /* Rounded corners for the input fields */
    font-size: 14px; /* Slightly smaller font size for better alignment */
    color: #BC996E; /* Gold text color */
    font-family: inherit; /* Uses the default font from the parent element */
    /* font-weight: bold; Make text inside input bold */


    background-color: #fff; /* White background for clarity inside input fields */
    box-sizing: border-box; /* Include padding and border in the element's total width */
	display: block /* Ensures inputs take up full width */
}


/* --------------------------------------------------------------
   Start of custom form styles for Password Wrapper / Toggle Eye Form Inputs
   -------------------------------------------------------------- */  

   .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-wrapper input {
    width: 100%;
    padding: 10px;
    padding-right: 40px; /* Space for the icon */
    border: 1px solid #BC996E; /* Gold border */
    border-radius: 5px;
    font-size: 16px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    cursor: pointer;
    color: #BC996E; /* Gold color */
    font-size: 18px;
}

.password-toggle:hover {
    background-color: #F0EDE6; /* SAKANiTech Black - Darken the button color when hovering over it */
}

/* --------------------------------------------------------------
   Start of custom form styles for ALL INPUT CHECKBOXES IN THE FORMS
   -------------------------------------------------------------- */  
/*  checkbox-container which contains the checkbox-label and the input type="checkbox" */
.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centers everything horizontally */
    gap: 8px; /* Adds space between checkbox and text */
    margin-top: 10px; /* Extra spacing from the "Forgot Password" link */
}

   /* Styling for form Checkbox */
form input[type="checkbox"] {
    margin-top: 10px;/* Add space between the checkbox and the above form fields */
    margin-bottom: 10px;/* Add space between the checkbox and the above form fields */
    margin-left: 5px; /* Add space between the checkbox and the form border */
	margin-right: 18px; /* Add space between the checkbox and the label text */
    vertical-align: middle; /* Align the checkbox vertically with the text */
    display: inline-block; /* Make the checkbox appear inline with the text */
    transform: scale(1.3); /* Scale the checkbox to make it bigger */
    cursor: pointer; /* Change the cursor to a pointer when hovering over the checkbox */
    appearance: none; /* Remove default checkbox styling */
    width: 15px; /* Set width */
    height: 15px; /* Set height */
    border-radius: 5px; /* Optional: Makes it slightly rounded */
}

form input[type="checkbox"]:checked::before {
    content: "\2713"; /* Unicode checkmark */
    font-size: 14px;
    font-weight: bold;
    color: #BC996E; /* Gold checkmark */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Error message === form p === styling */
form p {
    font-size: 14px; /* Set the font size for error messages */
    color: #BC996E; /* Red color for error text */
    font-weight: bold;
}

/* Placeholder text styling for input fields */
form input::placeholder {
    color: #BC996E; /* Set placeholder text color to gold */
    font-style: italic; /* Make the placeholder text italicized for emphasis */
}





/* --------------------------------------------------------------
   End of custom form styles for All Forms on the Website
   -------------------------------------------------------------- */

/* --------------------------------------------------------------
   Start of custom form styles for ALL BUTTONS IN THE FORMS
   -------------------------------------------------------------- */

/* Center the buttons inside the form */
.form-buttons-container {
    text-align: left; /* Aligns inline-block elements to the left */
    display: flex;
    justify-content: flex-start; /* Aligns buttons to the left */
    gap: 10px; /* Controls the space between buttons */
    margin-top: 15px; /* Adds spacing above the button area */
}


/* --------------------------------------------------------------
   Start of custom form styles for ALL BUTTONS (i.e. class = button)
   -------------------------------------------------------------- */

/* --------------------------------------------------------------
   Start of custom form styles for CLASS = form-button-primary ALL PRIMARY BUTTONS IN THE FORMS
   To use this, create a button like this: <button class="form-button-primary">Click Me</button>
   -------------------------------------------------------------- */   

/* Primary Button (Highlighted) */
.form-button-primary {
    display: inline-block; /* or block? */
    padding: 12px 20px;
    margin: 15px 0 0 0; /* Adds 15px space to the right of the button *//* Auto margin centers it + Add vertical margin around the button for spacing */
    border: 1px solid; 
    border-color: #BC996E; /* Gold border */
    border-radius: 5px; /* Apply rounded corners to the submit button */
    background-color: #BC996E; /* Gold */
    
    color: #F0EDE6; /*SAKANiTech Beige Color for the text*/
    font-weight: bold;
    font-size: 20px;/* Larger font size for better visibility */
    font-family: inherit; /* Uses the default font from the parent element */
    text-align: center; /* Center the button inside the form for better visual appeal */
    text-decoration: none;

    cursor: pointer; /* Change the cursor to a pointer when hovering over the button */
    transition: background-color 0.3s ease; /* Smooth transition effect for background color change */
    
    box-sizing: border-box; /* Ensures padding and border are included in width/height */
    
    margin-right: 15px; /* distance from the next button */

}

.form-button-primary:hover {
/*    background-color: #A87F55; /* Darker Gold */ 
    background-color: #2D2926; /* SAKANiTech Black - Darken the button color when hovering over it */
}

/* --------------------------------------------------------------
   Start of custom form styles for ALL SECONDARY BUTTONS IN THE FORMS
   -------------------------------------------------------------- */   

/* Secondary Button (Cancel/Back) */
.form-button-secondary {
    display: inline-block; /* or block? */
    padding: 12px 20px;
    margin: 15px 0 0 0; /* Adds 15px space to the right of the button *//* Auto margin centers it + Add vertical margin around the button for spacing */
    border: 1px solid; 
    border-color: #BC996E; /* Gold border */
    border-radius: 5px; /* Apply rounded corners to the submit button */
    background-color: transparent; /* SAKANiTech Beige */
    
    color: #BC996E; /*SAKANiTech Gold Color for the text*/
    font-weight: bold;
    font-size: 20px;/* Larger font size for better visibility */
    font-family: inherit; /* Uses the default font from the parent element */
    text-align: center; /* Center the button inside the form for better visual appeal */
    text-decoration: none;

    cursor: pointer; /* Change the cursor to a pointer when hovering over the button */
    transition: background-color 0.3s ease; /* Smooth transition effect for background color change */
    
    box-sizing: border-box; /* Ensures padding and border are included in width/height */
}

.form-button-secondary:hover {
    background-color: #2D2926; /* SAKANiTech Black - Darken the button color when hovering over it */
}

/* --------------------------------------------------------------
   Start of custom form styles for ALL RED BUTTONS IN THE FORMS
   -------------------------------------------------------------- */   

/* Primary Button (Highlighted) */
.form-button-red {
    display: inline-block; /* or block? */
    padding: 12px 20px;
    margin: AUTO;/* Auto margin centers it + Add vertical margin around the button for spacing */
    border: none; /* Remove the default border around the button */
    border-radius: 5px; /* Apply rounded corners to the submit button */
    background-color: #D9534F; /* RED */
    
    color: #F0EDE6; /*SAKANiTech Beige Color for the text*/
    font-weight: bold;
    font-size: 20px;/* Larger font size for better visibility */
    font-family: inherit; /* Uses the default font from the parent element */
    text-align: center; /* Center the button inside the form for better visual appeal */
    text-decoration: none;

    cursor: pointer; /* Change the cursor to a pointer when hovering over the button */
    transition: background-color 0.3s ease; /* Smooth transition effect for background color change */

}

.form-button-red:hover {
/*    background-color: #A87F55; /* Darker Gold */ 
    background-color: #2D2926; /* SAKANiTech Black when hovering over it */
}


/* --------------------------------------------------------------
   Start of custom form styles for Textarea (free text) inside forms
   -------------------------------------------------------------- */

form textarea {
    width: 100%;
    max-width: 100%;
    min-height: 150px;
    resize: vertical;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #BC996E; /* Gold border */
    box-sizing: border-box;
    font-family: inherit; /* Uses the default font from the parent element */

/*    font-family: 'Playfair Display', serif; */    
    color: #BC996E; /* Gold text */

    font-style: italic; /* Italic text inside the box */

    font-size: 16px;
    line-height: 1.5;
    
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* On focus, highlight the textarea */
form textarea:focus {
    border-color: #F0EDE6; /* Beige border on focus */
/*    background-color: #F0EDE6;  biege background */
    outline: none;
    box-shadow: 0 0 8px rgba(188, 153, 110, 0.5); /* Soft gold glow */
}

/* Placeholder color */
form textarea::placeholder {
    color: rgba(188, 153, 110, 0.6); /* Lighter gold */
    font-style: italic;
}


/* --------------------------------------------------------------
   Start of custom form styles for calendar Date Pickers inside forms
   -------------------------------------------------------------- */
   
form input[type="date"] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #BC996E; /* Gold border */
    box-sizing: border-box;
    
    color: #BC996E; /* Gold text */
    font-size: 16px;
    line-height: 1.5;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    font-family: inherit; /* Uses the default font from the parent element */

/*    font-family: 'Playfair Display', serif; */
/*    font-style: italic; Italic text inside the input */
/*  background-color: #2D2926;  Black background */

    
}

/* On focus, highlight the date input */
form input[type="date"]:focus {
    border-color: #F0EDE6; /* Beige border on focus */
    outline: none;
    box-shadow: 0 0 8px rgba(188, 153, 110, 0.5); /* Soft gold glow */
}

/* Styling the calendar dropdown (for WebKit browsers) */
form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(75%) sepia(60%) saturate(250%) hue-rotate(10deg);
    opacity: 0.8; /* Slight transparency */
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
}

/* On hover, make the calendar icon more visible */
form input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
   









/* --------------------------------------------------------------
   Custom Form Styling for Woocommerce Forms on the Website
   These styles are applied to all woocommerce areas across the website.
   -------------------------------------------------------------- */


/* the right side to be expanded a little bit to fill the form */
.shop_table.woocommerce-checkout-review-order-table {
    width: 100%;
}

.shop_table.woocommerce-checkout-review-order-table th,
.shop_table.woocommerce-checkout-review-order-table td {
    width: auto;
    min-width: 180px;
    padding: 10px;
    text-align: left;
}



/*******GLOBAL STRUCTURAL LAYOUT*******/


/* This section to display on phone the order details above the customer billing details */
@media (max-width: 979px) {
    form[name="checkout"] {
        flex-direction: column-reverse; /* This moves the order review above the billing details */
    }

    .woocommerce-checkout #order_review {
        width: 95%; /* Full width on mobile */
        margin-bottom: 1em; /* Space below order summary */
    }

    .woocommerce-checkout .woocommerce .col2-set {
        width: 83%; /* Full width for billing details */
    }
}






/* important: this is to ensure that the billing details left side doesn't float outside the parent which is the form checkout (which is the billing details) */
form[name="checkout"] {
    display: flex ;
    justify-content: space-between;
    flex-wrap: wrap;
    border: none;
}

/*
delete - this has a global effect on all woocommerce forms 
.woocommerce {
    display: flex;
    flex-direction: column;
}
*/

/* WooCommerce Layout Structure */
/*@media (min-width: 980px) { */
@media (min-width: 970px) {
    /* Billing Details Side */
    .woocommerce-checkout .woocommerce .col2-set,
    .woocommerce-checkout .woocommerce-page .col2-set {
  float: left; 
     width: 40%; 
    }
    /* Order Review Side */
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout .woocommerce #order_review,
    .woocommerce-checkout .woocommerce-page #order_review {
        float: left;
        width: 45%;
        margin-left: 2%;
    }
}

@media (max-width: 979px) {
    /* Billing Details Margin */
    .woocommerce-checkout .woocommerce .col2-set,
    .woocommerce-checkout .woocommerce-page .col2-set {
        margin-bottom: 1em;
    }
}

/*******LEFT SIDE DESIGN*******/

/* Form Container [i.e. billing details] Styles */
.woocommerce-checkout .woocommerce .col2-set,
.woocommerce-checkout .woocommerce-page .col2-set {
    background: transparent;
    padding: 1em 2em; 
    border-radius: 2em;
    border: 1px solid #BC996E;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
    float: left;
    width: 100%;
    
}

/* Form Field Title Styles */
label,
input,
button,
select,
textarea {
    font-size: 12px;
    line-height: 1.7;
/*    text-transform: uppercase !important; */
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.5em;
}



/* Form Field Styles */
input.text,
input.title,
input[type=email],
input[type=password],
input[type=tel],
input[type=text],
select,
textarea {
    border: 1px solid #BC996E;
    border-radius: 15px;
    background-color: white;
    height: 4em;
    color: #BC996E !important; /* Gold text inside fields */
}

/* Placeholder text also in gold */
input::placeholder,
textarea::placeholder {
    color: #BC996E;
    opacity: 1; /* Ensure visibility */
}
















.woocommerce-account form .form-row,
.woocommerce-checkout form .form-row {
    margin-bottom: 1em;
}

/* Form Field Dropdown Styles */
.select2-container--default .select2-selection--single {
    background-color: white;
    border: 1px solid #BC996E;
    border-radius: 5px;
/*    height: 4em; */
}




.woocommerce-account form .payment_methods label,
.woocommerce-checkout form .payment_methods label {
    padding-left: 0px;
}



/* Set Default Border Color of the inputs to Gold */
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper textarea,
.woocommerce-input-wrapper select {
    border: 1px solid #BC996E !important; /* Gold border */
    border-radius: 10px; /* Optional: Slightly rounded corners */
    padding: 8px; /* Adjust padding for better spacing */
    transition: border-color 0.3s ease; /* Smooth transition effect */
}

/* Keep Focus Border Styling */
.woocommerce-input-wrapper input:focus,
.woocommerce-input-wrapper textarea:focus,
.woocommerce-input-wrapper select:focus {
    border-color: var(--primary-color) !important; /* Use primary brand color on focus */
    outline: none; /* Remove default outline */
}



/*******RIGHT SIDE DESIGN*******/

/* Order Review Headline Removal */
#order_review_heading {
    display: none; /*Remove This if You Want The Order Review Heading*/
}

/* Order Review Container Styles */
#order_review {
    background: transparent;
    padding: 0.5em;
    border-radius: 2em;
    box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.1);
    border: 1px solid;
    border-color: var(--primary-color); /* hide border of the right side column*/
/*
position: sticky; /*Remove This if You Don't Want Order Review To Be Sticky*/
/*    top: 100px; /*Remove This if You Don't Want Order Review To Be Sticky*/

}
/*Order Review Order*/

#order_review {
    display: flex;
    flex-direction: column; /*Change this to column-reverse to reverse the order, otherwise use "column"*/

}

/*Hide Cart Contents and Only Show Total + Shipping*/

.woocommerce-checkout-review-order tbody {
  display: table-row-group; /*Set to "none" if you'd like to hide or table-row-group if you want to show*/
  border: 1px solid transparent; /*hide the border around the ordered items */
}

/* Remove Product and Subtotal Headlines */
table.shop_table.woocommerce-checkout-review-order-table thead {
    display: none; /*Remove This if You Want Headlines*/
    
}

/* Hide WooCommerce Billing Fields Headings */
.woocommerce-billing-fields h3 {
    display: none !important;
}



/* Hide WooCommerce Additional Fields Headings i.e. Additional Information */
.woocommerce-additional-fields h3 {
    display: none !important;
}



table.shop_table.woocommerce-checkout-review-order-table {
    color: var(--text-color);
    text-transform: Capitalize;
    font-size: 12px; /*Adjust This To Adjust Order Review Font Size*/
    
}

.woocommerce table.shop_table {
 border: none;

}

/* Target every other cart item and set background color */
tr.cart_item:nth-child(odd) {
    background-color: transparent !important;
}

tr.cart_item:nth-child(even) {
    background-color: white !important;
}

span.woocommerce-Price-amount.amount {
    
    font-weight: bold;
}


strong.product-quantity {
    background: var(--primary-color);
    padding: 0.1em 0.5em;
    border-radius: 0.5em;
    font-size: 12px;
    
}

.woocommerce td.product-name .wc-item-meta p,
.woocommerce td.product-name .wc-item-meta:last-child,
.woocommerce td.product-name dl.variation p,
.woocommerce td.product-name dl.variation:last-child {
    margin-bottom: 0;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: normal;
  	color: var(--text-color);
}

td.product-name {
    width: 100%;
    font-weight: bold;

}

td.product-total {
    justify-content: flex-start;
    display: flex;
        
}

table th,
table td {
    border: none !important;
}

tr.cart-subtotal {
    display: none; /*Remove this if you'd like to display the subtotal*/
}

tr.woocommerce-shipping-totals.shipping {
    display: flex;
    margin-top: 2em;
    margin-bottom: 2em;
    border-top: 1px solid var(--primary-color-light);
    border-bottom: 1px solid var(--primary-color-light);
    flex-direction: column;
    align-content: stretch;
    align-items: flex-start;
}

.woocommerce ul#shipping_method li input {
    margin: 5px 5px 0 0;
    vertical-align: top;
}

/* Order Total Line Item Styles */
tr.order-total {
    color: var(--primary-color);
    background-color: var(--primary-color-light);
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
    background: white;
    border: 1px solid;
    border-color: #BC996E;
    border-radius: 2em; /*border-radius of the payment method*/
}

/* the payment method side */
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
    background-color: transparent;
    color: #2D2926;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
    display: none;
}

/* Stripe Form Field Styles */
.wc-stripe-elements-field,
.wc-stripe-iban-element-field {
    border: 1px solid white;
    border-radius: 5px;
    background-color: #fff;
    padding: 15px;
}

input#wc-stripe-new-payment-method {
    margin-right: 1em;
}

fieldset#wc-authnet-cc-form .input-text {
    height: 2em;
}

/* Place Order Button Styles */
#place_order {
    width: 100%;
    color: var(--background-color);
    border: none;
    box-shadow: rgba(0, 0, 0, 0.28) 0px 2px 8px 0px;
    padding: 1.5em;
    background: var(--primary-color); /* Change This to Change Button Color */
    border-radius: 5px;
        transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;

}

#place_order:hover {
    color: var(--background-color);
    background: var(--text-color); /* Change This to Change Hover Button Color */
    /* transition for hover */

}

/*******COUPON & ALERT STYLES*******/

.woocommerce-info,
.woocommerce-message {
    background-color: var(--background-color);
    color: var(--text-color);
    border: none;
}

.checkout_coupon p.form-row.form-row-last {
    float: none;
}

.checkout_coupon button.button {
    background-color: var(--primary-color);
    color: white;
}

/* Coupon Icon */
.woocommerce-info::before,
.woocommerce-error::before {
    display: none;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    padding: 1em;
}

form.checkout_coupon.woocommerce-form-coupon {
    padding: 3em;
    background: white;
    border-radius: 1em;
    margin-top: 0em;
    margin-bottom: 2em;
}

/* Error Alert */
.woocommerce-error {
    background-color: #ff7e7e;
    border: none;
    color: #761f1f; /* Dark red for better contrast */
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    text-shadow: none;
}



/* Change Default Blue Notice Banner */
.wc-block-components-notice-banner.is-info {
    background-color: #F0EDE6 !important; /* Light beige background */
    border-left: 4px solid #BC996E !important; /* Gold left border */
    border-right: 1px solid #BC996E;
    border-bottom: 1px solid #BC996E;
    border-top: 1px solid #BC996E;
    border-radius: 15px;
    color: #2D2926 !important; /* Dark text */
}

/* Hover Effect for Links */
.wc-block-components-notice-banner.is-info a:hover {
    color: #2D2926; /* SAKANiTech Black */
}



/* Style the "Have a coupon?" text */
.woocommerce-form-coupon-toggle p {
    color: #2D2926; /* Dark text */
    font-weight: 500;
}

/* Style the "Click here to enter your code" link */
.woocommerce-form-coupon-toggle a {
    color: #BC996E; /* Gold color */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover effect for the link */
.woocommerce-form-coupon-toggle a:hover {
    color: #b28a5f; /* Slightly darker gold */
}


/* Style the Submit Button Inside the Coupon Form */
form.checkout_coupon.woocommerce-form-coupon button {
    background: #BC996E !important; /* Gold background */
    color: #F0EDE6 !important; /* SAKANiTech beige text color */
    border: none;
    border-radius: 15px; /* Rounded corners */
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Hover Effect */
form.checkout_coupon.woocommerce-form-coupon button:hover {
    background: #2D2926 !important; /* Black on hover */
    color: #F0EDE6 !important; /* Beige text on hover */

}

/* Adjust Padding for WooCommerce Coupon Form */
form.checkout_coupon.woocommerce-form-coupon {
    background: transparent;
    border: 1px solid #BC996E;
    padding: 10px !important; /* Reduce overall padding */
    margin: 0; /* Remove any extra margins */
    border-radius: 15px; /* Optional: Slightly rounded corners */
}


/* Change Discount Coupon Text Color to Green */
.cart-discount.coupon-testfree th,
.cart-discount.coupon-testfree td {
    color: green;
}


/* Hide billing country, state, and phone fields */
label[for="billing_country"], #billing_country,
label[for="billing_state"], #billing_state,
label[for="billing_phone"], #billing_phone,
.select2-container--default[id*="billing_state"],
.select2-container {
    display: none !important;
}

/* Hide billing country, state, and phone fields */
#billing_country_field, 
#billing_state_field, 
#billing_phone_field {
    display: none !important;
}

/* the stripe card warning is displayed in gold, display it in red */
.wps_sfw_experimental_feature_notice {
    color: #BC996E !important; /* Gold color */
}