/* ========================================
   WooCommerce My-Account Page Styles
   NOVATEPLICA Theme - Minimalist Clean Design
   ======================================== */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --account-primary: #3bc54e;
    --account-primary-hover: #2da842;
    --account-text: #333333;
    --account-text-light: #666666;
    --account-text-muted: #9ca3af;
    --account-border: #e5e7eb;
    --account-bg: #f9fafb;
    --account-card-bg: #ffffff;
    --account-info-bg: #e8f4fd;
    --account-info-border: #2196f3;
    --account-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --account-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --account-radius: 8px;
    --account-transition: all 0.2s ease;
}

[data-theme="dark"] {
    --account-text: #f3f4f6;
    --account-text-light: #9ca3af;
    --account-text-muted: #6b7280;
    --account-border: #374151;
    --account-bg: #0b0f19;
    --account-card-bg: #1f2937;
    --account-info-bg: #1e3a5f;
    --account-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --account-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Dark theme specific overrides */
[data-theme="dark"] .woocommerce-account .woocommerce-Address {
    background: #374151;
    border-color: #4b5563;
}

[data-theme="dark"] .woocommerce-orders-table thead {
    background: #374151;
}

[data-theme="dark"] .woocommerce-orders-table tbody tr:hover {
    background: #374151;
}

[data-theme="dark"] .woocommerce-MyAccount-navigation {
    background: #1f2937;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .woocommerce-MyAccount-navigation li a:hover {
    background: rgba(59, 197, 78, 0.15);
}

[data-theme="dark"] .woocommerce-account .woocommerce-message {
    background: #1e3a5f;
    color: #60a5fa;
    border-left-color: #3b82f6;
}

[data-theme="dark"] .woocommerce-account .woocommerce-error {
    background: #3f1f1f;
    color: #f87171;
    border-left-color: #ef4444;
}

/* Dark theme - Order Details */
[data-theme="dark"] .woocommerce-order-overview li {
    background: #374151;
    border-color: #4b5563;
}

[data-theme="dark"] .woocommerce-table.order_details {
    background: var(--account-card-bg);
}

[data-theme="dark"] .woocommerce-table.order_details thead {
    background: transparent;
    border-bottom-color: #4b5563;
}

[data-theme="dark"] .woocommerce-table.order_details tbody tr {
    border-bottom-color: #374151;
}

[data-theme="dark"] .woocommerce-table.order_details tfoot {
    background: #374151;
}

[data-theme="dark"] .woocommerce-table.order_details tfoot tr {
    border-bottom-color: #4b5563;
}

[data-theme="dark"] .woocommerce-column {
    background: #374151;
    border-color: #4b5563;
}

[data-theme="dark"] .woocommerce-customer-details--note {
    background: #3f3f1f;
    border-left-color: #ffc107;
}

[data-theme="dark"] .woocommerce-customer-details--note strong,
[data-theme="dark"] .woocommerce-customer-details--note p {
    color: #ffd54f;
}

/* ========================================
   Page Container
   ======================================== */


/* ========================================
   Main Layout - Desktop Sidebar
   ======================================== */
@media (min-width: 993px) {
    .woocommerce-account .woocommerce {
        display: flex !important;
        align-items: flex-start !important;
        gap: 40px !important;
        margin: 0 auto !important;
        padding: 12px 0 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: 0 0 280px !important;
        margin-bottom: 0 !important;
        position: sticky;
        top: 20px;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        flex: 1 !important;
        min-width: 0;
        /* Prevent overflow */
    }
}

/* ========================================
   Navigation - Vertical Sidebar (Desktop)
   ======================================== */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--account-card-bg);
    border-radius: var(--account-radius);
    box-shadow: var(--account-shadow-md);
    padding: 10px 0;
}

@media (max-width: 992px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Vertical by default */
}

@media (max-width: 992px) {
    .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
    }
}

.woocommerce-MyAccount-navigation li {
    margin: 0;
    width: 100%;
}

.woocommerce-MyAccount-navigation li a {
    display: flex;
    flex-direction: row;
    /* Icon and text side-by-side */
    align-items: center;
    gap: 15px;
    padding: 14px 25px;
    color: var(--account-text-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: var(--account-transition);
    position: relative;
    border-left: 3px solid transparent;
    border-bottom: none;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .woocommerce-MyAccount-navigation li a {
        flex-direction: column;
        padding: 16px 20px;
        font-size: 13px;
        border-left: none;
        border-bottom: 3px solid transparent;
        min-width: 100px;
    }
}

.woocommerce-MyAccount-navigation li a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--account-text-muted);
    transition: var(--account-transition);
}

