@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

body {
    font-family: var(--font-family-ar);
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    background: var(--bg-secondary);
}

/* ----- Delivery live tracking ----- */
.j-delivery-tracking {
    display: grid;
    gap: 1rem;
}

.j-delivery-tracking__header,
.j-delivery-tracking__meta,
.j-delivery-tracking__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.j-delivery-tracking__live {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: var(--warning-50);
    color: var(--warning-700);
    font-size: var(--font-xs);
    font-weight: 700;
}

.j-delivery-tracking__live.is-live {
    background: var(--success-50);
    color: var(--success-700);
}

.j-delivery-tracking__map {
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-secondary);
}

.j-delivery-tracking__fallback {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--warning-50);
    color: var(--warning-700);
    line-height: 1.7;
}

.j-delivery-tracking__meta {
    align-items: stretch;
}

.j-delivery-tracking__meta > div {
    flex: 1 1 220px;
    padding: .75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.j-delivery-tracking__meta strong {
    display: block;
    margin-bottom: .25rem;
    color: var(--text-primary);
}

.j-delivery-tracking__lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.j-delivery-tracking__lists h6 {
    margin-bottom: .5rem;
    color: var(--text-primary);
}

.j-delivery-tracking__lists ul {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.j-delivery-tracking__lists li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .5rem;
    align-items: start;
    padding: .65rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.j-delivery-tracking__lists li > span {
    width: 10px;
    height: 10px;
    margin-top: .35rem;
    border-radius: 50%;
}

.j-delivery-tracking__lists li small,
.j-delivery-tracking__lists li a {
    grid-column: 2;
    color: var(--text-secondary);
    font-size: var(--font-xs);
}

.j-delivery-tracking__lists li .is-active {
    color: var(--success-700);
    font-weight: 700;
}

@media (max-width: 767px) {
    .j-delivery-tracking__lists {
        grid-template-columns: 1fr;
    }

    .j-delivery-tracking__map {
        min-height: 260px;
    }
}

h1 {
    font-size: var(--font-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h3 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h4 {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

h5 {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

h6 {
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

.la,
.las,
.lar,
.lal,
.lad,
[class^="la-"],
[class*=" la-"] {
    font-family: "Line Awesome Free" !important;
}

.lab {
    font-family: "Line Awesome Brands" !important;
}

.fa,
.fas,
.far,
.fal,
.fad,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}

.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}

.workspace-context .container,
.workspace-context .container-fluid {
    max-width: min(1180px, calc(100vw - 1.5rem));
}

.workspace-context .card,
.workspace-context .custom--card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.workspace-context .card-header,
.workspace-context .card-footer {
    border-color: var(--border-light);
    background: var(--gray-50);
}

.workspace-context .card-title {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
}

.workspace-context .form-control,
.workspace-context .form-select,
.workspace-context .select2-container .select2-selection {
    min-height: 44px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    background: var(--bg-primary);
    box-shadow: none;
}

.workspace-context textarea.form-control {
    min-height: 120px;
}

.workspace-context .form-control:focus,
.workspace-context .form-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 16%, transparent);
}

.workspace-context .table {
    color: var(--text-primary);
    vertical-align: middle;
}

.workspace-context .table thead th {
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    background: var(--gray-50);
}

.workspace-context .table tbody td {
    border-color: var(--border-light);
}

.workspace-context .table-responsive {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: auto;
}

.workspace-context .btn,
.workspace-context .j-btn {
    min-height: 40px;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.workspace-context .btn--base,
.workspace-context .btn--primary,
.workspace-context .btn--success {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.workspace-context .btn--dark {
    background: var(--gray-800);
    border-color: var(--gray-800);
    color: #fff;
}

.workspace-context .btn--danger {
    background: var(--danger-600);
    border-color: var(--danger-600);
    color: #fff;
}

.workspace-context .btn--warning {
    background: var(--warning-500);
    border-color: var(--warning-500);
    color: var(--gray-900);
}

.workspace-context .btn--info {
    background: var(--info-600);
    border-color: var(--info-600);
    color: #fff;
}

.workspace-context .badge {
    border-radius: var(--radius-pill);
    padding: .35rem .65rem;
    font-weight: var(--font-weight-semibold);
}

.workspace-context .badge--success,
.workspace-context .text--success {
    color: var(--success-700);
}

.workspace-context .badge--success {
    background: var(--success-50);
}

.workspace-context .badge--warning {
    color: var(--warning-800);
    background: var(--warning-50);
}

.workspace-context .badge--danger {
    color: var(--danger-700);
    background: var(--danger-50);
}

.workspace-context .badge--info,
.workspace-context .badge--primary {
    color: var(--brand-700);
    background: var(--brand-50);
}

.workspace-context .badge--dark {
    color: var(--gray-700);
    background: var(--gray-100);
}

.workspace-context .modal-content {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.workspace-context .modal-header,
.workspace-context .modal-footer {
    border-color: var(--border-light);
}

.j-realtime-notification-stack {
    position: fixed;
    inset-block-start: calc(1rem + env(safe-area-inset-top, 0px));
    inset-inline-start: calc(1rem + env(safe-area-inset-left, 0px));
    z-index: var(--z-toast);
    width: min(360px, calc(100vw - 2rem));
    display: grid;
    gap: .75rem;
    pointer-events: none;
}

.j-realtime-notification {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-xl);
    color: var(--text-primary);
    pointer-events: auto;
}

.j-realtime-notification__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 1.25rem;
}

.j-realtime-notification__body strong {
    display: block;
    margin-inline-end: 1.25rem;
    font-size: var(--font-sm);
}

.j-realtime-notification__body p {
    margin: .2rem 0 .55rem;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: 1.6;
}

.j-realtime-notification__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: .35rem .75rem;
    border-radius: var(--radius-pill);
    background: var(--brand-500);
    color: var(--text-on-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
}

.j-realtime-notification__action:hover,
.j-realtime-notification__action:focus {
    color: var(--text-on-primary);
    background: var(--brand-600);
}

.j-realtime-notification__close {
    position: absolute;
    inset-block-start: .45rem;
    inset-inline-end: .55rem;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1;
}

.j-realtime-notification__close:hover,
.j-realtime-notification__close:focus {
    background: var(--gray-100);
    color: var(--text-primary);
}

.workspace-context .list-group-item {
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Finance operation forms: deposit, invoice payment, and role wallet top-up. */
.j-finance-flow {
    width: min(100%, 1040px);
    margin-inline: auto;
}

.j-finance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 1rem;
    align-items: start;
}

.j-finance-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1rem, 2vw, 1.35rem);
}

.j-finance-card__head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
}

.j-finance-card__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand-700);
    flex: 0 0 auto;
}

.j-finance-card__icon i {
    font-size: 1.35rem;
}

.j-finance-card__title {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.j-finance-card__subtitle {
    margin: .2rem 0 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.j-finance-field {
    margin-bottom: 1rem;
}

.j-finance-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
}

.j-finance-required {
    color: var(--danger-600);
}

.j-finance-select,
.j-finance-input,
.workspace-context .j-finance-select + .select2-container .select2-selection {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.j-finance-input {
    padding: .8rem 1rem;
}

.j-finance-input::placeholder {
    color: var(--text-tertiary);
}

.j-finance-input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.j-finance-input-group .j-finance-input {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.j-finance-addon {
    min-width: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-medium);
    border-inline-start: 0;
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
    background: var(--gray-50);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-sm);
}

.j-finance-message {
    display: none;
    margin-top: .55rem;
    padding: .65rem .75rem;
    border-radius: var(--radius-md);
    background: var(--warning-50);
    color: var(--warning-700);
    border: 1px solid var(--warning-200);
    font-size: var(--font-sm);
    line-height: 1.6;
    white-space: normal;
}

.j-finance-message:not(:empty) {
    display: block;
}

.j-finance-limit {
    margin: .55rem 0 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.j-finance-summary-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.j-finance-summary-row,
.j-finance-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.j-finance-summary-row {
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--border-light);
}

.j-finance-summary-total {
    margin-top: .9rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-800);
}

