/**
 * File: woo-account.css
 * Purpose: Layout and styling for the WooCommerce "My Account" area
 * Usage: Applies to dashboard, orders, addresses, and account pages
 *
 * Dependencies:
 *   - WooCommerce + Divi modules
 *   - FontAwesome & ETModules (for icons)
 *   - Global CSS variables for form/input styles
 *
 * Layout Overview:
 * - Flex layout with `.custom-account .woocommerce`
 * - Responsive adjustments at 820px and 768px
 * - Section headers injected with `::before` for context
 * - Shared input/form styles reused across checkout/cart
 *
 * Notes:
 * - May eventually split off shared inputs to `woo-forms.css`
 * - Scoped under `.woocommerce-account` and `.custom-account` where applicable
 */


 /* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

.woocommerce {
--woo-account-content-border-color: var(--gray-medium);
--woo-account-content-bg-color: var(--white);

--woo-form-input-bg-color: var(--global-form-input-bg-color);
--woo-form-input-font-color: var(--global-form-input-font-color);
--woo-form-input-font-hover-color: var(--global-form-input-font-hover-color);
--woo-form-input-font-focus-color: var(--global-form-input-font-focus-color);
--woo-form-input-border-color: var(--global-form-input-border-color);
--woo-form-input-border-hover-color: var(--global-form-input-border-hover-color);
--woo-form-input-border-focus-color: var(--global-form-input-border-focus-color);

}

/* -------------------------- */





.woocommerce-account .woocommerce-MyAccount-content {
    width: 75%;
    border: solid var(--woo-account-content-border-color);
    border-radius: 30px 0 30px 0;
    border-width: 3px 1px;
    padding: 0px 30px 30px 30px;
    margin: 2.5% 0px 2.5% 2.5%;
    background-color: var(--woo-account-content-bg-color);
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
  .woocommerce-account .woocommerce-MyAccount-content {
      width: auto;
      border-radius: 30px 0 30px 0;
      border-width: 3px 1px;
      padding: 0px 30px 30px 30px;
      margin: 2.5%;
  }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-content {
      width: auto;
      border-radius: 30px 0 30px 0;
      border-width: 3px 1px;
      padding: 0px 15px 30px 15px;
      margin: 10% 2.5%;
  }
}

.woocommerce-account .woocommerce-MyAccount-content::before{
    font-weight: 600;
    font-size: 1.25em;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height:3.75em;
}

body.woocommerce-dashboard .woocommerce-MyAccount-content::before {
    content: "Dashboard";
}

body.woocommerce-orders .woocommerce-MyAccount-content::before {
  content: 'Orders';
}

body.woocommerce-edit-address .woocommerce-MyAccount-content::before {
  content: 'Addresses';
}

body.woocommerce-edit-account .woocommerce-MyAccount-content::before {
    content: "Account Details";
}

.custom-account .woocommerce {
    display: flex;
    padding: 0 5%;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

/* Tablet & mobile Styles */
@media all and (max-width: 820px) {
  .custom-account .woocommerce {
      flex-direction: column;
      width:100%;
      padding:0;
  }
}

.et_pb_wc_cart_totals .select2-container--default .select2-selection--single, 
.et_pb_wc_checkout_billing .select2-container--default .select2-selection--single, 
.et_pb_wc_checkout_shipping .select2-container--default .select2-selection--single, 
.woocommerce-cart table.cart td.actions .coupon .input-text, 
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea {
    background-color: var(--woo-form-input-bg-color);
    max-width: 100%;
    border-width: 2px 1px;
    border-radius: 0;
    color: var(--woo-form-input-font-color);
    font-size: 12px;
    padding: 10px 15px;
    text-transform: uppercase;
    border-style: solid;
    border-color: var(--woo-form-input-border-color);
    font-weight: 600;
    transition: all 500ms ease;
}

.et_pb_wc_cart_totals .select2-container--default .select2-selection--single:hover, 
.et_pb_wc_checkout_billing .select2-container--default .select2-selection--single:hover, 
.et_pb_wc_checkout_shipping .select2-container--default .select2-selection--single:hover, 
.woocommerce-cart table.cart td.actions .coupon .input-text:hover, 
.woocommerce form .form-row input.input-text:hover, 
.woocommerce form .form-row textarea:hover {
    border-width: 2px 1px;
    border-style: solid;
    border-color: var(--woo-form-input-border-hover-color);
}

.et_pb_wc_cart_totals .select2-container--default .select2-selection--single:focus, 
.et_pb_wc_checkout_billing .select2-container--default .select2-selection--single:focus, 
.et_pb_wc_checkout_shipping .select2-container--default .select2-selection--single:focus, 
.woocommerce-cart table.cart td.actions .coupon .input-text:focus, 
.woocommerce form .form-row input.input-text:focus, 
.woocommerce form .form-row textarea:focus {
    border-width: 2px 1px;
    border-style: solid;
    border-color: var(--woo-form-input-border-focus-color);
    color: var(--woo-form-input-font-focus-color);
}

.custom-account .woocommerce form .form-row {
    padding: 0px;
    margin: 0 0 1em;
}

.custom-account .woocommerce form .form-row label {
    line-height: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    font-size: 12px;
}

.custom-account legend{
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 3.75em;
  padding-top: 1em;
}

.custom-account button.woocommerce-Button.button,
.custom-account button.button {
    margin-top: 3em;
    float: right;
}


.custom-account .select2-container .select2-dropdown, 
.custom-account .select2-container .select2-selection {
    border: solid var(--woo-form-input-border-color);
    border-radius: 0px;
    border-width: 2px 1px;
    padding: 7px 10px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    color: var(--woo-form-input-font-color);
    transition: all 500ms ease;
}

.custom-account .select2-container .select2-dropdown:hover, 
.custom-account .select2-container .select2-selection:hover {
    border: solid var(--woo-form-input-border-hover-color);
    border-radius: 0px;
    border-width: 2px 1px;
    color:var(--woo-form-input-font-hover-color);
}

.comment-content address, 
.entry-content address, 
body.et-pb-preview #main-content 
.container address {
    border-top: 2px solid var(--woo-account-content-border-color);
}

.woocommerce-account .addresses .title .edit {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.woocommerce-dashboard .custom-account .woocommerce-MyAccount-content p a {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    font-weight: 700;
}