/* eSIM Provisioning Manager — Customer-facing Styles */

/* Panel wrapper */
.epm-esim-panel {
    margin-top: 40px;
    border-top: 2px solid #e0e0e0;
    padding-top: 24px;
}
.epm-panel-title {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Individual eSIM card */
.epm-esim-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    background: #fff;
}

/* State colours — left border accent */
.epm-state-ok      { border-left: 4px solid #28a745; }
.epm-state-fail    { border-left: 4px solid #dc3545; }
.epm-state-pending { border-left: 4px solid #ffc107; }

/* Header strip */
.epm-esim-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}
.epm-esim-name  { font-weight: 700; font-size: 15px; }
.epm-esim-name em { font-weight: 400; color: #777; font-size: 13px; }

/* State badge */
.epm-state-badge {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
    margin-left: auto;
}
.epm-state-ok    .epm-state-badge { background: #d4edda; color: #155724; }
.epm-state-fail  .epm-state-badge { background: #f8d7da; color: #721c24; }
.epm-state-pending .epm-state-badge { background: #fff3cd; color: #856404; }

/* Body */
.epm-esim-body {
    display: flex;
    gap: 24px;
    padding: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* QR block */
.epm-qr-block { flex-shrink: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.epm-qr-image {
    width: 160px;
    height: 160px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: block;
}
.epm-qr-hint { font-size: 12px; color: #666; margin-top: 6px; }

/* Details block */
.epm-details-block { flex: 1; min-width: 200px; }

.epm-detail {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    flex-wrap: wrap;
}
.epm-detail-key  { font-weight: 600; min-width: 80px; }
.epm-detail-val  { color: #333; }
.epm-mono        { font-family: monospace; font-size: 12px; background: #f4f4f4; padding: 2px 6px; border-radius: 3px; }

/* Usage section */
.epm-usage-block { margin-top: 12px; }
/* Check eSIM Status button — inherits theme WC .button styles */
.epm-btn-usage { cursor: pointer; }
.epm-btn-usage:disabled { opacity: .6; cursor: default; }

.epm-usage-data {
    margin-top: 10px;
    font-size: 13px;
}
.epm-usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    margin-top: 6px;
}
.epm-usage-row { display: flex; flex-direction: column; }
.epm-usage-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .5px; }
.epm-usage-value { font-weight: 700; font-size: 15px; }
.epm-not-activated { font-style: italic; color: #888; margin-top: 6px; }
.epm-error-msg { color: #dc3545; font-size: 13px; margin-top: 6px; }

/* TopUp block */
.epm-topup-block { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Top Up button — inherits theme WC .button styles */
.epm-btn-topup { text-decoration: none !important; }
.epm-topup-hint { font-size: 12px; color: #666; }

/* Shared action button column — both buttons same width */
.epm-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.epm-status-block { width: 100%; }
.epm-topup-block  { width: 100%; flex-direction: column; gap: 6px; }
.epm-btn-usage,
.epm-btn-topup {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* TopUp notice on product page */
.epm-topup-notice { font-size: 14px; }

@media (max-width: 600px) {
    .epm-esim-body { flex-direction: column; }
    .epm-qr-image  { width: 130px; height: 130px; }
    .epm-usage-grid { grid-template-columns: 1fr; }
    .epm-topup-block { flex-direction: column; align-items: flex-start; }
}

.epm-state-warn { border-color: #fd7e14; color: #7a4100; }

/* ── Data Usage Visual (v1.0.11) ───────────────────────────── */

.epm-usage-visual {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 14px;
    padding: 16px 20px;
    background: #f8fdf9;
    border: 1px solid #d4edda;
    border-radius: 10px;
    flex-wrap: wrap;
}

/* ── Donut ── */
.epm-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.epm-donut-svg {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.epm-donut-pct {
    font-size: 8px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.epm-donut-sub {
    font-size: 4.5px;
    fill: #6c757d;
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.epm-donut-label {
    font-size: 12px;
    font-weight: 600;
    color: #173404;
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
}

/* ── Days bar ── */
.epm-days-wrap {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.epm-days-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.epm-days-left {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1;
}
.epm-days-total {
    font-size: 12px;
    color: #6c757d;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.epm-bar-track {
    height: 10px;
    background: #e9ecef;
    border-radius: 999px;
    overflow: hidden;
}
.epm-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .6s ease;
}
.epm-days-sub {
    font-size: 11px;
    color: #6c757d;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── Not activated ── */
.epm-not-activated {
    font-size: 13px;
    color: #6c757d;
    padding: 10px 0;
}

/* ── v1.0.12 additions ─────────────────────────────────────── */

/* Product image circle in card header */
.epm-prod-img-wrap {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e0e0e0;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.epm-prod-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Title text column (name + ICCID) */
.epm-esim-title-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.epm-esim-name {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.epm-esim-name em {
    font-weight: 400;
    color: #777;
    font-size: 13px;
}

/* ICCID pill inline in header */
.epm-iccid-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.epm-iccid-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #888;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.epm-iccid-val {
    font-family: monospace;
    font-size: 11px;
    background: #eef;
    color: #223;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: .4px;
    word-break: break-all;
}

/* Status row — sits above the donut+bar */
.epm-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 4px;
}

/* eSIM profile state badge */
.epm-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
}
.epm-profile-onboard  { background: #d4edda; color: #155724; }
.epm-profile-released { background: #fff3cd; color: #856404; }
.epm-profile-disabled { background: #f8d7da; color: #721c24; }
.epm-profile-unknown  { background: #e2e3e5; color: #383d41; }

/* Device info chip */
.epm-device-info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #495057;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
}

/* Status output container */
.epm-status-output { margin-top: 4px; }

/* Status block spacing */
.epm-status-block { margin-bottom: 10px; }

@media (max-width: 480px) {
    .epm-prod-img-wrap { width: 40px; height: 40px; }
    .epm-iccid-val     { font-size: 10px; }
}

/* ── v1.0.14 — iPhone install button ──────────────────────── */

.epm-install-wrap {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* Primary install button — black Apple-style */
.epm-btn-install {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #000;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .2px;
    transition: background .2s, transform .1s;
    white-space: nowrap;
}
.epm-btn-install:hover  { background: #222; color: #fff !important; transform: translateY(-1px); }
.epm-btn-install:active { transform: translateY(0); }

.epm-install-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Secondary link variant (desktop "iPhone install link") */
.epm-btn-install-link {
    background: transparent;
    color: #000 !important;
    border: 1.5px solid #bbb;
    font-size: 12px;
    padding: 7px 12px;
}
.epm-btn-install-link:hover { background: #f5f5f5; }

/* Copy activation code button */
.epm-btn-copy-lpa {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background .15s;
}
.epm-btn-copy-lpa:hover { background: #e4e4e4; }

/* ── v1.0.21 — Mobile responsive + hamburger account menu ─── */

/* Make QR image itself tappable on iOS (wrapped in <a> by JS) */
.epm-qr-link {
    display: block;
    line-height: 0;
    border-radius: 4px;
}
.epm-qr-link:focus { outline: 2px solid var(--paletteColor1, #007cba); }
@media (max-width: 767px) {
    /* Show hamburger toggle on mobile */
    .epm-account-menu-toggle { display: inline-flex; }

    /* Account nav: full-width stacked on mobile */
    .woocommerce-MyAccount-navigation ul {
        flex-direction: column !important;
        width: 100%;
    }
    .woocommerce-MyAccount-navigation li {
        border-bottom: 1px solid #eee;
    }
    .woocommerce-MyAccount-navigation li a {
        display: block;
        padding: 12px 16px;
        font-size: 15px;
    }

    /* eSIM panel: full-width cards */
    .epm-esim-panel {
        margin-top: 20px;
        padding-top: 16px;
    }

    /* Card body: stack QR above details */
    .epm-esim-body {
        flex-direction: column;
        gap: 16px;
        padding: 12px;
    }

    /* QR block: centered, slightly smaller */
    .epm-qr-block {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .epm-qr-image {
        width: 140px;
        height: 140px;
    }

    /* Card header */
    .epm-esim-title {
        padding: 10px 12px;
        gap: 8px;
    }
    .epm-esim-name { font-size: 14px; }
    .epm-iccid-val { font-size: 10px; }

    /* Details block: full width */
    .epm-details-block { width: 100%; }

    /* Usage visual: stack */
    .epm-usage-visual {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
        padding: 12px;
    }
    .epm-donut-wrap {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .epm-donut-svg { width: 80px; height: 80px; }

    /* Days bar: full width */
    .epm-days-wrap { min-width: 0; }

    /* Install wrap: centered column */
    .epm-install-wrap {
        flex-direction: column;
        align-items: center;
    }
    .epm-btn-install { width: 100%; justify-content: center; font-size: 15px; padding: 11px 18px; }

    /* Topup block: stack */
    .epm-topup-block { flex-direction: column; align-items: stretch; }
    .epm-btn-topup   { text-align: center; }
}

@media (max-width: 400px) {
    .epm-prod-img-wrap { width: 36px; height: 36px; }
    .epm-qr-image      { width: 120px; height: 120px; }
}

/* ── QR download button ─────────────────────────────────── */
.epm-btn-download-qr {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 7px 14px;
    background: #f0f4f0;
    color: #1a5c1a !important;
    border: 1.5px solid #c8dbc8;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    font-family: inherit;
    transition: background .15s;
    white-space: nowrap;
}
.epm-btn-download-qr:hover { background: #e0ece0; }

/* ── Install info box (non-Apple devices) ── */
.epm-install-info { margin-top:10px; padding:10px 14px; background:#f8f9fa; border-left:3px solid #6c757d; border-radius:4px; font-size:0.88em; line-height:1.6; }
.epm-install-info p { margin:4px 0; }
.epm-install-info a { color:#28a745; }