.j-finance-summary-label {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.j-finance-summary-value {
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.j-finance-summary-total .j-finance-summary-label,
.j-finance-summary-total .j-finance-summary-value {
    color: inherit;
    font-weight: var(--font-weight-bold);
}

.j-finance-submit {
    width: 100%;
    margin-top: 1rem;
}

.j-finance-gateway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}

.j-finance-gateway-option {
    position: relative;
}

.j-finance-gateway-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.j-finance-gateway-label {
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.j-finance-gateway-radio:checked + .j-finance-gateway-label {
    border-color: var(--brand-500);
    background: var(--brand-50);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 14%, transparent);
}

.j-finance-gateway-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    color: var(--brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.j-finance-gateway-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.j-finance-gateway-icon i {
    font-size: 1.5rem;
}

.j-finance-gateway-name {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
}

.j-finance-gateway-meta {
    margin: .2rem 0 0;
    color: var(--text-secondary);
    font-size: var(--font-xs);
}

.j-withdrawal-method-card {
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.j-withdrawal-method-card:hover,
.j-withdrawal-method-card:focus-visible {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.j-withdrawal-method-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
    color: var(--brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.j-withdrawal-method-card__icon i {
    font-size: 2rem;
}

.j-withdrawal-method-card__title {
    display: block;
    margin-bottom: .15rem;
    font-weight: var(--font-weight-bold);
}

.j-withdrawal-method-card__meta,
.j-withdrawal-method-card__desc {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-xs);
    line-height: 1.6;
}

.j-icon-sm {
    font-size: 1.25rem;
}

.j-icon-md {
    font-size: 1.5rem;
}

.j-icon-lg {
    font-size: 3rem;
}

.j-icon-xl {
    font-size: 5rem;
}

.j-success-mark {
    color: var(--success-600);
    font-size: 5rem;
}

.j-muted-empty-icon {
    color: var(--text-tertiary);
    font-size: 3rem;
    opacity: .35;
}

.j-muted-empty-icon--large {
    color: var(--text-tertiary);
    font-size: 4rem;
    opacity: .35;
}

.j-auth-link {
    color: var(--brand-600);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
}

.j-theme-preview-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.j-theme-preview-desc {
    font-size: 1.25rem;
    opacity: .9;
}

.j-theme-preview-check {
    color: var(--color-primary);
    font-size: 3rem;
}

.j-fw-semibold {
    font-weight: var(--font-weight-semibold);
}

.j-link-unstyled {
    text-decoration: none;
}

.workspace-context .select2-dropdown {
    z-index: 999999;
}

@media (max-width: 767px) {
    .j-finance-flow {
        width: 100%;
    }

    .j-finance-grid {
        grid-template-columns: 1fr;
    }

    .j-finance-card {
        border-radius: var(--radius-md);
    }

    .j-finance-card__title {
        font-size: var(--font-lg);
    }
}


/* Migrated from resources/views/templates/basic/user/profile_setting.blade.php */
.card {
            box-shadow: 1px 1px 9px #00000012;
        }

        .card-body {
            background-color: #fff;
        }

        .card.style--two .card-header {
            background-color: white;
        }

        .profile-disabled {
            border-left: 1px solid #dddddddb;
        }

        .list-group-item+.list-group-item span.fw-bold {
            font-size: 14px;
        }


/* Migrated from resources/views/templates/basic/user/transactions.blade.php */
/* Transactions Ultra Styles */
.transactions-ultra-page { animation: fadeIn 0.8s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modern-badge { background: #eff6ff; color: var(--brand-700); padding: 6px 15px; border-radius: 50px; font-size: 11px; font-weight: 800; display: inline-block; }
.dash-title { font-size: 32px; font-weight: 900; letter-spacing: -1.5px; }

.form-select-ultra {
    border: none; background: #f8fafc; font-weight: 800; font-size: 14px;
    padding: 10px 20px; border-radius: 15px; color: #0f172a; outline: none;
    transition: all 0.2s; cursor: pointer; min-width: 160px;
}
.form-select-ultra:focus { background: #eff6ff; color: var(--brand-700); }

.modern-history-list { background: #fff; border-radius: 40px; overflow: hidden; }
.history-item-ultra { border-bottom: 1px solid #f1f5f9; transition: all 0.2s; }
.history-item-ultra:hover { background: #f8fafc; }
.history-item-ultra::after {
    content: '\f107'; font-family: 'Line Awesome Free'; font-weight: 900;
    position: absolute; right: 20px; top: 15px; opacity: 0; transition: all 0.2s; color: #94a3b8;
}
.history-item-ultra:hover::after { opacity: 1; transform: translateY(5px); }

.history-icon-box { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.history-icon-box.plus { background: #ecfdf5; color: #10b981; }
.history-icon-box.minus { background: #fef2f2; color: #ef4444; }

.fs-16 { font-size: 16px; }

/* Expanded details styling */
.collapse.show + .history-item-ultra::after { transform: rotate(180deg); }

/* RTL Fixes */
[dir="rtl"] .history-item-ultra::after { right: auto; left: 20px; }
[dir="rtl"] .history-amount { text-align: left !important; }
[dir="rtl"] .history-icon-box { margin-left: 0; margin-right: 0; }
[dir="rtl"] .search-wrap-ultra button { transform: scaleX(-1); }


/* Migrated from resources/views/templates/basic/user/twofactor.blade.php */
.copied::after {
            background-color: #{{ gs('base_color') }};
        }


/* Migrated from resources/views/templates/basic/user/invoice/create.blade.php */
.margin--top--45{
        margin-top: -45px;
    }
    @media screen and (max-width: 991px) {
        .margin--top--45{
            margin-top: -5px;
        }
    }
    .icon-btn {
        width: 50px;
        height: 50px;
        font-size: 32px;
    }
    .total {
        font-size: 17px;
    }
    .d-widget__content .icon-btn i {
        font-size: 22px;
        color: #fff;
        margin-bottom: 0;
    }


/* Migrated from resources/views/templates/basic/user/invoice/update.blade.php */
.margin--top--45{
        margin-top: -45px;
    }
    @media screen and (max-width: 991px) {
        .margin--top--45{
            margin-top: -5px;
        }
    }


/* Migrated from resources/views/templates/basic/user/kyc/info.blade.php */
.main-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


/* Migrated from resources/views/templates/basic/user/operations/money_requests.blade.php */
.select2-dropdown{
            z-index: 999999;
        }


/* Migrated from resources/views/templates/basic/user/shipping/show.blade.php */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 5px;
}
.star-rating input {
    display: none;
}
.star-rating label {
    cursor: pointer;
    font-size: 32px;
    color: var(--gray-500);
    transition: color 0.2s;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: var(--warning-700);
}


/* Migrated from resources/views/templates/basic/user/shipping/tracking.blade.php */
.tracking-timeline {
    position: relative;
    padding-left: 40px;
}
.tracking-item {
    position: relative;
    padding-bottom: 30px;
}
.tracking-item:last-child {
    padding-bottom: 0;
}
.tracking-marker {
    position: absolute;
    left: -40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 24px;
}
.tracking-item.active .tracking-marker {
    background: var(--success-700);
    color: #fff;
}
.tracking-timeline::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
}


/* Migrated from resources/views/templates/basic/user/support/create.blade.php */
.input-group-text:focus {
            box-shadow: none !important;
        }


/* Migrated from resources/views/templates/basic/user/support/view.blade.php */
.input-group-text:focus {
            box-shadow: none !important;
        }
        @media (max-width: 575px) {
            .button-badge {
                   width: 100%;  
            }
        }
        @media (max-width: 575px) {
            .button-title-badge {
                   width: 100%;  
            }
        }


/* Migrated from resources/views/templates/basic/user/tracking/show.blade.php */
.rating-input {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 10px;
    }
    .rating-input input {
        display: none;
    }
    .rating-input label {
        cursor: pointer;
        font-size: 2rem;
        color: var(--gray-500);
        transition: color 0.2s;
    }
    .rating-input input:checked ~ label,
    .rating-input label:hover,
    .rating-input label:hover ~ label {
        color: var(--warning-700);
    }


/* Migrated from resources/views/templates/basic/partials/agent_topbar.blade.php */
.agent-top-nav { z-index: 1000; }
.top-nav-glass {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 40px;
}

.sidebar-toggle-btn {
    width: 40px; height: 40px; border-radius: 12px;
    border: none; background: #f1f5f9; color: #0f172a;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}

.top-nav-icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: #f8fafc; border: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    transition: all 0.2s;
}
.top-nav-icon:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.pulse-blue {
    position: absolute; top: 10px; right: 10px;
    width: 8px; height: 8px; background: var(--brand-700); border-radius: 50%;
    border: 2px solid #fff;
}

.avatar-header-top {
    width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
    background: #f1f5f9; border: 2px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.avatar-header-top img { width: 100%; height: 100%; object-fit: cover; }

.dropdown-menu-modern {
    border: none; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    min-width: 240px; margin-top: 15px !important;
}

[dir="rtl"] .dropdown-menu-end { right: auto; left: 0; }
[dir="rtl"] .user-meta { text-align: left !important; }


/* Migrated from resources/views/templates/basic/partials/auth_header.blade.php */
.auth-pill-header { z-index: 1000; }
.glass-auth-nav {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
}

.nav-link-auth {
    font-weight: 800; color: #475569 !important; font-size: 14px;
    padding: 10px 20px !important; border-radius: 50px;
    transition: all 0.2s; white-space: nowrap;
}
.nav-link-auth:hover, .nav-link-auth.active { background: #f1f5f9; color: #0f172a !important; }
.nav-link-auth i { font-size: 18px; margin-right: 8px; vertical-align: middle; }

.header-balance-pill { background: #f8fafc; padding: 6px 20px; border-radius: 100px; border: 1px solid #f1f5f9; }
.header-balance-pill .lbl { font-size: 10px; font-weight: 800; text-uppercase: uppercase; display: block; line-height: 1; }
.header-balance-pill .val { font-size: 16px; color: #1e293b; }

.avatar-header, .user-avatar-small {
    width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
    background: #f1f5f9; border: 2px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.avatar-header img, .user-avatar-small img { width: 100%; height: 100%; object-fit: cover; }

.dropdown-menu-modern, .dropdown-menu-profile {
    border: none; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    min-width: 220px; margin-top: 15px !important;
}

.user-name-text { font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

[dir="rtl"] .nav-link-auth i { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .dropdown-menu-end { right: auto; left: 0; }
[dir="rtl"] .user-meta { text-align: left !important; }


/* Migrated from resources/views/templates/basic/partials/footer.blade.php */
.j-footer {
    background: var(--gray-25);
    border-top: 1px solid var(--border-light);
    padding: 3rem 0 1.5rem;
}
.j-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--app-content-pad);
}
.j-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
.j-footer-logo {
    max-height: 50px;
    max-width: 200px;
    width: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 1rem;
}
.j-footer__brand-col p { color: var(--text-secondary); font-size: var(--font-sm); line-height: var(--line-height-relaxed); margin: .75rem 0; }
.j-footer__social { display: inline-flex; gap: .5rem; margin-top: .5rem; }
.j-footer__social a {
    width: 36px; height: 36px; border-radius: var(--radius-pill);
    background: #fff; border: 1px solid var(--border-light);
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.j-footer__social a:hover { color: var(--brand-600); border-color: var(--brand-300); }
.j-footer__col { display: flex; flex-direction: column; gap: .5rem; }
.j-footer__col h5 {
    font-size: var(--font-sm); font-weight: var(--font-weight-bold);
    color: var(--text-primary); margin: 0 0 .5rem; text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}
.j-footer__col a {
    color: var(--text-secondary); text-decoration: none; font-size: var(--font-sm);
    transition: color var(--transition-fast);
}
.j-footer__col a:hover { color: var(--brand-600); }
.j-footer__cta p { font-size: var(--font-sm); color: var(--text-secondary); margin: 0 0 .75rem; }
.j-footer__bottom {
    border-top: 1px solid var(--border-light);
    padding-top: 1.25rem;
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: center;
    gap: 1rem;
    color: var(--text-tertiary); font-size: var(--font-xs);
}
.j-footer__legal { display: inline-flex; gap: 1rem; flex-wrap: wrap; }
.j-footer__legal a { color: var(--text-tertiary); text-decoration: none; }
.j-footer__legal a:hover { color: var(--brand-600); }
@media (min-width: 768px) {
    .j-footer__cols { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}


/* Migrated from resources/views/templates/basic/partials/geo_address_fields.blade.php */
.geo-address-tools {
            border: 1px solid rgba(180, 96, 58, .24);
            border-radius: 10px;
            padding: 12px;
            background: rgba(180, 96, 58, .04);
        }
        .geo-address-tools__saved {
            margin-bottom: 10px;
        }
        .geo-address-tools__summary {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            justify-content: space-between;
        }
        .geo-address-tools__summary strong {
            display: block;
            color: #2f2926;
            font-size: 14px;
        }
        .geo-address-tools__summary p {
            margin: 3px 0 0;
            color: #6f625d;
            font-size: 13px;
            line-height: 1.6;
        }
        .geo-address-tools__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        .geo-address-tools__label {
            display: block;
            margin-bottom: 6px;
            color: #59483f;
            font-size: 13px;
            font-weight: 700;
        }
        .geo-address-tools__bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        .geo-address-tools__check {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 0;
            color: #59483f;
            font-size: 13px;
        }
        .geo-address-tools__status {
            margin-top: 8px;
            color: #6f625d;
            font-size: 13px;
            line-height: 1.7;
        }
        .geo-address-tools__map {
            width: 100%;
            height: 190px;
            border: 0;
            border-radius: 8px;
            margin-top: 10px;
        }


/* Migrated from resources/views/templates/basic/partials/header.blade.php */
.j-public-header {
    background: #fff;
    border-bottom: 1px solid var(--border-light);
    position: sticky; top: 0; z-index: var(--z-sticky);
}
.j-public-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .85rem var(--app-content-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.j-public-header__brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-700);
    font-size: var(--font-lg);
    text-decoration: none;
}
.j-header-logo {
    max-height: 40px;
    max-width: 180px;
    width: auto;
    display: block;
    object-fit: contain;
}
.j-public-nav {
    display: none;
    gap: 1.5rem;
}
.j-public-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-sm);
    transition: color var(--transition-fast);
}
.j-public-nav a:hover, .j-public-nav a.is-active { color: var(--brand-600); }
.j-public-header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.j-public-header__menu-btn { display: inline-flex; }
.j-public-header__mobile {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem var(--app-content-pad);
    background: #fff;
    border-bottom: 1px solid var(--border-light);
}
.j-public-header__mobile a {
    color: var(--text-primary);
    text-decoration: none;
    padding: .65rem .75rem;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
}
.j-public-header__mobile a:hover { background: var(--brand-50); color: var(--brand-700); }
@media (min-width: 992px) {
    .j-public-nav { display: inline-flex; }
    .j-public-header__menu-btn { display: none; }
    .j-public-header__mobile { display: none !important; }
}


/* Migrated from resources/views/templates/basic/partials/merchant_topbar.blade.php */
.merchant-top-nav { z-index: 1000; }
.top-nav-glass {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 40px;
}

.sidebar-toggle-btn {
    width: 40px; height: 40px; border-radius: 12px;
    border: none; background: #f1f5f9; color: #0f172a;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}

.top-nav-icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: #f8fafc; border: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    transition: all 0.2s;
}
.top-nav-icon:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.pulse-red {
    position: absolute; top: 10px; right: 10px;
    width: 8px; height: 8px; background: #ef4444; border-radius: 50%;
    border: 2px solid #fff;
}

.avatar-header-top {
    width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
    background: #f1f5f9; border: 2px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.avatar-header-top img { width: 100%; height: 100%; object-fit: cover; }

.dropdown-menu-modern {
    border: none; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    min-width: 240px; margin-top: 15px !important;
}

[dir="rtl"] .dropdown-menu-end { right: auto; left: 0; }
[dir="rtl"] .user-meta { text-align: left !important; }


/* Migrated from resources/views/templates/basic/partials/social_login.blade.php */
.geb-auth-page .social-login-btn {
            min-height: 3.1rem;
            border: 1px solid #d0d5dd;
            padding: 0.75rem 1rem;
            border-radius: 1rem;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;
            justify-content: center;
            color: #344054;
            background: #ffffff;
            font-size: 15px;
            font-weight: 700;
            transition: all linear 0.3s;
        }

        .geb-auth-page .social-login-btn:hover {
            background-color: #f8fafc;
            color: #101828;
        }

        .geb-auth-page .social-login-btn img {
            width: 20px;
        }

        .geb-auth-page .social-auth {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .geb-auth-page .auth-devide {
            text-align: center;
            margin-block: 24px;
            position: relative;
            z-index: 1;
        }

        .geb-auth-page .auth-devide::after {
            content: '';
            width: 100%;
            height: 1px;
            background: #e4e7ec;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            z-index: -1;
        }

        .geb-auth-page .auth-devide span {
            padding-inline: 6px;
            background: #ffffff;
        }


/* Migrated from resources/views/templates/basic/layouts/common_auth.blade.php */
.j-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    position: relative;
    padding: 2rem 1rem;
    overflow: hidden;
}
.j-auth__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 0% 0%, var(--brand-100) 0%, transparent 35%),
        radial-gradient(circle at 100% 100%, var(--brand-50) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}
.j-auth__shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.j-auth__brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    color: var(--brand-700);
    text-decoration: none;
}
.j-auth__brand-logo {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 58px;
    object-fit: contain;
}
.j-auth__card {
    background: #fff;
    border-radius: var(--radius-2xl);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    width: 100%;
}
.j-auth__pwa { margin-top: .5rem; text-align: center; }

.j-auth__title {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 .5rem;
    color: var(--text-primary);
}
.j-auth__subtitle {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    margin: 0 0 1.5rem;
}
.j-auth__form { display: flex; flex-direction: column; gap: 0; }
.j-auth__alt {
    margin-top: 1.25rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}
.j-auth__alt a { color: var(--brand-600); font-weight: var(--font-weight-semibold); }
.j-auth__divider {
    display: flex; align-items: center; gap: .75rem;
    color: var(--text-tertiary); font-size: var(--font-xs);
    margin: 1.25rem 0;
}
.j-auth__divider::before, .j-auth__divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border-light);
}
.j-auth__roles {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
    margin-top: 1rem;
}
.j-auth__role {
    text-align: center;
    padding: .65rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}
.j-auth__role:hover { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.j-auth__role.is-active { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }

.j-mt-2 { margin-top: .5rem; }
.j-text-uppercase { text-transform: uppercase; }
.j-divider {
    border: 0;
    border-top: 1px solid var(--border-light);
    margin: .5rem 0;
}

.inner-hero--breadcrumb {
    position: relative;
    overflow: hidden;
}
.inner-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.wallet-qr-image { max-width: 260px; }
.mobile-menu-item__icon--auction { background-color: var(--brand-600); }
.mobile-menu-item__icon--loyalty { background-color: var(--warning-500); }

.j-dot {
    display: inline-block;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
}
.j-dot--brand { background: var(--brand-500); }
.j-icon-16 {
    width: 16px;
    height: 16px;
}

.invoice-title-light { color: #fff; }
.invoice-muted-light { color: #f1f1f1; }
.invoice-amount-cell {
    text-align: right;
    padding-right: 10px;
}
.invoice-pay-btn {
    border: 0;
    cursor: pointer;
}

.otp-card {
    max-width: 480px;
    margin: 2rem auto;
}
.otp-card__head {
    text-align: center;
    margin-bottom: 1.5rem;
}
.otp-card__icon { margin: 0 auto 1rem; }
.otp-card__title {
    margin: 0 0 .5rem;
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
}
.otp-card__subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}
.otp-card__timer-label {
    margin: 1rem 0 .25rem;
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}
.otp-card__timer {
    font-variant-numeric: tabular-nums;
    font-size: var(--font-base);
    padding: .5rem 1rem;
}
.otp-card__retry {
    display: none;
    margin-top: 1rem;
}
.otp-card__expired {
    color: var(--danger-700);
    margin: 0 0 .5rem;
}
.otp-code-input {
    text-align: center;
    letter-spacing: .5em;
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
}

.hero-master--media,
.overview-section--media {
    position: relative;
    overflow: hidden;
}
.hero-master__media,
.overview-section__media,
.section-img__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.section-img { overflow: hidden; }
.public-icon-check { font-size: 1.3rem; }
.public-icon-xl {
    font-size: 3rem;
}
.public-icon-brand { color: var(--base-color); }
.public-role-icon {
    font-size: 3.2rem;
    color: var(--base-color);
}
.public-persona-icon {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
}
.section--services,
.section--persona,
.section--journey {
    padding: clamp(3rem, 7vw, 6.25rem) 0;
}
.service-card-master,
.persona-item,
.step-master-item {
    height: 100%;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
}
.service-card-master {
    padding: clamp(1.25rem, 3vw, 2rem);
    text-align: start;
}
.service-card-master .persona-icon,
.persona-grid .persona-icon,
.step-master-circle {
    inline-size: 64px;
    block-size: 64px;
    min-inline-size: 64px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
}
.service-card-master .persona-icon,
.persona-grid .persona-icon {
    color: var(--base-color);
}
.service-card-master .persona-icon i,
.persona-grid .persona-icon i,
.step-master-circle i,
.public-persona-icon i,
.public-role-icon i {
    font-size: 2rem;
    line-height: 1;
}
.persona-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.persona-item {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}
.persona-title {
    margin: 0;
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
}
.persona-text {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}
.step-master-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.step-master-item {
    padding: clamp(1.25rem, 3vw, 2rem);
    text-align: center;
}
.step-master-circle {
    margin: 0 auto 1rem;
    background: var(--base-color);
    color: var(--white);
}
@media (min-width: 768px) {
    .persona-grid,
    .step-master-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 992px) {
    .persona-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .step-master-wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.public-icon-ghost {
    font-size: 8rem;
    opacity: .2;
}
.public-min-h-400 { min-height: 400px; }
.public-min-h-450 { min-height: 450px; }
.public-avatar-50 {
    width: 50px;
    height: 50px;
}
.public-success-icon { font-size: 100px; }
.storefront-product-media {
    max-height: 500px;
    object-fit: contain;
}
.storefront-product-placeholder {
    height: 500px;
}
.storefront-product-placeholder__icon {
    font-size: 120px;
    opacity: .3;
}


/* Migrated from resources\views\templates\basic\api_documentation.blade.php */
.header.style--two .main-menu li a {
            padding: 0.5rem 0;
        }
        .header.style--two .header__bottom {
            padding: 15px 0;
        }


/* Migrated from resources\views\templates\basic\home.blade.php */
.j-public { background: #fff; color: var(--text-primary); }
.j-hero-pub {
    padding: clamp(3rem, 8vw, 6rem) var(--app-content-pad);
    text-align: center;
    background: radial-gradient(ellipse at top, var(--brand-50), transparent 60%), #fff;
}
.j-hero-pub__inner { max-width: 880px; margin: 0 auto; }
.j-hero-pub__chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem 1rem;
    background: var(--brand-50); color: var(--brand-700);
    border-radius: var(--radius-pill);
    font-size: var(--font-xs); font-weight: var(--font-weight-semibold);
    margin-bottom: 1.25rem;
}
.j-hero-pub__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 1rem;
    letter-spacing: var(--letter-spacing-tight);
}
.j-hero-pub__title em { color: var(--brand-600); font-style: normal; }
.j-hero-pub__lead {
    font-size: clamp(var(--font-base), 2vw, var(--font-xl));
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0 auto 2rem;
    max-width: 640px;
}
.j-hero-pub__actions {
    display: inline-flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}

.j-section-pub { padding: clamp(3rem, 6vw, 5rem) var(--app-content-pad); }
.j-section-pub__head { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.j-section-pub__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    margin: 0 0 .75rem;
    letter-spacing: var(--letter-spacing-tight);
}
.j-section-pub__lead { color: var(--text-secondary); font-size: var(--font-lg); margin: 0; }

.j-roles-grid {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 768px) { .j-roles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .j-roles-grid { grid-template-columns: repeat(5, 1fr); } }
.j-role-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column; gap: .5rem;
}
.j-role-card:hover {
    border-color: var(--brand-300);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}
.j-role-card__icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    background: var(--brand-50); color: var(--brand-600);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .25rem;
}
.j-role-card__icon svg { width: 28px; height: 28px; }
.j-role-card__title { font-size: var(--font-lg); font-weight: var(--font-weight-bold); margin: 0; }
.j-role-card__desc { font-size: var(--font-sm); color: var(--text-secondary); margin: 0; line-height: var(--line-height-relaxed); }
.j-role-card__cta {
    margin-top: auto;
    color: var(--brand-600);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-sm);
    display: inline-flex; align-items: center; gap: .25rem;
}

.j-stats {
    background: var(--brand-50);
    padding: clamp(3rem, 6vw, 5rem) var(--app-content-pad);
}
.j-stats__inner { max-width: 1180px; margin: 0 auto; }
.j-stats__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 768px) { .j-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.j-stat {
    background: #fff; border-radius: var(--radius-lg);
    padding: 1.5rem; text-align: center;
    border: 1px solid var(--border-light);
}
.j-stat__value {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    color: var(--brand-700);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.j-stat__label { font-size: var(--font-sm); color: var(--text-secondary); margin: .25rem 0 0; }

.j-features {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 768px) { .j-features { grid-template-columns: repeat(3, 1fr); } }
.j-feature {
    background: #fff; border: 1px solid var(--border-light);
    border-radius: var(--radius-xl); padding: 1.5rem;
    display: flex; flex-direction: column; gap: .5rem;
}
.j-feature__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--brand-50); color: var(--brand-600);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .25rem;
}
.j-feature__icon svg { width: 24px; height: 24px; }
.j-feature h3 { font-size: var(--font-lg); margin: 0; font-weight: var(--font-weight-bold); }
.j-feature p { color: var(--text-secondary); font-size: var(--font-sm); margin: 0; line-height: var(--line-height-relaxed); }

.j-cta-banner {
    max-width: 1100px; margin: 0 auto;
    background: var(--wallet-gradient); color: #fff;
    border-radius: var(--radius-2xl);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-brand);
}
.j-cta-banner::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.15), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.1), transparent 50%);
    pointer-events: none;
}
.j-cta-banner__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: var(--font-weight-extrabold);
    margin: 0 0 .75rem;
    position: relative;
}
.j-cta-banner__lead {
    color: rgba(255,255,255,0.9);
    font-size: var(--font-lg);
    margin: 0 0 1.5rem;
    position: relative;
}
.j-cta-banner .j-btn {
    background: #fff; color: var(--brand-700); border-color: #fff;
    position: relative;
}
.j-cta-banner .j-btn:hover { background: var(--brand-50); color: var(--brand-800); }


/* Migrated from resources\views\templates\basic\invoice.blade.php */
    @media screen,
    print {

        * {
            margin: 0;
            box-sizing: border-box;

        }

        .invoice-print-page {
            background: var(--surface-primary);
            font-family: 'Roboto', sans-serif;
            background-image: url('');
            background-repeat: repeat-y;
            background-size: 100%;
            -moz-print-color-adjust: exact !important;
            -webkit-print-color-adjust: exact !important;
            color-adjust: exact !important;
        }

        ::selection {
            background: #f31544;
            color: #FFF;
        }

        ::moz-selection {
            background: #f31544;
            color: #FFF;
        }

        h1 {
            font-size: 1.5em;
            color: #222;
        }

        h2 {
            font-size: .9em;
        }

        h3 {
            font-size: 1.2em;
            font-weight: 300;
            line-height: 2em;
        }

        p {
            font-size: 12px;
            color: #666;
            line-height: 1.2em;
        }

        #invoiceholder {
            width: 100%;
            padding-top: 50px;
        }

        #invoice {
            position: relative;
            margin: 0 auto;
            width: 700px;
            background: #FFF;
        }

        [id*='invoice-'] {
            border-bottom: 1px solid #EEE;
            padding: 20px;
        }

        #invoice-top {
            min-height: 110px;
            background-color: unset;
            box-shadow: inset 0 0 0 1000px #002046;
            color: #fff;
        }

        #invoice-mid {
            min-height: 120px;
        }

        #invoice-bot {
            min-height: 250px;
        }

        .logo {
            float: left;
            height: 60px;
            width: 60px;
        }

        .logo img {
            max-width: 190px;
        }

        .info {
            display: block;
            float: left;
        }

        .title {
            float: right;
        }

        .title p {
            text-align: right;
        }

        #project {
            margin-left: 52%;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        td {
            padding: 5px 0 5px 15px;
            border: 1px solid #EEE
        }

        .tabletitle {
            padding: 5px;
            background: #EEE;
        }

        .service {
            border: 1px solid #EEE;
        }

        .item {
            width: 50px;
        }

        .itemtext {
            font-size: .9em;
        }

        #legalcopy {
            margin-top: 30px;
        }

        #legalcopy .btn {
            display: block;
            width: 100%;
            text-align: center;
            padding: 15px 15px;
            border-radius: 5px;
        }

        #invoice-bot .select {
            padding: 0.625rem 1.25rem;
            width: 100%;
            border: 1px solid #cacaca;
            cursor: pointer;
            color: #464646;
            background-color: #fff;
            height: 3.125rem;
            border-radius: 4px;

        }

        #invoice-bot label {
            color: #535353;
            margin-bottom: 10px;
            font-size: 0.8125rem;
            font-weight: 500;
            display: block;

        }

        #invoice-bot .select:focus {
            outline: none;
        }

        #invoice-bot .select option {
            padding: 0.625rem 0;
            display: block;
            border-top: 1px solid #e5e5e5;
        }


        .pay-btn-wrapper {
            margin-top: 30px;
            margin-bottom: 30px;
            text-align: right;
        }


        .effect2 {
            position: relative;
        }

        .effect2:before,
        .effect2:after {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 15px;
            left: 10px;
            width: 50%;
            top: 80%;
            max-width: 300px;
            background: #777;
            -webkit-box-shadow: 0 15px 10px #777;
            -moz-box-shadow: 0 15px 10px #777;
            box-shadow: 0 15px 10px #777;
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
        }

        .effect2:after {
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -o-transform: rotate(3deg);
            -ms-transform: rotate(3deg);
            transform: rotate(3deg);
            right: 10px;
            left: auto;
        }

        .legal {
            width: 70%;
        }

        .btn {
            background-color: unset;
            box-shadow: inset 0 0 0 1000px #4582ff;
            color: #fff !important;
            font-size: 14px;
            padding: 8px 15px;
            text-decoration: none;
        }

        .btn-dwn {
            background-color: unset;
            box-shadow: inset 0 0 0 1000px var(--success-700);
            color: #fff !important;
            font-size: 14px;
            padding: 8px 15px;
            text-decoration: none;
        }

        .unpaid,
        .paid {
            padding: 5px 10px;
            display: inline-block;
            font-size: 14px;
            color: #fff;
        }

        .unpaid {
            background-color: #f31544;
        }

        .paid {
            background-color: var(--success-700);
        }
    }


