/*
 * Shared styling for the public subscriber module (login/register/plans/
 * checkout/account/history). Scoped to this module only - never touches
 * global theme CSS, so it can't affect ePaper reader/admin styling.
 * Accent color (#2478ff) matches the existing navBar.php "LOGIN" badge and
 * checkout_page.php's gateway-option hover, so the module reads as part of
 * the same site rather than a bolted-on tool.
 */

.sub-module { --sub-accent: #2478ff; --sub-accent-dark: #1a5fd6; --sub-border: #d0d5dd; --sub-border-focus: #2478ff; --sub-text-muted: #667085; --sub-bg-subtle: #f8f9fb; }

.sub-module .sub-shell { padding: 32px 0 56px; }
.sub-module .sub-card { background: #fff; border: 1px solid #e7e9ee; border-radius: 12px; box-shadow: 0 2px 10px rgba(16,24,40,.04); }
.sub-module .sub-card-body { padding: 28px; }
@media (max-width: 576px) { .sub-module .sub-card-body { padding: 20px; } }

.sub-module h1.sub-title, .sub-module h4.sub-title { font-weight: 700; letter-spacing: -.01em; }
.sub-module .sub-subtitle { color: var(--sub-text-muted); }

/* Form fields - explicit, unambiguous box so the border/background is never
   left to inherit from something else on the page. */
.sub-module .form-label { font-weight: 600; font-size: .875rem; color: #344054; margin-bottom: 6px; }
.sub-module .form-control,
.sub-module .form-select {
    display: block;
    width: 100%;
    height: 46px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: #101828;
    background-color: #ffffff;
    border: 1.5px solid var(--sub-border);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sub-module textarea.form-control { height: auto; }
.sub-module .form-control::placeholder { color: #98a2b3; }
.sub-module .form-control:focus,
.sub-module .form-select:focus {
    border-color: var(--sub-border-focus);
    box-shadow: 0 0 0 3px rgba(36,120,255,.15);
    outline: none;
}
.sub-module .form-control.is-invalid { border-color: #dc3545; }
.sub-module .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,53,69,.15); }
.sub-module .invalid-feedback { display: block; font-size: .8125rem; color: #dc3545; margin-top: 4px; }
.sub-module .form-hint { font-size: .8125rem; color: var(--sub-text-muted); margin-top: 4px; }

/* Input group (icon prefix and/or password show/hide button) - corner
   rounding is left to Bootstrap's own :first-child/:last-child input-group
   rules rather than hardcoded here, so this same markup works whether a
   field has an icon prefix, a trailing toggle button, both, or neither.
   width:1% + flex:1 1 auto overrides the base ".form-control{width:100%}"
   rule above - without this, the input demands the full row width, which
   (combined with Bootstrap's .input-group flex-wrap: wrap) pushes it onto
   its own line below the icon/toggle instead of sitting beside them. */
.sub-module .input-group .form-control {
    height: 46px;
    width: 1%;
    flex: 1 1 auto;
    min-width: 0;
}
.sub-module .input-group .toggle-password {
    height: 46px;
    border: 1.5px solid var(--sub-border);
    background: #f8f9fb;
    color: #475467;
    padding: 0 14px;
}
.sub-module .input-group .toggle-password:hover { background: #eef1f5; }
.sub-module .input-group > :not(:first-child) { border-left: none; }
.sub-module .input-group:focus-within .form-control,
.sub-module .input-group:focus-within .toggle-password,
.sub-module .input-group:focus-within .input-group-text { border-color: var(--sub-border-focus); }

/* Buttons */
.sub-module .btn-sub-primary {
    background: var(--sub-accent);
    border-color: var(--sub-accent);
    color: #fff;
    font-weight: 600;
    height: 46px;
    border-radius: 8px;
}
.sub-module .btn-sub-primary:hover { background: var(--sub-accent-dark); border-color: var(--sub-accent-dark); color: #fff; }
.sub-module .btn-sub-primary:disabled { opacity: .65; }
.sub-module a.sub-link { color: var(--sub-accent); font-weight: 600; text-decoration: none; }
.sub-module a.sub-link:hover { text-decoration: underline; }

/* Badges */
.sub-module .sub-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.sub-module .sub-badge-success { background: #ecfdf3; color: #027a48; }
.sub-module .sub-badge-danger { background: #fef3f2; color: #b42318; }
.sub-module .sub-badge-secondary { background: #f2f4f7; color: #475467; }
.sub-module .sub-badge-info { background: #eff8ff; color: #175cd3; }

/* Empty states */
.sub-module .sub-empty { text-align: center; padding: 40px 16px; color: var(--sub-text-muted); }
.sub-module .sub-empty i { font-size: 32px; margin-bottom: 10px; display: block; color: #d0d5dd; }

/* Tables -> responsive stacked cards on small screens */
.sub-module .sub-table-wrap { overflow-x: auto; }
.sub-module table.sub-table { width: 100%; margin-bottom: 0; }
.sub-module table.sub-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sub-text-muted); border-bottom: 1px solid #eaecf0; padding: 10px 12px; white-space: nowrap; }
.sub-module table.sub-table td { padding: 12px; vertical-align: middle; border-bottom: 1px solid #f2f4f7; }

/* Gateway option cards (checkout) */
.sub-module .gateway-option { cursor: pointer; transition: border-color .15s, background .15s; border: 1.5px solid #e7e9ee !important; border-radius: 10px; }
.sub-module .gateway-option:hover { border-color: var(--sub-accent) !important; }
.sub-module .gateway-option.active { border-color: var(--sub-accent) !important; background: #f5f9ff; }

/* Tabs */
.sub-module .sub-tabs .nav-link { color: #475467; font-weight: 600; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 4px; margin-right: 24px; }
.sub-module .sub-tabs .nav-link.active { color: var(--sub-accent); border-bottom-color: var(--sub-accent); background: none; }

/* Icon-prefixed inputs (login/register) - same input-group idiom as the
   password toggle above, just mirrored onto the left side. Corner rounding
   is handled by the :first-child/:last-child rules above. */
.sub-module .input-group .input-group-text {
    height: 46px;
    border: 1.5px solid var(--sub-border);
    background: #f8f9fb;
    color: #667085;
    padding: 0 14px;
}

/* Auth split layout (login/register) - illustration side is purely
   decorative CSS (gradient + blurred circles + dot grid), no image asset
   dependency, so it never breaks if a deployment has no custom artwork. */
.sub-module .auth-wrap { max-width: 1400px; margin: 0 auto; }
.sub-module .auth-split { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(16,24,40,.08); background: #fff; }
.sub-module .auth-illustration {
    background: linear-gradient(160deg, #eef4ff 0%, #f7faff 60%, #ffffff 100%);
    position: relative;
    overflow: hidden;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}
.sub-module .auth-illustration::before,
.sub-module .auth-illustration::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36,120,255,.16) 0%, rgba(36,120,255,0) 70%);
}
.sub-module .auth-illustration::before { width: 260px; height: 260px; top: -60px; left: -60px; }
.sub-module .auth-illustration::after { width: 220px; height: 220px; bottom: -50px; right: -50px; }
.sub-module .auth-illustration-dots {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 72px;
    height: 72px;
    background-image: radial-gradient(rgba(36,120,255,.25) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
}
.sub-module .auth-illustration-content { position: relative; z-index: 1; }
.sub-module .auth-illustration h2 { font-weight: 700; letter-spacing: -.01em; color: #101828; }
.sub-module .auth-illustration .sub-subtitle a { color: var(--sub-accent); font-weight: 600; text-decoration: none; }
.sub-module .auth-brand-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(16,24,40,.10);
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}
.sub-module .auth-brand-card img { max-width: 100%; max-height: 64px; }
.sub-module .auth-feature-list { list-style: none; padding: 0; margin: 20px 0 0; }
.sub-module .auth-feature-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.sub-module .auth-feature-list .auth-feature-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: #e3edff; color: var(--sub-accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px;
}
.sub-module .auth-feature-list strong { display: block; font-size: .9rem; color: #101828; }
.sub-module .auth-feature-list span { font-size: .8125rem; color: var(--sub-text-muted); }
.sub-module .auth-form-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: #eff8ff; color: var(--sub-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}

/* Social login buttons */
.sub-module .btn-sub-social {
    height: 46px; border-radius: 8px; border: 1.5px solid var(--sub-border);
    background: #fff; color: #344054; font-weight: 600; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.sub-module .btn-sub-social:hover { background: #f8f9fb; border-color: #98a2b3; color: #344054; }

@media (max-width: 991.98px) {
    .sub-module .auth-illustration { padding: 32px 24px; text-align: center; }
    .sub-module .auth-feature-list li { text-align: left; }
}

/* Shared account + plans design language */
.sub-module .sub-shell { padding: 18px 0 36px; }
.sub-module .sub-shell > .container { width: calc(100% - 32px); max-width: 1500px; }
.sub-module .account-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.sub-module .account-main { min-width: 0; display: flex; flex-direction: column; }
.sub-module .account-page-heading { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.sub-module .account-page-heading .sub-title { font-size: 1.55rem; line-height: 1.2; }
.sub-module .account-page-heading .sub-subtitle { margin-top: 3px; font-size: .82rem; }
.sub-module .account-main > #account-top-row { order: 1; }
.sub-module .account-main > .signup-bonus-card { order: 4; }
/* account-top-row: Profile Information, Current Subscription, Recent
   Payments, Recent Subscription History and Available Downloads are five
   sibling cards in that DOM order (the order the mobile reference wants,
   Downloads last since its list can run long). Mobile just stacks them
   top-to-bottom as-is; from lg upward, CSS Grid re-places them into the
   reference's two-column arrangement (Profile+Downloads on the left,
   Subscription+Payments+History on the right) without needing to touch
   the markup order itself. */
.sub-module .account-dashboard-grid { display: flex; flex-direction: column; }
@media (min-width: 1200px) {
    .sub-module .account-dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
        column-gap: 14px;
        grid-template-areas:
            "profile profile"
            "downloads subscription"
            "downloads payments"
            "downloads history";
    }
    /* align-self: start - grid items stretch to fill their whole area by
       default, which left #downloads-card padded out with blank space to
       match the combined height of payments-card + history-card next to
       it. Each card should only ever be as tall as its own content. */
    .sub-module #profile-card { grid-area: profile; align-self: start; }
    .sub-module #subscription-card { grid-area: subscription; align-self: start; }
    .sub-module #downloads-card { grid-area: downloads; align-self: start; }
    .sub-module #payments-card { grid-area: payments; align-self: start; }
    .sub-module #history-card { grid-area: history; align-self: start; }
}
/* .account-sidebar doubles as a Bootstrap offcanvas (offcanvas-end) below
   lg - a right-side drawer opened by .account-menu-toggle and closed by
   .account-sidebar-close - and as the plain sticky card it always was from
   lg upward. Position/border/radius only really make sense per-breakpoint
   (an offcanvas panel flush against the screen edge shouldn't be rounded),
   so they live in the lg+ override below instead of quietly fighting
   Bootstrap's own .offcanvas rules at mobile widths. */
.sub-module .account-sidebar { background: #fff; padding: 12px 10px; box-shadow: 0 8px 25px rgba(16,24,40,.06); }
.sub-module .account-sidebar-close {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: #f2f4f7; color: #475467; font-size: 15px; cursor: pointer;
}
.sub-module .account-sidebar-close:hover { background: #e4e7ec; color: #101828; }
.sub-module .account-menu-toggle {
    width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e7e9ee; border-radius: 10px; background: #fff; color: #344054; font-size: 15px; cursor: pointer;
}
.sub-module .account-menu-toggle:hover { background: #f8f9fb; }
@media (min-width: 992px) {
    .sub-module .account-sidebar.offcanvas {
        position: sticky; top: 20px; z-index: auto;
        width: auto; height: auto; max-width: none;
        visibility: visible !important; transform: none !important; transition: none;
        border: 1px solid #e7e9ee; border-radius: 18px;
    }
}
.sub-module .account-sidebar-profile { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; border-bottom: 1px solid #eaecf0; margin-bottom: 8px; }
.sub-module .account-sidebar-profile strong, .sub-module .account-sidebar-profile span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-module .account-sidebar-profile strong { color: #101828; font-size: .88rem; }
.sub-module .account-sidebar-profile span { color: #98a2b3; font-size: .72rem; max-width: 145px; margin-top: 2px; }
.sub-module .account-avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(135deg,#2478ff,#6c4cff); color: #fff; font-weight: 800; }
.sub-module .account-nav { display: grid; gap: 4px; }
.sub-module .account-nav a, .sub-module .account-logout { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: 9px; color: #475467; font-size: .82rem; font-weight: 600; text-decoration: none; transition: .15s ease; }
.sub-module .account-nav a i, .sub-module .account-logout i { width: 17px; text-align: center; color: #98a2b3; }
.sub-module .account-nav a:hover, .sub-module .account-nav a.active { color: var(--sub-accent); background: #eff6ff; }
.sub-module .account-nav a.active i, .sub-module .account-nav a:hover i { color: var(--sub-accent); }
.sub-module .account-logout { border-top: 1px solid #eaecf0; border-radius: 0; margin: 9px 6px 0; padding-top: 9px; color: #b42318; }
.sub-module .account-logout i { color: #b42318; }
.sub-module .account-main > .sub-title { font-size: 1.6rem; color: #101828; letter-spacing: -.03em; }
.sub-module .account-main .sub-card { border-radius: 16px; box-shadow: 0 6px 22px rgba(16,24,40,.045); }
.sub-module .account-main .sub-card-body { padding: 16px; }
.sub-module .account-subscription-card { background: linear-gradient(145deg,#f8fbff 0%,#fff 60%); border-color: #cfe0ff; }
.sub-module .account-empty-subscription { min-height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.sub-module .account-empty-subscription strong { color: #344054; font-size: .92rem; }
.sub-module .account-empty-subscription span { color: #98a2b3; font-size: .78rem; text-align: center; }
.sub-module .account-empty-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #eff6ff; color: var(--sub-accent); margin-bottom: 3px; }
.sub-module .account-subscription-card h6, .sub-module .account-main h6 { color: #101828; }
.sub-module .account-main .sub-table-wrap { border: 1px solid #eaecf0; border-radius: 11px; }
.sub-module .account-main table.sub-table th { background: #f8fafc; }

/* Section card headers - small colored icon badge in front of the title,
   same visual language across Profile / Subscription / Downloads /
   Payments / History cards. */
.sub-module .account-card-title { display: flex; align-items: center; gap: 10px; }
.sub-module .account-card-title .account-card-icon {
    width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: 10px; background: #eff6ff; color: var(--sub-accent); font-size: .95rem;
}
.sub-module .account-card-title h6 { margin: 0; }

/* Profile Information identity block - avatar + name + status badge, with
   the @username handle beneath, above the Full Name/Username/... field
   grid (which repeats the same $subscriber values as ordinary fields). */
.sub-module .account-identity .min-w-0 { min-width: 0; }
.sub-module .account-identity-name { color: #101828; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.sub-module .account-identity-handle { display: block; color: var(--sub-text-muted); font-size: .85rem; margin-top: 2px; }

/* Profile Information fields - icon + label + value, replacing the old bare
   label/value stack so each field reads like the others in this row. */
.sub-module .account-field { display: flex; align-items: flex-start; gap: 10px; }
.sub-module .account-field-icon {
    width: 30px; height: 30px; flex: 0 0 auto; margin-top: 1px; display: grid; place-items: center;
    border-radius: 9px; background: #f8f9fb; color: #98a2b3; font-size: .8rem;
}
.sub-module .account-field-body { min-width: 0; flex: 1 1 auto; }

/* Subscription plan hero - the plan name pulled out of the details grid and
   shown as the card's headline, same $subscription data just given more
   visual weight (mirrors "1 Month / Subscription Plan" in the reference). */
.sub-module .account-plan-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sub-module .account-plan-hero-icon {
    width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: 14px; background: linear-gradient(135deg,#2478ff,#6c4cff); color: #fff; font-size: 1.3rem;
}
.sub-module .account-plan-hero h4 { margin: 0; color: #101828; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.sub-module .account-plan-hero span { color: var(--sub-text-muted); font-size: .82rem; }

/* Available Downloads list - stacks name/meta above the button on narrow
   screens instead of squeezing everything onto one row. */
.sub-module .account-download-item {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.sub-module .account-download-item .account-download-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sub-module .account-download-icon {
    width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: 10px; background: #fef3f2; color: #d92d20; font-size: 1rem;
}
.sub-module .account-download-info > div { min-width: 0; }
@media (max-width: 420px) {
    .sub-module .account-download-item { flex-direction: column; align-items: stretch; }
    .sub-module .account-download-item .btn { width: 100%; }
}

.sub-module .plans-hero { text-align: center; padding: 16px 12px 34px; }
.sub-module .plans-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--sub-accent); background: #eff6ff; border: 1px solid #dbeafe; border-radius: 99px; padding: 7px 13px; font-size: .76rem; font-weight: 700; }
.sub-module .plans-hero h1 { color: #101828; font-size: clamp(2rem,4vw,3rem); font-weight: 800; letter-spacing: -.045em; margin: 16px 0 8px; }
.sub-module .plans-hero p { color: #667085; margin: 0 auto; max-width: 570px; font-size: 1rem; }
.sub-module .plans-grid { align-items: stretch; }
.sub-module .plans-grid > .col { display: flex; }
.sub-module .plan-card { width: 100%; min-height: 425px; display: flex; flex-direction: column; position: relative; background: #fff; border: 1px solid #e4e7ec; border-radius: 18px; box-shadow: 0 8px 26px rgba(16,24,40,.055); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sub-module .plan-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(16,24,40,.11); border-color: #b8d2ff; }
.sub-module .plan-card-featured { border: 2px solid var(--sub-accent); background: linear-gradient(160deg,#f7fbff,#fff 62%); }
.sub-module .plan-popular { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--sub-accent); color: #fff; border-radius: 99px; padding: 7px 16px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 5px 12px rgba(36,120,255,.25); }
.sub-module .plan-card-body { padding: 31px 25px 24px; flex: 1; }
.sub-module .plan-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: #eff6ff; color: var(--sub-accent); font-size: 1.1rem; margin-bottom: 20px; }
.sub-module .plan-card h3 { color: #101828; font-size: 1.18rem; font-weight: 750; margin: 0 0 12px; }
.sub-module .plan-price { color: #101828; font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.sub-module .plan-price span { color: #667085; font-size: .95rem; font-weight: 700; letter-spacing: 0; }
.sub-module .plan-duration { min-height: 24px; color: #667085; font-size: .8rem; margin: 4px 0 17px; }
.sub-module .plan-description { color: #667085; font-size: .8rem; min-height: 34px; }
.sub-module .plan-features { list-style: none; padding: 15px 0 0; margin: 0; border-top: 1px solid #eaecf0; color: #475467; font-size: .82rem; }
.sub-module .plan-features li { margin-bottom: 11px; }
.sub-module .plan-features i { color: #12b76a; margin-right: 7px; }
.sub-module .plan-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sub-module .plans-benefits { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 38px; border: 1px solid #e4e7ec; border-radius: 17px; overflow: hidden; background: #e4e7ec; box-shadow: 0 5px 18px rgba(16,24,40,.04); }
.sub-module .plans-benefits > div { background: #fff; padding: 22px 18px; display: grid; grid-template-columns: 42px 1fr; column-gap: 11px; align-items: center; }
.sub-module .plans-benefits span { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: #eff6ff; color: var(--sub-accent); }
.sub-module .plans-benefits strong { color: #101828; font-size: .82rem; }
.sub-module .plans-benefits small { color: #667085; font-size: .72rem; line-height: 1.35; }

@media (max-width: 991.98px) {
    /* minmax(0, 1fr), not a bare 1fr - a plain 1fr track still won't shrink
       below its content's intrinsic min-content width (same rule as flex
       items), which is exactly what let the horizontally-scrolling
       .account-nav below force the whole page wider instead of scrolling
       within itself. */
    .sub-module .account-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    /* Below lg, .account-sidebar is the offcanvas drawer (see the block
       above) - opened via .account-menu-toggle, closed via
       .account-sidebar-close or its own backdrop. Its full vertical list
       (same .account-nav grid + .account-logout row as desktop) keeps every
       section, including Logout, reachable the moment it's open - nothing
       hidden or scrolled sideways to find once inside. */
    .sub-module .account-sidebar { min-width: 0; padding-top: 44px; }
    .sub-module .account-sidebar-profile { padding: 10px 8px 14px; margin-bottom: 8px; }
    .sub-module .plans-benefits { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
    .sub-module .profile-card-header,
    .sub-module .account-identity,
    .sub-module .account-identity-title,
    .sub-module #subscription-card > .sub-card-body > .d-flex,
    .sub-module #payments-card .sub-card-body > .d-flex,
    .sub-module #history-card .sub-card-body > .d-flex {
        flex-direction: row !important;
        align-items: center !important;
    }
    .sub-module .profile-card-header { justify-content: space-between !important; }
    .sub-module .profile-card-header .btn { width: auto; flex: 0 0 auto; white-space: nowrap; }
    .sub-module .account-identity { justify-content: flex-start; text-align: left; }
}
@media (max-width: 575.98px) {
    .sub-module .sub-shell { padding: 12px 0 24px; }
    .sub-module .sub-shell > .container { width: calc(100% - 20px); }
    .sub-module .account-main .sub-card-body { padding: 14px; }
    .sub-module .account-main > .sub-title { font-size: 1.35rem; }
    .sub-module .plans-hero { padding-bottom: 25px; }
    .sub-module .plans-hero h1 { font-size: 2rem; }
    .sub-module .plans-benefits { grid-template-columns: 1fr; margin-top: 25px; }
    .sub-module .plan-card { min-height: 0; }
    /* Tighter than the account page's .sub-card-body - plan cards sit two
       to a row down here (row-cols-2), so the same 20px on every side ate
       into the space the price/features need to stay readable. */
    .sub-module .plan-card-body { padding: 16px 14px; }
    .sub-module .plan-icon { width: 36px; height: 36px; margin-bottom: 12px; font-size: 1rem; }
    .sub-module .plan-card h3 { font-size: 1rem; margin-bottom: 6px; }
    .sub-module .plan-price { font-size: 1.5rem; }
    .sub-module .plan-duration { min-height: 0; margin: 2px 0 10px; }
    .sub-module .plan-description { min-height: 0; }
    .sub-module .plan-features { padding-top: 10px; font-size: .76rem; }
    .sub-module .plan-features li { margin-bottom: 7px; }
    /* Narrowest phones - stack the Profile Information field grid to one
       column instead of squeezing two fields per row. */
    .sub-module #profile-card .row.g-3 > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .sub-module .account-plan-hero-icon { width: 44px; height: 44px; font-size: 1.1rem; }
    .sub-module .account-plan-hero h4 { font-size: 1.2rem; }

    /* The active theme globally turns every .d-flex into a column below
       768px. Keep the account card's intentional horizontal rows intact. */
    .sub-module .profile-card-header,
    .sub-module .account-identity,
    .sub-module .account-identity-title,
    .sub-module #subscription-card > .sub-card-body > .d-flex,
    .sub-module #payments-card .sub-card-body > .d-flex,
    .sub-module #history-card .sub-card-body > .d-flex {
        flex-direction: row !important;
        align-items: center !important;
    }
    .sub-module .profile-card-header { justify-content: space-between !important; gap: 8px; }
    .sub-module .profile-card-header .btn { width: auto; flex: 0 0 auto; white-space: nowrap; }
    .sub-module .account-identity { justify-content: flex-start; text-align: left; gap: 12px !important; }
    .sub-module .account-identity-title { justify-content: flex-start; align-items: center !important; }
    .sub-module .account-identity-name { font-size: 1rem; }
    .sub-module .account-identity-handle { font-size: .78rem; }
    .sub-module #profile-card .row.g-3 { --bs-gutter-y: 0; }
    .sub-module #profile-card .account-field { padding: 9px 0; border-top: 1px solid #eef1f5; }
    .sub-module #profile-card .account-field-icon { width: 28px; height: 28px; }
    .sub-module #profile-card .account-field-body { font-size: .88rem; }
    .sub-module #profile-card .sub-subtitle.small { font-size: .74rem; }
    .sub-module #profile-card .sub-badge { margin-top: 3px !important; }
}