/**
 * DATA eSIM — My Account + Order Received CSS
 * --------------------------------------------------------------------
 * Restilizează shortcode-ul [woocommerce_my_account] și pagina de
 * mulțumire `/order-received/` să se potrivească cu brand-ul.
 *
 * NU modifică template-uri WC, doar override CSS — păstrăm compatibilitate
 * totală cu update-urile WC.
 * --------------------------------------------------------------------
 */


/* ====================================================================
 * CONTAINER GLOBAL — page hero brand-uit deasupra conținutului WC
 * ==================================================================== */
.woocommerce-account .entry-header,
.woocommerce-order-received .entry-header,
.woocommerce-lost-password .entry-header {
    background: var(--primary);
    color: white;
    padding: 70px 24px 50px;
    text-align: center;
    margin: 0;
}

/* Forțează titlul alb — Blocksy aplică color: var(--theme-text-color) pe .entry-title cu specificitate mare */
body.woocommerce-account .entry-header .entry-title,
body.woocommerce-account .entry-header h1.entry-title,
body.woocommerce-account .entry-header h1,
body.woocommerce-order-received .entry-header .entry-title,
body.woocommerce-order-received .entry-header h1.entry-title,
body.woocommerce-order-received .entry-header h1,
body.woocommerce-lost-password .entry-header .entry-title,
body.woocommerce-lost-password .entry-header h1.entry-title,
body.woocommerce-lost-password .entry-header h1,
.woocommerce-account .entry-header .entry-title,
.woocommerce-order-received .entry-header .entry-title,
.woocommerce-lost-password .entry-header .entry-title {
    color: white !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(34px, 4.5vw, 50px) !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: white !important;
}

.woocommerce-account .entry-content,
.woocommerce-order-received .entry-content,
.woocommerce-lost-password .entry-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}


/* ====================================================================
 * MY ACCOUNT — LOGGED OUT
 * Layout: 1 singur card centrat. Form login implicit vizibil.
 * Form register ascuns inițial, apare la click pe link „Înregistrează-te".
 * Toggle implementat în JS (esim-account-toggle.js).
 * ==================================================================== */
.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 460px;
    margin: 0 auto;
}

/* Ascundem header-ele „Autentificare" și „Înregistrare" originale —
   le înlocuim cu propriile titluri în interiorul card-ului */
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account:not(.logged-in) .u-column1 > h2,
.woocommerce-account:not(.logged-in) .u-column2 > h2 {
    display: none !important;
}

/* Layout columns flow — stivuim natural, dar ascundem coloana register
   inițial (afișată la click) */
.woocommerce-account:not(.logged-in) .u-columns {
    display: block !important;
    margin: 0 !important;
}
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Default: arătăm login (col1), ascundem register (col2) */
.woocommerce-account:not(.logged-in):not(.show-register) .u-column2 {
    display: none !important;
}
.woocommerce-account.show-register:not(.logged-in) .u-column1 {
    display: none !important;
}
.woocommerce-account.show-register:not(.logged-in) .u-column2 {
    display: block !important;
}

/* Card login/register/reset-password */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
    background: white !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    padding: 36px 32px !important;
    box-shadow: 0 14px 30px -20px rgba(14, 42, 74, 0.08) !important;
    margin: 0 !important;
}

/* Titlu adăugat de JS deasupra formularului */
.datasim-account-title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    color: var(--primary) !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.015em !important;
    text-align: left !important;
}
.datasim-account-subtitle {
    color: var(--text-on-light-muted) !important;
    font-size: 14px !important;
    margin: 0 0 24px !important;
    line-height: 1.5 !important;
}

/* Link toggle login ↔ register (la finalul card-ului) */
.datasim-account-toggle {
    text-align: center !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--border-light) !important;
    color: var(--text-on-light-muted) !important;
    font-size: 14px !important;
}
.datasim-account-toggle a {
    color: var(--accent) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 4px !important;
}
.datasim-account-toggle a:hover {
    text-decoration: underline !important;
}

/* Header înainte de form (în interiorul card-ului) */
.woocommerce-account h2 {
    display: none !important;  /* WC adaugă "Autentificare" / "Înregistrare" — ascundem, folosim datasim-account-title */
}


/* ====================================================================
 * AUTOFILL FIX — Chrome injectează background galben/albastru pe câmpurile
 * completate automat. Forțează background alb cu inset shadow trick.
 * ==================================================================== */
.woocommerce form .form-row input:-webkit-autofill,
.woocommerce form .form-row input:-webkit-autofill:hover,
.woocommerce form .form-row input:-webkit-autofill:focus,
.woocommerce form .form-row input:-webkit-autofill:active,
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: var(--primary) !important;
    transition: background-color 9999s ease-in-out 0s !important;
    box-shadow: 0 0 0 1000px white inset !important;
    background-color: white !important;
}


/* ====================================================================
 * PASSWORD VISIBILITY TOGGLE — custom (înlocuiește WC default)
 *
 * JS-ul esim-password-toggle.js înlocuiește butonul WC cu unul propriu
 * `.datasim-pw-toggle` care conține SVG inline (nu depinde de fonturi).
 * ==================================================================== */

/* Ascunde butonul WC default (JS îl și ascunde inline, dar pentru
   siguranță suplimentară punem și CSS) */
.woocommerce form .show-password-input {
    display: none !important;
}

