/**
 * SilvForLife – My Account Pages
 * Premium Dark Glass Theme v3.0.0
 * Single source of truth – NO inline styles in header.php or templates
 * Background: #0c1222 | Prominent Glass Cards | Blue/Violet Accents
 */

/* ==========================================================================
   0. AGGRESSIVE RESET — kill ALL WooCommerce defaults
   ========================================================================== */

/* Neutralize WooCommerce default float layout */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

/* Kill any grid/flex WooCommerce or theme puts on .woocommerce wrapper */
body.woocommerce-account .woocommerce {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* Full-width containers */
body.woocommerce-account .site-main,
body.woocommerce-account .content-area,
body.woocommerce-account main#main,
body.woocommerce-account .container,
body.woocommerce-account #primary,
body.woocommerce-account .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide default WP page title */
body.woocommerce-account .entry-header,
body.woocommerce-account article > .entry-title,
body.woocommerce-account .page-title:not(.sfl-myaccount-header .page-title) {
    display: none !important;
}

/* Body flex for footer stick */
body.woocommerce-account.logged-in {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0c1222 !important;
}

body.woocommerce-account.logged-in #page {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 0 auto !important;
}

body.woocommerce-account.logged-in #content,
body.woocommerce-account.logged-in > .site-main {
    flex: 1 0 auto !important;
}

body.woocommerce-account.logged-in .site-footer {
    margin-top: auto !important;
    width: 100% !important;
}

body.woocommerce-account {
    background: #0c1222 !important;
}


/* ==========================================================================
   1. PAGE CONTAINER & LAYOUT
   ========================================================================== */

.sfl-myaccount-page {
    width: 100%;
    min-height: 70vh;
    padding: 24px 0 80px;
}

.sfl-myaccount-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Page Header */
.sfl-myaccount-header {
    margin-bottom: 32px;
}

.sfl-myaccount-header .page-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sfl-myaccount-header .user-greeting {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.sfl-myaccount-header .username {
    color: #60a5fa;
    font-weight: 600;
}

/* Main Grid: Sidebar + Content */
.sfl-myaccount-layout {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 36px !important;
    align-items: start !important;
}


/* ==========================================================================
   2. SIDEBAR NAVIGATION — Frosted Glass
   ========================================================================== */

.sfl-myaccount-nav {
    position: sticky;
    top: 96px;
    z-index: 10;
}

.sfl-account-nav ul,
.sfl-myaccount-page .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 12px !important;
    background: rgba(30, 41, 59, 0.55) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sfl-account-nav ul li,
.sfl-myaccount-page .woocommerce-MyAccount-navigation ul li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sfl-account-nav ul li a,
.sfl-myaccount-page .woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    line-height: 1.4 !important;
}

.sfl-account-nav ul li a:hover,
.sfl-myaccount-page .woocommerce-MyAccount-navigation ul li a:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.12) !important;
}

/* Active State */
.sfl-account-nav ul li.is-active a,
.sfl-myaccount-page .woocommerce-MyAccount-navigation ul li.is-active a {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2)) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    box-shadow:
        0 0 24px rgba(59, 130, 246, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    font-weight: 600 !important;
}

/* Nav Icons */
.sfl-nav-icon {
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.2s;
}

.sfl-account-nav li:hover .sfl-nav-icon,
.sfl-account-nav li.is-active .sfl-nav-icon {
    opacity: 1;
}

.sfl-account-nav li.is-active .sfl-nav-icon {
    color: #60a5fa;
}

/* Logout – muted */
.sfl-account-nav ul li:last-child a,
.sfl-myaccount-page .woocommerce-MyAccount-navigation ul li:last-child a {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.28) !important;
    font-size: 13px !important;
}

.sfl-account-nav ul li:last-child a:hover,
.sfl-myaccount-page .woocommerce-MyAccount-navigation ul li:last-child a:hover {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.12) !important;
}


/* ==========================================================================
   3. CONTENT AREA — Prominent Glass Card
   ========================================================================== */

.sfl-myaccount-content {
    background: rgba(30, 41, 59, 0.45) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    min-height: 500px;
    width: 100% !important;
    float: none !important;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.sfl-myaccount-content h2 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 28px 0 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 14px;
}

.sfl-myaccount-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

.sfl-myaccount-content h3 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 0 18px 0 !important;
}

.sfl-myaccount-content p {
    color: rgba(255, 255, 255, 0.55) !important;
    line-height: 1.6 !important;
}

.sfl-myaccount-content a {
    color: #60a5fa !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

.sfl-myaccount-content a:hover {
    color: #93c5fd !important;
}


/* ==========================================================================
   5. DASHBOARD
   ========================================================================== */

.sfl-dashboard {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Welcome Card */
.sfl-welcome-card {
    position: relative;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(139, 92, 246, 0.14));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 18px;
    padding: 32px;
    overflow: hidden;
}

.sfl-welcome-card::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -15%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.sfl-welcome-card h2 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 8px 0 !important;
    padding-bottom: 0 !important;
    text-transform: none !important;
}

.sfl-welcome-card h2::after {
    display: none;
}

.sfl-welcome-card .sfl-welcome-sub {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.95rem;
    margin: 0 0 22px 0;
    line-height: 1.5;
}

.sfl-welcome-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 22px;
}

.sfl-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.sfl-meta-item svg {
    width: 16px;
    height: 16px;
    color: #60a5fa;
    flex-shrink: 0;
}

.sfl-meta-item strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.sfl-cta-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    border: none;
}

.sfl-cta-shop:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
    color: #fff !important;
}

.sfl-cta-shop svg {
    width: 18px;
    height: 18px;
}