/* Navigation Icons */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before {
    content: '\f3fd';
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before {
    content: '\f291';
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before {
    content: '\f019';
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before {
    content: '\f3c5';
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before {
    content: '\f007';
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--wishlist a::before {
    content: '\f004';
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    content: '\f2f5';
}

/* Active & Hover States */
.woocommerce-MyAccount-navigation li a:hover {
    color: var(--account-primary);
    background: rgba(59, 197, 78, 0.05);
}

.woocommerce-MyAccount-navigation li a:hover::before {
    color: var(--account-primary);
}

.woocommerce-MyAccount-navigation li.is-active a {
    color: var(--account-primary);
    background: rgba(59, 197, 78, 0.05);
    border-left-color: var(--account-primary);
}

@media (max-width: 992px) {
    .woocommerce-MyAccount-navigation li.is-active a {
        border-left-color: transparent;
        border-bottom-color: var(--account-primary);
    }
}

.woocommerce-MyAccount-navigation li.is-active a::before {
    color: var(--account-primary);
}

/* ========================================
   Content Area
   ======================================== */
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--account-card-bg);
    border-radius: var(--account-radius);
    box-shadow: var(--account-shadow-md);
    padding: 40px;
    min-height: 400px;
}

/* Page Titles */
.woocommerce-account h2,
.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--account-text);
    margin-bottom: 24px;
}

.woocommerce-account h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--account-text);
    margin-bottom: 16px;
}

/* ========================================
   Dashboard
   ======================================== */
.woocommerce-MyAccount-content p {
    color: var(--account-text-light);
    line-height: 1.7;
    margin-bottom: 16px;
}

.woocommerce-MyAccount-content a {
    color: var(--account-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--account-transition);
}

.woocommerce-MyAccount-content a:hover {
    color: var(--account-primary-hover);
}

/* ========================================
   Empty States - Minimalist Style
   ======================================== */
.woocommerce-account .woocommerce-info {
    text-align: center;
    padding: 80px 20px;
    background: transparent;
    border: none;
    margin: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--account-text);
    line-height: 1.6;
}

.woocommerce-account .woocommerce-info::before {
    content: '';
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23e0e0e0' d='M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zM128 128c0-52.935 43.065-96 96-96s96 43.065 96 96v32H128v-32zm272 304c0 26.467-21.533 48-48 48H80c-26.467 0-48-21.533-48-48V192h64v48c0 8.837 7.163 16 16 16s16-7.163 16-16v-48h192v48c0 8.837 7.163 16 16 16s16-7.163 16-16v-48h64v240z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Empty orders */
.woocommerce-orders .woocommerce-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23e0e0e0' d='M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zM128 128c0-52.935 43.065-96 96-96s96 43.065 96 96v32H128v-32zm272 304c0 26.467-21.533 48-48 48H80c-26.467 0-48-21.533-48-48V192h64v48c0 8.837 7.163 16 16 16s16-7.163 16-16v-48h192v48c0 8.837 7.163 16 16 16s16-7.163 16-16v-48h64v240z'/%3E%3C/svg%3E");
}

/* Empty downloads */
.woocommerce-downloads .woocommerce-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23e0e0e0' d='M216 0h-80c-13.3 0-24 10.7-24 24v168H24c-13.3 0-24 10.7-24 24v16c0 6.4 2.5 12.5 7 17l168 168c9.4 9.4 24.6 9.4 33.9 0l168-168c4.5-4.5 7-10.6 7-17v-16c0-13.3-10.7-24-24-24H272V24c0-13.3-10.7-24-24-24z'/%3E%3C/svg%3E");
}



.woocommerce-account .woocommerce-info a.button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: var(--account-primary);
    color: #ffffff;
    border-radius: var(--account-radius);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 24px;
}

.woocommerce-account .woocommerce-info a.button::before {
    content: '\f060';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
}

.woocommerce-account .woocommerce-info a.button:hover {
    background: var(--account-primary-hover);
}

/* ========================================
   Orders Table
   ======================================== */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    background: var(--account-card-bg);
}

.woocommerce-orders-table thead {
    background: transparent;
    border-bottom: 1px solid var(--account-border);
}