/* Wrapper jurul input-ului (creat de JS) */
.datasim-pw-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* Buton nou show/hide — specificitate maximă ca să bată Blocksy + WC button styles */
button.datasim-pw-toggle,
.woocommerce form button.datasim-pw-toggle,
.datasim-pw-wrap button.datasim-pw-toggle {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #1a8cff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.7 !important;
    transition: opacity 0.15s, background-color 0.15s !important;
    z-index: 5 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    font-size: 0 !important;
}
button.datasim-pw-toggle:hover,
.woocommerce form button.datasim-pw-toggle:hover,
.datasim-pw-wrap button.datasim-pw-toggle:hover {
    opacity: 1 !important;
    background: rgba(26, 140, 255, 0.1) !important;
    background-color: rgba(26, 140, 255, 0.1) !important;
    color: #1a8cff !important;
    transform: translateY(-50%) !important;
    box-shadow: none !important;
}
button.datasim-pw-toggle:focus,
.woocommerce form button.datasim-pw-toggle:focus {
    outline: 2px solid #1a8cff !important;
    outline-offset: 2px !important;
    opacity: 1 !important;
}
button.datasim-pw-toggle.is-active,
.woocommerce form button.datasim-pw-toggle.is-active {
    opacity: 1 !important;
    color: #1a8cff !important;
}

/* SVG în interior — culoare accent, full size */
button.datasim-pw-toggle svg,
.datasim-pw-toggle svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
    color: #1a8cff !important;
    stroke: #1a8cff !important;
    fill: none !important;
}
button.datasim-pw-toggle svg path,
button.datasim-pw-toggle svg circle,
button.datasim-pw-toggle svg line,
.datasim-pw-toggle svg path,
.datasim-pw-toggle svg circle,
.datasim-pw-toggle svg line {
    stroke: #1a8cff !important;
    fill: none !important;
}

/* Strength meter (pe register/edit-account) */
.woocommerce form .woocommerce-password-strength {
    background: var(--bg-soft) !important;
    color: var(--text-on-light-muted) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
    text-align: left !important;
    letter-spacing: 0.02em !important;
}
.woocommerce form .woocommerce-password-strength.strong {
    background: rgba(22, 163, 74, 0.08) !important;
    color: #15803d !important;
    border-color: rgba(22, 163, 74, 0.2) !important;
}
.woocommerce form .woocommerce-password-strength.good {
    background: rgba(26, 140, 255, 0.06) !important;
    color: var(--accent) !important;
    border-color: rgba(26, 140, 255, 0.2) !important;
}
.woocommerce form .woocommerce-password-strength.short,
.woocommerce form .woocommerce-password-strength.bad {
    background: rgba(249, 115, 22, 0.08) !important;
    color: #c2410c !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
}
.woocommerce form .woocommerce-password-hint {
    font-size: 12px !important;
    color: var(--text-on-light-muted) !important;
    margin-top: 6px !important;
    font-style: normal !important;
    line-height: 1.5 !important;
}

/* Padding-right pe input parolă ca să nu intre textul peste buton */
input[type="password"][data-datasim-toggle],
.woocommerce form .password-input input[type="password"],
.woocommerce form .password-input input[type="text"],
.datasim-pw-wrap input[type="password"],
.datasim-pw-wrap input[type="text"] {
    padding-right: 48px !important;
}


/* ====================================================================
 * FORM FIELDS (login, register, lost-password, edit-account)
 * ==================================================================== */
.woocommerce form .form-row {
    margin-bottom: 18px !important;
    padding: 0 !important;
}
.woocommerce form .form-row label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--text-on-light-muted) !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}
.woocommerce form .form-row .required {
    color: var(--accent) !important;
    text-decoration: none !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 10px !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    color: var(--primary) !important;
    background: white !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(26, 140, 255, 0.12) !important;
}

/* Show/hide password button */
.woocommerce form .password-input {
    display: block !important;
    position: relative !important;
}
.woocommerce form .show-password-input {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    color: var(--text-on-light-muted) !important;
    font-size: 13px !important;
}

/* Remember me checkbox */
.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--primary) !important;
    cursor: pointer !important;
}
.woocommerce-form-login__rememberme input,
.woocommerce-form__input-checkbox {
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--accent) !important;
}

/* Lost password link */
.woocommerce-LostPassword,
.lost_password {
    margin-top: 14px !important;
    font-size: 13px !important;
}
.woocommerce-LostPassword a,
.lost_password a {
    color: var(--accent) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.woocommerce-LostPassword a:hover,
.lost_password a:hover {
    text-decoration: underline !important;
}


/* ====================================================================
 * BUTOANE
 * ==================================================================== */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce-MyAccount-content .button,
.woocommerce-form-login button,
.woocommerce-form-register button {
    background: var(--accent) !important;
    color: white !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 15px 28px !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    box-shadow: 0 8px 20px -8px rgba(26, 140, 255, 0.35) !important;
}
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 24px -8px rgba(26, 140, 255, 0.45) !important;
    background: var(--accent-deep) !important;
}

/* Buton secundary (ex. „View" în orders list) */
.woocommerce a.button.view {
    background: transparent !important;
    color: var(--accent) !important;
    border: 1.5px solid var(--accent) !important;
    box-shadow: none !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
}
.woocommerce a.button.view:hover {
    background: var(--accent) !important;
    color: white !important;
}


/* ====================================================================
 * MY ACCOUNT — LOGGED IN (dashboard cu sidebar + content)
 * ==================================================================== */