/* Stats Row */
.sfl-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sfl-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: all 0.25s;
}

.sfl-stat-card:hover {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
}

.sfl-stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.sfl-stat-icon.blue    { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.08)); }
.sfl-stat-icon.violet  { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.08)); }
.sfl-stat-icon.emerald { background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(52, 211, 153, 0.08)); }

.sfl-stat-icon svg { width: 22px; height: 22px; }
.sfl-stat-icon.blue svg    { color: #60a5fa; }
.sfl-stat-icon.violet svg  { color: #a78bfa; }
.sfl-stat-icon.emerald svg { color: #34d399; }

.sfl-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sfl-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.sfl-stat-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 2px;
}

/* Quick Actions */
.sfl-actions-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 14px 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sfl-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.sfl-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    cursor: pointer;
}

.sfl-action-card:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.12);
}

.sfl-action-card svg {
    width: 26px;
    height: 26px;
    color: #60a5fa;
}

.sfl-action-card:hover svg { color: #93c5fd; }

.sfl-action-card span {
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.sfl-action-card.sfl-action-logout { background: rgba(0, 0, 0, 0.1); border-color: rgba(255, 255, 255, 0.03); }
.sfl-action-card.sfl-action-logout svg  { color: rgba(255, 255, 255, 0.25); }
.sfl-action-card.sfl-action-logout span { color: rgba(255, 255, 255, 0.35); font-weight: 500; }
.sfl-action-card.sfl-action-logout:hover { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.15); }
.sfl-action-card.sfl-action-logout:hover svg  { color: #f87171; }
.sfl-action-card.sfl-action-logout:hover span { color: #fca5a5; }

/* Dashboard Recent Orders */
.sfl-orders-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 14px 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sfl-dashboard .sfl-orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sfl-dashboard .sfl-order-card {
    padding: 18px 24px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    transition: border-color 0.2s;
}

.sfl-dashboard .sfl-order-card:hover {
    border-color: rgba(59, 130, 246, 0.15);
}

.sfl-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.sfl-order-left  { display: flex; align-items: center; gap: 14px; }
.sfl-order-right { display: flex; align-items: center; gap: 20px; }

.sfl-dashboard .sfl-order-number { font-weight: 700; font-size: 1rem; color: #fff; }

.sfl-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sfl-badge-completed  { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.sfl-badge-processing { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.sfl-badge-pending    { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.sfl-badge-on-hold    { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.sfl-badge-cancelled,
.sfl-badge-refunded,
.sfl-badge-failed     { background: rgba(239, 68, 68, 0.12); color: #f87171; }

.sfl-dashboard .sfl-order-date  { font-size: 0.85rem; color: rgba(255, 255, 255, 0.35); }
.sfl-dashboard .sfl-order-total { font-weight: 700; font-size: 1rem; color: #fff; }

.sfl-order-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #60a5fa !important;
    text-decoration: none !important;
}

.sfl-order-detail-link:hover { color: #93c5fd !important; }

.sfl-empty-orders {
    text-align: center;
    padding: 48px 20px;
}

.sfl-empty-orders svg { color: rgba(255, 255, 255, 0.12); margin-bottom: 16px; }
.sfl-empty-orders p   { color: rgba(255, 255, 255, 0.35) !important; margin-bottom: 20px; }


/* ==========================================================================
   6. ORDERS PAGE
   ========================================================================== */

.sfl-orders { width: 100%; }

.sfl-orders h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.65rem;
    color: #fff;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    position: relative;
    padding-bottom: 14px;
}

.sfl-orders h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

.sfl-orders-empty {
    text-align: center;
    padding: 60px 20px;
}

.sfl-orders-empty svg { width: 80px; height: 80px; color: rgba(255, 255, 255, 0.1); margin-bottom: 24px; }
.sfl-orders-empty p   { color: rgba(255, 255, 255, 0.4) !important; margin-bottom: 24px; }

.sfl-btn {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border: none;
    border-radius: 12px;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none !important;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

.sfl-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.35);
    color: #fff !important;
}

/* Order Cards */
.sfl-orders .sfl-orders-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sfl-orders .sfl-order-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 28px;
    transition: all 0.25s;
}

.sfl-orders .sfl-order-card:hover {
    border-color: rgba(59, 130, 246, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.sfl-order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sfl-order-info { display: flex; flex-direction: column; gap: 4px; }

.sfl-orders .sfl-order-number { font-size: 1.2rem; font-weight: 700; color: #fff; }
.sfl-orders .sfl-order-date   { font-size: 0.9rem; color: rgba(255, 255, 255, 0.4); }

.sfl-order-status {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sfl-order-status.completed  { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.sfl-order-status.processing { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.sfl-order-status.pending    { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.sfl-order-status.on-hold    { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.sfl-order-status.cancelled  { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.sfl-order-status.refunded   { background: rgba(168, 85, 247, 0.2); color: #a855f7; }

/* Order Body — HORIZONTAL layout */
.sfl-order-body {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}

.sfl-order-image {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.sfl-order-image img { width: 100%; height: 100%; object-fit: cover; }

.sfl-order-more {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
}

.sfl-order-products {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sfl-order-product   { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; line-height: 1.4; }
.sfl-order-more-items { color: rgba(255, 255, 255, 0.3); font-size: 0.8rem; }

.sfl-orders .sfl-order-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-left: auto;
    white-space: nowrap;
}

.sfl-order-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sfl-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 12px;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.sfl-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
    color: #fff !important;
}

.sfl-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: all 0.2s;
}

.sfl-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}


/* ==========================================================================
   7. ADDRESSES PAGE
   ========================================================================== */

.sfl-addresses h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.65rem;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 14px;
}

.sfl-addresses h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

.sfl-addresses-intro {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.9rem;
    margin-bottom: 28px;
}

.sfl-addresses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.sfl-address-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 28px;
    transition: all 0.25s;
}

.sfl-address-card:hover {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.08);
}

.sfl-address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sfl-address-header h3 { font-size: 1.1rem !important; color: #fff !important; margin: 0 !important; }

.sfl-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #60a5fa !important;
    text-decoration: none !important;
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 8px;
    transition: all 0.2s;
}

.sfl-edit-link:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd !important;
}

.sfl-address-card address {
    color: rgba(255, 255, 255, 0.6);
    font-style: normal;
    line-height: 1.8;
    font-size: 0.95rem;
}

.sfl-no-address {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}


/* ==========================================================================
   8. FORMS — Full-width premium inputs
   ========================================================================== */

/* Form sections */
.sfl-form-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 32px;
    margin-bottom: 24px;
}

.sfl-form-section h3 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.15rem !important;
    color: #fff !important;
    margin-bottom: 8px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sfl-section-hint {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.875rem;
    margin-bottom: 24px;
}

.sfl-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sfl-form-group {
    margin-bottom: 22px;
}

.sfl-form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.sfl-form-group label .required { color: #f87171; }

.sfl-form-group input[type="text"],
.sfl-form-group input[type="email"],
.sfl-form-group input[type="password"],
.sfl-form-group input[type="tel"] {
    width: 100% !important;
    padding: 14px 18px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    transition: all 0.2s !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.sfl-form-group input:focus {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 0 20px rgba(59, 130, 246, 0.15) !important;
}

.sfl-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
}

.sfl-edit-account h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.65rem;
    color: #fff;
    margin-bottom: 28px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 14px;
}

.sfl-edit-account h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

/* Form actions button */
.sfl-form-actions {
    margin-top: 32px;
}

.sfl-form-actions button,
.sfl-form-actions input[type="submit"] {
    padding: 16px 40px !important;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.25s !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

.sfl-form-actions button:hover,
.sfl-form-actions input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.4);
}


/* ==========================================================================
   9. EDIT ADDRESS FORM — WooCommerce form_field() overrides
   ========================================================================== */

.sfl-edit-address .sfl-back-link,
.sfl-view-order .sfl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #60a5fa !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 20px;
    transition: color 0.2s;
}

.sfl-edit-address .sfl-back-link:hover,
.sfl-view-order .sfl-back-link:hover {
    color: #93c5fd !important;
}

.sfl-edit-address h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.65rem;
    color: #fff;
    margin-bottom: 28px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 14px;
}

.sfl-edit-address h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

/* AGGRESSIVE WooCommerce woocommerce_form_field() overrides */
.sfl-edit-address .sfl-form-section .form-row,
.sfl-edit-address .sfl-form-section p.form-row {
    margin-bottom: 20px !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

.sfl-edit-address .sfl-form-section .form-row-first,
.sfl-edit-address .sfl-form-section .form-row-last {
    float: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(50% - 10px) !important;
}

.sfl-edit-address .sfl-form-section .form-row-first {
    margin-right: 20px !important;
}

.sfl-edit-address .sfl-form-section .form-row-wide {
    width: 100% !important;
}

.sfl-edit-address .sfl-form-section label {
    display: block !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.sfl-edit-address .sfl-form-section .required,
.sfl-edit-address .sfl-form-section abbr.required {
    color: #f87171 !important;
    text-decoration: none !important;
}

.sfl-edit-address .sfl-form-section input[type="text"],
.sfl-edit-address .sfl-form-section input[type="email"],
.sfl-edit-address .sfl-form-section input[type="tel"],
.sfl-edit-address .sfl-form-section input[type="number"],
.sfl-edit-address .sfl-form-section .input-text,
.sfl-edit-address .sfl-form-section select,
.sfl-edit-address .sfl-form-section textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    outline: none !important;
    transition: all 0.2s !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
}

.sfl-edit-address .sfl-form-section input:focus,
.sfl-edit-address .sfl-form-section select:focus,
.sfl-edit-address .sfl-form-section textarea:focus {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 0 20px rgba(59, 130, 246, 0.15) !important;
}

.sfl-edit-address .sfl-form-section select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px !important;
    padding-right: 44px !important;
    cursor: pointer !important;
}

.sfl-edit-address .sfl-form-section select option {
    background: #1e293b;
    color: #fff;
}

/* Select2 overrides */
.sfl-edit-address .select2-container { width: 100% !important; }

.sfl-edit-address .select2-selection {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    min-height: 50px !important;
    padding: 8px 14px !important;
}

.sfl-edit-address .select2-selection__rendered { color: #fff !important; line-height: 32px !important; }
.sfl-edit-address .select2-selection__arrow    { top: 12px !important; right: 14px !important; }

/* WooCommerce input wrapper */
.sfl-edit-address .woocommerce-input-wrapper,
.sfl-myaccount-content .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}


/* ==========================================================================
   10. GENERIC FORM OVERRIDES for .sfl-myaccount-content
   These catch any WooCommerce form elements rendered inside the content area
   ========================================================================== */

.sfl-myaccount-content .form-row,
.sfl-myaccount-content .woocommerce-form-row,
.sfl-myaccount-content p.form-row {
    margin-bottom: 20px !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

.sfl-myaccount-content .form-row-first,
.sfl-myaccount-content .form-row-last {
    float: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(50% - 10px) !important;
}

.sfl-myaccount-content .form-row-first { margin-right: 20px !important; }
.sfl-myaccount-content .form-row-wide  { width: 100% !important; }

.sfl-myaccount-content label {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
}

.sfl-myaccount-content label .required,
.sfl-myaccount-content label abbr.required {
    color: #f87171 !important;
    text-decoration: none !important;
}

.sfl-myaccount-content input[type="text"],
.sfl-myaccount-content input[type="email"],
.sfl-myaccount-content input[type="password"],
.sfl-myaccount-content input[type="tel"],
.sfl-myaccount-content input[type="number"],
.sfl-myaccount-content .input-text,
.sfl-myaccount-content select,
.sfl-myaccount-content textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 0.95rem !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
}

.sfl-myaccount-content input:focus,
.sfl-myaccount-content select:focus,
.sfl-myaccount-content textarea:focus {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 0 20px rgba(59, 130, 246, 0.15) !important;
}

.sfl-myaccount-content select {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 14px center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em !important;
    padding-right: 44px !important;
}

.sfl-myaccount-content ::placeholder { color: rgba(255, 255, 255, 0.25) !important; }

/* Fieldset / Legend */
.sfl-myaccount-content fieldset {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 28px;
    margin: 24px 0;
    background: rgba(0, 0, 0, 0.15);
}

.sfl-myaccount-content legend {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 10px;
}


/* ==========================================================================
   11. BUTTONS
   ========================================================================== */

.sfl-myaccount-content .woocommerce-Button,
.sfl-myaccount-content button[type="submit"],
.sfl-myaccount-content .button,
.sfl-myaccount-content input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25) !important;
    min-height: 48px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

.sfl-myaccount-content .woocommerce-Button:hover,
.sfl-myaccount-content button[type="submit"]:hover,
.sfl-myaccount-content .button:hover,
.sfl-myaccount-content input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.4) !important;
}


/* ==========================================================================
   12. DOWNLOADS PAGE
   ========================================================================== */

.sfl-downloads h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.65rem;
    color: #fff;
    margin-bottom: 28px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 14px;
}

.sfl-downloads h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

.sfl-downloads-empty { text-align: center; padding: 60px 20px; }
.sfl-downloads-empty svg { width: 80px; height: 80px; color: rgba(255, 255, 255, 0.1); margin-bottom: 24px; }
.sfl-downloads-empty p   { color: rgba(255, 255, 255, 0.4) !important; margin-bottom: 24px; }

.sfl-downloads-list { display: flex; flex-direction: column; gap: 14px; }

.sfl-download-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.25s;
}

.sfl-download-card:hover { border-color: rgba(59, 130, 246, 0.15); }

.sfl-download-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 14px;
    flex-shrink: 0;
}

.sfl-download-icon svg { width: 26px; height: 26px; color: #60a5fa; }

.sfl-download-info { flex: 1; min-width: 0; }
.sfl-download-info h3 { font-size: 1.1rem !important; color: #fff !important; margin-bottom: 4px !important; }
.sfl-download-product { color: rgba(255, 255, 255, 0.4) !important; font-size: 0.85rem; margin-bottom: 8px; }

.sfl-download-remaining,
.sfl-download-expires {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 8px;
}

.sfl-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 12px;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
    white-space: nowrap;
}

.sfl-download-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35); color: #fff !important; }
.sfl-download-btn svg { width: 18px; height: 18px; }


/* ==========================================================================
   13. VIEW ORDER DETAIL
   ========================================================================== */

.sfl-view-order {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sfl-order-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sfl-order-detail-header h2 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.5rem !important;
    color: #fff !important;
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
}

.sfl-order-detail-header h2::after { display: none; }
.sfl-order-detail-header p { color: rgba(255, 255, 255, 0.4) !important; font-size: 0.9rem; margin: 0; }

.sfl-order-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 28px;
    overflow: visible;
}