.woocommerce-orders-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--account-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce-orders-table tbody tr {
    border-bottom: 1px solid var(--account-border);
    transition: var(--account-transition);
}

.woocommerce-orders-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

.woocommerce-orders-table tbody td {
    padding: 16px;
    color: var(--account-text);
    font-size: 14px;
    vertical-align: middle;
}

/* Order Number */
.woocommerce-orders-table__cell-order-number a {
    font-weight: 600;
    color: var(--account-text);
    text-decoration: none;
}

.woocommerce-orders-table__cell-order-number a:hover {
    color: var(--account-primary);
}

/* Order Status Badge */
.woocommerce-orders-table__cell-order-status .order-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.order-status.processing {
    background: #fff3cd;
    color: #856404;
}

.order-status.completed {
    background: #d4edda;
    color: #155724;
}

.order-status.on-hold {
    background: #f8d7da;
    color: #721c24;
}

.order-status.cancelled,
.order-status.failed {
    background: #f8d7da;
    color: #721c24;
}

.order-status.pending {
    background: #d1ecf1;
    color: #0c5460;
}

/* Order Actions - Gray Minimal Button */
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .woocommerce-orders-table .button,
.my_account_orders .button {
    padding: 6px 14px;
    background: #6b7280;
    color: #ffffff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--account-transition);
    border: none;
}

.woocommerce-orders-table__cell-order-actions .button::before,
.woocommerce-account .woocommerce-orders-table .button::before,
.my_account_orders .button::before {
    content: '\f06e';
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-size: 13px;
}

.woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-account .woocommerce-orders-table .button:hover,
.my_account_orders .button:hover {
    background: #4b5563;
}

/* ========================================
   Forms
   ======================================== */
.woocommerce-account form {
    max-width: 100%;
}

.woocommerce-account .form-row {
    margin-bottom: 20px;
}

.woocommerce-account label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--account-text);
}

.woocommerce-account label .required {
    color: #dc3545;
    margin-left: 3px;
}

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account textarea,
.woocommerce-account select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--account-border);
    border-radius: var(--account-radius);
    font-size: 14px;
    color: var(--account-text);
    background: var(--account-card-bg);
    transition: var(--account-transition);
}

.woocommerce-account input:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus {
    border-color: var(--account-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 197, 78, 0.1);
}


/* ========================================
   Addresses
   ======================================== */
.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.woocommerce-account .woocommerce-Address {
    background: #f8f9fa;
    border: 1px solid var(--account-border);
    border-radius: var(--account-radius);
    padding: 24px;
    position: relative;
}

.woocommerce-account .woocommerce-Address-title h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--account-text);
    margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address address {
    font-style: normal;
    line-height: 1.7;
    color: var(--account-text-light);
    margin-bottom: 16px;
    font-size: 14px;
}

.woocommerce-account .woocommerce-Address .edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--account-primary);
    color: #ffffff;
    border-radius: var(--account-radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--account-transition);
}

.woocommerce-account .woocommerce-Address .edit::before {
    content: '\f304';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.woocommerce-account .woocommerce-Address .edit:hover {
    background: var(--account-primary-hover);
}

/* ========================================
   Order Details Page
   ======================================== */
.woocommerce-order {
    background: var(--account-card-bg);
    border-radius: var(--account-radius);
    padding: 0;
}

/* Order Header */
.woocommerce-order-details__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--account-text);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--account-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.woocommerce-order-details__title::before {
    content: '\f570';
    /* file-invoice */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 18px;
    color: var(--account-primary);
}

/* Order Info Cards */
.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
    list-style: none;
    padding: 0;
}

.woocommerce-order-overview li {
    background: #f8f9fa;
    padding: 16px;
    border-radius: var(--account-radius);
    border: 1px solid var(--account-border);
}

.woocommerce-order-overview li strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--account-text-muted);
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.woocommerce-order-overview li span,
.woocommerce-order-overview li time {
    font-size: 15px;
    color: var(--account-text);
    font-weight: 500;
}

/* Order Items Table */
.woocommerce-table.order_details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
    background: var(--account-card-bg);
}

.woocommerce-table.order_details thead {
    background: transparent;
    border-bottom: 1px solid var(--account-border);
}

.woocommerce-table.order_details thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--account-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce-table.order_details tbody tr {
    border-bottom: 1px solid var(--account-border);
}

