@charset "UTF-8";
/* =============================================================================
   mrserver-ui.css  -  Global UI Design System
   Designed by mrserver | Applied system-wide
   Color palette: #212529 and its shades
   ============================================================================= */

/* -- CSS Custom Properties --------------------------------------------------- */
:root {
    --ms-dark:           #212529;
    --ms-dark-deep:      #16181b;
    --ms-dark-mid:       #2d3238;
    --ms-dark-soft:      #343a40;
    --ms-muted:          #6c757d;
    --ms-muted-light:    #adb5bd;
    --ms-border:         #dee2e6;
    --ms-border-soft:    #eef0f3;
    --ms-radius-card:    14px;
    --ms-radius-opt:     12px;
    --ms-shadow:         0 3px 16px rgba(0, 0, 0, .08);
    --ms-accent-green:   #1cc88a;
    --ms-accent-red:     #e74a3b;
    /* ── Brand / theme colors (overridable from /settings?tab=company) ── */
    --ms-primary:        #4e73df;
    --ms-sidebar-bg:     #212529;
    --ms-gradient-start: #1a2340;
    --ms-gradient-end:   #2c3e6b;
}

/* -- Branded card base ------------------------------------------------------- */
.ms-card,
.vol-card,
.ctrl-card {
    border-radius: var(--ms-radius-card);
    overflow: hidden;
    border: none !important;
    box-shadow: var(--ms-shadow) !important;
}

/* -- Card header - dark gradient --------------------------------------------- */
.ms-card-header,
.vol-card-header,
.ctrl-header {
    padding: 14px 20px 13px;
    background: linear-gradient(135deg, var(--ms-gradient-start) 0%, var(--ms-gradient-end) 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.ms-card-header h6,
.vol-card-header h6,
.ctrl-header h6 {
    margin: 0;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .03em;
}

/* -- Card header icon -------------------------------------------------------- */
.ms-card-icon,
.vol-card-icon,
.ctrl-header-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

/* ctrl-header uses slightly larger icon */
.ctrl-header-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .18);
    font-size: 1.1rem;
}

/* -- Card body / footer defaults --------------------------------------------- */
.ms-card .card-body,
.vol-card .card-body,
.ctrl-card .card-body {
    padding: 20px 22px 18px;
}

.ms-card .card-footer,
.vol-card .card-footer,
.ctrl-card .card-footer {
    padding: 12px 22px;
    background: #fff;
}

/* -- Description line below ctrl-header ------------------------------------- */
.ctrl-desc {
    font-size: .8rem;
    color: #7b8ea6;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ms-border-soft);
}

/* -- Toggle option labels (Controlled-By) ------------------------------------ */
.controller-option-label {
    display: block;
    cursor: pointer;
    user-select: none;
}

.controller-option {
    border: 2px solid var(--ms-border);
    border-radius: var(--ms-radius-opt) !important;
    transition: border-color .2s, background-color .2s, box-shadow .2s, transform .1s;
    background: #fff;
}

.controller-option:hover {
    border-color: #b0b7bf;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
}

.controller-option .card-body {
    padding: 16px 12px;
}

/* "No" - red when selected */
#is_controlled_no:checked + .controller-option {
    border-color: var(--ms-accent-red);
    background-color: #fff5f5;
    box-shadow: 0 0 0 3px rgba(231, 74, 59, .12);
}
#is_controlled_no:checked + .controller-option .ctrl-opt-icon  { color: var(--ms-accent-red); }
#is_controlled_no:checked + .controller-option .ctrl-opt-label { color: #c0392b; font-weight: 600; }

/* "Yes" - green when selected */
#is_controlled_yes:checked + .controller-option {
    border-color: var(--ms-accent-green);
    background-color: #f0fdf7;
    box-shadow: 0 0 0 3px rgba(28, 200, 138, .12);
}
#is_controlled_yes:checked + .controller-option .ctrl-opt-icon  { color: var(--ms-accent-green); }
#is_controlled_yes:checked + .controller-option .ctrl-opt-label { color: #17a673; font-weight: 600; }

/* Icon & label inside toggle card */
.ctrl-opt-icon {
    font-size: 1.9rem;
    color: var(--ms-muted-light);
    transition: color .2s;
    line-height: 1;
    display: block;
    margin-bottom: 7px;
}

.ctrl-opt-label {
    font-size: .79rem;
    color: var(--ms-muted);
    transition: color .2s;
    display: block;
    white-space: nowrap;
    font-weight: 500;
}

/* -- Supervisor reveal panel ------------------------------------------------- */
.ctrl-supervisor-panel {
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8f9fc 0%, #f2f4f8 100%);
    border: 1px solid #dde2ef;
    border-radius: var(--ms-radius-opt);
    display: flex;
    align-items: center;
    gap: 14px;
    animation: ms-slide-in .22s ease;
}

@keyframes ms-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ctrl-sup-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--ms-accent-green);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(28, 200, 138, .25);
}

.ctrl-sup-name {
    font-weight: 700;
    font-size: .9rem;
    color: var(--ms-dark);
    margin-bottom: 2px;
}

.ctrl-sup-role {
    font-size: .76rem;
    color: #7b8ea6;
}

.ctrl-sup-badge {
    margin-inline-start: auto;
    background: #d1fae5;
    color: #065f46;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: .73rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid #a7f3d0;
}

/* -- Disabled option --------------------------------------------------------- */
.option-disabled {
    opacity: .45;
    pointer-events: none;
}