.sfl-order-section h3 { font-size: 1.15rem !important; color: #fff !important; margin-bottom: 20px !important; }

.sfl-order-items { display: flex; flex-direction: column; overflow: visible; }

.sfl-order-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sfl-order-item:last-child { border-bottom: none; }

.sfl-order-item-image {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.sfl-order-item-image img { width: 100%; height: 100%; object-fit: cover; }
.sfl-placeholder { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.06); }

.sfl-order-item-details { flex: 1; min-width: 0; }
.sfl-order-item-details h4 { color: #fff; font-size: 0.95rem; margin: 0 0 4px 0; word-wrap: break-word; overflow-wrap: break-word; }
.sfl-meta { display: block; color: rgba(255, 255, 255, 0.4); font-size: 0.8rem; word-wrap: break-word; }
.sfl-order-item-qty { color: rgba(255, 255, 255, 0.45); font-weight: 600; flex-shrink: 0; }
.sfl-order-item-total { font-weight: 700; color: #fff; min-width: 90px; text-align: right; flex-shrink: 0; }

.sfl-order-totals {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sfl-total-row { display: flex; justify-content: space-between; padding: 8px 0; color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; gap: 12px; }
.sfl-total-row > span:first-child { min-width: 0; word-wrap: break-word; overflow-wrap: break-word; }
.sfl-total-row > span:last-child { flex-shrink: 0; text-align: right; white-space: nowrap; }
.sfl-total-row.sfl-discount { color: #4ade80; }

.sfl-total-row.sfl-grand-total {
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.sfl-order-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.sfl-address-block {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 24px;
}

.sfl-address-block h3 {
    font-size: 1rem !important;
    color: #fff !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sfl-address-block address { color: rgba(255, 255, 255, 0.6); font-style: normal; line-height: 1.8; }
.sfl-contact { color: rgba(255, 255, 255, 0.4) !important; font-size: 0.85rem; margin-top: 12px; }


/* ==========================================================================
   14. PAYMENT METHODS
   ========================================================================== */

.sfl-payment-methods h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.65rem;
    color: #fff;
    margin-bottom: 28px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 14px;
}

.sfl-payment-methods h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
}

.sfl-payment-empty { text-align: center; padding: 60px 20px; }
.sfl-payment-empty svg { width: 80px; height: 80px; color: rgba(255, 255, 255, 0.1); margin-bottom: 24px; }
.sfl-payment-empty p { color: rgba(255, 255, 255, 0.4) !important; }

.sfl-payment-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 22px 28px;
    margin-bottom: 12px;
    transition: border-color 0.25s;
}

.sfl-payment-card:hover { border-color: rgba(59, 130, 246, 0.15); }

.sfl-payment-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 12px;
    flex-shrink: 0;
}

.sfl-payment-icon svg { width: 26px; height: 26px; color: #60a5fa; }

.sfl-payment-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sfl-payment-name { color: #fff; font-weight: 600; }
.sfl-payment-detail { color: rgba(255, 255, 255, 0.6); }
.sfl-payment-expires { color: rgba(255, 255, 255, 0.35); font-size: 0.8rem; }

.sfl-delete-btn { color: #f87171 !important; text-decoration: none !important; font-size: 0.85rem; }
.sfl-delete-btn:hover { color: #fca5a5 !important; text-decoration: underline !important; }

.sfl-add-method-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s;
}

.sfl-add-method-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff !important; }
.sfl-add-method-btn svg { width: 18px; height: 18px; }


/* ==========================================================================
   15. TABLES (WooCommerce fallback)
   ========================================================================== */

.sfl-myaccount-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.sfl-myaccount-content thead {
    background: rgba(0, 0, 0, 0.2) !important;
}

.sfl-myaccount-content th {
    padding: 14px 18px !important;
    text-align: left !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.sfl-myaccount-content td {
    padding: 16px 18px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    font-size: 0.9rem !important;
}

.sfl-myaccount-content tbody tr:last-child td { border-bottom: none !important; }
.sfl-myaccount-content tbody tr:hover { background: rgba(59, 130, 246, 0.04) !important; }


/* ==========================================================================
   16. NOTICES
   ========================================================================== */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice {
    padding: 16px 20px !important;
    border-radius: 14px !important;
    border: 1px solid !important;
    margin-bottom: 24px !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    backdrop-filter: blur(12px) !important;
}

.woocommerce-account .woocommerce-message {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

.woocommerce-account .woocommerce-message::before {
    content: '✓' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: rgba(34, 197, 94, 0.2) !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    color: #4ade80 !important;
}

.woocommerce-account .woocommerce-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-error li {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}


/* ==========================================================================
   17. LOGIN / REGISTER (not logged in)
   ========================================================================== */

.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 100% !important;
}

.woocommerce-account .u-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
}

.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
    flex: 1;
    min-width: 300px;
    max-width: 440px;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    background: rgba(30, 41, 59, 0.45);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2 {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 24px !important;
    text-align: center;
}

.woocommerce-account .woocommerce-form-login input[type="text"],
.woocommerce-account .woocommerce-form-login input[type="email"],
.woocommerce-account .woocommerce-form-login input[type="password"],
.woocommerce-account .woocommerce-form-register input[type="text"],
.woocommerce-account .woocommerce-form-register input[type="email"],
.woocommerce-account .woocommerce-form-register input[type="password"] {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 0.95rem !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.woocommerce-account .woocommerce-form-login input:focus,
.woocommerce-account .woocommerce-form-register input:focus {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.woocommerce-account .woocommerce-form-login .woocommerce-Button,
.woocommerce-account .woocommerce-form-register .woocommerce-Button {
    width: 100%;
    justify-content: center;
    padding: 16px 28px !important;
    font-size: 1rem !important;
    margin-top: 8px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.875rem;
    margin: 12px 0;
}

.woocommerce-account .lost_password { margin-top: 14px; text-align: center; }
.woocommerce-account .lost_password a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.35) !important; }
.woocommerce-account .lost_password a:hover { color: #60a5fa !important; }


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

/* --- Prevent horizontal overflow globally --- */
body.woocommerce-account {
    overflow-x: hidden !important;
}

.sfl-myaccount-page,
.sfl-myaccount-container,
.sfl-myaccount-content,
.sfl-myaccount-content * {
    max-width: 100%;
    box-sizing: border-box;
}

/* ===== TABLET LANDSCAPE  (≤1024px) ===== */
@media (max-width: 1024px) {

    /* Layout → single column */
    .sfl-myaccount-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .sfl-myaccount-container {
        padding: 0 24px !important;
    }

    .sfl-myaccount-nav {
        position: static !important;
    }

    /* Navigation → horizontal scrollable pill bar */
    .sfl-account-nav ul,
    .sfl-myaccount-page .woocommerce-MyAccount-navigation ul {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: 16px !important;
    }

    .sfl-account-nav ul::-webkit-scrollbar,
    .sfl-myaccount-page .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }

    .sfl-account-nav ul li,
    .sfl-myaccount-page .woocommerce-MyAccount-navigation ul li {
        flex-shrink: 0 !important;
    }

    .sfl-account-nav ul li a,
    .sfl-myaccount-page .woocommerce-MyAccount-navigation ul li a {
        padding: 10px 18px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        border-radius: 10px !important;
    }

    /* Remove logout top-margin */
    .sfl-account-nav ul li:last-child a,
    .sfl-myaccount-page .woocommerce-MyAccount-navigation ul li:last-child a {
        margin-top: 0 !important;
    }

    /* Content card */
    .sfl-myaccount-content {
        padding: 28px !important;
        border-radius: 18px !important;
    }

    /* Dashboard */
    .sfl-stats-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px;
    }

    .sfl-actions-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Welcome meta — wrap */
    .sfl-welcome-meta {
        flex-direction: column;
        gap: 10px;
    }

    /* Addresses → 1 col */
    .sfl-addresses-grid,
    .sfl-order-addresses,
    .woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr !important;
    }

    /* Forms → 1 col rows */
    .sfl-form-row-2 {
        grid-template-columns: 1fr !important;
    }

    .sfl-edit-address .sfl-form-section .form-row-first,
    .sfl-edit-address .sfl-form-section .form-row-last,
    .sfl-myaccount-content .form-row-first,
    .sfl-myaccount-content .form-row-last {
        width: 100% !important;
        margin-right: 0 !important;
        display: block !important;
    }

    /* Login / Register */
    .woocommerce-account .u-columns .u-column1,
    .woocommerce-account .u-columns .u-column2 {
        min-width: 100% !important;
    }
}


/* ===== TABLET PORTRAIT (≤768px) ===== */
@media (max-width: 768px) {

    .sfl-myaccount-page {
        padding: 16px 0 60px !important;
    }

    .sfl-myaccount-container {
        padding: 0 16px !important;
    }

    .sfl-myaccount-header {
        margin-bottom: 20px;
    }

    .sfl-myaccount-header .page-title {
        font-size: 28px !important;
        letter-spacing: 1px;
    }

    .sfl-myaccount-header .user-greeting {
        font-size: 13px;
    }

    /* Navigation → icon-only pills on small tablets */
    .sfl-account-nav ul li a span,
    .sfl-myaccount-page .woocommerce-MyAccount-navigation ul li a span {
        display: none !important;
    }

    .sfl-account-nav ul li a,
    .sfl-myaccount-page .woocommerce-MyAccount-navigation ul li a {
        padding: 10px 12px !important;
        justify-content: center !important;
    }

    .sfl-account-nav ul li a .sfl-nav-icon,
    .sfl-account-nav ul li a svg.sfl-nav-icon {
        width: 20px !important;
        height: 20px !important;
    }

    /* Show text for active item */
    .sfl-account-nav ul li.is-active a span {
        display: inline !important;
        font-size: 0.8rem !important;
    }

    .sfl-account-nav ul li.is-active a {
        gap: 8px !important;
        padding: 10px 16px !important;
    }

    /* Content card */
    .sfl-myaccount-content {
        padding: 22px !important;
        border-radius: 16px !important;
        min-height: auto !important;
    }

    /* Dashboard welcome */
    .sfl-welcome-card {
        padding: 24px !important;
    }

    .sfl-welcome-card h2 {
        font-size: 1.35rem !important;
    }

    .sfl-welcome-card .sfl-welcome-sub {
        font-size: 0.88rem;
    }

    .sfl-cta-shop {
        padding: 11px 22px;
        font-size: 0.88rem;
    }

    /* Stats → 1 col */
    .sfl-stats-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .sfl-stat-card {
        padding: 16px;
    }

    /* Actions → 3 col compact */
    .sfl-actions-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px;
    }

    .sfl-action-card {
        padding: 16px 10px !important;
        gap: 8px;
    }

    .sfl-action-card svg {
        width: 22px;
        height: 22px;
    }

    .sfl-action-card span {
        font-size: 0.78rem;
    }

    /* Typography */
    .sfl-myaccount-content h2 {
        font-size: 1.35rem !important;
        margin-bottom: 22px !important;
    }

    /* ORDER CARDS — stacked layout */
    .sfl-order-header {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .sfl-order-body {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .sfl-orders .sfl-order-total {
        margin-left: 0 !important;
        font-size: 1.2rem;
    }

    .sfl-order-actions {
        width: 100% !important;
        flex-direction: column !important;
    }

    .sfl-btn-primary,
    .sfl-btn-secondary {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Dashboard order rows */
    .sfl-order-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .sfl-order-right {
        width: 100% !important;
        flex-wrap: wrap;
        gap: 10px !important;
    }

    /* ---- VIEW ORDER DETAIL ---- */

    .sfl-view-order {
        gap: 18px !important;
    }

    /* Back link */
    .sfl-view-order .sfl-back-link {
        font-size: 0.85rem;
    }

    /* Header: stack title + status */
    .sfl-order-detail-header {
        flex-direction: column !important;
        gap: 12px !important;
        padding-bottom: 16px !important;
    }

    .sfl-order-detail-header h2 {
        font-size: 1.25rem !important;
    }

    .sfl-order-detail-header p {
        font-size: 0.82rem !important;
    }

    /* Order section card */
    .sfl-order-section {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .sfl-order-section h3 {
        font-size: 1rem !important;
        margin-bottom: 14px !important;
    }

    /* ---- ORDER ITEMS: mobile card layout ---- */
    .sfl-order-item {
        display: grid !important;
        grid-template-columns: 56px 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 4px 14px !important;
        padding: 16px 0 !important;
        align-items: start !important;
    }

    /* Image: left column, spans both rows */
    .sfl-order-item-image {
        grid-column: 1 !important;
        grid-row: 1 / -1 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 10px !important;
        align-self: start !important;
    }

    /* Details: middle column, row 1 — spans to end */
    .sfl-order-item-details {
        grid-column: 2 / -1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    .sfl-order-item-details h4 {
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* Qty: left of row 2 */
    .sfl-order-item-qty {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 0.82rem !important;
        align-self: center !important;
    }

    /* Total: right of row 2 */
    .sfl-order-item-total {
        grid-column: 3 !important;
        grid-row: 2 !important;
        min-width: auto !important;
        font-size: 0.9rem !important;
        text-align: right !important;
        align-self: center !important;
    }

    /* ---- TOTALS SECTION ---- */
    .sfl-order-totals {
        margin-top: 14px;
        padding-top: 14px;
    }

    .sfl-total-row {
        font-size: 0.85rem !important;
        padding: 6px 0 !important;
        gap: 10px !important;
    }

    .sfl-total-row > span:first-child {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }

    .sfl-total-row > span:last-child {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .sfl-total-row.sfl-grand-total {
        font-size: 1.05rem !important;
    }

    /* Addresses → single col */
    .sfl-order-addresses {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .sfl-address-block {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .sfl-address-block h3 {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
    }

    .sfl-address-block address {
        font-size: 0.88rem;
        line-height: 1.7;
    }

    .sfl-contact {
        font-size: 0.8rem !important;
        word-break: break-all;
    }

    /* Downloads */
    .sfl-download-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 20px !important;
    }

    .sfl-download-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Form sections */
    .sfl-form-section {
        padding: 22px !important;
        border-radius: 14px !important;
    }

    /* Payment methods */
    .sfl-payment-card {
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px 20px;
    }

    /* Tables – horizontal scroll */
    .sfl-myaccount-content table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .sfl-myaccount-content thead {
        display: table-header-group;
    }

    .sfl-myaccount-content th,
    .sfl-myaccount-content td {
        padding: 12px 14px !important;
        font-size: 0.82rem !important;
        white-space: nowrap;
    }

    /* Login / Register */
    .woocommerce-account .woocommerce-form-login,
    .woocommerce-account .woocommerce-form-register {
        padding: 28px !important;
        border-radius: 18px !important;
    }
}


/* ===== PHONE (≤480px) ===== */
@media (max-width: 480px) {

    .sfl-myaccount-layout {
        gap: 14px !important;
    }

    .sfl-myaccount-container {
        padding: 0 12px !important;
    }

    .sfl-myaccount-header .page-title {
        font-size: 24px !important;
    }

    /* Nav – tighter pills, still icon-only */
    .sfl-account-nav ul,
    .sfl-myaccount-page .woocommerce-MyAccount-navigation ul {
        padding: 6px !important;
        gap: 3px !important;
        border-radius: 12px !important;
    }

    .sfl-account-nav ul li a,
    .sfl-myaccount-page .woocommerce-MyAccount-navigation ul li a {
        padding: 9px 10px !important;
        border-radius: 8px !important;
    }

    .sfl-account-nav ul li.is-active a span {
        display: inline !important;
        font-size: 0.75rem !important;
    }

    .sfl-account-nav ul li.is-active a {
        font-size: 0.75rem !important;
        padding: 9px 14px !important;
    }

    /* Keep nav span hidden on phone too */
    .sfl-account-nav ul li a span {
        display: none !important;
    }

    /* Content */
    .sfl-myaccount-content {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .sfl-myaccount-content h2 {
        font-size: 1.2rem !important;
        margin-bottom: 18px !important;
        padding-bottom: 10px;
    }

    .sfl-myaccount-content h3 {
        font-size: 1rem !important;
    }

    /* Welcome */
    .sfl-welcome-card {
        padding: 20px !important;
    }

    .sfl-welcome-card h2 {
        font-size: 1.2rem !important;
    }

    .sfl-welcome-card .sfl-welcome-sub {
        font-size: 0.82rem;
    }

    .sfl-welcome-meta {
        gap: 8px;
    }

    .sfl-meta-item {
        font-size: 0.8rem;
    }

    .sfl-meta-item strong {
        word-break: break-all;
    }

    .sfl-cta-shop {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
    }

    /* Stats */
    .sfl-stat-card {
        padding: 14px;
        gap: 12px;
    }

    .sfl-stat-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .sfl-stat-value {
        font-size: 1.15rem;
    }

    /* Actions → 2 col */
    .sfl-actions-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .sfl-action-card {
        padding: 16px 8px !important;
        border-radius: 12px !important;
    }

    .sfl-action-card svg {
        width: 20px;
        height: 20px;
    }

    .sfl-action-card span {
        font-size: 0.72rem;
    }

    /* Orders */
    .sfl-orders .sfl-order-card {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .sfl-order-header {
        margin-bottom: 14px !important;
        padding-bottom: 12px !important;
    }

    .sfl-orders .sfl-order-number {
        font-size: 1rem;
    }

    .sfl-orders .sfl-order-date {
        font-size: 0.8rem;
    }

    .sfl-order-status {
        font-size: 0.65rem;
        padding: 5px 12px;
    }

    .sfl-order-image {
        width: 64px !important;
        height: 64px !important;
        border-radius: 10px !important;
    }

    .sfl-order-product {
        font-size: 0.82rem !important;
    }

    .sfl-orders .sfl-order-total {
        font-size: 1.1rem !important;
    }

    .sfl-btn-primary,
    .sfl-btn-secondary {
        padding: 12px 20px !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
    }

    /* ---- VIEW ORDER ---- */
    .sfl-view-order {
        gap: 14px !important;
    }

    .sfl-order-detail-header h2 {
        font-size: 1.1rem !important;
    }

    .sfl-order-section {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .sfl-order-item {
        grid-template-columns: 48px 1fr auto !important;
        gap: 4px 10px !important;
        padding: 12px 0 !important;
    }

    .sfl-order-item-image {
        width: 48px !important;
        height: 48px !important;
        border-radius: 8px !important;
    }

    .sfl-order-item-details h4 {
        font-size: 0.82rem !important;
    }

    .sfl-meta {
        font-size: 0.72rem !important;
    }

    .sfl-order-item-qty {
        font-size: 0.78rem !important;
    }

    .sfl-order-item-total {
        font-size: 0.82rem !important;
    }

    .sfl-total-row {
        font-size: 0.8rem !important;
    }

    .sfl-total-row.sfl-grand-total {
        font-size: 1rem !important;
    }

    .sfl-order-addresses {
        gap: 10px !important;
    }

    .sfl-address-block {
        padding: 14px !important;
    }

    /* Addresses */
    .sfl-address-card {
        padding: 20px !important;
        border-radius: 14px !important;
    }

    .sfl-address-header {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .sfl-edit-link {
        padding: 8px 14px;
    }

    .sfl-address-card address {
        font-size: 0.88rem;
    }

    /* Forms */
    .sfl-form-section {
        padding: 18px !important;
        border-radius: 12px !important;
    }

    .sfl-form-section h3 {
        font-size: 1rem !important;
    }

    .sfl-myaccount-content input[type="text"],
    .sfl-myaccount-content input[type="email"],
    .sfl-myaccount-content input[type="password"],
    .sfl-myaccount-content input[type="tel"],
    .sfl-myaccount-content input[type="number"],
    .sfl-myaccount-content .input-text,
    .sfl-myaccount-content select,
    .sfl-myaccount-content textarea,
    .sfl-form-group input,
    .sfl-edit-address .sfl-form-section input,
    .sfl-edit-address .sfl-form-section select {
        padding: 12px 14px !important;
        font-size: 16px !important; /* prevent iOS zoom */
        border-radius: 10px !important;
    }

    .sfl-form-actions button,
    .sfl-form-actions input[type="submit"] {
        width: 100% !important;
        padding: 14px 24px !important;
        font-size: 0.95rem !important;
    }

    .sfl-myaccount-content .woocommerce-Button,
    .sfl-myaccount-content button[type="submit"],
    .sfl-myaccount-content .button,
    .sfl-myaccount-content input[type="submit"] {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        font-size: 0.9rem !important;
    }

    /* Downloads */
    .sfl-download-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .sfl-download-icon {
        width: 48px;
        height: 48px;
    }

    .sfl-download-info h3 {
        font-size: 1rem !important;
    }

    /* Payment methods */
    .sfl-payment-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 18px !important;
        gap: 12px !important;
    }

    .sfl-payment-card .sfl-delete-btn {
        align-self: flex-end;
    }

    .sfl-add-method-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
    }

    /* Dashboard order card */
    .sfl-dashboard .sfl-order-card {
        padding: 14px 16px !important;
    }

    .sfl-dashboard .sfl-order-number {
        font-size: 0.9rem;
    }

    .sfl-badge {
        font-size: 0.6rem;
        padding: 3px 10px;
    }

    .sfl-dashboard .sfl-order-total {
        font-size: 0.9rem;
    }

    .sfl-order-detail-link {
        font-size: 0.78rem;
    }

    /* Empty states */
    .sfl-orders-empty svg,
    .sfl-downloads-empty svg,
    .sfl-payment-empty svg,
    .sfl-empty-orders svg {
        width: 60px !important;
        height: 60px !important;
    }

    .sfl-orders-empty p,
    .sfl-downloads-empty p,
    .sfl-payment-empty p,
    .sfl-empty-orders p {
        font-size: 0.88rem;
    }

    .sfl-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    /* Login / Register */
    .woocommerce-account .woocommerce-form-login,
    .woocommerce-account .woocommerce-form-register {
        padding: 24px !important;
        border-radius: 16px !important;
    }

    .woocommerce-account .woocommerce-form-login h2,
    .woocommerce-account .woocommerce-form-register h2 {
        font-size: 1.25rem !important;
    }
}


/* ===== VERY SMALL PHONE (≤360px) ===== */
@media (max-width: 360px) {

    .sfl-myaccount-container {
        padding: 0 8px !important;
    }

    .sfl-myaccount-content {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .sfl-myaccount-header .page-title {
        font-size: 22px !important;
    }

    /* Actions → 1 col */
    .sfl-actions-grid {
        grid-template-columns: 1fr !important;
    }

    .sfl-action-card {
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 14px 16px !important;
        gap: 12px !important;
    }

    .sfl-welcome-card {
        padding: 16px !important;
    }

    .sfl-welcome-card h2 {
        font-size: 1.1rem !important;
    }
}


/* ==========================================================================
   19. ACCESSIBILITY
   ========================================================================== */

.woocommerce-account a:focus-visible,
.woocommerce-account button:focus-visible,
.woocommerce-account input:focus-visible,
.woocommerce-account select:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* 44px minimum touch targets on all interactive elements */
.sfl-account-nav ul li a,
.sfl-action-card,
.sfl-btn,
.sfl-btn-primary,
.sfl-btn-secondary,
.sfl-download-btn,
.sfl-edit-link,
.sfl-order-detail-link,
.sfl-cta-shop,
.sfl-myaccount-content .woocommerce-Button,
.sfl-myaccount-content button[type="submit"] {
    min-height: 44px;
}

/* Smooth scrolling on the nav bar */
.sfl-account-nav ul {
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.sfl-account-nav ul li {
    scroll-snap-align: start;
}

/* Prevent text selection on nav during swipe */
@media (pointer: coarse) {
    .sfl-account-nav ul {
        -webkit-user-select: none;
        user-select: none;
    }
}