.woocommerce-table.order_details tbody td {
    padding: 16px;
    color: var(--account-text);
    font-size: 14px;
    vertical-align: top;
}

/* Product Name with Thumbnail */
.order-item-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.order-item-thumbnail {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid var(--account-border);
}

.order-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.order-item-details {
    flex: 1;
    min-width: 0;
}

.woocommerce-table.order_details .product-name {
    font-weight: 500;
}

.woocommerce-table.order_details .product-name a {
    color: var(--account-text);
    text-decoration: none;
}

.woocommerce-table.order_details .product-name a:hover {
    color: var(--account-primary);
}

.woocommerce-table.order_details .product-quantity {
    color: var(--account-text-light);
}

.woocommerce-table.order_details .product-total {
    font-weight: 600;
    text-align: right;
}

/* Order Totals */
.woocommerce-table.order_details tfoot {
    background: #f8f9fa;
}

.woocommerce-table.order_details tfoot tr {
    border-bottom: 1px solid var(--account-border);
}

.woocommerce-table.order_details tfoot tr:last-child {
    border-bottom: none;
}

.woocommerce-table.order_details tfoot th,
.woocommerce-table.order_details tfoot td {
    padding: 12px 16px;
    font-size: 14px;
}

.woocommerce-table.order_details tfoot th {
    text-align: left;
    font-weight: 500;
    color: var(--account-text);
}

.woocommerce-table.order_details tfoot td {
    text-align: right;
    font-weight: 600;
    color: var(--account-text);
}

.woocommerce-table.order_details tfoot .order-total th,
.woocommerce-table.order_details tfoot .order-total td {
    font-size: 16px;
    padding-top: 16px;
    color: var(--account-primary);
}

/* Icons for order totals */
.woocommerce-table.order_details tfoot tr th::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
    font-size: 13px;
    color: var(--account-text-muted);
}

.woocommerce-table.order_details tfoot .cart-subtotal th::before {
    content: '\f07a';
    /* shopping-cart */
}

.woocommerce-table.order_details tfoot .shipping th::before {
    content: '\f0d1';
    /* truck */
}

.woocommerce-table.order_details tfoot .order-total th::before {
    content: '\f555';
    /* coins */
    color: var(--account-primary);
}

.woocommerce-table.order_details tfoot .payment_method th::before {
    content: '\f09d';
    /* credit card */
}

/* Customer Details Section */
.woocommerce-customer-details {
    margin-top: 32px;
}

.woocommerce-columns.addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.woocommerce-column {
    background: #f8f9fa;
    border: 1px solid var(--account-border);
    border-radius: var(--account-radius);
    padding: 20px;
}

.woocommerce-column h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--account-text);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.woocommerce-column h2::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
    color: var(--account-primary);
}

/* Billing address icon */
.woocommerce-column--billing-address h2::before {
    content: '\f09d';
    /* credit card */
}

/* Shipping address icon */
.woocommerce-column--shipping-address h2::before {
    content: '\f0d1';
    /* truck */
}

.woocommerce-column address {
    font-style: normal;
    line-height: 1.7;
    color: var(--account-text-light);
    font-size: 14px;
}

/* Customer Note */
.woocommerce-customer-details--note {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 16px 20px;
    border-radius: var(--account-radius);
    margin-top: 20px;
}

.woocommerce-customer-details--note strong {
    display: block;
    font-size: 13px;
    margin-bottom: 8px;
    color: #856404;
}

.woocommerce-customer-details--note p {
    margin: 0;
    color: #856404;
    font-size: 14px;
}

/* ========================================
   Notices / Messages - Minimalist Banner Style
   ======================================== */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
    padding: 18px 24px;
    border-radius: var(--account-radius);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
}

/* Info/Notice Banner - Light Blue */
.woocommerce-account .woocommerce-message {
    background: #e8f4fd;
    color: #1976d2;
    border-left: 4px solid #2196f3;
}

/* Success Banner - Light Green */
.woocommerce-account .woocommerce-message.woocommerce-message--success {
    background: #e8f5e9;
    color: #2e7d32;
    border-left: 4px solid #4caf50;
}

/* Error Banner - Light Red */
.woocommerce-account .woocommerce-error {
    background: #ffebee;
    color: #c62828;
    border-left: 4px solid #f44336;
}