/* Migrated from resources\views\templates\basic\maintenance.blade.php */
.maintenance-page {
            display: grid;
            place-content: center;
            width: 100vw;
            height: 100vh;
        }

        .maintenance-icon {
            width: 60px;
            height: 60px;
            display: grid;
            place-items: center;
            aspect-ratio: 1;
            border-radius: 50%;
            background: #fff;
            font-size: 26px;
            color: #e73d3e;
        }


/* Migrated from resources\views\templates\basic\registration_disabled.blade.php */
.register-disable {
            height: 100vh;
            width: 100%;
            background-color: #fff;
            color: black;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .register-disable-image {
            max-width: 300px;
            width: 100%;
            margin: 0 auto 32px;
        }

        .register-disable-title {
            color: rgb(0 0 0 / 80%);
            font-size: 42px;
            margin-bottom: 18px;
            text-align: center
        }

        .register-disable-icon {
            font-size: 16px;
            background: rgb(255, 15, 15, .07);
            color: rgb(255, 15, 15, .8);
            border-radius: 3px;
            padding: 6px;
            margin-right: 4px;
        }

        .register-disable-desc {
            color: rgb(0 0 0 / 50%);
            font-size: 18px;
            max-width: 565px;
            width: 100%;
            margin: 0 auto 32px;
            text-align: center;
        }

        .register-disable-footer-link {
            color: #fff;
            background-color: #5B28FF;
            padding: 13px 24px;
            border-radius: 6px;
            text-decoration: none
        }

        .register-disable-footer-link:hover {
            background-color: #440ef4;
            color: #fff;
        }

        .btn--base {
            background: hsl(var(--base));
            color: #fff;
        }

        .btn--base:hover {
            color: #fff;
            background: hsl(var(--base) / 0.9) !important;
        }


/* Migrated from resources\views\templates\basic\storefront\cart.blade.php */
.cart-page {
    padding: 40px 0;
    background: #f9fafb;
    min-height: 60vh;
}

.page-header {
    margin-bottom: 32px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

/* Cart Items */
.cart-items-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid #f3f4f6;
}

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

.item-image {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #faf8f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.item-image-placeholder {
    color: #d1d5db;
    font-size: 40px;
}

.item-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
}

.item-sku {
    font-size: 13px;
    color: #9ca3af;
    margin: 0 0 8px 0;
}

.item-price-mobile {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: none;
}

.item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.quantity-control {
    display: flex;
}

.quantity-form {
    display: flex;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.qty-btn {
    width: 32px;
    height: 32px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.qty-btn:hover {
    background: #f3f4f6;
    color: #111827;
}

.qty-input {
    width: 50px;
    height: 32px;
    border: none;
    text-align: center;
    font-weight: 600;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
}

.qty-input:focus {
    outline: none;
}

.item-subtotal {
    text-align: right;
}

.subtotal-label {
    font-size: 13px;
    color: #6b7280;
    display: block;
    margin-bottom: 4px;
}

.subtotal-amount {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.btn-remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 20px;
    padding: 4px;
}

.btn-remove:hover {
    color: #dc2626;
}

/* Cart Summary */
.cart-summary-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-summary-card {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.summary-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 20px 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
    color: #6b7280;
}

.summary-value {
    font-weight: 600;
    color: #111827;
}

.summary-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 16px 0;
}

.summary-total {
    font-size: 16px;
    color: #111827;
    font-weight: 600;
    margin-bottom: 20px;
}

.total-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-700);
}

.btn-checkout {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: var(--brand-700);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 12px;
}

.btn-checkout:hover {
    background: var(--brand-800);
}

.btn-continue {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: #fff;
    color: #6b7280;
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #e5e7eb;
}

.btn-continue:hover {
    border-color: #d1d5db;
    color: #111827;
}

.cart-features {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.feature-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
}

.feature-item:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

.feature-item i {
    font-size: 28px;
    color: #10b981;
}

.feature-item strong {
    display: block;
    font-size: 14px;
    color: #111827;
    margin-bottom: 2px;
}

.feature-item p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* Empty Cart */
.empty-cart {
    background: #fff;
    border-radius: 8px;
    padding: 80px 20px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.empty-cart i {
    font-size: 100px;
    color: #d1d5db;
    margin-bottom: 20px;
}

.empty-cart h3 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.empty-cart p {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 24px 0;
}

.btn-shop-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--brand-700);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.btn-shop-now:hover {
    background: var(--brand-800);
}

/* Responsive */
@media (max-width: 1024px) {
    .cart-layout {
        grid-template-columns: 1fr 340px;
    }
}

@media (max-width: 768px) {
    .cart-page {
        padding: 24px 0;
    }
    
    .page-title {
        font-size: 22px;
    }
    
    .cart-layout {
        grid-template-columns: 1fr;
    }
    
    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: 12px;
    }
    
    .item-image {
        width: 80px;
        height: 80px;
    }
    
    .item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .item-price-mobile {
        display: block;
    }
    
    .item-subtotal {
        display: none;
    }
}


/* Migrated from resources\views\templates\basic\storefront\checkout.blade.php */
.checkout-page {
    padding: 40px 0;
    background: #f9fafb;
    min-height: 60vh;
}

.page-header {
    margin-bottom: 32px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-subtitle {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
}

/* Checkout Sections */
.checkout-section {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-number {
    width: 32px;
    height: 32px;
    background: #eff6ff;
    color: var(--brand-700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.section-content {
    margin-top: 20px;
}

/* Form Elements */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.required {
    color: #ef4444;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #111827;
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-700);
    box-shadow: 0 0 0 3px rgba(20, 115, 90, 0.10);
}

.form-control::placeholder {
    color: #9ca3af;
}

textarea.form-control {
    resize: vertical;
}

/* Order Summary */
.order-summary {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    position: sticky;
    top: 20px;
}

.summary-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 20px 0;
}

.summary-items {
    max-height: 300px;
    overflow-y: auto;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    gap: 12px;
}

.summary-item:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

.item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.item-qty {
    font-size: 13px;
    color: #9ca3af;
}

.item-price {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
}

.summary-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 16px 0;
}

.summary-calculations {
    margin-bottom: 16px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #6b7280;
}

.summary-value {
    font-weight: 600;
    color: #111827;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 20px;
}

.total-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-700);
}

.btn-place-order {
    width: 100%;
    padding: 14px 20px;
    background: var(--brand-700);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s;
}

.btn-place-order:hover {
    background: var(--brand-800);
}

.btn-place-order i {
    font-size: 20px;
}

.security-info {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
}

.security-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.security-item i {
    font-size: 18px;
    color: #10b981;
}

/* Responsive */
@media (max-width: 1024px) {
    .checkout-layout {
        grid-template-columns: 1fr 360px;
    }
}