.woocommerce-account.logged-in .woocommerce {
    display: grid !important;
    grid-template-columns: 260px 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}

/* SIDEBAR */
.woocommerce-MyAccount-navigation {
    background: white !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    margin: 0 !important;
    box-shadow: 0 8px 20px -16px rgba(14, 42, 74, 0.1) !important;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-MyAccount-navigation li {
    list-style: none !important;
    margin: 0 !important;
}
.woocommerce-MyAccount-navigation li a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background 0.15s, color 0.15s !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
.woocommerce-MyAccount-navigation li a:hover {
    background: var(--bg-soft) !important;
}
.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--accent) !important;
    color: white !important;
}

/* CONTENT (dashboard, orders, etc.) */
.woocommerce-MyAccount-content {
    background: white !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    padding: 36px 32px !important;
    box-shadow: 0 8px 20px -16px rgba(14, 42, 74, 0.06) !important;
}
.woocommerce-MyAccount-content p {
    color: var(--text-on-light-muted) !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    margin: 0 0 14px !important;
}
.woocommerce-MyAccount-content p strong,
.woocommerce-MyAccount-content p a {
    color: var(--primary) !important;
    font-weight: 600 !important;
}
.woocommerce-MyAccount-content p a {
    color: var(--accent) !important;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: -0.015em !important;
}
.woocommerce-MyAccount-content h2 {
    font-size: 22px !important;
    margin: 0 0 16px !important;
}
.woocommerce-MyAccount-content h3 {
    font-size: 17px !important;
    margin: 22px 0 12px !important;
}


/* ====================================================================
 * ORDERS TABLE (lista comenzi)
 * ==================================================================== */
.woocommerce-orders-table,
.shop_table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: white !important;
    margin: 0 !important;
}
.woocommerce-orders-table thead th,
.shop_table thead th {
    background: var(--bg-soft) !important;
    color: var(--text-on-light-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 14px 16px !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
}
.woocommerce-orders-table tbody td,
.shop_table tbody td {
    padding: 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--primary) !important;
    font-size: 14px !important;
    background: white !important;
}
.woocommerce-orders-table tbody tr:hover td,
.shop_table tbody tr:hover td {
    background: var(--bg-soft) !important;
}

/* Status comandă */
.woocommerce-orders-table mark.order-status,
.shop_table mark.order-status {
    background: var(--bg-soft) !important;
    color: var(--primary) !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border: 1px solid var(--border-light) !important;
}
.woocommerce-orders-table mark.status-completed,
.shop_table mark.status-completed {
    background: rgba(22, 163, 74, 0.08) !important;
    color: #15803d !important;
    border-color: rgba(22, 163, 74, 0.2) !important;
}
.woocommerce-orders-table mark.status-processing,
.shop_table mark.status-processing {
    background: rgba(26, 140, 255, 0.08) !important;
    color: var(--accent) !important;
    border-color: rgba(26, 140, 255, 0.2) !important;
}
.woocommerce-orders-table mark.status-pending,
.shop_table mark.status-pending {
    background: rgba(249, 115, 22, 0.08) !important;
    color: #c2410c !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
}
.woocommerce-orders-table mark.status-failed,
.shop_table mark.status-failed,
.woocommerce-orders-table mark.status-cancelled,
.shop_table mark.status-cancelled {
    background: rgba(220, 38, 38, 0.06) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}

/* No orders state */
.woocommerce-Message--info,
.woocommerce-info {
    position: relative !important;
    background: rgba(26, 140, 255, 0.05) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(26, 140, 255, 0.18) !important;
    border-left: 3px solid var(--accent) !important;
    padding: 16px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
    list-style: none !important;
}

/* Ascunde iconița ::before WC default care se suprapune peste text */
.woocommerce-Message--info::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::before {
    display: none !important;
    content: none !important;
}

.woocommerce-Message--info a,
.woocommerce-info a {
    color: var(--accent) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.woocommerce-Message--info .button,
.woocommerce-info .button {
    float: right !important;
    margin: 0 0 0 12px !important;
}


/* ====================================================================
 * ERROR / SUCCESS NOTICES
 * ==================================================================== */
.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-error {
    position: relative !important;
    background: rgba(220, 38, 38, 0.05) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
    border-left: 3px solid #dc2626 !important;
    padding: 16px 20px !important;
    border-radius: 10px !important;
    list-style: none !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
}
.woocommerce-message {
    position: relative !important;
    background: rgba(22, 163, 74, 0.06) !important;
    color: #15803d !important;
    border: 1px solid rgba(22, 163, 74, 0.18) !important;
    border-left: 3px solid #16a34a !important;
    padding: 16px 20px !important;
    border-radius: 10px !important;
    list-style: none !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
}


/* ====================================================================
 * ORDER RECEIVED (Thank You page)
 * ==================================================================== */
.woocommerce-order {
    max-width: 720px !important;
    margin: 0 auto !important;
}

/* Mesaj principal de succes */
.woocommerce-thankyou-order-received {
    background: rgba(22, 163, 74, 0.06) !important;
    border: 1px solid rgba(22, 163, 74, 0.2) !important;
    border-left: 4px solid #16a34a !important;
    color: #15803d !important;
    padding: 24px 28px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 32px !important;
}
.woocommerce-thankyou-order-received::before {
    content: "✓ ";
    font-size: 20px;
    margin-right: 6px;
    color: #16a34a;
}

/* Order overview (cifre comandă, dată, total, plată) */
.woocommerce-order-overview {
    background: white !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    list-style: none !important;
    margin: 0 0 32px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 16px !important;
}
.woocommerce-order-overview li {
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
}
.woocommerce-order-overview li strong {
    display: block !important;
    color: var(--primary) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    margin-top: 4px !important;
}

/* Order details */
.woocommerce-order-details,
.woocommerce-customer-details {
    background: white !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
}
.woocommerce-order-details__title,
.woocommerce-column__title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: var(--primary) !important;
    margin: 0 0 18px !important;
    letter-spacing: -0.015em !important;
}