/* Icon for messages */
.woocommerce-account .woocommerce-message::before {
    content: '\f05a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    color: #2196f3;
    flex-shrink: 0;
}

.woocommerce-account .woocommerce-message.woocommerce-message--success::before {
    content: '\f058';
    color: #4caf50;
}

.woocommerce-account .woocommerce-error::before {
    content: '\f06a';
    color: #f44336;
}

/* Button in notice */
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-error .button {
    padding: 10px 24px;
    background: var(--account-primary);
    color: #ffffff;
    border-radius: var(--account-radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.woocommerce-account .woocommerce-message .button:hover,
.woocommerce-account .woocommerce-error .button:hover {
    background: var(--account-primary-hover);
}

/* ========================================
   TABLET LAYOUT (769px - 992px)
   ======================================== */
@media (max-width: 992px) {
    .woocommerce-MyAccount-navigation ul {
        overflow-x: auto;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 30px 24px;
    }
}

/* ========================================
   MOBILE LAYOUT (≤768px)
   ======================================== */
@media (max-width: 768px) {
    .woocommerce-account {
        padding: 20px 0;
    }

    .woocommerce-account .container {
        padding: 0 15px;
    }

    /* Navigation - Scrollable tabs */
    .woocommerce-MyAccount-navigation {
        margin-bottom: 20px;
    }

    .woocommerce-MyAccount-navigation li a {
        padding: 14px 16px;
        font-size: 12px;
    }

    .woocommerce-MyAccount-navigation li a::before {
        font-size: 18px;
    }

    /* Content */
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 24px 20px;
    }

    .woocommerce-account h2,
    .woocommerce-account .woocommerce-MyAccount-content h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    /* Orders Table - Stacked Cards */
    .woocommerce-orders-table thead {
        display: none;
    }

    .woocommerce-orders-table,
    .woocommerce-orders-table tbody,
    .woocommerce-orders-table tr,
    .woocommerce-orders-table td {
        display: block;
        width: 100%;
    }

    .woocommerce-orders-table tbody tr {
        margin-bottom: 16px;
        border: 1px solid var(--account-border);
        border-radius: var(--account-radius);
        padding: 16px;
        background: var(--account-card-bg);
    }

    .woocommerce-orders-table tbody td {
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .woocommerce-orders-table tbody td:last-child {
        border-bottom: none;
        padding-top: 12px;
    }

    .woocommerce-orders-table tbody td::before {
        content: attr(data-title);
        font-weight: 600;
        color: var(--account-text);
    }

    .woocommerce-orders-table__cell-order-actions .button {
        width: 100%;
        justify-content: center;
    }

    /* Addresses */
    .woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }

    /* Forms */
    .woocommerce-account input[type="text"],
    .woocommerce-account input[type="email"],
    .woocommerce-account input[type="tel"],
    .woocommerce-account input[type="password"],
    .woocommerce-account textarea,
    .woocommerce-account select {
        font-size: 16px;
    }

    .woocommerce-account .button,
    .woocommerce-account button[type="submit"] {
        width: 100%;
        padding: 14px;
    }

    /* Order Details Mobile */
    .woocommerce-order-overview {
        grid-template-columns: 1fr;
    }

    .woocommerce-table.order_details thead {
        display: none;
    }

    .woocommerce-table.order_details,
    .woocommerce-table.order_details tbody,
    .woocommerce-table.order_details tr,
    .woocommerce-table.order_details td {
        display: block;
        width: 100%;
    }

    .woocommerce-table.order_details tbody tr {
        margin-bottom: 20px;
        padding: 16px;
        background: #f8f9fa;
        border-radius: var(--account-radius);
    }

    .woocommerce-table.order_details tbody td {
        padding: 8px 0;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
    }

    .woocommerce-table.order_details tbody td:last-child {
        border-bottom: none;
    }

    .woocommerce-table.order_details tbody td::before {
        content: attr(data-title);
        font-weight: 600;
        color: var(--account-text-muted);
        text-transform: uppercase;
        font-size: 11px;
    }

    .woocommerce-table.order_details tfoot {
        background: transparent;
    }

    .woocommerce-table.order_details tfoot tr {
        display: flex;
        justify-content: space-between;
        padding: 12px 16px;
    }

    .woocommerce-columns.addresses {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Loading State
   ======================================== */
.woocommerce-account .button.loading,
.woocommerce-account button[type="submit"].loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.woocommerce-account .button.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}