@media (max-width: 768px) {
    .checkout-page {
        padding: 24px 0;
    }
    
    .page-title {
        font-size: 22px;
    }
    
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    
    .order-summary {
        position: static;
    }
    
    .checkout-section {
        padding: 20px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}


/* Migrated from resources\views\templates\basic\storefront\home.blade.php */
/* Store Header */
.store-header-section {
    background: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #e5e7eb;
}

.store-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.store-logo-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.store-logo {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.store-logo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.store-info {
    flex: 1;
}

.store-name {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.store-description {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    max-width: 600px;
}

.store-actions .btn {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--brand-700);
    color: #fff;
    border: none;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--brand-800);
}

/* Products Section */
.products-section {
    padding: 60px 0;
}

.products-section.bg-light {
    background: #f9fafb;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i {
    color: var(--brand-700);
}

.view-all-link {
    color: var(--brand-700);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-all-link:hover {
    color: var(--brand-800);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}

@media (max-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    }
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .store-header-section {
        padding: 24px 0;
    }
    
    .store-name {
        font-size: 22px;
    }
    
    .store-description {
        font-size: 14px;
    }
    
    .products-section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .store-logo,
    .store-logo-placeholder {
        width: 60px;
        height: 60px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* Empty State */
.empty-state-section {
    padding: 80px 0;
}

.empty-state {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.empty-state i {
    font-size: 100px;
    color: #d1d5db;
    margin-bottom: 24px;
}

.empty-state h3 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
}

.empty-state p {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}


/* Migrated from resources\views\templates\basic\storefront\payment.blade.php */
.bg-soft { background: #f8fafc; }

.payment-banner {
    background: #0f172a;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
}
.payment-banner .r-side { border-radius: 0 40px 40px 0; }

.badge-status-glow {
    display: inline-block;
    padding: 6px 15px;
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border-radius: 50px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
}

.method-card-ultra {
    background: #fff;
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.method-card-ultra:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.06) !important; }

.method-icon-wrap {
    width: 70px; height: 70px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
}
.blue-glow { background: rgba(20, 115, 90, 0.10); color: var(--brand-700); }
.gray-glow { background: #f1f5f9; color: #94a3b8; }

.btn-pay-ultra {
    background: #0f172a;
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 15px;
    transition: all 0.3s;
}
.btn-pay-ultra:hover:not(.disabled) { background: var(--brand-700); transform: translateX(5px); }
.btn-pay-ultra.disabled { background: #e2e8f0; color: #94a3b8; }

.section-title-modern { font-size: 20px; font-weight: 800; color: #0f172a; }

.user-balance-badge {
    background: #fff;
    padding: 8px 20px;
    border-radius: 15px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.alert-info-ultra {
    background: rgba(20, 115, 90, 0.05);
    border: 1px dashed rgba(20, 115, 90, 0.20);
}

@media (max-width: 767px) {
    .payment-banner .r-side { border-radius: 0; }
    .method-card-ultra { text-align: center; }
    .method-icon-wrap { margin: 0 auto; }
    .user-balance-badge { margin-top: 15px; width: 100%; text-align: center; }
}


/* Migrated from resources\views\templates\basic\storefront\products.blade.php */
.products-page {
    padding: 40px 0;
    background: #f9fafb;
}

.products-page-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}

/* Sidebar */
.products-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 4px;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s;
}

.category-item:hover {
    background: #f3f4f6;
    color: var(--brand-700);
}

.category-item.active {
    background: #eff6ff;
    color: var(--brand-700);
    font-weight: 600;
}

.category-count {
    background: #f3f4f6;
    color: #6b7280;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.category-item.active .category-count {
    background: #dbeafe;
    color: var(--brand-700);
}

/* Store Info Box */
.store-info-box {
    text-align: center;
}

.store-sidebar-logo {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    margin: 0 auto 12px;
    border: 1px solid #e5e7eb;
}

.store-sidebar-logo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #6b7280;
    margin: 0 auto 12px;
    border: 1px solid #e5e7eb;
}

.store-sidebar-name {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.store-sidebar-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Products Main */
.products-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Toolbar */
.products-toolbar {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.toolbar-form {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
}

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 18px;
}

.search-box input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
}

.search-box input:focus {
    outline: none;
    border-color: var(--brand-700);
}

.sort-select {
    padding: 10px 36px 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    min-width: 180px;
}

.sort-select:focus {
    outline: none;
    border-color: var(--brand-700);
}

.btn-filter {
    padding: 10px 16px;
    background: var(--brand-700);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-filter:hover {
    background: var(--brand-800);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

/* No Products */
.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
}

.no-products i {
    font-size: 100px;
    color: #d1d5db;
    margin-bottom: 20px;
}

.no-products h4 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.no-products p {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 20px 0;
}

.btn-reset {
    display: inline-block;
    padding: 10px 20px;
    background: var(--brand-700);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.btn-reset:hover {
    background: var(--brand-800);
}

/* Pagination */
.products-pagination {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
    .products-page-layout {
        grid-template-columns: 260px 1fr;
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .products-page-layout {
        grid-template-columns: 1fr;
    }
    
    .products-sidebar {
        flex-direction: row;
        overflow-x: auto;
    }
    
    .sidebar-section {
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .products-page {
        padding: 24px 0;
    }
    
    .toolbar-form {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}


/* Migrated from resources\views\templates\basic\storefront\account\order-details.blade.php */
.tracking-list {
    position: relative;
    padding-left: 20px;
}
.tracking-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}
.tracking-item {
    position: relative;
    margin-bottom: 20px;
    padding-left: 25px;
}
.tracking-icon {
    position: absolute;
    left: -11px;
    top: 0;
    width: 24px;
    height: 24px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
}


/* Migrated from resources\views\templates\basic\storefront\cart\index.blade.php */
/* Modern Cart Styles */
.ultra-title { font-size: 38px; font-weight: 900; color: #0f172a; margin-bottom: 5px; }
.item-count-pill {
    font-size: 14px;
    background: var(--brand-700);
    color: #fff;
    padding: 4px 12px;
    border-radius: 50px;
    vertical-align: middle;
    margin-left: 10px;
}

.modern-cart-list { display: flex; flex-direction: column; gap: 20px; }

.modern-cart-item {
    background: #fff;
    border-radius: 25px;
    padding: 20px;
    display: flex;
    gap: 25px;
    transition: all 0.3s;
    border: 1px solid rgba(0,0,0,0.02);
}
.modern-cart-item:hover { transform: scale(1.02); border-color: rgba(20, 115, 90, 0.10); }

.item-visual {
    width: 120px;
    height: 120px;
    background: #f8fafc;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}
.item-visual img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.item-visual .placeholder { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #e2e8f0; }

.item-details-wrap { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }

.info-top { display: flex; justify-content: space-between; }
.item-name { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0; }
.remove-btn-minimal { background: #fee2e2; color: #ef4444; border: none; width: 32px; height: 32px; border-radius: 10px; transition: all 0.2s; }
.remove-btn-minimal:hover { background: #ef4444; color: #fff; transform: rotate(90deg); }

.info-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }

.qty-updater { display: flex; align-items: center; background: #f1f5f9; border-radius: 12px; padding: 4px; }
.qty-control { border: none; background: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 12px; transition: all 0.2s; }
.qty-control:hover:not(:disabled) { background: var(--brand-700); color: #fff; }
.qty-val { width: 40px; text-align: center; font-weight: 800; font-size: 14px; color: #0f172a; }

.item-pricing { text-align: right; }
.unit-price { display: block; font-size: 12px; color: #94a3b8; font-weight: 600; }
.total-price-tag { font-size: 20px; font-weight: 800; color: #0f172a; white-space: nowrap; }

[dir="rtl"] .item-count-pill { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .item-pricing { text-align: left; }
[dir="rtl"] .btn-checkout-ultra i { transform: rotate(180deg); }
[dir="rtl"] .back-link i { transform: rotate(180deg); }

/* Summary */
.cart-summary-modern {
    background: #0f172a;
    color: #fff;
    border-radius: 35px;
    padding: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}
.summary-title { font-size: 24px; font-weight: 800; margin-bottom: 30px; }

.summary-rows { display: flex; flex-direction: column; gap: 15px; }
.s-row { display: flex; justify-content: space-between; font-weight: 600; color: #94a3b8; }
.s-row .val { color: #fff; }

.summary-sep { border-color: rgba(255,255,255,0.1); margin: 30px 0; }

.total-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.lbl-lg { font-size: 14px; color: #94a3b8; font-weight: 700; }
.val-lg { font-size: 28px; font-weight: 900; color: #fff; }

.btn-checkout-ultra {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: var(--brand-700);
    color: #fff;
    border-radius: 20px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s;
}
.btn-checkout-ultra:hover { background: var(--brand-800); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(20, 115, 90, 0.40); color: #fff; }

.summary-footer { margin-top: 30px; text-align: center; }
.security-stamp { font-size: 12px; color: #64748b; margin-bottom: 15px; }
.back-link { font-size: 14px; color: #94a3b8; text-decoration: none; font-weight: 700; }
.back-link:hover { color: #fff; }

/* Empty State */
.empty-icon-wrap { font-size: 100px; color: #e2e8f0; animation: float 3s infinite ease-in-out; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

@media (max-width: 576px) {
    .modern-cart-item { flex-direction: column; align-items: center; text-align: center; }
    .info-top { flex-direction: column; align-items: center; gap: 10px; }
    .info-bottom { flex-direction: column; gap: 20px; }
    .item-pricing { text-align: center; }
}


/* Migrated from resources\views\templates\basic\storefront\checkout\index.blade.php */
/* Design System */
.bg-soft-ultra { background: #f1f5f9; }
.bg-light-ultra { background: rgba(15, 23, 42, 0.03); }

/* Card Styles */
.checkout-card-ultra {
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 40px rgba(0,0,0,0.02);
}

.ultra-step-num {
    width: 32px;
    height: 32px;
    background: var(--brand-700);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
}

.step-title-ultra {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #0f172a;
}

/* Form Controls */
.modern-field-group { margin-bottom: 0; }
.field-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.field-input-wrapper {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 18px;
}

.field-input-wrapper:focus-within {
    background: #fff;
    border-color: var(--brand-700);
    box-shadow: 0 0 0 10px rgba(20, 115, 90, 0.05);
}

.field-icon { font-size: 20px; color: #94a3b8; }

.field-input-wrapper input, 
.field-input-wrapper textarea {
    width: 100%;
    padding: 16px 12px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

/* Shipping Options */
.shipping-options-grid { display: grid; gap: 15px; }
.shipping-option { position: relative; }
.shipping-check { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    z-index: 5; 
    cursor: pointer; 
}
.shipping-content {
    display: block;
    padding: 20px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
}
.shipping-check:checked + .shipping-content {
    background: #fff;
    border-color: var(--brand-700);
    box-shadow: 0 5px 15px rgba(20, 115, 90, 0.10);
}
.method-name { font-weight: 800; color: #0f172a; }
.cost-amount { font-weight: 900; color: var(--brand-700); font-size: 18px; }

/* Order Summary */
.order-summary-ultra {
    background: #fff;
    border-radius: 30px;
    padding: 35px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}

.summ-title-ultra { font-weight: 900; font-size: 24px; color: #0f172a; }

.ultra-item-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.item-visual {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.item-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.item-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #0f172a;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.item-info { flex-grow: 1; }
.item-name { font-weight: 700; font-size: 14px; }
.item-price { font-weight: 800; color: #0f172a; }

/* Coupon */
.ultra-coupon-input {
    display: flex;
    background: #f1f5f9;
    border-radius: 14px;
    padding: 5px;
}
.ultra-coupon-input input {
    flex-grow: 1;
    background: transparent;
    border: none;
    padding: 10px 15px;
    font-weight: 600;
    outline: none;
}
.ultra-coupon-input button {
    background: var(--brand-700);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 20px;
    font-weight: 800;
    font-size: 14px;
}

/* Billing */
.bill-line { display: flex; justify-content: space-between; margin-bottom: 12px; font-weight: 600; color: #64748b; font-size: 15px; }
.total-line { margin-top: 15px; border-top: 2px dashed #e2e8f0; padding-top: 20px; margin-bottom: 0; }
.total-big-val { font-size: 32px; font-weight: 900; color: var(--brand-700); letter-spacing: -1px; }

/* Confim Button */
.btn-ultra-confirm {
    width: 100%;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 22px;
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
}
.btn-ultra-confirm:hover { background: var(--brand-700); transform: translateY(-5px); box-shadow: 0 25px 50px rgba(20, 115, 90, 0.25); }

/* Shipping Type Selector */
.shipping-type-selector { position: relative; z-index: 10; }
.type-option { position: relative; width: 100%; height: 100%; }
.type-check { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0;
    left: 0;
    opacity: 0; 
    z-index: 5; 
    cursor: pointer;
    margin: 0;
}
.type-label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.type-label i { font-size: 28px; color: #64748b; transition: all 0.3s; }
.type-label span { font-weight: 800; font-size: 14px; text-transform: uppercase; color: #1e293b; transition: all 0.3s; }

/* Checked State - utilizing the sibling selector */
.type-check:checked ~ .type-label {
    border-color: var(--brand-700);
    background: #eff6ff;
    box-shadow: 0 10px 25px rgba(20, 115, 90, 0.10);
}
.type-check:checked ~ .type-label i { color: var(--brand-700); transform: scale(1.1); }
.type-check:checked ~ .type-label span { color: var(--brand-700); }

/* Shipping Sections */
.shipping-section { 
    animation: fadeIn 0.4s ease-out; 
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.auction-icon-box {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(20, 115, 90, 0.10);
}


/* Migrated from resources\views\templates\basic\storefront\checkout\success.blade.php */
.success-page-ultra { background: #f8fafc; }
.ultra-card-white { background: #fff; border-radius: 40px; z-index: 10; }
.shadow-glow { box-shadow: 0 40px 100px rgba(0,0,0,0.05); }

.success-bg-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.s-shape { position: absolute; width: 150px; height: 150px; border-radius: 50%; filter: blur(60px); opacity: 0.1; }
.s-1 { background: var(--brand-700); top: -50px; left: -50px; }
.s-2 { background: #8b5cf6; bottom: -50px; right: -50px; }

.success-icon-wrap { position: relative; z-index: 5; display: flex; justify-content: center; }
.icon-circle {
    width: 100px; height: 100px; background: #10b981; color: #fff; font-size: 50px; 
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.3);
    animation: bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
}

.x-small-text { font-size: 13px; color: #64748b; font-weight: 600; }
.bg-soft { background: #f8fafc; }
.rounded-4 { border-radius: 20px !important; }

.btn-modern-primary { background: #0f172a; color: #fff; border-radius: 15px; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; transition: all 0.3s; }
.btn-modern-primary:hover { background: var(--brand-700); transform: translateY(-3px); color: #fff; }

@media print {
    .btn-modern-primary, .btn-main-outline, .platform-header, .platform-footer { display: none !important; }
    .success-page-ultra { padding: 0; background: #fff; }
    .ultra-card-white { box-shadow: none; border: 1px solid #ddd; }
}


/* Migrated from resources\views\templates\basic\storefront\home\index-v1.blade.php */
/* Modern Hero */
.modern-hero {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.hero-bg-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
}

.shape-1 {
    width: 400px;
    height: 400px;
    background: var(--brand-700);
    top: -100px;
    right: -100px;
}

.shape-2 {
    width: 300px;
    height: 300px;
    background: #8b5cf6;
    bottom: -50px;
    left: -50px;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.modern-tag {
    display: inline-block;
    padding: 8px 20px;
    background: #f1f5f9;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 24px;
}

.hero-title {
    font-size: 72px;
    font-weight: 900;
    margin-bottom: 24px;
    color: #0f172a;
    line-height: 1.1;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    max-width: 100%;
}

.gradient-text {
    background: linear-gradient(90deg, var(--brand-700), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 20px;
    color: #475569;
    max-width: 500px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.btn-modern-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: #0f172a;
    color: #fff;
    border-radius: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.btn-modern-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    color: #fff;
}

/* Hero Image Grid */
.hero-image-grid {
    position: relative;
    height: 450px;
    z-index: 10;
}

.grid-item {
    position: absolute;
    background: #fff;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

.item-1 {
    width: 140px;
    height: 140px;
    top: 50px;
    left: 40px;
    font-size: 60px;
    color: var(--brand-700);
    animation: float 4s infinite ease-in-out;
}

.item-2 {
    width: 280px;
    height: 280px;
    top: 100px;
    right: 20px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px);
    overflow: hidden;
    animation: float 5s infinite ease-in-out reverse;
}

.floating-logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.item-3 {
    width: 180px;
    height: 100px;
    bottom: 40px;
    left: 20px;
    animation: float 6s infinite ease-in-out;
}

.stat-bubble {
    text-align: center;
}

.stat-bubble .val { font-size: 24px; font-weight: 800; color: #0f172a; display: block; }
.stat-bubble .lbl { font-size: 13px; color: #64748b; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Typography & Headers */
.modern-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.modern-title {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.animated-line {
    width: 80px;
    height: 5px;
    background: var(--brand-700);
    border-radius: 10px;
    margin-top: 12px;
}

.see-more-link {
    font-weight: 700;
    color: var(--brand-700);
    text-decoration: none;
    font-size: 15px;
}

/* Category Chips */
.cat-chip {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    color: #475569;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.cat-chip:hover {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

/* Responsive */
@media (max-width: 991px) {
    .hero-title { font-size: 48px; }
    .modern-hero { padding: 80px 0; }
}

@media (max-width: 767px) {
    .modern-title { font-size: 28px; }
    .hero-title { font-size: 38px; }
    .hero-content { text-align: center; }
}


/* Migrated from resources\views\templates\basic\storefront\partials\footer.blade.php */
.store-footer {
    background: #111827;
    color: #9ca3af;
    padding: 60px 0 30px;
    margin-top: 60px;
}

.footer-layout {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo img {
    max-height: 50px;
    margin-bottom: 20px;
}

.footer-logo h3 {
    color: #fff;
    margin-bottom: 20px;
}

.footer-desc {
    font-size: 14px;
    line-height: 1.6;
}

.footer-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 24px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #9ca3af;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #fff;
}

.newsletter-form {
    display: flex;
    margin-top: 16px;
}

.newsletter-form input {
    flex: 1;
    background: #1f2937;
    border: 1px solid #374151;
    padding: 10px 16px;
    border-radius: 6px 0 0 6px;
    color: #fff;
    font-size: 14px;
}

.newsletter-form button {
    background: var(--brand-700);
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid #1f2937;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 13px;
    margin: 0;
}

.payment-methods-footer {
    display: flex;
    align-items: center;
}

.wallet-badge-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    padding: 8px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s;
}

.wallet-badge-footer i {
    font-size: 20px;
    color: #3b82f6;
}

.wallet-badge-footer span {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wallet-badge-footer:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.payment-icons {
    display: flex;
    gap: 16px;
}

@media (max-width: 991px) {
    .footer-layout {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .footer-layout {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}


/* Migrated from resources\views\templates\basic\storefront\partials\header.blade.php */
.store-brand-img { max-height: 48px; object-fit: contain; }
.store-brand-text { font-size: 26px; font-weight: 950; color: #0f172a; letter-spacing: -1px; }

.bg-glass-store {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.nav-link-store {
    font-weight: 800; color: #64748b !important; font-size: 15px; 
    padding: 8px 16px !important; transition: all 0.3s;
    white-space: nowrap; /* Stability fix */
}
.nav-link-store:hover, .nav-link-store.active { color: #0f172a !important; }

/* Cart Pill Restored */
.cart-pill-ultra {
    background: #0f172a; color: #fff !important; 
    padding: 10px 22px; border-radius: 50px;
    display: flex; align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.3s;
}
.cart-pill-ultra:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.2); }

.cart-icon-wrap { position: relative; font-size: 20px; }
.cart-badge-pulse {
    position: absolute; top: -8px; right: -12px;
    background: var(--brand-700); color: #fff; font-size: 10px; font-weight: 900;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #0f172a;
}

.user-pill-minimal { font-size: 32px; color: #64748b; text-decoration: none; transition: color 0.2s; }
.user-pill-minimal:hover { color: var(--brand-700); }

.login-text-minimal { font-weight: 800; color: #475569; text-decoration: none; font-size: 14px; }

@media (max-width: 991px) {
    .navbar-collapse { background: #fff; border-radius: 20px; padding: 20px; margin-top: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
}

[dir="rtl"] .store-brand-text { letter-spacing: 0; }


/* Migrated from resources\views\templates\basic\storefront\partials\product_card.blade.php */
.product-card-ultra {
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.03);
}
.product-card-ultra:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.07);
}

.pc-image-wrap {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #f8fafc;
}
.pc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.product-card-ultra:hover .pc-img { transform: scale(1.1); }

.pc-actions {
    position: absolute; bottom: 20px; left: 50%;
    transform: translateX(-50%) translateY(50px);
    display: flex; gap: 10px; opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.product-card-ultra:hover .pc-actions { transform: translateX(-50%) translateY(0); opacity: 1; }

.action-btn-ultra {
    width: 45px; height: 45px; background: #fff; color: #0f172a;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 20px; text-decoration: none; border: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: all 0.3s;
}
.action-btn-ultra:hover { background: #0f172a; color: #fff; transform: scale(1.1); }

.pc-badge-modern {
    position: absolute; top: 15px; left: 15px;
    background: rgba(20, 115, 90, 0.10); color: var(--brand-700);
    padding: 6px 14px; border-radius: 50px; font-size: 11px; font-weight: 800;
    backdrop-filter: blur(5px);
}

.pc-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.pc-category { font-size: 11px; font-weight: 800; color: #94a3b8; text-uppercase: uppercase; letter-spacing: 1px; }

.pc-title { margin-bottom: 15px; font-size: 18px; font-weight: 800; line-height: 1.4; }
.pc-title a { color: #0f172a; text-decoration: none; transition: color 0.2s; }
.pc-title a:hover { color: var(--brand-700); }

.pc-footer { display: flex; justify-content: space-between; align-items: center; pt-3 border-top: 1px solid #f1f5f9; }
.pc-price-wrap { color: #0f172a; }
.pc-price-wrap .curr { font-weight: 700; font-size: 14px; margin-right: 2px; }
.pc-price-wrap .price { font-weight: 900; font-size: 22px; letter-spacing: -0.5px; }

/* RTL Stability */
[dir="rtl"] .pc-badge-modern { left: auto; right: 15px; }
[dir="rtl"] .pc-price-wrap .curr { margin-right: 0; margin-left: 2px; }


/* Migrated from resources\views\templates\basic\storefront\products\index.blade.php */
/* Header & Search */
.browse-header-section { border-bottom: 1px solid #f1f5f9; }
.modern-search-bar {
    position: relative;
    background: #fff;
    padding: 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.search-icon { position: absolute; left: 20px; font-size: 20px; color: #94a3b8; }
.modern-search-bar input {
    flex-grow: 1;
    border: none;
    padding: 10px 10px 10px 45px;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
}
.modern-search-bar button {
    background: var(--brand-700);
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 15px;
    font-weight: 700;
}

/* Sidebar Filter */
.filter-sidebar-ultra { position: sticky; top: 100px; }
.widget-title { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 2px solid #f1f5f9; }
.ultra-cat-list { list-style: none; padding: 0; margin: 0; }
.ultra-cat-list li { margin-bottom: 12px; }
.ultra-cat-list a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #64748b;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s;
    padding: 10px 15px;
    border-radius: 12px;
}
.ultra-cat-list a:hover, .ultra-cat-list a.active {
    background: #f1f5f9;
    color: var(--brand-700);
    transform: translateX(5px);
}
.ultra-cat-list .dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; margin-right: 12px; transition: all 0.3s; }
.ultra-cat-list a.active .dot { background: var(--brand-700); transform: scale(1.5); }
.count-badge { margin-left: auto; font-size: 11px; background: #fff; padding: 2px 8px; border-radius: 50px; border: 1px solid #e2e8f0; color: #94a3b8; }

.ad-promo-card {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    padding: 30px;
    border-radius: 25px;
    color: #fff;
    text-align: center;
}
.ad-promo-card i { font-size: 40px; color: #fbbf24; margin-bottom: 15px; display: block; }
.ad-promo-card h6 { font-weight: 800; margin-bottom: 10px; }
.ad-promo-card p { font-size: 12px; color: #94a3b8; margin: 0; }

/* Toolbar */
.toolbar-modern { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; }
.res-count { font-weight: 600; color: #64748b; font-size: 14px; }
.modern-select { border: 1px solid #e2e8f0; padding: 8px 15px; border-radius: 12px; font-weight: 700; color: #0f172a; cursor: pointer; background: #fff; outline: none; }

/* Empty State */
.empty-glow { font-size: 80px; color: #e2e8f0; filter: drop-shadow(0 0 20px rgba(20, 115, 90, 0.10)); }

/* Pagination Override */
.pagination-modern .pagination { justify-content: center; gap: 8px; }
.pagination-modern .page-link { border: none; background: #f1f5f9; color: #64748b; border-radius: 10px !important; font-weight: 700; padding: 10px 18px; }
.pagination-modern .page-item.active .page-link { background: var(--brand-700); color: #fff; box-shadow: 0 10px 20px rgba(20, 115, 90, 0.20); }


/* Migrated from resources\views\templates\basic\storefront\products\show.blade.php */
/* Product Page Styles */
.glass-container {
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
}

/* Gallery */
.gallery-column {
    background: #f8fafc;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.main-visual-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.main-visual-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.main-visual-wrap:hover img {
    transform: scale(1.1);
}

.badge-discount-lg {
    position: absolute;
    top: 0;
    left: 0;
    background: #ef4444;
    color: #fff;
    padding: 10px 20px;
    border-radius: 15px;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3);
}

/* Information */
.info-column {
    padding: 60px;
    background: #fff;
}

.modern-breadcrumb { background: transparent; padding: 0; margin-bottom: 20px; }
.breadcrumb-item a { color: #94a3b8; text-decoration: none; font-weight: 600; font-size: 13px; }
.breadcrumb-item.active { color: var(--brand-700); font-weight: 700; font-size: 13px; }

.product-main-title {
    font-size: 42px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 20px;
    white-space: normal;
    word-break: keep-all;
}

[dir="rtl"] .badge-discount-lg { left: auto; right: 0; }
[dir="rtl"] .title-with-line::after { left: auto; right: 0; }
[dir="rtl"] .review-count { margin-left: 0; margin-right: 8px; }

.product-stats-line {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}

.rating-stars { color: #fbbf24; font-size: 14px; }
.review-count { color: #94a3b8; margin-left: 8px; font-weight: 600; }

.stock-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
}
.stock-status.in { color: #10b981; }
.stock-status.out { color: #ef4444; }
.stock-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.price-container {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 30px;
}
.current-price-lg { font-size: 48px; font-weight: 900; color: var(--brand-700); }
.old-price-lg { font-size: 24px; color: #cbd5e1; text-decoration: line-through; }

.product-brief { color: #475569; line-height: 1.8; margin-bottom: 30px; font-size: 16px; }

.separator { border: none; border-top: 1px solid #f1f5f9; margin: 30px 0; }

/* Form Controls */
.qty-selector-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}
.qty-lbl { font-weight: 700; color: #0f172a; }

.modern-qty {
    display: flex;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 15px;
}
.qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #fff;
    border-radius: 10px;
    color: #0f172a;
    font-weight: 700;
    transition: all 0.2s;
}
.qty-btn:hover { background: var(--brand-700); color: #fff; }
#qtyInput {
    width: 60px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 800;
    color: #0f172a;
}

.main-actions-wrap {
    display: flex;
    gap: 15px;
}

.btn-buy-now {
    flex-grow: 1;
    background: #0f172a;
    color: #fff;
    border: none;
    padding: 20px;
    border-radius: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.btn-buy-now:hover { background: var(--brand-700); transform: translateY(-5px); box-shadow: 0 15px 40px rgba(20, 115, 90, 0.30); }

.btn-wishlist-lg {
    width: 65px;
    background: #fff;
    border: 2px solid #f1f5f9;
    border-radius: 20px;
    font-size: 24px;
    color: #64748b;
    transition: all 0.2s;
}
.btn-wishlist-lg:hover { border-color: #ef4444; color: #ef4444; }

.trust-indicators {
    margin-top: 40px;
    display: flex;
    gap: 30px;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
}
.trust-item i { font-size: 20px; color: var(--brand-700); }

/* Story */
.title-with-line {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 30px;
    position: relative;
}
.title-with-line::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--brand-700);
    border-radius: 10px;
}
.story-content { color: #475569; font-size: 16px; line-height: 2; }

@media (max-width: 991px) {
    .info-column { padding: 40px; }
    .gallery-column { padding: 40px; }
}

.j-inline-separator {
    display: block;
    width: clamp(72px, 24vw, 180px);
    height: 1px;
    margin-inline: 12px;
    background: var(--jeeblay-border, #dfe7ef);
    flex: 0 1 auto;
}

.j-messenger-window {
    width: min(100%, 920px);
    min-height: 640px;
    margin-inline: auto;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #dfe7ef);
    border-radius: 18px;
    box-shadow: var(--shadow-2xl, 0 24px 70px rgba(15, 23, 42, .14));
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.j-messenger-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: center;
    padding: clamp(.75rem, 2vw, 1.5rem);
    background: rgba(15, 23, 42, .36);
    backdrop-filter: blur(3px);
}

.j-messenger-overlay .j-messenger-window {
    max-height: calc(100vh - 2rem);
}

.j-messenger-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--brand-700, #173f35), var(--brand-500, #16855f));
    color: #fff;
}

.j-messenger-peer {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.j-messenger-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    flex: 0 0 auto;
}

.j-messenger-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.j-messenger-subtitle {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .78);
}

.j-messenger-back {
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .14);
}

.j-messenger-back:hover,
.j-messenger-back:focus {
    color: #fff;
    background: rgba(255, 255, 255, .24);
}

.j-messenger-body {
    min-height: 420px;
    max-height: 62vh;
    overflow-y: auto;
    padding: 1.25rem;
    background:
        radial-gradient(circle at top left, rgba(22, 133, 95, .08), transparent 32%),
        var(--bg-secondary, #f7fafc);
}

.j-message-row {
    display: flex;
    margin-bottom: .75rem;
}

.j-message-row--mine {
    justify-content: flex-end;
}

.j-message-row--theirs {
    justify-content: flex-start;
}

.j-message-bubble {
    max-width: min(72%, 560px);
    padding: .75rem .95rem;
    border-radius: 18px;
    border: 1px solid var(--border-light, #dfe7ef);
    background: #fff;
    color: var(--text-primary, #172033);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.j-message-row--mine .j-message-bubble {
    background: var(--brand-600, #137452);
    color: #fff;
    border-color: transparent;
    border-bottom-right-radius: 6px;
}

.j-message-row--theirs .j-message-bubble {
    border-bottom-left-radius: 6px;
}

.j-message-author {
    display: block;
    margin-bottom: .25rem;
    font-size: .72rem;
    font-weight: 800;
    color: var(--text-tertiary, #7b8794);
}

.j-message-row--mine .j-message-author {
    color: rgba(255, 255, 255, .78);
}

.j-message-text {
    margin: 0 0 .35rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.j-message-time {
    display: block;
    font-size: .74rem;
    color: var(--text-tertiary, #7b8794);
}

.j-message-row--mine .j-message-time {
    color: rgba(255, 255, 255, .75);
}

.j-messenger-composer {
    padding: .9rem 1rem;
    background: #fff;
    border-top: 1px solid var(--border-light, #dfe7ef);
}

.j-messenger-form {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.j-messenger-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--border-light, #dfe7ef);
    border-radius: 999px;
    padding: .85rem 1.05rem;
    background: var(--bg-secondary, #f7fafc);
    color: var(--text-primary, #172033);
}

.j-messenger-input:focus {
    border-color: var(--brand-500, #16855f);
    outline: 3px solid rgba(22, 133, 95, .18);
    background: #fff;
}

.j-messenger-send {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-600, #137452);
    color: #fff;
    flex: 0 0 auto;
}

.j-messenger-tools {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
}

.j-messenger-tool {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-light, #dfe7ef);
    background: #fff;
    color: var(--brand-700, #173f35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.j-messenger-tool.is-recording {
    background: var(--danger, #dc3545);
    border-color: var(--danger, #dc3545);
    color: #fff;
}

.j-messenger-tool--muted {
    color: var(--text-tertiary, #7b8794);
}

.j-messenger-attachment {
    max-width: 150px;
    color: var(--text-tertiary, #7b8794);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.j-media-preview {
    margin-bottom: .5rem;
}

.j-media-preview img {
    max-width: min(100%, 340px);
    border-radius: 14px;
    display: block;
}

.j-media-preview audio {
    width: min(280px, 100%);
}

.j-recipient-results {
    display: grid;
    gap: .5rem;
    margin-top: .75rem;
}

.j-recipient-option {
    width: 100%;
    border: 1px solid var(--border-light, #dfe7ef);
    border-radius: 12px;
    background: #fff;
    padding: .7rem .85rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    text-align: start;
}

.j-recipient-option:hover,
.j-recipient-option:focus {
    border-color: var(--brand-500, #16855f);
    background: var(--brand-50, #eefaf5);
}

.j-recipient-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-100, #d8f3e6);
    color: var(--brand-700, #173f35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.j-recipient-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.j-recipient-copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.j-recipient-copy strong,
.j-recipient-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.j-recipient-copy small,
.j-recipient-empty {
    color: var(--text-tertiary, #7b8794);
}

.j-messenger-empty {
    min-height: 300px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--text-tertiary, #7b8794);
}

@media (max-width: 767px) {
    .j-messenger-overlay {
        padding: 0;
        place-items: stretch;
    }

    .j-messenger-window {
        width: 100%;
        min-height: calc(100dvh - 170px);
        height: calc(100dvh - 170px);
        max-height: calc(100dvh - 170px);
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }

    .j-messenger-body {
        min-height: 0;
        max-height: none;
        padding: .9rem .75rem;
    }

    .j-messenger-header {
        padding: .9rem 1rem;
    }

    .j-messenger-title {
        font-size: 1rem;
    }

    .j-message-row {
        margin-bottom: .95rem;
    }

    .j-message-bubble {
        max-width: 84%;
        padding: .7rem .8rem;
        border-radius: 16px;
    }

    .j-message-text {
        line-height: 1.6;
    }

    .j-messenger-composer {
        padding: .7rem;
        position: sticky;
        bottom: 0;
        z-index: 2;
    }

    .j-messenger-form {
        gap: .4rem;
    }

    .j-messenger-tools {
        gap: .25rem;
    }

    .j-messenger-tool,
    .j-messenger-send {
        width: 40px;
        height: 40px;
    }

    .j-messenger-attachment {
        display: inline-block;
        max-width: 92px;
        font-size: .72rem;
    }
}

/* Mobile fixes for Jeeblay role dashboards and transactional screens */
.j-service__metric {
    display: block;
    margin-top: .35rem;
    color: var(--brand-700, #173f35);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.j-wallet-card {
    color: #fff;
}

.j-wallet-card .j-wallet-card__label,
.j-wallet-card .j-wallet-card__amount,
.j-wallet-card .j-wallet-card__currency {
    color: inherit;
}

.j-wallet-plain {
    color: var(--text-primary, #172033);
}

.j-wallet-plain .j-wallet-card__label {
    color: var(--text-secondary, #64748b);
}

.j-wallet-plain .j-wallet-card__amount {
    color: var(--text-primary, #172033);
}

.j-wallet-plain .j-wallet-card__currency {
    color: var(--text-secondary, #64748b);
}

.j-wallet-card__amount {
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.j-wallet-card__currency {
    opacity: .82;
}

/* Merchant store center */
.role-page {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: 2rem 1rem 7rem;
    color: var(--text-primary, #172033);
    direction: rtl;
}

.role-page a {
    text-decoration: none;
}

.role-page__hero,
.role-panel,
.role-metric-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #dfe7ef);
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .055);
}

.role-page__hero {
    padding: 1.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.role-page__hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.role-page__hero-main {
    max-width: 760px;
}

.role-page__hero-eyebrow {
    margin: 0 0 .35rem;
    color: var(--text-secondary, #64748b);
    font-size: .85rem;
    font-weight: 800;
}

.role-page__hero-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    font-weight: 900;
    line-height: 1.18;
    color: var(--text-primary, #172033);
}

.role-page__hero-copy,
.role-panel__copy {
    margin: 0;
    color: var(--text-secondary, #64748b);
    line-height: 1.8;
}

.role-page__hero-actions,
.role-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.role-page__hero-action,
.role-empty-state__action,
.role-panel__link {
    min-height: 42px;
    border-radius: 999px;
    padding: .65rem .95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid var(--border-light, #dfe7ef);
    background: #fff;
    color: var(--brand-700, #173f35);
    font-weight: 800;
}

.role-page__hero-action--primary,
.role-empty-state__action--primary {
    background: var(--brand-600, #16855f);
    border-color: var(--brand-600, #16855f);
    color: #fff;
}

.role-page__hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.2rem;
}

.role-chip {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .5rem .85rem;
    background: var(--bg-secondary, #f7fafc);
    color: var(--text-secondary, #64748b);
    font-weight: 800;
}

.role-chip--success {
    background: #ecfdf5;
    color: #047857;
}

.role-chip--danger {
    background: #fef2f2;
    color: #b91c1c;
}

.role-chip--link {
    color: var(--brand-700, #173f35);
}

.role-panel {
    padding: 1.25rem;
}

.role-panel--primary {
    border-color: rgba(22, 133, 95, .18);
}

.role-panel--quiet {
    background: var(--bg-secondary, #f7fafc);
}

.role-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.role-panel__title,
.role-empty-state__title {
    margin: 0 0 .35rem;
    color: var(--text-primary, #172033);
    font-weight: 900;
    line-height: 1.35;
}

.role-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.role-metric-grid--nested {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
}

.role-metric-card {
    display: grid;
    gap: .45rem;
    min-height: 150px;
    padding: 1.1rem;
    color: inherit;
}

.role-metric-card__label,
.role-metric-card__meta {
    color: var(--text-secondary, #64748b);
    line-height: 1.55;
}

.role-metric-card__label {
    font-weight: 800;
}

.role-metric-card__value {
    margin: 0;
    color: var(--brand-700, #173f35);
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.role-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
    gap: 1rem;
}

.role-page__stack {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.role-empty-state__head {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.role-empty-state__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50, #eefaf5);
    color: var(--brand-700, #173f35);
    font-size: 1.5rem;
}

.role-empty-state__copy {
    margin: 0;
    color: var(--text-secondary, #64748b);
    line-height: 1.8;
}

.role-links {
    display: grid;
    gap: .65rem;
}

.role-links__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    border-radius: 14px;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--border-light, #dfe7ef);
    color: var(--text-primary, #172033);
}

.role-links__item span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    color: var(--text-secondary, #64748b);
    font-weight: 800;
}

.role-links__item strong {
    min-width: 0;
    color: var(--brand-700, #173f35);
    font-weight: 900;
    overflow-wrap: anywhere;
    text-align: end;
}

.role-empty {
    border-radius: 14px;
    padding: .9rem 1rem;
    background: #fff;
    color: var(--text-secondary, #64748b);
    line-height: 1.8;
}

/* Merchant products management */
.merchant-products-page {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: 2rem 1rem 7rem;
    direction: rtl;
}

.merchant-products-page .dash-welcome-section {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #dfe7ef);
    border-radius: 18px;
    padding: 1.35rem;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .045);
}

.merchant-products-page .dash-welcome-section .row {
    row-gap: 1rem;
}

.merchant-products-page .dash-welcome-section .text-md-end {
    display: flex;
    justify-content: flex-start;
}

.merchant-products-page .dash-title {
    margin-bottom: .35rem;
    line-height: 1.15;
    letter-spacing: 0;
}

.merchant-products-page .row.g-4.mb-4 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    justify-content: flex-start;
}

.merchant-products-page .row.g-4.mb-4 > [class*="col-"] {
    flex: 0 0 260px;
    max-width: 260px;
}

.merchant-products-page .bento-item {
    border-radius: 18px;
}

.merchant-products-page > .bento-item {
    margin-top: 1.25rem;
}

.merchant-products-page .table-responsive-ultra {
    overflow-x: auto;
}

.merchant-products-page .table-ultra {
    min-width: 920px;
}

.merchant-products-page .table-ultra thead th,
.merchant-products-page .table-ultra tbody td {
    text-align: start;
}

.merchant-products-page .table-ultra thead th:last-child,
.merchant-products-page .table-ultra tbody td:last-child {
    text-align: end;
}

.merchant-products-page .price-wrap h6,
.merchant-products-page .price-wrap span {
    display: block;
    line-height: 1.55;
}

.merchant-products-page .cat-info h6 {
    line-height: 1.35;
}

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    .dashboard-inner,
    .merchant-dashboard-ultra-page {
        padding-bottom: 96px;
        overflow-x: hidden;
    }

    .dash-title {
        font-size: clamp(1.85rem, 9vw, 2.45rem);
        line-height: 1.15;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .dash-welcome-section {
        text-align: start;
        margin-bottom: 1.25rem !important;
    }

    .dash-welcome-section .row {
        gap: 1rem;
    }

    .dash-welcome-section .text-md-end {
        text-align: start !important;
    }

    .btn-ultra {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        padding-inline: 1rem;
        white-space: normal;
        line-height: 1.35;
    }

    .merchant-dashboard-ultra-page .row.g-4.mb-4 {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .75rem;
    }

    .merchant-dashboard-ultra-page .row.g-4.mb-4 > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .merchant-dashboard-ultra-page .bento-item {
        border-radius: 16px;
    }

    .merchant-dashboard-ultra-page .bento-item.p-4 {
        padding: 1rem !important;
    }

    .form-control-modern,
    .form-select-modern,
    .input-group-modern {
        min-height: 46px;
        border-radius: 12px;
    }

    .image-preview-modern {
        max-height: 260px;
    }

    .j-wallet-card,
    .j-wallet-plain {
        min-height: 150px;
        padding: 1.15rem;
    }

    .j-wallet-card__content {
        gap: .9rem;
        align-items: center;
    }

    .j-wallet-card__amount {
        font-size: clamp(1.55rem, 7vw, 2.05rem);
    }

    .j-wallet-card__label {
        opacity: .88;
    }

    .j-wallet-card .j-wallet-card__action {
        color: #fff;
        background: rgba(255, 255, 255, .18);
    }

    .j-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .j-service {
        min-height: 118px;
        padding: .95rem .75rem;
        text-align: center;
        justify-content: center;
    }

    .j-service__label {
        font-size: .9rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .j-service__metric {
        font-size: .95rem;
        margin-top: .25rem;
    }

    .table-responsive-ultra,
    .table-responsive:has(.j-mobile-card-table) {
        overflow: visible;
        border: 0;
    }

    .table-ultra,
    .table-ultra thead,
    .table-ultra tbody,
    .table-ultra tr,
    .table-ultra td,
    .j-mobile-card-table,
    .j-mobile-card-table thead,
    .j-mobile-card-table tbody,
    .j-mobile-card-table tr,
    .j-mobile-card-table td {
        display: block;
        width: 100%;
    }

    .table-ultra thead,
    .j-mobile-card-table thead {
        display: none;
    }

    .table-ultra tbody tr,
    .j-mobile-card-table tbody tr {
        background: #fff;
        border: 1px solid var(--border-light, #dfe7ef);
        border-radius: 16px;
        margin-bottom: .9rem;
        padding: .85rem;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
        overflow: hidden;
    }

    .table-ultra tbody tr:hover {
        background: #fff;
    }

    .table-ultra tbody td,
    .j-mobile-card-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .9rem;
        padding: .7rem .2rem !important;
        border-bottom: 1px solid #edf2f7 !important;
        text-align: end;
        min-width: 0;
    }

    .table-ultra tbody td:last-child,
    .j-mobile-card-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .table-ultra tbody td::before,
    .j-mobile-card-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 34%;
        max-width: 34%;
        color: var(--text-secondary, #64748b);
        font-size: .78rem;
        font-weight: 900;
        line-height: 1.5;
        text-align: start;
    }

    .table-ultra tbody td[colspan]::before,
    .j-mobile-card-table tbody td[colspan]::before {
        flex-basis: auto;
        max-width: none;
        margin-inline-end: .5rem;
    }

    .table-ultra .d-flex,
    .j-mobile-card-table .d-flex {
        min-width: 0;
    }

    .table-ultra .cat-thumb {
        width: 54px;
        height: 54px;
    }

    .table-ultra .cat-info,
    .table-ultra .price-wrap,
    .j-mobile-card-table td > * {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .table-ultra .cat-info h6 {
        font-size: .95rem;
        line-height: 1.35;
    }

    .table-ultra .price-wrap {
        text-align: end;
    }

    .table-ultra .icon-btn-modern {
        width: 40px;
        height: 40px;
    }

    .j-mobile-card-table form {
        width: 100%;
        min-width: 0;
    }

    .j-mobile-card-table .form-control,
    .j-mobile-card-table .form-select,
    .j-mobile-card-table .btn {
        width: 100%;
        min-width: 0;
    }

    .empty-state {
        width: 100%;
        padding-inline: 1rem;
    }

    .empty-state h6,
    .empty-state p {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .j-notifications-head {
        align-items: flex-start !important;
        gap: .75rem;
    }

    .j-notifications-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .5rem;
    }

    .j-notification-item {
        padding: 1rem .85rem;
    }

    .j-notification-meta {
        flex-direction: column;
        gap: .4rem;
    }

    .j-notification-meta h6 {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: .45rem;
        font-size: .95rem;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .j-notification-item .btn {
        width: 100%;
        min-height: 44px;
        margin-top: .5rem;
    }

    .merchant-products-page {
        padding: 1rem .8rem 7rem;
    }

    .merchant-products-page .dash-welcome-section {
        padding: 1rem;
        border-radius: 16px;
    }

    .merchant-products-page .dash-welcome-section .text-md-end {
        justify-content: stretch;
    }

    .merchant-products-page .row.g-4.mb-4 > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .merchant-products-page .table-ultra {
        min-width: 0;
    }
}

@media (max-width: 991px) {
    .role-page__hero-head,
    .role-panel__header {
        flex-direction: column;
    }

    .role-page__hero-actions,
    .role-empty-state__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .role-metric-grid,
    .role-metric-grid--nested,
    .role-page__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .role-page {
        padding: 1rem .8rem 7rem;
    }

    .role-page__hero,
    .role-panel,
    .role-metric-card {
        border-radius: 16px;
    }

    .role-page__hero {
        padding: 1rem;
    }

    .role-page__hero-action,
    .role-empty-state__action,
    .role-panel__link {
        width: 100%;
        min-height: 44px;
    }

    .role-page__hero-meta,
    .role-chip {
        width: 100%;
    }

    .role-chip {
        justify-content: center;
    }

    .role-metric-grid,
    .role-metric-grid--nested,
    .role-page__layout {
        grid-template-columns: 1fr;
    }

    .role-metric-card {
        min-height: 126px;
    }

    .role-empty-state__head {
        flex-direction: column;
    }

    .role-links__item {
        align-items: flex-start;
        flex-direction: column;
    }

    .role-links__item strong {
        text-align: start;
    }
}

/* ============================================================
   Jeeblay central public pages
   الصفحة العامة، المجتمع، المساعدة، التواصل، السياسات، المدونة، والتسعير
   ============================================================ */
body:has(.j-public-page) {
    background:
        radial-gradient(circle at 8% 3%, var(--warning-50), transparent 30rem),
        radial-gradient(circle at 92% 12%, var(--info-50), transparent 28rem),
        linear-gradient(180deg, var(--bg-secondary), var(--bg-card-soft) 48%, var(--surface-primary));
}

body:has(.j-public-page) .main-wrapper {
    display: block;
    background:
        radial-gradient(circle at 10% 4%, var(--warning-50), transparent 30rem),
        radial-gradient(circle at 90% 18%, var(--info-50), transparent 28rem),
        linear-gradient(180deg, var(--bg-secondary), var(--bg-card-soft) 46%, var(--surface-primary));
}

body:has(.j-public-page) .j-public-header {
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    border-bottom-color: var(--border-light);
    backdrop-filter: blur(18px);
}

.j-public-page {
    --public-max: 1180px;
    --public-surface: color-mix(in srgb, var(--surface-primary) 92%, transparent);
    --public-surface-strong: var(--surface-primary);
    --public-soft: var(--bg-secondary);
    --public-warm: var(--warning-50);
    --public-cool: var(--info-50);
    --public-live: var(--bg-card-soft);
    --public-ink: var(--brand-900);
    --public-muted: var(--brand-700);
    --public-border: var(--border-light);
    color: var(--text-primary);
}

.j-public-page .container {
    max-width: var(--public-max);
}

.j-public-page.py-5,
.j-contact-page.py-5,
.j-blogs-page.py-5,
.j-blog-details-page.py-5,
.j-policy-page.py-5,
.help-center-shell.py-5,
.jbl-superapp-pricing.py-5,
.jbl-social-page.py-5 {
    padding-block: clamp(3rem, 7vw, 5.5rem) !important;
}

.j-page-header,
.help-center-hero,
.jbl-superapp-guide,
.jbl-social-hero {
    color: var(--public-ink);
}

.j-page-header .j-hero__title,
.jbl-social-hero h1,
.geb-section__title,
.help-title,
.jbl-superapp-guide h1,
.jbl-superapp-guide h2 {
    color: var(--public-ink);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: 0;
}

.j-hero__subtitle,
.geb-section__lead,
.help-copy,
.jbl-social-hero p,
.jbl-superapp-guide p,
.marketing-phone-frame__caption {
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.j-card,
.j-blog-card,
.j-article-wrap,
.jbl-social-panel,
.jbl-action-card,
.jbl-card,
.jbl-directory-card,
.geb-social-card,
.content-panel,
.help-action-card,
.custom--card,
.pricing-zone-card,
.j-status-card {
    background: linear-gradient(180deg, var(--public-surface-strong), var(--public-soft));
    border: 1px solid var(--public-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.j-card {
    background: var(--public-surface-strong);
}

.j-card.p-4,
.j-card.p-md-5,
.content-panel,
.help-action-card {
    box-shadow: var(--shadow-lg);
}

.j-status-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.j-status-card__icon,
.help-action-icon,
.jbl-action-icon,
.geb-social-card__avatar,
.jbl-stat-box,
.pricing-zone-stat,
.help-stat-card {
    background: linear-gradient(135deg, var(--public-live), var(--surface-primary));
    color: var(--brand-700);
    border: 1px solid var(--public-border);
}

.j-status-card__icon,
.help-action-icon,
.jbl-action-icon,
.geb-social-card__avatar {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex: 0 0 auto;
    font-size: 1.4rem;
}

.bg-white-10 {
    background: color-mix(in srgb, var(--surface-primary) 12%, transparent);
}

.bg-white-10:hover {
    background: color-mix(in srgb, var(--surface-primary) 22%, transparent);
}

.j-social-box.bg-dark {
    background: linear-gradient(135deg, var(--brand-900), var(--brand-700)) !important;
    border: 1px solid color-mix(in srgb, var(--surface-primary) 18%, transparent);
}

.j-finance-input,
.j-public-page .form--control,
.j-public-page .form-control,
.geb-social-search input {
    min-height: 48px;
    border: 1px solid var(--public-border);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: none;
}

.j-public-page textarea.form-control,
.j-public-page textarea.j-finance-input {
    min-height: 150px;
}

.j-finance-input:focus,
.j-public-page .form--control:focus,
.j-public-page .form-control:focus,
.geb-social-search input:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 16%, transparent);
}

.j-public-page .btn--base,
.j-public-page .j-btn--primary,
.jbl-social-button--primary,
.geb-btn--primary,
.phone-action {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
    border-color: var(--brand-500);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-brand);
}

.j-public-page .btn-outline--base,
.j-public-page .j-btn--outline,
.jbl-social-button,
.geb-btn--secondary {
    background: var(--surface-primary);
    border: 1px solid var(--brand-200);
    color: var(--brand-800);
}

.j-public-page .btn:hover,
.j-public-page .j-btn:hover,
.jbl-social-button:hover,
.geb-btn:hover,
.help-action-card:hover,
.jbl-action-card:hover,
.j-blog-card:hover,
.geb-social-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.j-public-page .alert-info {
    background: linear-gradient(135deg, var(--info-50), var(--surface-primary));
    border-color: var(--brand-100);
    color: var(--brand-800);
}

.j-blog-card {
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.j-blog-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.j-blog-card__thumb img,
.jbl-product-card img,
.jbl-directory-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.j-blog-card__thumb img {
    transition: transform .5s ease;
}

.j-blog-card:hover .j-blog-card__thumb img {
    transform: scale(1.05);
}

.j-blog-card__date {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    min-width: 54px;
    padding: .55rem .75rem;
    border-radius: var(--radius-lg);
    text-align: center;
    background: var(--surface-primary);
    border: 1px solid var(--public-border);
    box-shadow: var(--shadow-sm);
}

.j-blog-card__date .day {
    display: block;
    color: var(--brand-700);
    font-size: 1.25rem;
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
}

.j-blog-card__date .month,
.jbl-stat-box span,
.pricing-zone-stat span,
.help-stat-card span {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
}

.j-blog-card__title a,
.j-sidebar-post__body a,
.jbl-section-head h2,
.jbl-profile-mini strong,
.jbl-product-mini strong,
.jbl-info-row strong,
.jbl-subtitle,
.jbl-directory-card__body h2 a {
    color: var(--public-ink);
    text-decoration: none;
}

.j-text-btn,
.jbl-link-muted,
.geb-social-card__tags a,
.help-inline-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--brand-700);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.j-article-content p,
.j-policy-content p {
    margin-bottom: 1.25rem;
}

.j-policy-content h2,
.j-policy-content h3 {
    color: var(--public-ink);
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    font-weight: var(--font-weight-extrabold);
}

.j-policy-content ul,
.j-policy-content ol {
    margin-bottom: 1.5rem;
    padding-inline-start: 1.5rem;
}

.j-policy-content li,
.j-sidebar-post:not(:last-child) {
    margin-bottom: .5rem;
}

.j-sidebar-post:not(:last-child) {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--public-border);
}

.jbl-social-page,
.geb-home,
.help-center-shell,
.jbl-superapp-pricing {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 6%, var(--public-warm), transparent 26rem),
        radial-gradient(circle at 88% 12%, var(--public-cool), transparent 28rem),
        linear-gradient(180deg, var(--public-soft), var(--surface-primary));
}

.jbl-social-shell,
.geb-section,
.jbl-superapp-guide,
.jbl-phone-grid,
.help-center-shell .row,
.jbl-superapp-pricing .row {
    max-width: var(--public-max);
    margin-inline: auto;
}

.jbl-social-hero,
.geb-section {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    padding-block: clamp(2rem, 5vw, 4rem);
    border-bottom: 1px solid var(--public-border);
}

.jbl-social-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.jbl-social-eyebrow,
.geb-section__tag,
.help-pill {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--surface-primary), var(--public-warm));
    border: 1px solid var(--public-border);
    color: var(--brand-700);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
}

.jbl-social-hero-actions,
.jbl-social-actions,
.geb-home-actions,
.jbl-profile-actions,
.jbl-directory-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.geb-home-actions--center {
    justify-content: center;
}

.jbl-social-button,
.geb-btn,
.help-inline-link {
    min-height: 44px;
    justify-content: center;
    padding: .65rem 1rem;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.jbl-quick-actions,
.jbl-stat-grid,
.pricing-zone-stats,
.help-highlights {
    display: grid;
    gap: 1rem;
}

.jbl-quick-actions {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.jbl-action-card,
.help-action-card,
.geb-social-card {
    display: grid;
    gap: .75rem;
    padding: 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.jbl-social-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: clamp(1rem, 3vw, 1.75rem);
}

.jbl-social-panel,
.content-panel {
    padding: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: 1.5rem;
}

.jbl-section-head,
.geb-social-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.jbl-profile-list,
.jbl-product-list,
.jbl-feed-stack,
.jbl-info-list,
.help-mini-list,
.help-link-list,
.phone-article-list,
.phone-list {
    display: grid;
    gap: .8rem;
}

.jbl-profile-mini,
.jbl-product-mini,
.jbl-info-row,
.jbl-feed-post,
.jbl-product-card,
.help-inline-link,
.mini-item,
.phone-article-list article,
.phone-list article {
    padding: .9rem;
    border: 1px solid var(--public-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface-primary), var(--public-live));
}

.jbl-profile-mini,
.jbl-product-mini,
.phone-article-list article,
.phone-list article,
.jbl-composer-box {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.jbl-profile-mini img,
.jbl-product-mini img {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    background: var(--brand-50);
}

.jeeblay-profile-page .jbl-social-shell {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.jbl-profile-hero {
    overflow: hidden;
    border: 1px solid var(--public-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, var(--public-surface-strong), var(--public-soft));
    box-shadow: var(--shadow-lg);
}

.jbl-profile-cover {
    height: clamp(180px, 28vw, 320px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, var(--public-warm), transparent 18rem),
        radial-gradient(circle at 88% 12%, var(--public-cool), transparent 18rem),
        linear-gradient(135deg, var(--public-soft), var(--public-live));
    border-bottom: 1px solid var(--public-border);
}

.jbl-profile-cover img {
    width: 100%;
    height: 100%;
    padding: clamp(.75rem, 2vw, 1.25rem);
    object-fit: contain;
}

.jbl-profile-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(.9rem, 2vw, 1.25rem);
    align-items: start;
    padding: clamp(1rem, 3vw, 1.5rem);
}

.jbl-profile-avatar {
    width: clamp(72px, 9vw, 96px);
    height: clamp(72px, 9vw, 96px);
    margin-top: clamp(-3.5rem, -6vw, -2.25rem);
    border: 4px solid var(--public-surface-strong);
    border-radius: var(--radius-xl);
    background: var(--public-surface-strong);
    object-fit: contain;
    box-shadow: var(--shadow-md);
}

.jbl-profile-meta {
    min-width: 0;
    display: grid;
    gap: .55rem;
}

.jbl-profile-type,
.jbl-social-chip,
.jbl-sale-chip,
.jbl-info-chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .35rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
}

.jbl-profile-type {
    padding: .3rem .7rem;
    color: var(--brand-800);
    background: linear-gradient(135deg, var(--surface-primary), var(--public-warm));
    border: 1px solid var(--public-border);
}

.jbl-profile-meta h1 {
    margin: 0;
    color: var(--public-ink);
    font-size: clamp(1.65rem, 4vw, 2.65rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.12;
    letter-spacing: 0;
}

.jbl-profile-meta p {
    max-width: 68ch;
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.jbl-profile-stats,
.jbl-profile-nav,
.jbl-chip-list,
.jbl-social-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.jbl-profile-stats span,
.jbl-profile-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: var(--radius-pill);
    font-size: var(--font-sm);
}

.jbl-profile-stats span {
    padding: .3rem .7rem;
    color: var(--text-secondary);
    background: var(--public-live);
    border: 1px solid var(--public-border);
}

.jbl-profile-nav {
    margin-top: .2rem;
}

.jbl-profile-nav a {
    padding: .35rem .85rem;
    color: var(--brand-800);
    text-decoration: none;
    background: var(--surface-primary);
    border: 1px solid var(--public-border);
    font-weight: var(--font-weight-bold);
}

.jbl-profile-actions {
    grid-column: 1 / -1;
}

.jbl-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--public-border);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.jbl-btn-primary {
    color: var(--text-on-primary);
    background: var(--brand-700);
    border-color: var(--brand-700);
}

.jbl-btn-light {
    color: var(--brand-800);
    background: var(--surface-primary);
}

.jbl-card {
    padding: clamp(1rem, 2.5vw, 1.4rem);
}

.jbl-section-head span,
.jbl-empty,
.jbl-stat-box span,
.jbl-sidebar-card li {
    color: var(--text-secondary);
}

.jbl-profile-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.5rem);
    align-items: start;
}

.jbl-profile-primary {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    min-width: 0;
}

.jbl-profile-aside {
    min-width: 0;
}

.jbl-sidebar-card {
    position: sticky;
    top: 96px;
}

.jbl-sidebar-card h3 {
    margin: 0 0 .8rem;
    color: var(--public-ink);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-bold);
}

.jbl-sidebar-card ul {
    margin: 0;
    padding-inline-start: 1rem;
}

.jbl-social-meta {
    margin-bottom: .55rem;
    color: var(--text-tertiary);
    font-size: var(--font-sm);
}

.jbl-profile-composer {
    border-color: color-mix(in srgb, var(--brand-700), var(--public-border) 72%);
    background: linear-gradient(180deg, var(--public-surface-strong), var(--surface-primary));
}

.jbl-composer-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
}

.jbl-composer-head img {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--public-border);
    object-fit: contain;
    background: var(--public-live);
}

.jbl-composer-head h2 {
    margin: 0;
    color: var(--public-ink);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-extrabold);
}

.jbl-composer-head span,
.jbl-sale-fields summary {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.jbl-composer-form {
    display: grid;
    gap: .9rem;
}

.jbl-composer-form textarea,
.jbl-composer-form input,
.jbl-composer-form select {
    width: 100%;
    border: 1px solid var(--public-border);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--public-ink);
}

.jbl-composer-form textarea {
    min-height: 130px;
    padding: .9rem 1rem;
    resize: vertical;
    line-height: var(--line-height-relaxed);
}

.jbl-composer-form input,
.jbl-composer-form select {
    min-height: 44px;
    padding: .55rem .8rem;
}

.jbl-composer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
}

.jbl-composer-grid label {
    display: grid;
    gap: .35rem;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
}

.jbl-sale-fields {
    padding: .75rem;
    border: 1px dashed var(--public-border);
    border-radius: var(--radius-lg);
    background: var(--public-soft);
}

.jbl-sale-fields summary {
    cursor: pointer;
    font-weight: var(--font-weight-bold);
}

.jbl-sale-fields .jbl-composer-grid {
    margin-top: .75rem;
}

.jbl-composer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.jbl-file-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 42px;
    padding: .6rem .9rem;
    border: 1px solid var(--public-border);
    border-radius: var(--radius-lg);
    color: var(--brand-800);
    background: var(--public-live);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
}

.jbl-file-pill input {
    max-width: 220px;
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
}

.jbl-social-chip {
    padding: .25rem .6rem;
    color: var(--brand-800);
    background: var(--brand-50);
}

.jbl-sale-chip,
.jbl-info-chip {
    margin-top: .75rem;
    padding: .3rem .65rem;
    color: var(--success-700);
    background: var(--success-50);
}

.jbl-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .9rem;
}

.jbl-product-card {
    display: grid;
    gap: .55rem;
    text-decoration: none;
}

.jbl-product-card img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--public-live);
}

.jbl-feed-post p,
.geb-social-card p,
.jbl-info-row small,
.jbl-product-card,
.jbl-directory-card__body p {
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.jbl-link-preview {
    display: grid;
    gap: .2rem;
    margin-top: .85rem;
    padding: .85rem;
    border: 1px solid var(--public-border);
    border-radius: var(--radius-md);
    color: var(--brand-800);
    background: var(--public-live);
    text-decoration: none;
}

.jbl-link-preview span {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    overflow-wrap: anywhere;
}

.jbl-post-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .85rem;
}

.jbl-post-media-grid img,
.jbl-post-media-grid a {
    width: 100%;
    min-height: 120px;
    border-radius: var(--radius-md);
    border: 1px solid var(--public-border);
    background: var(--public-soft);
}

.jbl-post-media-grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.jbl-post-media-grid a {
    display: grid;
    place-items: center;
    padding: .75rem;
    color: var(--brand-800);
    text-align: center;
    text-decoration: none;
}

.jbl-post-engagement {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--public-border);
    color: var(--text-tertiary);
    font-size: var(--font-sm);
}

.jbl-empty-state {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px dashed var(--public-border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    background: var(--public-soft);
}

.jbl-empty-state strong {
    color: var(--public-ink);
}

.jbl-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jbl-stat-box,
.pricing-zone-stat,
.help-stat-card {
    padding: 1rem;
    border-radius: var(--radius-lg);
    text-align: center;
}

.jbl-stat-box strong,
.pricing-zone-stat strong,
.help-stat-card strong {
    display: block;
    color: var(--brand-700);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-extrabold);
}

.geb-social-search {
    max-width: 520px;
    margin: 1.5rem auto 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
}

.geb-social-search button {
    width: 48px;
    border-radius: var(--radius-md);
    border: 1px solid var(--brand-500);
    background: var(--brand-500);
    color: var(--text-on-primary);
}

.geb-social-preview {
    display: grid;
    gap: 1rem;
    max-width: 860px;
    margin-inline: auto;
}

.jbl-superapp-guide {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--surface-primary), var(--public-live));
    border: 1px solid var(--public-border);
    box-shadow: var(--shadow-lg);
}

.jbl-superapp-guide__bar,
.jbl-superapp-guide__intro {
    padding: clamp(1rem, 3vw, 1.5rem);
}

.jbl-superapp-guide__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--public-border);
}

.jbl-superapp-guide__brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--brand-800);
    font-weight: var(--font-weight-bold);
}

.jbl-superapp-guide__brand img {
    width: 42px;
    height: auto;
}

.jbl-superapp-guide__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 1.25rem;
    align-items: center;
}

.pricing-zone-stats,
.help-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jbl-phone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.marketing-phone-frame {
    display: grid;
    gap: .75rem;
}

.marketing-phone-frame__device {
    border-radius: 2rem;
    padding: .65rem;
    background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
    box-shadow: var(--shadow-xl);
}

.marketing-phone-frame__screen {
    min-height: 320px;
    border-radius: 1.55rem;
    padding: .9rem;
    background: linear-gradient(180deg, var(--surface-primary), var(--public-live));
    overflow: hidden;
}

.marketing-phone-frame__island {
    display: block;
    width: 78px;
    height: 20px;
    margin: 0 auto .55rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-primary) 16%, transparent);
}

.marketing-phone-frame__status,
.marketing-phone-frame__bar {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: var(--brand-900);
    font-size: var(--font-xs);
}

.marketing-phone-frame__bar {
    margin: .75rem 0 1rem;
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
}

.marketing-phone-frame__content {
    display: grid;
    gap: .75rem;
}

.phone-chat-bubble,
.phone-feed-card,
.phone-wallet-card {
    padding: .8rem;
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    border: 1px solid var(--public-border);
    color: var(--text-primary);
}

.phone-chat-bubble--out {
    background: var(--brand-50);
    color: var(--brand-800);
}

.phone-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.phone-quick-replies button {
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-pill);
    background: var(--surface-primary);
    color: var(--brand-800);
    padding: .35rem .65rem;
}

.phone-track {
    display: grid;
    gap: .5rem;
}

.phone-track span,
.phone-list article span,
.phone-article-list article span {
    border-radius: var(--radius-pill);
    padding: .45rem .65rem;
    background: var(--surface-primary);
    border: 1px solid var(--public-border);
}

.phone-track .is-active,
.phone-track .is-done {
    background: var(--brand-500);
    color: var(--text-on-primary);
}

.phone-map-placeholder {
    min-height: 120px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--public-cool), var(--public-live));
    color: var(--brand-700);
    font-size: 2rem;
}

.phone-profile-head,
.phone-dark-card,
.phone-offer-card,
.phone-banner,
.phone-product-row,
.phone-feed-card {
    display: grid;
    gap: .55rem;
    padding: .85rem;
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    border: 1px solid var(--public-border);
}

.phone-dark-card {
    background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
    color: var(--text-on-primary);
}

.phone-avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-300));
    color: var(--text-on-primary);
    font-weight: var(--font-weight-bold);
}

.phone-profile-head div,
.phone-mini-programs,
.phone-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.phone-profile-head button,
.phone-dark-card button,
.phone-product-row button {
    border: 1px solid var(--brand-500);
    border-radius: var(--radius-pill);
    background: var(--brand-500);
    color: var(--text-on-primary);
    padding: .35rem .7rem;
}

.phone-tabs,
.phone-post-list {
    display: grid;
    gap: .45rem;
}

.phone-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phone-tabs span,
.phone-mini-programs span,
.phone-reactions span {
    padding: .4rem .55rem;
    border-radius: var(--radius-pill);
    background: var(--brand-50);
    color: var(--brand-800);
    text-align: center;
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
}

.phone-tabs .is-active {
    background: var(--brand-500);
    color: var(--text-on-primary);
}

.phone-post-list article {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: .5rem;
    align-items: center;
    padding: .55rem;
    border-radius: var(--radius-md);
    background: var(--public-live);
}

.phone-post-list article span,
.phone-product-row > span {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--warning-50), var(--brand-100));
}

.phone-banner {
    min-height: 72px;
    place-items: center;
    background: linear-gradient(135deg, var(--warning-50), var(--brand-100));
    color: var(--brand-900);
    font-weight: var(--font-weight-extrabold);
}

.phone-product-row {
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.pricing-zone-meta {
    display: grid;
    gap: .75rem;
}

.pricing-zone-meta > div,
.pricing-zone-estimate {
    padding: .75rem;
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    border: 1px solid var(--public-border);
}

.pricing-zone-meta strong,
.pricing-zone-price span,
.pricing-zone-estimate span {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.pricing-zone-price strong,
.pricing-zone-estimate strong {
    color: var(--brand-700);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-extrabold);
}

/* Jeeblay public desktop and wide screens enhancement */
@media (min-width: 992px) {
    .j-public-page .j-page-header {
        max-width: min(920px, 100%);
        margin-inline: auto;
    }

    .j-public-page .j-hero__subtitle,
    .j-public-page .geb-section__lead,
    .j-public-page .help-copy,
    .j-public-page .jbl-superapp-guide p {
        max-width: 68ch;
    }

    .j-public-page .j-card,
    .j-public-page .content-panel,
    .j-public-page .custom--card {
        overflow: hidden;
    }

    .j-contact-page .j-card.p-4,
    .j-contact-page .j-card.p-md-5 {
        height: 100%;
    }

    .j-policy-page .j-card {
        max-width: min(940px, 100%);
        margin-inline: auto;
    }

    .j-policy-page .j-policy-content,
    .j-blog-details-page .j-article-content {
        max-width: 74ch;
        line-height: 1.85;
    }

    .jbl-superapp-guide__intro {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .jbl-phone-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: start;
    }

    .jbl-social-hero,
    .geb-section {
        padding-block: clamp(3rem, 6vw, 5rem);
    }

    .geb-social-search {
        max-width: 720px;
        grid-template-columns: minmax(0, 1fr) 56px;
    }

    .jbl-profile-body {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: end;
    }

    .jbl-profile-actions {
        grid-column: auto;
        justify-content: flex-end;
    }

    .jbl-composer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jbl-post-media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .j-public-page {
        --public-max: 1240px;
    }

    .j-public-page .container {
        max-width: min(var(--public-max), calc(100vw - 4rem));
    }

    .j-public-page .j-page-header {
        max-width: min(920px, 100%);
        margin-block-end: 3.5rem !important;
    }

    .j-contact-page .row.g-4.align-items-stretch {
        display: grid;
        grid-template-columns: minmax(280px, .42fr) minmax(0, .88fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .j-contact-page .row.g-4.align-items-stretch > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: initial;
    }

    .j-contact-info-grid {
        position: sticky;
        top: 110px;
    }

    .j-blogs-page .row.g-4 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.25rem, 2vw, 1.75rem);
    }

    .j-blogs-page .row.g-4 > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: initial;
    }

    .j-blog-card__content {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 250px;
    }

    .j-blog-details-page .row.gy-5 {
        display: grid;
        grid-template-columns: minmax(0, .72fr) minmax(300px, .28fr);
        gap: clamp(2rem, 4vw, 3.5rem);
        align-items: start;
    }

    .j-blog-details-page .row.gy-5 > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: initial;
    }

    .j-blog-details-page .j-article-sidebar {
        position: sticky;
        top: 110px;
    }

    .help-center-shell .row.g-4 {
        align-items: start;
    }

    .help-center-shell .content-panel {
        margin-bottom: 0;
    }

    .jbl-superapp-pricing form.custom--card .row {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 1rem;
        align-items: end;
    }

    .jbl-superapp-pricing form.custom--card .row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: initial;
    }

    .jbl-superapp-pricing form.custom--card .row > :nth-child(1) {
        grid-column: span 3;
    }

    .jbl-superapp-pricing form.custom--card .row > :nth-child(2),
    .jbl-superapp-pricing form.custom--card .row > :nth-child(3),
    .jbl-superapp-pricing form.custom--card .row > :nth-child(4) {
        grid-column: span 2;
    }

    .jbl-superapp-pricing form.custom--card .row > :nth-child(5),
    .jbl-superapp-pricing form.custom--card .row > :nth-child(6),
    .jbl-superapp-pricing form.custom--card .row > :nth-child(7) {
        grid-column: span 1;
    }

    .jbl-superapp-pricing .row.g-4 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.25rem, 2vw, 1.75rem);
    }

    .jbl-superapp-pricing .row.g-4 > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: initial;
    }

    .pricing-zone-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .geb-social-preview {
        max-width: min(960px, 100%);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .geb-social-card--empty,
    .geb-social-preview > .pagination,
    .geb-social-preview > nav {
        grid-column: 1 / -1;
    }

    .jbl-profile-content-grid {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    }
}

@media (min-width: 1440px) {
    .j-public-page {
        --public-max: 1320px;
    }

    .jbl-superapp-guide__intro {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    }

    .j-blog-details-page .row.gy-5 {
        grid-template-columns: minmax(0, .7fr) minmax(340px, .3fr);
    }

    .jbl-social-grid {
        grid-template-columns: 310px minmax(0, 1fr) 310px;
    }
}

@media (max-width: 1024px) {
    .jbl-social-grid,
    .jbl-social-hero,
    .jbl-superapp-guide__intro {
        grid-template-columns: 1fr;
    }

    .jbl-social-grid aside {
        display: block;
    }

    .jbl-sidebar-card {
        position: static;
    }
}

@media (max-width: 767px) {
    .j-public-page.py-5,
    .j-contact-page.py-5,
    .j-blogs-page.py-5,
    .j-blog-details-page.py-5,
    .j-policy-page.py-5,
    .help-center-shell.py-5,
    .jbl-superapp-pricing.py-5,
    .jbl-social-page.py-5 {
        padding-block: 1.25rem 3rem !important;
    }

    .jbl-superapp-guide__bar,
    .pricing-zone-stats,
    .help-highlights,
    .jbl-stat-grid {
        grid-template-columns: 1fr;
    }

    .jbl-social-hero-actions,
    .jbl-social-actions,
    .geb-home-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .jbl-social-button,
    .geb-btn,
    .j-public-page .btn,
    .j-public-page .j-btn {
        width: 100%;
    }

    .jbl-profile-body {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .jbl-profile-avatar {
        margin-top: -3rem;
    }

    .jbl-profile-meta,
    .jbl-profile-stats,
    .jbl-profile-nav {
        justify-items: center;
        justify-content: center;
    }

    .jbl-profile-actions,
    .jbl-profile-actions .jbl-btn {
        width: 100%;
    }
}

/* Jeeblay public homepage redesign */
body:has(.j-home-redesign) {
    background:
        radial-gradient(circle at 12% 6%, var(--warning-50), transparent 28rem),
        radial-gradient(circle at 88% 18%, var(--info-50), transparent 26rem),
        linear-gradient(180deg, var(--bg-secondary), var(--bg-card-soft) 42%, var(--surface-primary));
}

body:has(.j-home-redesign) .main-wrapper {
    display: block;
    background:
        radial-gradient(circle at 10% 4%, var(--warning-50), transparent 30rem),
        radial-gradient(circle at 90% 16%, var(--info-50), transparent 28rem),
        linear-gradient(180deg, var(--bg-secondary), var(--bg-card-soft) 44%, var(--surface-primary));
}

body:has(.j-home-redesign) .j-public-header {
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border-bottom-color: var(--border-light);
    backdrop-filter: blur(18px);
}

.j-home-redesign {
    --home-max: 1180px;
    --home-bg: var(--bg-secondary);
    --home-bg-warm: var(--warning-50);
    --home-bg-cool: var(--info-50);
    --home-bg-live: var(--bg-card-soft);
    --home-panel: color-mix(in srgb, var(--surface-primary) 88%, transparent);
    --home-panel-strong: var(--surface-primary);
    --home-ink: var(--brand-900);
    --home-muted: var(--brand-700);
    --home-border: var(--border-light);
    background:
        radial-gradient(circle at 8% 9%, var(--home-bg-warm), transparent 24rem),
        radial-gradient(circle at 92% 14%, var(--home-bg-cool), transparent 28rem),
        linear-gradient(180deg, var(--home-bg) 0, var(--home-bg-live) 48%, var(--surface-primary) 100%);
    color: var(--text-primary);
    overflow: hidden;
}

.j-home-hero,
.j-home-section,
.j-home-stats {
    width: min(var(--home-max), calc(100% - 2rem));
    margin-inline: auto;
}

.j-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 3.5rem);
    align-items: center;
    padding: clamp(3rem, 7vw, 5.75rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}

.j-home-hero__content {
    display: grid;
    gap: 1.15rem;
    text-align: start;
}

.j-home-eyebrow,
.j-home-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--home-muted);
    background: linear-gradient(135deg, var(--surface-primary), var(--home-bg-warm));
    border: 1px solid var(--home-border);
    border-radius: var(--radius-pill);
    padding: .38rem .8rem;
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
}

.j-home-hero__title {
    margin: 0;
    color: var(--home-ink);
    font-size: clamp(2.25rem, 8vw, 5rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.02;
    letter-spacing: 0;
}

.j-home-hero__title span {
    display: block;
    color: var(--brand-700);
}

.j-home-hero__lead {
    max-width: 680px;
    margin: 0;
    color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: var(--line-height-relaxed);
}

.j-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.j-home-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: .5rem 0 0;
}

.j-home-quick-stats div,
.j-home-stats__grid div {
    background: linear-gradient(180deg, var(--home-panel), var(--home-bg));
    border: 1px solid var(--home-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.j-home-quick-stats dt,
.j-home-stats__grid strong {
    display: block;
    color: var(--brand-700);
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
}

.j-home-quick-stats dd,
.j-home-stats__grid span {
    display: block;
    margin: .35rem 0 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.j-home-hero__visual {
    min-width: 0;
}

.j-home-console {
    position: relative;
    border: 1px solid var(--home-border);
    border-radius: var(--radius-2xl);
    background:
        linear-gradient(135deg, var(--home-panel-strong), var(--home-bg)),
        var(--home-panel-strong);
    box-shadow: var(--shadow-xl);
    padding: 1rem;
}

.j-home-console__bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .6rem 1rem;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.j-home-console__bar span {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--brand-200);
}

.j-home-console__bar strong {
    margin-inline-start: auto;
    color: var(--home-ink);
}

.j-home-console__balance {
    border-radius: var(--radius-xl);
    color: var(--text-on-primary);
    background: linear-gradient(135deg, var(--brand-800), var(--brand-500));
    padding: clamp(1.25rem, 4vw, 2rem);
}

.j-home-console__balance p {
    margin: 0 0 .45rem;
    color: color-mix(in srgb, var(--text-on-primary) 82%, transparent);
}

.j-home-console__balance strong {
    display: block;
    font-size: clamp(1.25rem, 4vw, 2.35rem);
    line-height: 1.15;
}

.j-home-console__flow,
.j-home-console__cards {
    display: grid;
    gap: .75rem;
    margin-top: .9rem;
}

.j-home-console__flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
}

.j-home-console__flow span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--surface-primary), var(--home-bg-live));
    color: var(--brand-800);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-sm);
}

.j-home-console__flow i {
    color: var(--brand-500);
}

.j-home-console__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.j-home-console__cards article,
.j-home-role-card,
.j-home-journey article,
.j-home-capabilities article {
    background: linear-gradient(180deg, var(--home-panel-strong), var(--home-bg));
    border: 1px solid var(--home-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.j-home-console__cards article {
    display: grid;
    gap: .35rem;
    padding: 1rem;
}

.j-home-console__cards i,
.j-home-capabilities i {
    color: var(--brand-600);
    font-size: 1.6rem;
}

.j-home-console__cards small {
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
}

.j-home-section,
.j-home-stats {
    padding: clamp(2.6rem, 6vw, 4.75rem) 0;
}

.j-home-section--ad {
    padding-block: 1rem;
}

.j-home-section--muted {
    width: 100%;
    max-width: none;
    padding-inline: max(1rem, calc((100% - var(--home-max)) / 2));
    background:
        radial-gradient(circle at 20% 10%, var(--home-bg-warm), transparent 26rem),
        linear-gradient(180deg, var(--home-bg-live), var(--home-bg-cool));
}

.j-home-section__head {
    max-width: 720px;
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: .65rem;
}

.j-home-section__head h2,
.j-home-final-cta h2 {
    margin: 0;
    color: var(--home-ink);
    font-size: clamp(1.55rem, 4vw, 2.6rem);
    line-height: 1.15;
    font-weight: var(--font-weight-extrabold);
}

.j-home-section__head p,
.j-home-final-cta p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.j-home-role-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.j-home-role-card {
    display: grid;
    gap: .55rem;
    padding: 1.15rem;
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.j-home-role-card:hover,
.j-home-role-card:focus-visible {
    color: inherit;
    transform: translateY(-3px);
    border-color: var(--brand-300);
    box-shadow: var(--shadow-lg);
}

.j-home-role-card__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-700);
    background: linear-gradient(135deg, var(--home-bg-live), var(--surface-primary));
    border-radius: var(--radius-md);
    font-size: 1.65rem;
}

.j-home-role-card__label {
    color: var(--text-muted);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
}

.j-home-role-card strong {
    color: var(--home-ink);
    font-size: var(--font-lg);
}

.j-home-role-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: var(--line-height-relaxed);
}

.j-home-role-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--brand-700);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-sm);
    margin-top: .2rem;
}

.j-home-journey,
.j-home-capabilities,
.j-home-stats__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.j-home-journey article {
    padding: 1.25rem;
}

.j-home-journey span {
    display: block;
    color: var(--brand-600);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--font-xl);
    margin-bottom: .7rem;
}

.j-home-journey h3,
.j-home-capabilities h3 {
    margin: 0 0 .45rem;
    color: var(--home-ink);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-bold);
}

.j-home-journey p,
.j-home-capabilities p {
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-sm);
}

.j-home-capabilities article {
    padding: 1.35rem;
    display: grid;
    gap: .45rem;
}

.j-home-stats {
    text-align: center;
    background:
        radial-gradient(circle at 0% 0%, var(--home-bg-warm), transparent 20rem),
        linear-gradient(135deg, var(--home-bg), var(--home-bg-live));
    border-radius: var(--radius-2xl);
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.j-home-final-cta {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    justify-items: center;
    gap: .85rem;
    text-align: center;
    color: var(--text-on-primary);
    background: linear-gradient(135deg, var(--brand-800), var(--brand-500));
    border-radius: var(--radius-2xl);
    padding: clamp(2rem, 5vw, 3.6rem) clamp(1rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-xl);
}

.j-home-final-cta .j-home-kicker {
    color: var(--text-on-primary);
    background: color-mix(in srgb, var(--surface-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--surface-primary) 22%, transparent);
}

.j-home-final-cta h2,
.j-home-final-cta p {
    color: var(--text-on-primary);
}

.j-home-final-cta .j-btn {
    background: var(--surface-primary);
    border-color: var(--surface-primary);
    color: var(--brand-800);
}

@media (max-width: 575.98px) {
    .j-home-quick-stats,
    .j-home-console__cards {
        grid-template-columns: 1fr;
    }

    .j-home-console__flow {
        grid-template-columns: 1fr;
    }

    .j-home-console__flow i {
        transform: rotate(-90deg);
    }
}

@media (min-width: 768px) {
    .j-home-role-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .j-home-journey,
    .j-home-capabilities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .j-home-stats__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .j-home-hero {
        grid-template-columns: 1.02fr .98fr;
    }

    .j-home-role-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .j-home-journey {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .j-home-capabilities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.jbl-profile-cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid color-mix(in srgb, var(--jbl-profile-accent, var(--brand-600)) 24%, var(--border-primary));
    border-radius: 8px;
    background: color-mix(in srgb, var(--jbl-profile-accent, var(--brand-600)) 8%, var(--surface-primary));
    padding: 1rem;
}

.jbl-profile-cta-strip strong,
.jbl-profile-cta-strip span {
    display: block;
}

.jbl-profile-cta-strip span {
    color: var(--text-secondary);
    font-size: .92rem;
    margin-top: .2rem;
}

.jbl-profile-preview-badge {
    color: var(--jbl-profile-accent, var(--brand-600)) !important;
    font-weight: 700;
}

.jbl-profile-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.jbl-profile-trust-grid span {
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--surface-primary);
    color: var(--text-secondary);
    padding: .75rem .9rem;
    font-size: .92rem;
}

.jbl-profile-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.jbl-profile-tabbar {
    align-items: center;
}

.social-page-builder > summary {
    cursor: pointer;
    list-style: none;
}

.social-page-builder > summary::-webkit-details-marker {
    display: none;
}

.social-builder-panel,
.social-section-control {
    border: 1px solid color-mix(in srgb, var(--brand-900) 8%, transparent);
    border-radius: 8px;
    background: var(--ap-surface-0, #fff);
    padding: 1rem;
}

.social-builder-panel h6 {
    margin-bottom: .85rem;
}

.social-section-control {
    min-height: 116px;
}

@media (max-width: 767.98px) {
    .jbl-profile-cta-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .jbl-profile-cta-actions {
        justify-content: stretch;
    }

    .jbl-profile-cta-actions .jbl-btn {
        flex: 1 1 auto;
    }

    .jbl-profile-trust-grid {
        grid-template-columns: 1fr;
    }
}