/* ====================================================================
 * RESPONSIVE
 * ==================================================================== */
@media (max-width: 768px) {
    /* Container principal — mai puțin padding pe mobil */
    .woocommerce-account .entry-content {
        padding: 24px 16px 60px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .woocommerce-account.logged-in .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        max-width: 100% !important;
    }
    .woocommerce-MyAccount-content {
        padding: 24px 18px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .woocommerce-MyAccount-navigation {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .woocommerce-orders-table {
        font-size: 13px !important;
    }
    .woocommerce-orders-table thead {
        display: none !important;
    }
    .woocommerce-orders-table tbody td {
        display: block !important;
        padding: 8px 16px !important;
        border-bottom: none !important;
    }
    .woocommerce-orders-table tbody td::before {
        content: attr(data-title) ": " !important;
        font-weight: 700 !important;
        color: var(--text-on-light-muted) !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        display: inline-block !important;
        min-width: 80px !important;
    }
    .woocommerce-orders-table tbody tr {
        display: block !important;
        border: 1px solid var(--border-light) !important;
        border-radius: 10px !important;
        padding: 14px 4px !important;
        margin-bottom: 12px !important;
    }

    /* ====== eSIM CARDS — mobile layout ====== */
    .my-esims-list {
        gap: 14px !important;
    }
    .esim-card {
        padding: 16px !important;
    }

    /* Header card — drapel + țară + status pill */
    .esim-card-head {
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    .esim-card-country {
        gap: 10px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;  /* permite text truncare */
    }
    .esim-card-flag,
    span.esim-card-flag {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
    }
    .esim-card-name {
        font-size: 16px !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
    .esim-card-meta {
        font-size: 11px !important;
        flex-wrap: wrap !important;
        gap: 4px 10px !important;
    }
    .esim-card-status {
        font-size: 10px !important;
        padding: 4px 8px !important;
        flex-shrink: 0 !important;
    }

    /* Body card — usage ring + details (active) */
    .esim-card-body {
        gap: 14px !important;
    }
    .esim-usage-ring {
        width: 76px !important;
        height: 76px !important;
        flex-shrink: 0 !important;
    }
    .esim-usage-ring-inner {
        width: 60px !important;
        height: 60px !important;
    }
    .esim-usage-ring-inner strong {
        font-size: 16px !important;
    }
    .esim-usage-ring-inner span {
        font-size: 10px !important;
    }
    .esim-usage-details {
        font-size: 13px !important;
        gap: 6px !important;
    }
    .esim-usage-row {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        font-size: 12.5px !important;
    }
    .esim-usage-row .lbl {
        font-size: 11px !important;
    }

    /* Body — pending / installed / deactivated */
    .esim-card-body--pending,
    .esim-card-body--installed,
    .esim-card-body--deactivated {
        gap: 12px !important;
        padding: 12px 14px !important;
    }
    .esim-card-body--pending h4,
    .esim-card-body--installed h4,
    .esim-card-body--deactivated h4 {
        font-size: 13px !important;
    }
    .esim-card-body--pending p,
    .esim-card-body--installed p,
    .esim-card-body--deactivated p {
        font-size: 11.5px !important;
    }
    .esim-pending-icon svg,
    .esim-installed-icon svg,
    .esim-deactivated-icon svg {
        width: 26px !important;
        height: 26px !important;
    }

    /* Actions — butoanele de jos */
    .esim-card-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }
    .esim-card-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 11px 14px !important;
        font-size: 13px !important;
    }

    /* My-eSIMs intro bar */
    .my-esims-intro {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    .my-esims-intro p {
        font-size: 13px !important;
    }
    .my-esims-refresh-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ====================================================================
 * NEXTEND SOCIAL LOGIN — Brand integration
 * Stilizează butoanele Google/Facebook să se potrivească cu UI-ul.
 * ==================================================================== */

/* Container social login (Nextend îl inserează automat în form-uri WC) */
.nsl-container {
    margin-bottom: 20px !important;
    text-align: center !important;
}
.nsl-container-block {
    width: 100% !important;
}

/* Heading "Sau loghează-te cu" — text subtle deasupra butoanelor */
.nsl-container > div:first-child:not(.nsl-button),
.nsl-separator,
.nsl-login-heading {
    position: relative !important;
    text-align: center !important;
    margin: 16px 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-on-light-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
}

/* Buton social (Google, Facebook, etc.) — stil consistent */
.nsl-button,
.nsl-button-default,
a.nsl-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 16px !important;
    margin-bottom: 10px !important;
    background: white !important;
    border: 1.5px solid var(--border-light) !important;
    border-radius: 10px !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: border-color 0.15s, background 0.15s, transform 0.15s !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}
.nsl-button:hover,
.nsl-button-default:hover,
a.nsl-button:hover {
    border-color: var(--accent) !important;
    background: var(--bg-soft) !important;
    transform: translateY(-1px) !important;
    color: var(--primary) !important;
}

/* Iconițe în butoane */
.nsl-button .nsl-button-svg-container,
.nsl-button-svg-container {
    margin-right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.nsl-button svg,
.nsl-button-svg-container svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

/* Buton Google — păstrăm logo-ul colorat (oficial Google Sign-In) */
.nsl-button-google {
    background: white !important;
    border: 1.5px solid var(--border-light) !important;
    color: #1f1f1f !important;
}
.nsl-button-google:hover {
    background: var(--bg-soft) !important;
    color: #1f1f1f !important;
}

/* Buton Facebook — albastru oficial Meta */
.nsl-button-facebook {
    background: #1877f2 !important;
    border: 1.5px solid #1877f2 !important;
    color: white !important;
}
.nsl-button-facebook:hover {
    background: #166fe5 !important;
    border-color: #166fe5 !important;
    color: white !important;
}
.nsl-button-facebook .nsl-button-label-container {
    color: white !important;
}
.nsl-button-facebook svg path {
    fill: white !important;
}

/* Label text în interior */
.nsl-button-label-container {
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

/* Mod „icon only" — buton circular cu doar iconița */
.nsl-container-icon .nsl-button {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    margin: 0 6px !important;
}
.nsl-container-icon {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
}


/* ====================================================================
 * MY eSIMs — Lista eSIM-uri în tab-ul „eSIM-urile mele"
 * ==================================================================== */

.my-esims-wrap {
    width: 100%;
}

.my-esims-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
}
.my-esims-title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    color: var(--primary) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 4px !important;
}
.my-esims-subtitle {
    color: var(--text-on-light-muted) !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Buton refresh */
.my-esims-refresh {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: var(--bg-soft) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    box-shadow: none !important;
}
.my-esims-refresh:hover {
    background: white !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
.my-esims-refresh.loading svg {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Lista de carduri */
.my-esims-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Empty / Error state */
.my-esims-empty {
    text-align: center;
    padding: 56px 32px;
    background: var(--bg-soft);
    border: 1px dashed var(--border-light);
    border-radius: 14px;
    color: var(--text-on-light-muted);
}
.my-esims-empty svg {
    color: var(--text-on-light-muted);
    margin-bottom: 14px;
    opacity: 0.6;
}
.my-esims-empty.error svg {
    color: #dc2626;
}
.my-esims-empty h3 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: var(--primary) !important;
    margin: 0 0 6px !important;
}
.my-esims-empty p {
    color: var(--text-on-light-muted) !important;
    font-size: 14px !important;
    margin: 0 0 18px !important;
}
.my-esims-empty .btn {
    display: inline-flex !important;
}


/* ====================================================================
 * ESIM CARD
 * ==================================================================== */
.esim-card {
    background: white !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    position: relative !important;
}
.esim-card:hover {
    border-color: rgba(26,140,255,0.4) !important;
    box-shadow: 0 12px 30px -22px rgba(14, 42, 74, 0.18) !important;
}
.esim-card--pending {
    border-color: rgba(249, 115, 22, 0.3) !important;
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.02), white) !important;
}
.esim-card--expired {
    opacity: 0.72 !important;
}

/* Header card: drapel + țară + status */
.esim-card-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
.esim-card-country {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.esim-card-flag {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.04) !important;
}
.esim-card-name {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: var(--primary) !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 4px !important;
    line-height: 1.2 !important;
}
.esim-card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    color: var(--text-on-light-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.esim-card-meta span {
    position: relative !important;
}
.esim-card-meta span:not(:last-child)::after {
    content: "·";
    position: absolute;
    right: -8px;
    color: var(--border-light);
}
.esim-card-order {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
    font-weight: 600 !important;
    opacity: 0.7 !important;
}

/* Status pill */
.esim-card-status {
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
.esim-card-status.status-active {
    background: rgba(22, 163, 74, 0.1) !important;
    color: #15803d !important;
}
.esim-card-status.status-pending {
    background: rgba(249, 115, 22, 0.1) !important;
    color: #c2410c !important;
}
.esim-card-status.status-expired {
    background: var(--bg-soft) !important;
    color: var(--text-on-light-muted) !important;
}


/* ===== Body card pentru status=active (cu usage ring) ===== */
.esim-card-body {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 16px !important;
    background: var(--bg-soft) !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
}

/* Usage ring — folosește conic-gradient pentru cerc */
.esim-usage-ring {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    background: conic-gradient(
        var(--accent) calc(var(--pct, 0) * 1%),
        var(--border-light) calc(var(--pct, 0) * 1%)
    ) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}
.esim-usage-ring-inner {
    width: 70px !important;
    height: 70px !important;
    background: white !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}
.esim-usage-ring-inner strong {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: var(--primary) !important;
}
.esim-usage-ring-inner span {
    font-size: 9px !important;
    color: var(--text-on-light-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.esim-usage-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.esim-usage-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13px !important;
}
.esim-usage-row .lbl {
    color: var(--text-on-light-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 10px !important;
}
.esim-usage-row strong {
    color: var(--primary) !important;
    font-weight: 700 !important;
}
.esim-usage-row .warning {
    color: #c2410c !important;
    font-weight: 700 !important;
}


/* ===== Body card pentru status=pending ===== */
.esim-card-body--pending {
    background: rgba(249, 115, 22, 0.06) !important;
    padding: 14px 16px !important;
    border-left: 3px solid #f97316 !important;
    border-radius: 6px !important;
    align-items: center !important;
}
.esim-pending-icon {
    flex-shrink: 0 !important;
    color: #f97316 !important;
}
.esim-card-body--pending h4 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--primary) !important;
    margin: 0 0 2px !important;
}
.esim-card-body--pending p {
    color: var(--text-on-light-muted) !important;
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}


/* ===== Body card pentru status=expired ===== */
.esim-card-body--expired {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}
.esim-expired-info {
    font-size: 13px !important;
    color: var(--text-on-light-muted) !important;
    font-style: italic !important;
}


/* ===== Action buttons ===== */
.esim-card-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.esim-card .esim-card-actions .btn,
.esim-card-actions .btn,
.esim-card-actions a.btn,
.esim-card-actions button.btn {
    flex: 0 1 auto !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    min-height: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.3 !important;
    transition: all 0.15s !important;
    box-shadow: none !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Primary button — accent albastru */
.esim-card .esim-card-actions .btn-primary,
.esim-card-actions a.btn-primary,
.esim-card-actions button.btn-primary {
    background: var(--accent) !important;
    background-color: var(--accent) !important;
    color: white !important;
    border: 1.5px solid var(--accent) !important;
}
.esim-card-actions .btn-primary:hover {
    background: var(--accent-deep) !important;
    background-color: var(--accent-deep) !important;
    color: white !important;
    border-color: var(--accent-deep) !important;
    transform: translateY(-1px) !important;
}

/* Ghost button — alb cu border, text navy */
.esim-card .esim-card-actions .btn-ghost,
.esim-card-actions a.btn-ghost,
.esim-card-actions button.btn-ghost {
    background: white !important;
    background-color: white !important;
    color: var(--primary) !important;
    border: 1.5px solid var(--border-light) !important;
}
.esim-card-actions .btn-ghost:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: rgba(26, 140, 255, 0.04) !important;
    background-color: rgba(26, 140, 255, 0.04) !important;
}


/* ===== Detalii expandate ===== */
.esim-card-extra {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--border-light) !important;
}
.esim-card-extra dl {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 6px 14px !important;
    margin: 0 !important;
    font-size: 13px !important;
}
.esim-card-extra dt {
    color: var(--text-on-light-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 11px !important;
    padding-top: 2px !important;
}
.esim-card-extra dd {
    color: var(--primary) !important;
    margin: 0 !important;
    word-break: break-all !important;
}
.esim-card-extra code {
    background: var(--bg-soft) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
    font-size: 12px !important;
    color: var(--primary) !important;
}


/* ===== Responsive ===== */
@media (max-width: 640px) {
    .esim-card-body {
        flex-direction: column !important;
        text-align: center !important;
    }
    .esim-usage-ring {
        margin: 0 auto !important;
    }
    .esim-usage-details {
        width: 100% !important;
    }
    .esim-card-head {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .esim-card-extra dl {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }
    .esim-card-extra dt {
        margin-top: 8px !important;
    }
}

/* Fallback când nu avem drapel — afișează inițialele țării */
.esim-card-flag-fallback {
    background: var(--accent) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
}

/* Loading state — primă încărcare eSIM-uri (API lent) */
.my-esims-loading {
    text-align: center;
    padding: 56px 32px;
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    color: var(--text-on-light-muted);
}
.my-esims-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: var(--accent);
    animation: spin 1.2s linear infinite;
}
.my-esims-loading p {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--primary) !important;
    margin: 0 0 6px !important;
}
.my-esims-loading-hint {
    font-size: 13px !important;
    color: var(--text-on-light-muted) !important;
}


/* ====================================================================
 * DRAPELE — Specificitate suprema pentru cardurile eSIM
 * Re-aplicăm regulile flag pe selectori cu specificitate mai mare
 * (.esim-card-flag + .flag-XX) ca să bată orice override LiteSpeed Cache
 * sau Blocksy injection.
 * ==================================================================== */

/* Indonezia — roșu sus, alb jos */
.esim-card .esim-card-flag.flag-id,
.esim-card-flag.flag-id,
span.esim-card-flag.flag-id,
.flag.flag-id {
    background-color: #ffffff !important;
    background-image: linear-gradient(to bottom, #c0392b 0%, #c0392b 50%, #ffffff 50.01%, #ffffff 100%) !important;
    background: linear-gradient(to bottom, #c0392b 0%, #c0392b 50%, #ffffff 50.01%, #ffffff 100%) #ffffff !important;
}

/* Elveția — roșu cu cruce albă */
.esim-card-flag.flag-ch,
span.esim-card-flag.flag-ch {
    background: #d52b1e !important;
    position: relative !important;
}

/* Marea Britanie — albastru cu cruce „+" */
.esim-card-flag.flag-gb,
span.esim-card-flag.flag-gb {
    background: #012169 !important;
    position: relative !important;
}

/* Turcia — roșu solid cu semilună */
.esim-card-flag.flag-tr,
span.esim-card-flag.flag-tr {
    background: #c0392b !important;
}

/* Spania — gălbui cu dungi roșii (variantă simplificată) */
.esim-card-flag.flag-es,
span.esim-card-flag.flag-es {
    background: linear-gradient(180deg, #c0392b 0%, #c0392b 25%, #f1c40f 25%, #f1c40f 75%, #c0392b 75%, #c0392b 100%) !important;
}

/* SUA — dungi roșii și albe + albastru colț */
.esim-card-flag.flag-us,
span.esim-card-flag.flag-us {
    background:
        linear-gradient(180deg,
            #b22234 0%, #b22234 14%,
            white 14%, white 28%,
            #b22234 28%, #b22234 42%,
            white 42%, white 56%,
            #b22234 56%, #b22234 70%,
            white 70%, white 84%,
            #b22234 84%, #b22234 100%) !important;
}

/* Grecia — dungi orizontale albastru/alb */
.esim-card-flag.flag-gr,
span.esim-card-flag.flag-gr {
    background: linear-gradient(180deg,
        #0d5eaf 0%, #0d5eaf 22%,
        white 22%, white 44%,
        #0d5eaf 44%, #0d5eaf 66%,
        white 66%, white 88%,
        #0d5eaf 88%, #0d5eaf 100%) !important;
}

/* Franța — 3 dungi verticale */
.esim-card-flag.flag-fr,
span.esim-card-flag.flag-fr {
    background: linear-gradient(90deg, #002654 33%, white 33%, white 66%, #ed2939 66%) !important;
}

/* Italia — 3 dungi verticale */
.esim-card-flag.flag-it,
span.esim-card-flag.flag-it {
    background: linear-gradient(90deg, #009246 33%, white 33%, white 66%, #ce2b37 66%) !important;
}

/* Germania */
.esim-card-flag.flag-de,
span.esim-card-flag.flag-de {
    background: linear-gradient(180deg, #000 33%, #d00 33%, #d00 66%, #ffce00 66%) !important;
}

/* Olanda */
.esim-card-flag.flag-nl,
span.esim-card-flag.flag-nl {
    background: linear-gradient(180deg, #ae1c28 33%, white 33%, white 66%, #21468b 66%) !important;
}


/* ====================================================================
 * STATUS PILLS — variante adiționale (installed, deactivated)
 * ==================================================================== */
.esim-card-status.status-installed {
    background: rgba(26, 140, 255, 0.1) !important;
    color: var(--accent-deep, #0d6fd9) !important;
}
.esim-card-status.status-deactivated {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #b91c1c !important;
}

/* Card variant pentru deactivated — opacity ușor scăzută */
.esim-card--deactivated {
    border-color: rgba(220, 38, 38, 0.2) !important;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.02), white) !important;
}

/* Body „installed" — fundal albastru subtle */
.esim-card-body--installed {
    background: rgba(26, 140, 255, 0.06) !important;
    padding: 14px 16px !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 6px !important;
    align-items: center !important;
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}
.esim-installed-icon {
    flex-shrink: 0 !important;
    color: var(--accent) !important;
}
.esim-card-body--installed h4 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--primary) !important;
    margin: 0 0 2px !important;
}
.esim-card-body--installed p {
    color: var(--text-on-light-muted) !important;
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Body „deactivated" — fundal roșu subtle */
.esim-card-body--deactivated {
    background: rgba(220, 38, 38, 0.05) !important;
    padding: 14px 16px !important;
    border-left: 3px solid #dc2626 !important;
    border-radius: 6px !important;
    align-items: center !important;
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}
.esim-deactivated-icon {
    flex-shrink: 0 !important;
    color: #dc2626 !important;
}
.esim-card-body--deactivated h4 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--primary) !important;
    margin: 0 0 2px !important;
}
.esim-card-body--deactivated p {
    color: var(--text-on-light-muted) !important;
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}


/* ====================================================================
 * BUTOANE INSTALARE — iOS (albastru accent) + Android (verde brand)
 * ==================================================================== */
.esim-card-actions .btn-install {
    padding: 10px 16px !important;
    font-weight: 700 !important;
}
.esim-card-actions .btn-install svg {
    flex-shrink: 0 !important;
}

/* iOS button — accent albastru (default .btn-primary, dar întărim) */
.esim-card-actions .btn-install:not(.btn-install-android) {
    background: var(--accent) !important;
    background-color: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}
.esim-card-actions .btn-install:not(.btn-install-android):hover {
    background: var(--accent-deep) !important;
    background-color: var(--accent-deep) !important;
    border-color: var(--accent-deep) !important;
}

/* Android button — verde brand Android — specificitate maximă pentru a bate .btn-primary */
.esim-card .esim-card-actions a.btn.btn-install-android,
.esim-card-actions a.btn-install-android,
a.btn-install-android,
.esim-card-actions .btn.btn-install-android,
.esim-card-actions .btn-install.btn-install-android {
    background: #34a853 !important;
    background-color: #34a853 !important;
    background-image: none !important;
    color: white !important;
    border-color: #34a853 !important;
    border: 1.5px solid #34a853 !important;
}
.esim-card .esim-card-actions a.btn.btn-install-android:hover,
.esim-card-actions a.btn-install-android:hover,
a.btn-install-android:hover,
.esim-card-actions .btn.btn-install-android:hover,
.esim-card-actions .btn-install.btn-install-android:hover {
    background: #2d9248 !important;
    background-color: #2d9248 !important;
    border-color: #2d9248 !important;
    color: white !important;
}


/* ====================================================================
 * Drapel Turcia (CH) — roșu cu semilună albă + stea (SVG inline)
 * Specificitate maximă, garantat să bată orice override.
 * ==================================================================== */
.esim-card .esim-card-flag.flag-tr,
.esim-card-flag.flag-tr,
span.esim-card-flag.flag-tr,
.flag.flag-tr {
    background-color: #e30a17 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle cx='20' cy='24' r='8' fill='white'/><circle cx='22' cy='24' r='6.5' fill='%23e30a17'/><polygon fill='white' points='30,24 33.5,22.8 31.3,25.9 31.3,22.1 33.5,25.2'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Asigură că ::after nu interferează (pentru orice flag care îl folosea) */
.esim-card-flag.flag-tr::after {
    display: none !important;
}


/* ====================================================================
 * DRAPEL — Mod imagine (când API trimite flag_image_url)
 *
 * Background-image setat inline pe <span>. CSS-ul gestionează doar
 * dimensionarea și forma (cerc cu border-radius).
 * ==================================================================== */
.esim-card-flag.esim-card-flag--img,
span.esim-card-flag.esim-card-flag--img {
    background-color: var(--bg-soft) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    /* Asigură că nu se aplică gradienturile vechi peste */
    background-image: inherit;
}


/* ====================================================================
 * FIX OVERFLOW MOBILE — eSIM cards nu trebuie să depășească viewport
 * ==================================================================== */
@media (max-width: 768px) {
    /* Container „eSIM-urile mele" */
    .my-esims-wrap,
    .my-esims-list {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Card — forțat să stea în container */
    .esim-card {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 16px !important;
    }

    /* Butoanele din interiorul cardului — text wrap, nu depășesc */
    .esim-card-actions .btn,
    .esim-card-actions a,
    .esim-card-actions button {
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 100% !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    /* Toate elementele din card respect box model */
    .esim-card * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Excepții — drapelul rămâne fixed */
    .esim-card-flag,
    span.esim-card-flag,
    .esim-card-flag.esim-card-flag--img {
        max-width: 38px !important;
        width: 38px !important;
    }
    .esim-card-flag svg {
        max-width: none !important;
    }
}


/* ====================================================================
 * AGGRESSIVE FIX: My Account pe mobile, full viewport
 * Multiple containere posibile (Blocksy, WP, WC) — toate la 100% width
 * ==================================================================== */
@media (max-width: 768px) {
    body.woocommerce-account,
    body.woocommerce-account #main-content,
    body.woocommerce-account #main,
    body.woocommerce-account main,
    body.woocommerce-account .ct-container,
    body.woocommerce-account .ct-container-full,
    body.woocommerce-account .ct-container-narrow,
    body.woocommerce-account .ct-container-wide,
    body.woocommerce-account .ct-main,
    body.woocommerce-account .site-content,
    body.woocommerce-account .site-main,
    body.woocommerce-account article,
    body.woocommerce-account article.post,
    body.woocommerce-account article[class*="post-"],
    body.woocommerce-account .entry-content {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Hard reset padding pentru entry-content pe mobile —
       singurul care reține padding lateral */
    body.woocommerce-account .entry-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 24px !important;
        padding-bottom: 60px !important;
    }
}


/* ====================================================================
 * iOS SAFARI FIX — rendering consistent cu Android/Desktop
 * Safari rotunjește subpixeli diferit, gap-urile flex se comportă altfel,
 * iconițele SVG cu width/height attribute pot fi mai mari decât setul CSS
 * ==================================================================== */
@supports (-webkit-touch-callout: none) {
    /* Forțează același box-sizing strict ca pe Android */
    .esim-card,
    .esim-card *,
    .esim-card *::before,
    .esim-card *::after {
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }

    /* Cardurile — padding consistent */
    .esim-card {
        padding: 16px !important;
    }

    /* Butoane Install — same height ca pe Android */
    .esim-card-actions .btn-install,
    .esim-card-actions a.btn-install-android,
    .esim-card-actions a.btn-install {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* Status pill — same alignment */
    .esim-card-status {
        margin: 0 !important;
    }

    /* SVG iconițe — forțează size CSS, ignore width/height attr */
    .esim-card-actions .btn svg,
    .esim-card-body--pending svg,
    .esim-installed-icon svg,
    .esim-pending-icon svg,
    .esim-deactivated-icon svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }
    .esim-pending-icon svg,
    .esim-installed-icon svg {
        width: 32px !important;
        height: 32px !important;
    }
    .esim-deactivated-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* Gap-uri flexbox — Safari renders unele gaps cu rounded values */
    .esim-card-actions {
        gap: 8px !important;
    }
    .esim-card-head {
        gap: 12px !important;
    }
    .esim-card-country {
        gap: 12px !important;
    }
}


/* ====================================================================
 * iOS SAFARI/CHROME FIX — spațiere lateral pentru consistență cu Android
 * @supports (-webkit-touch-callout: none) — target only iOS
 * ==================================================================== */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {

        /* Card padding lateral consistent cu Android (16px) */
        .esim-card {
            padding-left: 16px !important;
            padding-right: 16px !important;
        }

        /* Body „Gata de instalare" / „Instalat" / „Dezactivat" — padding lateral */
        .esim-card-body--pending,
        .esim-card-body--installed,
        .esim-card-body--deactivated {
            padding: 14px 16px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Conținut „Gata de instalare" — text aliniat centrat cu spațiu lateral */
        .esim-card-body--pending > div:last-child,
        .esim-card-body--installed > div:last-child,
        .esim-card-body--deactivated > div:last-child {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }

        /* Drapel — padding stânga consistent cu Android */
        .esim-card-flag,
        span.esim-card-flag {
            margin-left: 0 !important;
        }

        /* Header card — flex align să meargă identic */
        .esim-card-head {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
}