/* -- Signature / "designed by" watermark (hidden, just honour the brand) ----- */
/* mrserver-ui v1.0 - (c) mrserver */

/* -- Shared page-layout helpers (used across show pages: channels, conferences, courses) -- */

/* Sticky left column */
.vol-sticky-col { position: sticky; top: 20px; }

/* Gradient banner at top of photo card */
.vol-banner { height: 70px; background: linear-gradient(135deg, var(--ms-gradient-start) 0%, var(--ms-gradient-end) 100%); }

/* Photo overlapping the banner */
.vol-photo-wrap { margin-top: -45px; }

/* 90x90 avatar thumb */
.vol-photo-thumb { width: 90px; height: 90px; object-fit: cover;
                   border: 3px solid #fff; cursor: zoom-in; }

/* Secondary / alt-language name */
.vol-alt-name { font-size: .78rem; }

/* Application / record ID code */
.vol-app-id { letter-spacing: 1px; }

/* Detail row label / value */
.vol-row-label { min-width: 150px; }
.vol-row-value { min-width: 0; word-break: break-word; }

/* Supervisor card header */
.vol-supervisor-header { background: linear-gradient(135deg, var(--ms-gradient-start) 0%, var(--ms-gradient-end) 100%); }

/* Supervisor photo */
.vol-supervisor-photo { width: 48px; height: 48px; object-fit: cover; border: 2px solid #0d6efd; }

/* Role badge (muted pill) */
.badge-role { background: #e9ecef; color: #495057; font-size: .7rem; font-weight: 500; }

/* -- History Modal (shared: courses, volunteers) --------------------------- */
.vol-history-modal   { max-width: 480px; }
.vol-history-header  { background: linear-gradient(135deg, var(--ms-gradient-start) 0%, var(--ms-gradient-end) 100%); }
.vol-history-icon    { width: 42px; height: 42px; background: rgba(255,255,255,.15); }
.vol-history-count   { background: rgba(255,255,255,.2); font-size: .85rem; }
.vol-history-thead tr{ background: #f8f9fc; }
.vol-history-th      { font-size: .8rem; }
.vol-history-row-photo           { width: 42px; height: 42px; min-width: 42px; object-fit: cover; }
.vol-history-row-photo.is-current{ border: 2px solid #0d6efd; }
.vol-history-row-photo.is-past   { border: 2px solid #dee2e6; }
.badge-current { font-size: .7rem; }

/* -- Contact Trigger Pill (contacted-by avatar in table cells) ------------- */
.contact-trigger {
    background: none;
    border: none;
    padding: 0;
    outline: none;
    vertical-align: middle;
}
/* Non-contacted state: circular light button */
button.contact-trigger {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: #f1f3f5 !important;
    border: 1px solid #dee2e6 !important;
    cursor: pointer;
}
button.contact-trigger:hover {
    background-color: #e9ecef !important;
    border-color: var(--bs-primary) !important;
}
button.contact-trigger:focus-visible,
.contact-trigger:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 50%;
}
.ct-pill {
    width: 32px;
    height: 32px;
    cursor: pointer;
    flex-shrink: 0;
}
.ct-pill-img {
    object-fit: cover;
}
.ct-pill-icon {
    font-size: 13px;
}

/* -- Avatar / Photo Size Utilities ------------------------------------------
   Usage: class="rounded-circle av-32"  (replaces style="width:32px;height:32px;object-fit:cover;")
   Modifiers: av-ptr (cursor:pointer)   av-fs (flex-shrink:0)
   -------------------------------------------------------------------------- */
.av-26       { width:26px;  height:26px;  object-fit:cover; }
.av-28       { width:28px;  height:28px;  object-fit:cover; }
.av-32       { width:32px;  height:32px;  object-fit:cover; }
.av-36       { width:36px;  height:36px;  object-fit:cover; }
.av-40       { width:40px;  height:40px;  object-fit:cover; }
.av-50       { width:50px;  height:50px;  object-fit:cover; }
.av-54       { width:54px;  height:54px;  min-width:54px; max-width:54px; object-fit:cover; }
.av-54.av-txt { font-size:1.2rem; }
.av-80       { width:80px;  height:80px;  object-fit:cover; }
/* modifiers */
.av-ptr      { cursor:pointer; }
.av-fs       { flex-shrink:0; }
.av-center   { margin:0 auto; display:block; }
/* compound */
.av-90-hero  { width:90px;  height:90px;  object-fit:cover; border:3px solid #fff; }
.av-120      { width:120px; height:120px; object-fit:cover; border:3px solid #dee2e6; cursor:pointer; }
.av-140      { width:140px; height:140px; object-fit:cover; cursor:pointer; }
/* pointer-only squares (no object-fit) */
.av-28-ptr   { width:28px;  height:28px;  cursor:pointer; }
.av-32-ptr   { width:32px;  height:32px;  cursor:pointer; }

/* -- Utility classes -------------------------------------------------------- */
.pg-count      { font-size:.8rem; }          /* pagination x/y counter text   */
.txt-xs        { font-size:.75rem; }         /* small descriptive / meta text  */
.txt-xxs       { font-size:.65rem; }         /* extra-small inline icons/text  */
.flag-img      { width:20px; height:14px; object-fit:cover; border-radius:2px; } /* country flag img */
.dot-indicator { font-size:.5rem; }          /* bi-circle-fill status dot      */
.ct-pill-phone { font-size:13px; }           /* phone icon inside ct-pill      */
.copy-mid-btn  { cursor:pointer; opacity:.55; font-size:.8rem; }
.badge-role    { background:#e9ecef; color:#495057; font-size:.7rem; font-weight:500; }
.badge-count-light { background:rgba(255,255,255,.2); font-size:.72rem; }
.btn-copy-inline { font-size:.7rem; background:none; box-shadow:none; }
/* --------------------------------------------------------------------------- */

/* initials / badge avatars */
.av-36-badge { width:36px;  height:36px;  font-size:14px; font-weight:600; }
.av-42-glass { width:42px;  height:42px;  background:rgba(255,255,255,.15); }

/* -- Letter-initial avatar modifier (av-txt) --------------------------------
   Use alongside av-XX + rounded-circle + Bootstrap flex/color utilities
   (d-inline-flex align-items-center justify-content-center fw-bold text-white bg-secondary)
   Provides: flex-shrink:0 + per-size font-size
   -------------------------------------------------------------------------- */
.av-txt                     { flex-shrink:0; line-height:1; }
.av-20                      { width:20px;  height:20px;  object-fit:cover; }
.av-20.av-txt               { font-size:.6rem; }
.av-26.av-txt               { font-size:.7rem; }
.av-28.av-txt               { font-size:.75rem; }
.av-32.av-txt               { font-size:.8rem; }
.av-36.av-txt               { font-size:.85rem; }
.av-36-free.av-txt          { font-size:.9rem; }
.av-40.av-txt,
.av-40-bordered.av-txt      { font-size:.9rem; }
.av-42                      { width:42px;  height:42px;  min-width:42px; max-width:42px; object-fit:cover; }
.av-42.av-txt               { font-size:1rem; }
.av-90-hero.av-txt          { font-size:2.2rem; }
/* component-class-sized letter initials */
.vol-supervisor-photo.av-txt  { font-size:1.1rem; }
.vol-history-row-photo.av-txt { font-size:.85rem; }

/* -- Small Icon / Flag Utilities ------------------------------------------- */
.icon-20     { width:20px; }
.icon-20-sq  { width:20px; height:20px; }
/* special/unique sizes */
.av-40-logo      { width:40px; height:40px; object-fit:contain; background:#fff; border:1px solid #ddd; }
.av-40-contain   { width:40px; height:40px; object-fit:contain; }
.av-40-bare      { width:40px; height:40px; }
.av-40-bordered  { width:40px; height:40px; object-fit:cover; border:1px solid #dee2e6; }
.av-48-blue      { width:48px; height:48px; object-fit:cover; border:2px solid #0d6efd; }
.av-120-bare     { width:120px; height:120px; }
.av-160-qr       { width:160px; height:160px; }
/* free-membership granted-by badge */
.av-36-free      { width:36px; height:36px; min-width:36px; max-width:36px; object-fit:cover; border:2px solid #86efac; flex-shrink:0; }

/* -- Invoice avatar border (customer + creator columns) ------------------- */
.inv-avatar {
    border: 2px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* -- Invoice number cell --------------------------------------------------- */
.inv-num-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #0d6efd;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.inv-num-link:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.inv-num-icon {
    font-size: .8rem;
    opacity: .65;
}
.ac-msg          { font-size: .85rem; color: #374151; line-height: 1.6; margin: 0 0 14px; }
.ac-row          { display: flex; gap: 10px; }
.ac-link         { flex: 1; text-decoration: none; }
.ac-form         { flex: 1; margin: 0; }
.ac-btn-wrap     { width: 100%; border: none; background: transparent; padding: 0; display: block; }
.ac-card         { border-radius: 14px; padding: 14px 10px; text-align: center; }
.ac-card-invoice { border: 2px solid #f59e0b; background: #fffbeb; }
.ac-card-free    { border: 2px solid #22c55e; background: #f0fdf4; }
.ac-icon         { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.ac-icon-invoice { color: #d97706; }
.ac-icon-free    { color: #16a34a; }
.ac-title        { font-weight: 700; font-size: .85rem; }
.ac-title-invoice{ color: #92400e; }
.ac-title-free   { color: #15803d; }
.ac-hint         { font-size: .72rem; margin-top: 4px; }
.ac-hint-invoice { color: #a16207; }
.ac-hint-free    { color: #166534; }
.ac-divider      { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9ca3af; font-size: .72rem; font-weight: 700; white-space: nowrap; user-select: none; padding: 0 2px; }
.ac-divider::before,.ac-divider::after { content: ''; width: 1px; flex: 1; background: #d1d5db; }
.ac-divider span { padding: 6px 0; }

/* ===========================================================
   Dashboard - KPI + Geo + Charts + Renewals
   =========================================================== */

/* KPI Cards */
.kpi-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    background: #fff;
}
.kpi-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.13); }
.kpi-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
}
.kpi-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
.kpi-value { font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.kpi-sub   { font-size: .75rem; opacity: .6; margin-top: 4px; }

.kpi-blue   { border-top: 3px solid var(--ms-primary); }
.kpi-green  { border-top: 3px solid #2dbe8c; }
.kpi-red    { border-top: 3px solid #e05c4f; }
.kpi-orange { border-top: 3px solid #e8893a; }
.kpi-yellow { border-top: 3px solid #d4a820; }

.kpi-blue   .kpi-icon-wrap { background: rgba(78,115,223,.10); color: var(--ms-primary); }
.kpi-green  .kpi-icon-wrap { background: rgba(45,190,140,.10); color: #2dbe8c; }
.kpi-red    .kpi-icon-wrap { background: rgba(224,92,79,.10);  color: #e05c4f; }
.kpi-orange .kpi-icon-wrap { background: rgba(232,137,58,.10); color: #e8893a; }
.kpi-yellow .kpi-icon-wrap { background: rgba(212,168,32,.10); color: #c49a10; }

.kpi-blue   .kpi-label { color: var(--ms-primary); }
.kpi-green  .kpi-label { color: #2dbe8c; }
.kpi-red    .kpi-label { color: #e05c4f; }
.kpi-orange .kpi-label { color: #e8893a; }
.kpi-yellow .kpi-label { color: #c49a10; }
.kpi-card   .kpi-value { color: #1a1e2e !important; }

/* Section title divider */
.dash-section-title {
    font-size: .7rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #8b95a5;
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: .5rem;
}
.dash-section-title::after { content: ''; flex: 1; height: 1px; background: #edf0f4; }

/* Geo cards */
.geo-card { border: none; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.07); background: #fff; overflow: hidden; }
.geo-card-header {
    padding: 14px 18px 12px;
    background: linear-gradient(135deg, var(--ms-gradient-start) 0%, var(--ms-gradient-end) 100%);
    color: #fff; display: flex; align-items: center; gap: 10px;
}
.geo-card-header-icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.geo-card-header h6 { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.geo-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f6f8; }
.geo-row:last-child { border-bottom: none; }
.geo-name { flex: 1; font-size: .83rem; color: var(--ms-dark-soft); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-bar-wrap { flex: 1.2; height: 6px; background: #edf0f4; border-radius: 4px; overflow: hidden; min-width: 60px; }
.geo-bar-fill { height: 100%; border-radius: 4px; }
.geo-count { font-size: .78rem; font-weight: 700; color: #495057; min-width: 32px; text-align: end; }
.geo-pct {
    font-size: .7rem;
    font-weight: 600;
    color: var(--ms-primary);
    background: rgba(78,115,223,.08);
    border: 1px solid rgba(78,115,223,.18);
    border-radius: 20px;
    padding: 2px 7px;
    min-width: 44px;
    text-align: center;
    flex-shrink: 0;
}
.geo-card-body { padding: 12px 18px 14px; max-height: 320px; overflow-y: auto; }

/* Chart cards */
.chart-card { border: none; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.07); overflow: hidden; background: #fff; }
.chart-card-header {
    padding: 14px 18px 12px;
    background: linear-gradient(135deg, var(--ms-gradient-start) 0%, var(--ms-gradient-end) 100%);
    color: #fff; display: flex; align-items: center; gap: 10px;
}
.chart-card-header-icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.chart-card-header h6 { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; }

/* Legend - full-width below donut, simple flex */
.chart-card-body {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.chart-donut-wrap {
    width: 160px; height: 160px;
    position: relative; flex-shrink: 0;
}
.chart-legend { width: 100%; }
.legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f5f6f8;
}
.legend-row:last-child { border-bottom: none; }
.legend-dot  { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legend-lbl  { flex: 1; font-size: .84rem; color: #495057; display: flex; align-items: center; gap: 7px; min-width: 0; }
.legend-lbl i { font-size: .95rem; flex-shrink: 0; }
.legend-num  { font-size: .84rem; font-weight: 700; color: #1a1e2e; min-width: 52px; text-align: end; flex-shrink: 0; }
.legend-pct  {
    font-size: .72rem;
    font-weight: 600;
    color: var(--ms-primary);
    background: rgba(78,115,223,.08);
    border: 1px solid rgba(78,115,223,.18);
    border-radius: 20px;
    padding: 2px 7px;
    min-width: 44px;
    text-align: center;
    flex-shrink: 0;
}

/* Renewals card */
.renewals-card { border: none; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.07); overflow: hidden; background: #fff; }
.renewals-header {
    padding: 14px 18px 12px;
    background: linear-gradient(135deg, var(--ms-gradient-start) 0%, var(--ms-gradient-end) 100%);
    color: #fff; display: flex; align-items: center; gap: 10px;
}
.renewals-header-icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.renewals-header h6 { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.renewal-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid #f5f6f8;
    transition: background .15s;
}
.renewal-item:last-child { border-bottom: none; }
.renewal-item:hover { background: #f9fafb; }
.renewal-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #edf0f4; }
.renewal-name { font-size: .85rem; font-weight: 600; color: var(--ms-dark); text-decoration: none; }
.renewal-name:hover { color: var(--ms-primary); }
.renewal-date { font-size: .73rem; color: #8b95a5; margin-top: 1px; }
.days-badge    { font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; }
.days-critical { background: #fff0ef; color: #e74a3b; }
.days-warning  { background: #fff8e1; color: #d4a017; }
.days-ok       { background: #edfaf5; color: #1cc88a; }
.renewals-body { max-height: 370px; overflow-y: auto; }

/* Shared scrollbar */
.geo-card-body::-webkit-scrollbar,
.renewals-body::-webkit-scrollbar { width: 4px; }
.geo-card-body::-webkit-scrollbar-track,
.renewals-body::-webkit-scrollbar-track { background: transparent; }
.geo-card-body::-webkit-scrollbar-thumb,
.renewals-body::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 4px; }

/* Dashboard RTL */
[dir="rtl"] .dash-section-title { flex-direction: row-reverse; }
[dir="rtl"] .dash-section-title::after  { display: none; }
[dir="rtl"] .dash-section-title::before { content:''; flex:1; height:1px; background:#edf0f4; }

/* Dashboard mobile */
@media (max-width: 575px) {
    .kpi-value     { font-size: 1.4rem; }
    .kpi-icon-wrap { width: 42px; height: 42px; font-size: 1.2rem; }
    .geo-pct       { display: none; }
}
@media (max-width: 400px) {
    .geo-bar-wrap  { display: none; }
}
/* -- Bulk Selection ----------------------------------- */
.bulk-select-all, .bulk-select-row { cursor:pointer; width:16px; height:16px; }
table[data-bulk-entity] thead tr th:first-child { width:36px; }
tr.bulk-selected > td { background-color: rgba(13,110,253,.08) !important; }
.bulk-toolbar {
    position: fixed; bottom:0; left:0; right:0; z-index:1060;
    background: #1e293b; color:#fff;
    display: flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding: 12px 20px;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
.bulk-toolbar.show { transform: translateY(0); }
.bulk-count-pill {
    background: rgba(255,255,255,.15); border-radius:20px;
    padding: 4px 14px; font-weight:700; font-size:.85rem;
    display:flex; align-items:center; gap:6px;
}
.bulk-entity-label { font-size:.78rem; color:rgba(255,255,255,.55); flex:1; }
.bulk-toolbar .btn { font-size:.82rem; }

/* -- Shared Profile Card -------------------------------- */
.sticky-top-panel   { top:20px; z-index:1; }
@media (max-width: 991.98px) {
    .sticky-top-panel { margin-bottom: 1.5rem; }
}
/* Sidebar column: display:contents on mobile lets photo/sticky get independent flex order */
@media (max-width: 991.98px) {
    .sidebar-col    { display: contents; }
    .sidebar-photo,
    .sidebar-sticky {
        width: 100%;
        padding-left:  calc(var(--bs-gutter-x, 1.5rem) * .5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    }
    .sidebar-photo  { order: 1 !important; }
    .sidebar-sticky { order: 3 !important; position: static !important; }
}
/* On form pages (create/edit) the sticky sidebar must not overlap the sections below the row */
.sidebar-sticky { position: static !important; }
.profile-banner     { height:70px; background:linear-gradient(135deg,var(--ms-gradient-start) 0%,var(--ms-gradient-end) 100%); }
.ms-card-banner     { height:70px; }
.profile-photo-offset { margin-top:-45px; }
.badge-female       { background-color:#d63384 !important; color:#fff !important; }
.qr-img-max         { max-width:150px; }
.tbl-flag-img       { width:1em; height:.75em; object-fit:cover; vertical-align:middle; margin-inline-start:4px; border-radius:2px; }
.flag-inline        { height:12px; vertical-align:middle; }
/* -- Cropper Shared ------------------------------------ */
.crop-container     { min-height:300px; max-height:70vh; overflow:hidden; }
.crop-img           { display:block; max-width:100%; }
.crop-modal-body    { height:360px; overflow:hidden; }
/* -- Shared Utility ------------------------------------ */
.badge-mono         { font-family:monospace; font-size:.85rem; }
.badge-icon-pos     { bottom:-8px; right:-6px; font-size:14px; }
.tbl-sm-text        { font-size:0.85rem; }
.tbl-xs-text        { font-size:0.88rem; }
.contact-note-trunc { max-width:200px; }
.conf-title-hero    { font-size:2rem; font-weight:700; color:var(--ms-gradient-end); }
.dash-renewal-item  { flex:1; min-width:0; }
.logo-contain       { object-fit:contain; padding:4px; }
.bg-purple          { background-color:#6f42c1 !important; }
.icon-phone-sm      { font-size:13px; }
a.profile-photo-action-btn  { text-decoration:none !important; }
.profile-photo-action-btn   { position:absolute; bottom:2px; right:2px; z-index:2; width:24px; height:24px; border-radius:50%; background:#0d6efd; color:#fff !important; font-size:11px; display:flex; align-items:center; justify-content:center; text-decoration:none !important; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
@media(max-width:576px){ .bulk-entity-label { display:none; } }
/* Navbar user avatar */
.navbar-user-avatar      { width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.4); }
.navbar-user-avatar-init { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.25); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; border:2px solid rgba(255,255,255,0.4); }
/* ── Select2 user avatar dropdowns (global) ─────────────────── */
.select2-user-option     { display:inline-flex; align-items:center; gap:8px; }
.select2-user-avatar     { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid #dee2e6; }
.select2-user-avatar-sm  { width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid #dee2e6; }

/* ── mrserver-modal ──────────────────────────────────────────── */
.mrserver-modal .modal-content      { border:none; border-radius:12px; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.18); }
.mrserver-modal .modal-header       { background:linear-gradient(135deg,var(--ms-gradient-start,#1a2340) 0%,var(--ms-gradient-end,#2c3e6b) 100%); border-bottom:none; padding:1.1rem 1.4rem; }
.mrserver-modal .modal-title        { color:#fff; font-size:1rem; font-weight:600; display:flex; align-items:center; gap:.5rem; }
.mrserver-modal .modal-header .btn-close { filter:invert(1) grayscale(1) brightness(2); opacity:.75; }
.mrserver-modal .modal-header .btn-close:hover { opacity:1; }
.mrserver-modal .modal-body         { padding:1.4rem; background:#fff; }
.mrserver-modal .modal-footer       { background:#f8f9fa; border-top:1px solid #e9ecef; padding:.85rem 1.4rem; }
.mrserver-modal .ms-modal-sender    { display:flex; align-items:center; gap:.85rem; padding:1rem 1.1rem; background:var(--ms-modal-sender-bg,#f0f4ff); border-radius:10px; margin-bottom:1.2rem; }
.mrserver-modal .ms-modal-avatar    { width:46px; height:46px; border-radius:50%; background:var(--ms-primary,#4e73df); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700; flex-shrink:0; }
.mrserver-modal .ms-modal-meta      { display:flex; flex-wrap:wrap; gap:.25rem .75rem; font-size:.82rem; color:#6c757d; margin-top:.2rem; }
.mrserver-modal .ms-modal-meta a    { color:inherit; text-decoration:none; }
.mrserver-modal .ms-modal-meta a:hover { text-decoration:underline; }
.mrserver-modal .ms-modal-section   { margin-bottom:1.1rem; }
.mrserver-modal .ms-modal-label     { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#adb5bd; margin-bottom:.35rem; }
.mrserver-modal .ms-modal-message   { background:#f8f9fa; border-radius:8px; padding:.85rem 1rem; white-space:pre-wrap; font-size:.9rem; line-height:1.6; color:#343a40; border-inline-start:3px solid var(--ms-primary,#4e73df); }
.mrserver-modal .ms-modal-response  { background:#edf7f0; border-radius:8px; padding:.85rem 1rem; white-space:pre-wrap; font-size:.9rem; line-height:1.6; color:#155724; border-inline-start:3px solid #198754; }
.mrserver-modal .ms-modal-badges    { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.mrserver-modal .btn-cv-ctrl        { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; padding:.2rem .45rem; line-height:1; }
.mrserver-modal .btn-cv-ctrl:hover  { background:rgba(255,255,255,.28); color:#fff; border-color:rgba(255,255,255,.45); }
.mrserver-modal .btn-cv-ctrl:disabled { opacity:.35; pointer-events:none; }

/* ==========================================================================
   Utility — extracted from inline styles
   ========================================================================== */

/* Color */
.text-purple                { color:#6f42c1 !important; }

/* Icon sizes */
.ic-xl                      { font-size:4rem; }
.ic-lg                      { font-size:2.5rem; }

/* Progress bar heights */
.progress-h4                { height:4px; }
.progress-h5                { height:5px; }
.progress-h6                { height:6px; }

/* Progress bar initial state (JS-controlled) */
.progress-bar-init          { width:0%; border-radius:999px; }

/* Member status icon circle (hourglass / check / x in table cells) */
.member-status-icon         { font-size:14px; }

/* Member ID link chip (used in course/conference details) */
.member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #cfe2ff;
    background: #eef4ff;
    color: #1f4f8f;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    vertical-align: middle;
}
.member-chip:hover {
    background: #e1edff;
    border-color: #b6d4fe;
    color: #183f72;
}
.member-chip.match {
    border-color: #ffe69c;
    background: #fff8db;
    color: #7a5a00;
}
.member-chip.match:hover {
    background: #fff3c2;
    border-color: #ffd76a;
    color: #664900;
}

/* Disabled select overlay */
.select-disabled-overlay    { pointer-events:none; opacity:0.45; user-select:none; }

/* Flex column centered */
.flex-col-center            { display:flex; flex-direction:column; align-items:center; gap:10px; }

/* Text truncate with max-width */
.truncate-220               { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.truncate-300               { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.truncate-400               { max-width:400px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.truncate-200               { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Inline code / pre blocks */
.pre-debug                  { white-space:pre-wrap; word-break:break-all; }
.pre-debug-sm               { white-space:pre-wrap; word-break:break-all; font-size:.72rem; max-height:300px; overflow:auto; }

/* Payment / checkout containers */
.payment-container          { max-width:480px; margin:0 auto; }

/* Nowrap cell */
.cell-nowrap                { white-space:nowrap; }

/* Vertical align middle with gap (e.g. inline SVG) */
.inline-icon                { vertical-align:middle; margin-inline-end:6px; }

/* Log / audit utilities */
.ip-code                    { font-size:.82rem; letter-spacing:.03em; }
.token-code                 { word-break:break-all; font-size:.72rem; }
.col-num                    { width:50px; }
.min-w-ip                   { min-width:120px; }
.max-w-url                  { max-width:250px; }

/* ── Developer Card (Settings > Developer tab) ─────────────── */
.mrserver-developer-card {
    display:flex; gap:2rem; align-items:flex-start;
    background:#fff; border:1px solid #e5e7eb; border-radius:1rem;
    padding:2rem; margin-bottom:1.5rem;
    box-shadow:0 4px 20px rgba(99,102,241,.08);
}
.mrserver-developer-card__avatar img {
    width:120px; height:120px; border-radius:50%;
    object-fit:cover; border:3px solid #e5e7eb; flex-shrink:0;
    box-shadow:0 4px 12px rgba(99,102,241,.15);
}
.mrserver-developer-card__body { flex:1; }
.mrserver-developer-card__name {
    font-size:1.4rem; font-weight:700; color:#111827; margin-bottom:.2rem;
}
.mrserver-developer-card__title {
    font-size:.875rem; color:#3C517D; font-weight:600; margin-bottom:.85rem;
    letter-spacing:.01em;
}
.mrserver-developer-card__bio {
    font-size:.875rem; color:#4b5563; line-height:1.7; margin-bottom:1rem;
}
.mrserver-developer-card__skills {
    display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem;
}
.mrserver-developer-card__skills span {
    background:linear-gradient(135deg,#f0f3f7,#e8ecf3);
    border:1px solid #c5cfe0; border-radius:999px; padding:.25rem .8rem;
    font-size:.78rem; color:#3C517D; font-weight:500;
}
.mrserver-developer-card__links { display:flex; flex-wrap:wrap; gap:.5rem; }
.mrserver-dev-link {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.38rem .9rem; border-radius:.5rem; font-size:.8rem; font-weight:600;
    border:1px solid transparent; color:#fff;
    text-decoration:none; transition:opacity .15s,transform .1s;
}
.mrserver-dev-link:hover { opacity:.88; transform:translateY(-1px); color:#fff; }
.mrserver-dev-link--primary  { background:#3C517D; border-color:#3C517D; }
.mrserver-dev-link--linkedin { background:#0A66C2; border-color:#0A66C2; }
.mrserver-dev-link--github   { background:#24292e; border-color:#24292e; }
.mrserver-dev-link--twitter  { background:#000;    border-color:#000; }
.mrserver-dev-link--whatsapp { background:#25D366; border-color:#25D366; }
.mrserver-dev-link--instagram{ background:#E1306C; border-color:#E1306C; }
.mrserver-dev-link--coffee   { background:#FFDD00; border-color:#e5c800; color:#111827; }
.mrserver-dev-link--coffee:hover { color:#111827; }

.mrserver-developer-stats {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem;
}
.mrserver-stat-box {
    background:#fff; border:1px solid #e5e7eb; border-radius:.875rem;
    padding:1.4rem 1rem; text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    transition:box-shadow .2s,transform .2s;
}
.mrserver-stat-box:hover {
    box-shadow:0 6px 20px rgba(99,102,241,.12);
    transform:translateY(-2px);
}
.mrserver-stat-box__icon {
    display:flex; justify-content:center; margin-bottom:.6rem;
    opacity:.85;
}
.mrserver-stat-box__num {
    font-size:1.65rem; font-weight:800; color:#3C517D; line-height:1;
}
.mrserver-stat-box__label {
    font-size:.78rem; color:#6b7280; margin-top:.35rem; font-weight:500;
}
@media(max-width:600px){
    .mrserver-developer-card { flex-direction:column; align-items:center; text-align:center; }
    .mrserver-developer-card__skills,.mrserver-developer-card__links { justify-content:center; }
}


/* =============================================================================
   Checkout view
   Moved from inline <style> block + inline style="..." attributes.
   ============================================================================= */
.customer-avatar    { width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--ms-border); }
.customer-avatar-lg { width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid #28a745;box-shadow:0 0 0 4px rgba(40,167,69,.15); }
.avatar-initials    { display:flex;align-items:center;justify-content:center;background:#e9ecef;color:var(--ms-muted);font-weight:700;font-size:1.5rem; }
.avatar-initials-lg { font-size:2rem; }
.ref-badge          { background:#f8f9fa;border:1px solid var(--ms-border);border-radius:8px;padding:.5rem 1rem;display:inline-block;margin-top:.5rem; }
.btn-whatsapp       { background:#25D366;color:#fff;border:none; }
.btn-whatsapp:hover { background:#1ebe5d;color:#fff; }

.btn-stripe-pay {
    background:#d0a25a;color:#fff;border:none;border-radius:6px;
    padding:10px 16px;font-weight:600;font-size:.9rem;width:100%;
    cursor:pointer;transition:background .2s;
    display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn-stripe-pay:hover    { background:#b8860b; }
.btn-stripe-pay:disabled { background:#a9a5ff;cursor:not-allowed; }

/* MontyPay button variant */
.btn-mp        { background:#0ea5e9; }
.btn-mp:hover  { background:#0284c7; }

.payment-or-divider { display:flex;align-items:center;gap:.75rem;color:var(--ms-muted-light);margin:.75rem 0; }
.payment-or-divider::before,
.payment-or-divider::after { content:'';flex:1;border-top:1px solid var(--ms-border); }

/* MontyPay HPF iframe wrappers */
.mp-field-wrap   { position:relative; }
.mp-field-icon   { position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
                   color:#94a3b8;font-size:1.05rem;pointer-events:none;z-index:2; }
.mp-field        { background:#fff;border:1px solid #ced4da;border-radius:6px;
                   padding:0 .75rem 0 2.25rem;height:42px;
                   display:flex;align-items:center;transition:border-color .15s, box-shadow .15s; }
.mp-field:focus-within     { border-color:#0ea5e9;box-shadow:0 0 0 .2rem rgba(14,165,233,.15); }
.mp-field.mp-field-invalid { border-color:#ef4444;box-shadow:0 0 0 .15rem rgba(239,68,68,.15); }
.mp-field.mp-field-valid   { border-color:#10b981; }
.mp-field-wrap:has(.mp-field-invalid) .mp-field-icon { color:#ef4444; }
[dir="rtl"] .mp-field      { padding:0 2.25rem 0 .75rem; }
[dir="rtl"] .mp-field-icon { left:auto;right:.75rem; }

.montypay-hpf-form { margin-top:1rem; }

/* Card-brand badges next to "Card Number" label */
.card-brand-badges   { line-height:0; }
.card-brand-badge    { height:22px;width:auto;display:block; }

/* "No payment methods" empty state */
.checkout-empty           { padding:3rem 1rem; }
.checkout-country-flag    { width:80px;height:60px;object-fit:contain;border:1px solid var(--ms-border);border-radius:4px; }
.checkout-country-name    { font-size:.9rem; }

/* Payment-agreement paragraph (sits right under the pay button) */
.payment-agreement        { font-size:.85rem;margin-top:.5rem !important; }

/* Trust-badge section */
.pci-logo                 { height:22px;width:auto;vertical-align:middle; }
.extra-payment-logos img  { height:24px;width:auto; }

/* =============================================================================
   Checkout layout
   ============================================================================= */
body                        { background-color:#f0f2f5;font-family:'Inter',sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center; }
html[dir="rtl"] body        { font-family:'Tajawal',sans-serif; }
.payment-container          { max-width:820px;margin:2rem auto;padding:0 1rem; }
.payment-card               { border:none;border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.09);overflow:hidden; }
.card-header-custom         { background:#fff;padding:1.25rem 2rem;border-bottom:1px solid #e9ecef; }
.company-logo-wrap          { display:inline-block;background:#fff;border-radius:12px;padding:10px 22px;line-height:0; }
.company-logo               { max-height:48px; }
.invoice-item               { padding:.85rem 0;border-bottom:1px solid #f0f0f0; }
.invoice-item:last-child    { border-bottom:0; }
.total-box                  { background:#f8f9fa;border-radius:10px;text-align:center;padding:1.25rem; }
.total-box .amount          { font-size:2.4rem;font-weight:700;color:#0d6efd; }
.payment-side               { background:#f8f9fa; }

.checkout-warning           { display:flex;align-items:center;gap:.35rem;max-width:100%;margin:.35rem .75rem 0;padding:0;background:transparent;border:0;box-shadow:none;position:relative;box-sizing:border-box;white-space:nowrap; }
.checkout-warning__icon     { flex:0 0 auto;width:.95rem;height:.95rem;display:grid;place-items:center;background:transparent;color:#d39e00;font-size:.68rem;margin-top:0; }
.checkout-warning__body     { flex:1 1 auto;min-width:0; }
.checkout-warning__text     { color:#7a5a18;font-weight:500;font-size:.72rem;line-height:1;white-space:nowrap;overflow:visible;text-overflow:clip;word-break:normal; }

/* Payment Agreement & Security Section */
.payment-agreement          { font-size:.72rem;line-height:1.5; }
.payment-security-divider   { border-top:1px solid #e9ecef; }
.security-badge             { font-size:.7rem;color:#28a745; }
.security-badge i.bi-shield-fill-check { font-size:1.2rem; }
.security-badge i.bi-lock-fill         { font-size:1rem; }
.security-text              { font-size:.65rem;margin-bottom:.5rem; }
.payment-methods-img        { max-width:180px;height:auto;opacity:.65; }

/* =============================================================================
   Stripe Payment Element 
   ============================================================================= */
.btn-stripe                 { background:#635bff;color:#fff;border:none;border-radius:6px;
                              padding:12px 16px;font-weight:600;font-size:.95rem;width:100%;
                              cursor:pointer;transition:background .2s; }
.btn-stripe:hover           { background:#5249e0; }
.btn-stripe:disabled        { background:#a9a5ff;cursor:not-allowed; }
#stripe-payment-element     { padding:4px 0; }

/* Fix for intl-tel-input inside Bootstrap input-groups */
.input-group .iti {
    flex: 1 1 auto;
    width: 1%;
}
/* Remove Bootstrap's default border-radius so ITI library CSS takes over */
.iti .form-control.phone-input {
    border-radius: unset !important;
}

/* =============================================================================
   QR invalid page 
   ============================================================================= */
.qr-invalid-page    { width:100%; background:#f0f2f5; }
.qr-logo-wrap       { display:inline-block;background:#fff;border-radius:14px;padding:12px 28px;line-height:0;box-shadow:0 2px 12px rgba(0,0,0,.08); }
.qr-logo            { max-height:52px;max-width:220px;object-fit:contain; }
.qr-error-card      { border-radius:20px !important;box-shadow:0 8px 40px rgba(0,0,0,.10) !important;background:#fff;max-width:520px;width:100%; }
.qr-icon-wrap       { display:inline-flex;align-items:center;justify-content:center;width:92px;height:92px;border-radius:50%;background:rgba(108,117,125,.09);margin:0 auto; }
.qr-icon-i          { font-size:2.8rem;line-height:1; }
.qr-error-message   { font-size:1.05rem; }
.qr-divider         { border-top:1px solid rgba(0,0,0,.08);margin:.75rem 0; }
.btn-wa             { display:inline-flex;align-items:center;gap:.45rem;background:#25D366;color:#fff !important;border:none;border-radius:10px;font-weight:600;padding:.55rem 1.8rem;font-size:1rem;text-decoration:none;transition:background .2s; }
.btn-wa:hover       { background:#1ebe5d; }

/* =============================================================================
   Checkout error page 
   ============================================================================= */
.checkout-error-card      { border-radius:20px !important;box-shadow:0 8px 40px rgba(0,0,0,.10) !important;background:#fff;max-width:520px;width:100%; }
.checkout-error-icon-wrap { display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:rgba(220,53,69,.10);margin:0 auto; }
.checkout-error-icon-i    { font-size:3rem;line-height:1; }
.checkout-error-message   { font-size:1.05rem; }
.checkout-footer          { font-size:.75rem;color:#adb5bd;text-align:center; }

/* Responsive WhatsApp buttons */
@media (max-width:575.98px) {
    .btn-wa       { font-size:.82rem;padding:.4rem 1.1rem; }
    .wa-error-btn { font-size:.8rem !important;padding:.3rem .9rem !important; }
}