/* Unified Frontend Theme */
:root {
    --radly-bg: #f5f6fa;
    --radly-bg-alt: #ffffff;
    --radly-surface: #ffffff;
    --radly-surface-soft: #f8fafd;
    --radly-line: #e7ebf2;
    --radly-line-soft: #edf1f5;
    --radly-text: #4e5468;
    --radly-text-muted: #6b7280;
    --radly-primary: #12a058;
    --radly-primary-strong: #0b7841;
    --radly-dark: #4e5468;
    --radly-success: #0f766e;
    --radly-danger: #be123c;
    --radly-warning: #b45309;
    --radly-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    --radly-radius: 14px;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    max-width: 100%;
}

:where(img, video, canvas, svg) {
    max-width: 100%;
    height: auto;
}

body.radly-theme {
    --bs-primary: var(--radly-primary);
    --bs-link-color: var(--radly-primary-strong);
    --bs-link-hover-color: var(--radly-primary);
    --bs-body-color: var(--radly-text);
    --bs-body-bg: var(--radly-bg-alt);
    margin: 0;
    min-height: 100vh;
    color: var(--radly-text);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 96% 1%, rgba(18, 160, 88, 0.12), transparent 24%),
        radial-gradient(circle at 4% 1%, rgba(78, 84, 104, 0.08), transparent 18%),
        linear-gradient(180deg, var(--radly-bg) 0%, var(--radly-bg-alt) 100%);
    font-family: "Almarai", "Tajawal", "Roboto", "Poppins", "Avenir Next", "Segoe UI", Tahoma, Arial, sans-serif;
}

body.radly-theme p,
body.radly-theme span,
body.radly-theme label,
body.radly-theme input,
body.radly-theme select,
body.radly-theme textarea,
body.radly-theme button,
body.radly-theme a,
body.radly-theme th,
body.radly-theme td {
    font-family: inherit;
    max-width: 100%;
}

body.radly-theme h1,
body.radly-theme h2,
body.radly-theme h3,
body.radly-theme h4,
body.radly-theme h5,
body.radly-theme h6,
body.radly-theme .store-title,
body.radly-theme .title {
    font-family: "Poppins", "Almarai", "Tajawal", "Roboto", "Avenir Next", "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--radly-text);
    letter-spacing: 0;
}

body.radly-theme a {
    color: var(--radly-primary-strong);
    text-decoration: none;
}

body.radly-theme a:hover {
    color: var(--radly-primary);
}

body.radly-theme .card,
body.radly-theme .guest-card,
body.radly-theme .modal-content,
body.radly-theme .offcanvas,
body.radly-theme .dropdown-menu,
body.radly-theme .result,
body.radly-theme .panel,
body.radly-theme .hero-main,
body.radly-theme .hero-side {
    border: 1px solid var(--radly-line) !important;
    border-radius: var(--radly-radius) !important;
    background: var(--radly-surface) !important;
    box-shadow: var(--radly-shadow) !important;
}

body.radly-theme .container,
body.radly-theme .container-fluid,
body.radly-theme .content-wrapper,
body.radly-theme .guest-shell,
body.radly-theme .wrap,
body.radly-theme .storefront {
    max-width: 100%;
}

body.radly-theme .row > *,
body.radly-theme [class*="col-"] {
    min-width: 0;
}

body.radly-theme .guest-card-header {
    color: #ffffff;
    background: linear-gradient(135deg, var(--radly-dark) 0%, #1f2937 100%) !important;
}

body.radly-theme .sidebar {
    color: #ffffff;
    background: linear-gradient(180deg, #0f172a 0%, #111827 60%, #1f2937 100%) !important;
}

body.radly-theme .sidebar-brand {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

body.radly-theme .sidebar-nav .nav-section {
    color: rgba(255, 255, 255, 0.55);
}

body.radly-theme .sidebar-nav .nav-item a {
    color: rgba(255, 255, 255, 0.9);
}

body.radly-theme .sidebar-nav .nav-item a:hover,
body.radly-theme .sidebar-nav .nav-item a.active {
    color: #ffffff;
    background: rgba(18, 160, 88, 0.25);
}

body.radly-theme .top-navbar {
    border-bottom: 1px solid var(--radly-line);
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.06);
}

body.radly-theme .content-wrapper {
    padding-top: 1.25rem;
}

body.radly-theme .alert,
body.radly-theme .message,
body.radly-theme .banner,
body.radly-theme .notice {
    border-radius: 12px;
    font-weight: 600;
}

body.radly-theme .banner.success,
body.radly-theme .message.success {
    color: #0f766e !important;
    border-color: rgba(15, 118, 110, 0.35) !important;
    background: #ecfdf5 !important;
}

body.radly-theme .banner.warning,
body.radly-theme .alert,
body.radly-theme .notice,
body.radly-theme .message.warning {
    color: #9a5d12 !important;
    border-color: #efd1a8 !important;
    background: #fff7ea !important;
}

body.radly-theme .banner.error,
body.radly-theme .message.error {
    color: var(--radly-danger) !important;
    border-color: rgba(190, 18, 60, 0.3) !important;
    background: #fff1f2 !important;
}

body.radly-theme .btn,
body.radly-theme button,
body.radly-theme .chip-link.cart,
body.radly-theme .add-button {
    border-radius: 10px;
    transition: all 0.2s ease;
    max-width: 100%;
    white-space: normal;
}

/* Consistent icon alignment and sizing across all icon buttons */
body.radly-theme .btn i,
body.radly-theme button i,
body.radly-theme [class*="btn-"] i,
body.radly-theme .icon i,
body.radly-theme .fa,
body.radly-theme .fas,
body.radly-theme .far,
body.radly-theme .fal,
body.radly-theme .fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

body.radly-theme .btn .fa,
body.radly-theme .btn .fas,
body.radly-theme .btn .far,
body.radly-theme .btn .fal,
body.radly-theme .btn .fab,
body.radly-theme button .fa,
body.radly-theme button .fas,
body.radly-theme button .far,
body.radly-theme button .fal,
body.radly-theme button .fab {
    width: 1.1em;
    height: 1.1em;
    margin: 0;
}

body.radly-theme .btn-group .btn,
body.radly-theme .btn-icon,
body.radly-theme .radly-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

body.radly-theme .btn-icon,
body.radly-theme .radly-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border-radius: 12px;
}

body.radly-theme :where(.btn, button, .badge, .mobile-nav-item, .sidebar-nav .nav-item a) > :where(i, .fa, .fas, .far, .fal, .fab) {
    flex-shrink: 0;
}

body.radly-theme .btn-primary,
body.radly-theme .btn.success,
body.radly-theme .btn.warning,
body.radly-theme .btn:not(.btn-secondary):not(.btn-outline-danger):not(.secondary) {
    color: #ffffff !important;
    border: 1px solid var(--radly-primary) !important;
    background: linear-gradient(135deg, var(--radly-primary) 0%, var(--radly-primary-strong) 100%) !important;
}

body.radly-theme .btn:hover,
body.radly-theme button:hover,
body.radly-theme .chip-link.cart:hover,
body.radly-theme .add-button:hover {
    filter: brightness(0.96);
}

body.radly-theme .btn.secondary,
body.radly-theme .btn-secondary,
body.radly-theme .btn-outline-primary,
body.radly-theme .btn-outline-danger {
    color: var(--radly-text) !important;
    border: 1px solid var(--radly-line) !important;
    background: var(--radly-surface-soft) !important;
}

body.radly-theme .btn.secondary:hover,
body.radly-theme .btn-secondary:hover,
body.radly-theme .btn-outline-primary:hover,
body.radly-theme .btn-outline-danger:hover {
    color: var(--radly-text) !important;
    border-color: #d9d9d9 !important;
    background: #f3f3f3 !important;
}

body.radly-theme .form-control,
body.radly-theme .form-select,
body.radly-theme .form-check-input,
body.radly-theme input[type="text"],
body.radly-theme input[type="search"],
body.radly-theme input[type="date"],
body.radly-theme input[type="datetime-local"],
body.radly-theme textarea,
body.radly-theme .input,
body.radly-theme .select,
body.radly-theme .textarea {
    color: var(--radly-text);
    border: 1px solid var(--radly-line-soft) !important;
    border-radius: 10px;
    background: #ffffff !important;
}

body.radly-theme .form-control:focus,
body.radly-theme .form-select:focus,
body.radly-theme .form-check-input:focus,
body.radly-theme input[type="text"]:focus,
body.radly-theme input[type="search"]:focus,
body.radly-theme input[type="date"]:focus,
body.radly-theme input[type="datetime-local"]:focus,
body.radly-theme textarea:focus {
    border-color: #8ed6b5 !important;
    box-shadow: 0 0 0 3px rgba(18, 160, 88, 0.16) !important;
}

body.radly-theme .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.radly-theme .table-responsive > .table,
body.radly-theme .table-responsive > table {
    margin-bottom: 0;
}

body.radly-theme .table,
body.radly-theme table {
    border-color: var(--radly-line-soft);
    --bs-table-striped-bg: #fcfcfc;
    --bs-table-hover-bg: #f8f8f8;
}

body.radly-theme table th,
body.radly-theme .table thead th {
    color: var(--radly-text);
    background: #fafafa;
    border-bottom-color: var(--radly-line);
}

body.radly-theme table td,
body.radly-theme .table td {
    border-color: var(--radly-line-soft);
}

body.radly-theme .badge,
body.radly-theme .badge.bg-primary {
    color: #ffffff !important;
    background: var(--radly-primary) !important;
    min-width: 0;
    width: fit-content;
    max-inline-size: 100%;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: balance;
    text-align: center;
    line-height: 1.2;
    padding: 0.38rem 0.56rem;
}

body.radly-theme .badge i,
body.radly-theme .badge .fa,
body.radly-theme .badge .fas,
body.radly-theme .badge .far,
body.radly-theme .badge .fal,
body.radly-theme .badge .fab {
    margin: 0 !important;
    width: 1em;
    height: 1em;
}

body.radly-theme .badge.ok,
body.radly-theme .badge.approved,
body.radly-theme .badge.completed,
body.radly-theme .badge.delivered {
    color: #0f766e !important;
    background: #ecfdf5 !important;
}

body.radly-theme .badge.wait,
body.radly-theme .badge.pending {
    color: var(--radly-warning) !important;
    background: #fff7ea !important;
}

body.radly-theme .badge.rejected {
    color: var(--radly-danger) !important;
    background: #fff1f2 !important;
}

body.radly-theme .badge.shipped {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
}

body.radly-theme .pagination .page-link {
    color: var(--radly-primary-strong);
    border-color: var(--radly-line);
    background: #fff;
}

body.radly-theme .pagination .page-item.active .page-link {
    color: #fff;
    border-color: var(--radly-primary);
    background: var(--radly-primary);
}

body.radly-theme .nav {
    border: 1px solid var(--radly-line);
    border-radius: 14px;
    background: #ffffff !important;
    box-shadow: var(--radly-shadow);
}

body.radly-theme .brand .check,
body.radly-theme .tab.active {
    color: #ffffff !important;
    border-color: var(--radly-primary) !important;
    background: var(--radly-primary) !important;
}

body.radly-theme .tab {
    color: var(--radly-text);
    border-color: var(--radly-line);
    background: var(--radly-surface-soft);
}

body.radly-theme .hero,
body.radly-theme .toolbar,
body.radly-theme .product-card,
body.radly-theme .item,
body.radly-theme .order-summary {
    border-color: var(--radly-line) !important;
}

body.radly-theme .chip-link,
body.radly-theme .qty,
body.radly-theme .thumb,
body.radly-theme .thumb-btn {
    border-color: var(--radly-line-soft) !important;
}

body.radly-theme .store-subtitle,
body.radly-theme .subtitle,
body.radly-theme .muted,
body.radly-theme .note {
    color: var(--radly-text-muted) !important;
}

body.radly-theme pre {
    color: #e5e7eb;
    border: 1px solid #1f2937;
    border-radius: 12px;
    background: #111827;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

body.radly-theme .toast,
body.radly-theme .swal2-popup {
    border-radius: 12px;
}

body.radly-theme .d-flex > * {
    min-width: 0;
}

@media (max-width: 992px) {
    body.radly-theme .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
    }

    body.radly-theme .card,
    body.radly-theme .guest-card,
    body.radly-theme .panel,
    body.radly-theme .hero-main,
    body.radly-theme .hero-side {
        border-radius: 12px !important;
    }
}

@media (max-width: 768px) {
    body.radly-theme {
        font-size: 15px;
    }

    body.radly-theme .badge {
        font-size: 0.72rem;
        padding: 0.38rem 0.48rem;
        max-width: 100%;
        flex-wrap: wrap;
    }

    body.radly-theme .table-responsive {
        border-radius: 10px;
    }

    body.radly-theme .btn-icon,
    body.radly-theme .radly-icon-btn {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
    }

    body.radly-theme .modal-dialog {
        margin: 0.5rem auto;
        max-width: min(96vw, 700px);
    }
}

@media (max-width: 768px) {
    body.radly-theme.radly-mobile-app .mobile-bottom-nav .mobile-nav-item span:last-child {
        display: none;
    }

    body.radly-theme.radly-mobile-app .content-wrapper,
    body.radly-theme.radly-mobile-app .container,
    body.radly-theme.radly-mobile-app .container-fluid {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    body.radly-theme.radly-mobile-app .card-header,
    body.radly-theme.radly-mobile-app .card-body {
        padding: 0.7rem !important;
    }

    body.radly-theme.radly-mobile-app h3,
    body.radly-theme.radly-mobile-app h4,
    body.radly-theme.radly-mobile-app h5,
    body.radly-theme.radly-mobile-app .card-title {
        font-size: 0.98rem !important;
    }

    body.radly-theme.radly-mobile-app .mobile-bottom-nav .mobile-nav-item.mobile-nav-item-primary {
        margin-top: -14px;
    }

    body.radly-theme.radly-mobile-app .mobile-bottom-nav .mobile-nav-item.mobile-nav-item-primary .mobile-nav-fab {
        width: 58px;
        height: 58px;
    }

    body.radly-theme.radly-mobile-app .sidebar-nav .nav-section {
        display: block;
        font-size: 0.7rem;
        padding: 0.42rem 0.72rem;
        margin-top: 0.45rem;
    }

    body.radly-theme.radly-mobile-app .sidebar-nav .nav-item a {
        justify-content: flex-start;
        gap: 0.6rem;
        padding: 0.7rem 0.72rem;
        font-size: 0.9rem !important;
        border-radius: 10px;
    }

    body.radly-theme.radly-mobile-app .sidebar-nav .nav-item a i {
        margin: 0 !important;
        width: 1.1rem !important;
        font-size: 0.95rem !important;
    }

    body.radly-theme.radly-mobile-app .radly-icon-only {
        min-width: 38px;
        min-height: 38px;
        padding: 0 !important;
        font-size: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    body.radly-theme.radly-mobile-app .radly-icon-only i {
        margin: 0 !important;
        font-size: 1rem !important;
    }

    body.radly-theme.radly-mobile-app .btn .btn-label {
        display: none !important;
    }

    body.radly-theme.radly-mobile-app .table .btn.btn-sm,
    body.radly-theme.radly-mobile-app .card-header .btn.btn-sm {
        min-width: 2rem;
        min-height: 2rem;
        padding: 0 !important;
    }

    body.radly-theme.radly-mobile-app .table .btn.btn-sm i,
    body.radly-theme.radly-mobile-app .card-header .btn.btn-sm i {
        margin: 0 !important;
    }

    body.radly-theme.radly-mobile-app .social-posting-wrap .social-header p,
    body.radly-theme.radly-mobile-app .social-posting-wrap .stat-card .text-muted,
    body.radly-theme.radly-mobile-app .auto-reply-page .form-text,
    body.radly-theme.radly-mobile-app .messenger-ai-models-page .alert-info:first-of-type,
    body.radly-theme.radly-mobile-app .livechat-wrap .lc-stat small {
        display: none !important;
    }
}