/* =========================================================
   SITE.CSS – MASTER STYLESHEET
   ========================================================= */

/* Declare cascade order FIRST */
@layer vendor, reset, base, layout, components, utilities, pages;

/* Import bootstrap into vendor layer. This will ensure bootstrap does not override my styles */
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/css/bootstrap.min.css") layer(vendor);

/* =========================================================
   TOKENS / DESIGN VARIABLES
   ========================================================= */
:root {
    --sr-color-primary: #0d6efd;
    --sr-color-light: #f8f9fa;
    --sr-color-border: #dee2e6;
    --sr-color-dark: #212529;
    --sr-color-white: #ffffff;
    --sr-color-accent: #00ff88;

    --sr-radius-sm: 0.375rem;
    --sr-space-xs: 0.25rem;
    --sr-space-sm: 0.5rem;
    --sr-space-md: 1rem;

    --sr-font-base: system-ui, -apple-system, sans-serif;
    --sr-color-bg: #ffffff;
    --sr-color-text: #212529;
    --sr-space-lg: 1.5rem;

    /* =========================================================
        IDENTITY THEME TOKENS
   ========================================================= */

    /* Identity brand colours */
    --sr-identity-primary: #007bff;
    --sr-identity-primary-dark: #0056b3;
    --sr-identity-success: #28a745;
    --sr-identity-success-alt: #20c997;

    /* Identity surfaces */
    --sr-identity-bg-dark: #000000;
    --sr-identity-bg-panel: #1a1a1a;
    --sr-identity-bg-input: #2a2a2a;

    /* Identity text */
    --sr-identity-text-light: #ffffff;
    --sr-identity-text-muted: #6c757d;

    /* Identity borders / effects */
    --sr-identity-border-subtle: rgba(255, 255, 255, 0.1);
    --sr-identity-focus-ring: rgba(0, 123, 255, 0.25);
}

/* =========================================================
   RESET
   ========================================================= */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }
}

/* =========================================================
   BASE
   ========================================================= */
@layer base {
    body {
        font-family: var(--sr-font-base);
        background: var(--sr-color-bg);
        color: var(--sr-color-text);
    }
}

/* =========================================================
   LAYOUT
   ========================================================= */
@layer layout {
    .sr-container {
        max-width: 1200px;
        margin-inline: auto;
        padding: var(--sr-space-md);
    }
}

/* =========================================================
   COMPONENTS
   ========================================================= */
@layer components {

    .main-header {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: var(--sr-space-sm) 0;
    }

    .navbar-brand img {
        filter: drop-shadow(0 2px 4px rgba(0, 255, 136, 0.3));
    }

    .brand-text-container {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .brand-text-main {
        color: var(--sr-color-white);
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .brand-text-sub {
        color: var(--sr-color-accent);
        font-size: 0.85rem;
        opacity: 0.9;
    }

    /* =========================
       MEGA DROPDOWN
       ========================= */
    .mega-dropdown {
        padding: 0;
        z-index: 1050;
    }

    .mega-dropdown .dropdown-header {
        background-color: var(--sr-color-light);
        border-bottom: 1px solid var(--sr-color-border);
        padding: 0.75rem 1rem;
        font-weight: 600;
        color: #495057;
    }

    .mega-dropdown .dropdown-item {
        padding: var(--sr-space-sm) var(--sr-space-md);
        background: none;
        border: none;
        width: 100%;
        text-align: left;
    }

    .mega-dropdown .dropdown-item:hover {
        background-color: var(--sr-color-light);
    }

    .mega-dropdown .dropdown-divider {
        margin: var(--sr-space-sm) 0;
    }


    /* =========================
       NAVBAR ENHANCEMENTS
       ========================= */
    .navbar .input-group {
        border-radius: var(--sr-radius-sm);
        overflow: hidden;
    }

    .navbar .input-group .form-select {
        border-radius: var(--sr-radius-sm) 0 0 var(--sr-radius-sm);
        border-right: none;
    }

    .navbar .input-group .form-control {
        border-left: none;
        border-right: none;
    }

    .navbar .input-group .btn {
        border-radius: 0 var(--sr-radius-sm) var(--sr-radius-sm) 0;
    }

    .navbar .badge {
        font-size: 0.7rem;
        min-width: 1.2rem;
        height: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar .btn-outline-light.dropdown-toggle {
        display: flex;
        align-items: center;
        gap: var(--sr-space-sm);
        white-space: nowrap;
    }

    .navbar .btn-outline-light.dropdown-toggle small {
        font-size: 0.75rem;
        opacity: 0.8;
    }

    .navbar .btn-outline-light.dropdown-toggle strong {
        font-size: 0.9rem;
    }


    /* =========================
       SECONDARY NAV UNDERLINE
       ========================= */
    .secondary-nav .nav-link {
        position: relative;
        display: inline-block;
        padding-bottom: 0.35rem;
        text-decoration: none;
    }

    .secondary-nav .nav-link:not(.dropdown-toggle)::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0.125rem;
        height: 3px;
        background-color: currentColor;
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 220ms ease;
        pointer-events: none;
    }

    .secondary-nav .nav-link:not(.dropdown-toggle):hover::after,
    .secondary-nav .nav-link.active:not(.dropdown-toggle)::after {
        transform: scaleX(1);
    }

    .secondary-nav .nav-link:hover,
    .secondary-nav .nav-link.active {
        color: var(--sr-color-primary);
        font-weight: 600;
    }


    /* =========================
       QUILL OVERRIDES
       ========================= */
    .my-quill-editor .ql-toolbar .ql-stroke {
        stroke: var(--sr-color-white) !important;
    }

    .my-quill-editor .ql-toolbar .ql-fill {
        fill: var(--sr-color-white) !important;
    }

    .my-quill-editor .ql-toolbar .ql-picker {
        color: #000 !important;
    }

    .my-quill-editor .ql-toolbar .ql-picker-label::before {
        color: var(--sr-color-white) !important;
    }

    /* =========================
       MEDIA QUERIES   
       ========================= */
    @media (max-width: 991.98px) {
        .mega-dropdown {
            min-width: 300px;
        }

        .navbar .input-group {
            margin: var(--sr-space-sm) 0;
        }
    }

    @media (max-width: 767.98px) {
        .mega-dropdown {
            min-width: 280px;
        }

        .mega-dropdown .row {
            flex-direction: column;
        }

        .mega-dropdown .col-6 {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .main-header .container-fluid {
            flex-direction: column;
            gap: var(--sr-space-md);
        }
    }
}

/* =========================================================
   UTILITIES
   ========================================================= */
@layer utilities {
    .sr-text-center {
        text-align: center;
    }

    .sr-mb-md {
        margin-bottom: var(--sr-space-md);
    }
}

/* =========================================================
   PAGES (last by design)
   ========================================================= */
@layer pages {

    /* =========================
       PRODUCT INDEX PAGE
       ========================= */
    .sr-product-index .filters-sidebar {
        background-color: var(--sr-color-light);
        padding: var(--sr-space-md);
        border-radius: var(--sr-radius-sm);
        font-size: 0.9rem;
    }

    .sr-product-index .filters-sidebar h6 {
        color: #232f3e;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--sr-color-border);
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .sr-product-index .form-check {
        margin-bottom: 5px;
    }

    .sr-product-index .form-check-label {
        color: #007185;
        cursor: pointer;
    }

    .sr-product-index .form-check-label:hover {
        color: #c7511f;
        text-decoration: underline;
    }


    /* =========================
       PRODUCTS GRID
       ========================= */
    .sr-product-index .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .sr-product-index .product-item {
        background: var(--sr-color-white);
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-sm);
        padding: var(--sr-space-md);
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: box-shadow 0.2s ease;
    }

    .sr-product-index .product-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .sr-product-index .product-info {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .sr-product-index .product-image {
        text-align: center;
        margin-bottom: 12px;
    }

    .sr-product-index .product-image img {
        width: 100%;
        max-width: 150px;
        height: 150px;
        object-fit: contain;
        border-radius: 4px;
    }

    .sr-product-index .no-image {
        width: 150px;
        height: 150px;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        margin: 0 auto;
        color: #999;
        font-size: 2rem;
    }


    /* =========================
       PRODUCT META
       ========================= */
    .sr-product-index .product-title a {
        color: #007185;
        text-decoration: none;
        font-size: 0.95rem;
        line-height: 1.3;
        display: block;
        margin-bottom: 8px;
    }

    .sr-product-index .product-title a:hover {
        color: #c7511f;
        text-decoration: underline;
    }

    .sr-product-index .product-description {
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 8px;
        line-height: 1.3;
        min-height: 3.2em;
    }

    .sr-product-index .product-rating {
        margin-top: auto;
        font-size: 0.85rem;
    }

    .sr-product-index .stars {
        color: #ff9f00;
    }

    .sr-product-index .product-price {
        margin: 8px 0 4px;
    }

    .sr-product-index .price-current {
        font-size: 1.1rem;
        font-weight: bold;
        color: #b12704;
    }

    .sr-product-index .product-actions {
        margin-top: 8px;
    }

    .sr-product-index .product-actions .quantity-input {
        max-width: 60px;
    }

    .sr-product-index .btn-add-to-cart {
        font-size: 0.85rem;
        padding: 4px 8px;
    }


    /* =========================
       RESPONSIVE (PAGE-LOCAL)
       ========================= */
    @media (max-width: 768px) {
        .sr-product-index .products-grid {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 15px;
        }

        .sr-product-index .col-lg-2.col-md-3 {
            order: 2;
        }

        .sr-product-index .col-lg-10.col-md-9 {
            order: 1;
        }
    }




    /* =========================================================
       PRODUCT DETAIL PAGE
       ========================================================= */
    .sr-product-detail .breadcrumb-nav a {
        color: #007185;
    }

    .sr-product-detail .breadcrumb-nav a:hover {
        color: #c7511f;
        text-decoration: underline;
    }


    /* =========================
       PRODUCT IMAGES
       ========================= */
    .sr-product-detail .product-images-section {
        display: flex;
        gap: 15px;
    }

    .sr-product-detail .thumbnails-column {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 60px;
    }

    .sr-product-detail .thumbnail-item {
        border: 2px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        padding: 2px;
        transition: border-color 0.2s;
    }

    .sr-product-detail .thumbnail-item:hover,
    .sr-product-detail .thumbnail-item.active {
        border-color: #007185;
    }

    .sr-product-detail .thumbnail-item img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        border-radius: 2px;
    }

    .sr-product-detail .main-image-container {
        flex: 1;
        text-align: center;
    }

    .sr-product-detail .main-image {
        max-width: 100%;
        max-height: 500px;
        object-fit: contain;
        border-radius: 8px;
    }

    .sr-product-detail .no-image {
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--sr-color-light);
        border-radius: 8px;
    }


    /* =========================
       PRODUCT INFO
       ========================= */
    .sr-product-detail .product-title {
        font-size: 1.5rem;
        color: #0f1111;
        font-weight: 400;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .sr-product-detail .product-rating .stars {
        color: #ff9f00;
        font-size: 1rem;
    }

    .sr-product-detail .price-section .current-price {
        font-size: 1.8rem;
        color: #b12704;
        font-weight: 400;
    }

    .sr-product-detail .section-title {
        font-size: 1.1rem;
        font-weight: bold;
        color: #0f1111;
        margin-bottom: 10px;
    }

    .sr-product-detail .product-description {
        font-size: 0.9rem;
        line-height: 1.5;
        color: #565959;
    }


    /* =========================
       DETAILS TABLE
       ========================= */
    .sr-product-detail .details-table {
        width: 100%;
        font-size: 0.9rem;
    }

    .sr-product-detail .details-table td {
        padding: 4px 8px 4px 0;
        border: none;
    }

    .sr-product-detail .detail-label {
        color: #565959;
        width: 100px;
    }

    .sr-product-detail .detail-value {
        color: #0f1111;
    }

    .sr-product-detail .availability-status {
        color: #007600;
        font-weight: 500;
    }


    /* =========================
       PURCHASE SIDEBAR
       ========================= */
    .sr-product-detail .purchase-sidebar {
        position: sticky;
        top: 20px;
    }

    .sr-product-detail .purchase-box {
        background: var(--sr-color-white);
        border-color: #d5d9d9;
    }

    .sr-product-detail .sidebar-price .price-current {
        font-size: 1.5rem;
        color: #b12704;
        font-weight: 400;
    }

    .sr-product-detail .delivery-info {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .sr-product-detail .cart-buttons .btn-warning {
        background-color: #ffd814;
        border-color: #fcd200;
        color: #0f1111;
        font-weight: 400;
    }

    .sr-product-detail .cart-buttons .btn-warning:hover {
        background-color: #f7ca00;
        border-color: #f2c200;
    }

    .sr-product-detail .additional-options .option-line {
        margin-bottom: 2px;
        font-size: 0.85rem;
    }

    .sr-product-detail .gift-options {
        background: #f7f8f8;
        border-color: #d5d9d9;
    }


    /* =========================
       TABS & REVIEWS
       ========================= */
    .sr-product-detail .nav-tabs .nav-link {
        color: #007185;
        border: none;
        background: none;
        font-weight: 400;
    }

    .sr-product-detail .nav-tabs .nav-link.active {
        color: #c7511f;
        border-bottom: 2px solid #c7511f;
        background: none;
    }

    .sr-product-detail .review-item .stars {
        color: #ff9f00;
    }

    .sr-product-detail .review-title {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .sr-product-detail .review-text {
        font-size: 0.9rem;
        color: #565959;
        margin-bottom: 8px;
    }


    /* =========================
       RESPONSIVE (PAGE-LOCAL)
       ========================= */
    @media (max-width: 768px) {
        .sr-product-detail .product-images-section {
            flex-direction: column;
        }

        .sr-product-detail .thumbnails-column {
            flex-direction: row;
            width: 100%;
            justify-content: center;
        }

        .sr-product-detail .purchase-sidebar {
            position: static;
            margin-top: 30px;
        }
    }

    /* =========================================================
    CART PAGE
    ========================================================= */
    .sr-cart .cart-item {
        transition: box-shadow 0.3s ease;
    }

    .sr-cart .cart-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .sr-cart .quantity-input:disabled {
        opacity: 0.6;
    }


    /* =========================
       ORDER SUMMARY
       ========================= */
    .sr-cart .order-summary-card .card-header {
        background: linear-gradient(135deg, #007bff, #0056b3);
    }

    .sr-cart .order-summary-card .tax-amount,
    .sr-cart .order-summary-card .tax-label {
        font-size: 0.8rem;
    }

    .sr-cart .customer-benefits-active {
        border-color: #28a745;
    }


    /* =========================
       STICKY BEHAVIOUR (SCOPED)
       ========================= */
    .sr-cart .sticky-top {
        position: sticky;
        top: 0;
    }


    /* =========================
       RESPONSIVE (PAGE-LOCAL)
       ========================= */
    @media (max-width: 768px) {
        .sr-cart .cart-item .row > div {
            margin-bottom: 1rem;
        }

        .sr-cart .cart-item .row > div:last-child {
            margin-bottom: 0;
        }
    }



    /* =========================================================
       CHECKOUT PAGE
       ========================================================= */
    .sr-checkout .checkout-form .card {
        border: 1px solid var(--sr-color-border);
        margin-bottom: var(--sr-space-lg);
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .sr-checkout .checkout-form .card-header {
        background-color: var(--sr-color-light);
        border-bottom: 1px solid var(--sr-color-border);
        font-weight: 600;
    }

    .sr-checkout .checkout-form .card-header h4 {
        margin-bottom: 0;
        color: #495057;
    }


    /* =========================
       ORDER SUMMARY
       ========================= */
    .sr-checkout .order-summary {
        top: 20px;
    }

    .sr-checkout .order-summary .card {
        border: 1px solid var(--sr-color-border);
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }


    /* =========================
       CART ITEMS (CHECKOUT)
       ========================= */
    .sr-checkout .item-image {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: var(--sr-radius-sm);
        border: 1px solid var(--sr-color-border);
    }

    .sr-checkout .cart-item {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: var(--sr-space-md);
        margin-bottom: var(--sr-space-md);
    }

    .sr-checkout .cart-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .sr-checkout .item-details h6 {
        font-size: 0.9rem;
        font-weight: 600;
    }

    .sr-checkout .item-details p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    .sr-checkout .item-price {
        font-weight: 600;
        color: #28a745;
    }


    /* =========================
       STRIPE CARD ELEMENT
       ========================= */
    .sr-checkout #card-element {
        border: 1px solid #ced4da;
        border-radius: var(--sr-radius-sm);
        padding: 0.75rem;
        min-height: 40px;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .sr-checkout #card-element.StripeElement--focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .sr-checkout #card-element.StripeElement--invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }

    .sr-checkout #card-errors {
        margin-top: var(--sr-space-sm);
        font-size: 0.875rem;
    }


    /* =========================
       PAYMENT BUTTON
       ========================= */
    .sr-checkout #submit-button {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        border: none;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }

    .sr-checkout #submit-button:hover:not(:disabled) {
        background: linear-gradient(135deg, #218838 0%, #1ea880 100%);
        transform: translateY(-1px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .sr-checkout #submit-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }


    /* =========================
       SHIPPING METHODS
       ========================= */
    .sr-checkout .shipping-methods .form-check {
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-sm);
        padding: var(--sr-space-md);
        margin-bottom: var(--sr-space-xs);
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    .sr-checkout .shipping-methods .form-check:hover {
        border-color: #86b7fe;
        background-color: #f8f9ff;
    }

    .sr-checkout .shipping-methods .form-check-input:checked + .form-check-label {
        color: var(--sr-color-primary);
        font-weight: 500;
    }

    .sr-checkout .shipping-methods .form-check:has(.form-check-input:checked) {
        border-color: var(--sr-color-primary);
        background-color: #f8f9ff;
        box-shadow: 0 0 0 0.125rem rgba(13, 110, 253, 0.1);
    }


    /* =========================
       PROMO CODE
       ========================= */
    .sr-checkout .promo-code .input-group {
        border-radius: var(--sr-radius-sm);
        overflow: hidden;
    }

    .sr-checkout .promo-code .form-control {
        border-right: 0;
    }

    .sr-checkout .promo-code .btn {
        border-left: 0;
        background-color: var(--sr-color-light);
        border-color: #ced4da;
        color: #495057;
        font-weight: 500;
    }


    /* =========================
       ORDER TOTALS
       ========================= */
    .sr-checkout .order-totals {
        padding: var(--sr-space-md);
        border-radius: var(--sr-radius-sm);
    }

    .sr-checkout .order-totals .tax-amount,
    .sr-checkout .order-totals .tax-label {
        font-size: 0.8rem !important;
    }

    .sr-checkout .order-totals .d-flex:last-child {
        font-size: 1.1rem;
    }


    /* =========================
       FREE SHIPPING NOTICE
       ========================= */
    .sr-checkout .free-shipping-notice {
        border-left: 4px solid #28a745;
        background-color: #d4edda;
        color: #000;
    }

    .sr-checkout .free-shipping-notice i {
        color: #28a745;
        margin-right: var(--sr-space-xs);
    }


    /* =========================
       STICKY / UTILITIES (SCOPED)
       ========================= */
    .sr-checkout .sticky-top {
        z-index: 1020;
    }


    /* =========================
       RESPONSIVE (PAGE-LOCAL)
       ========================= */
    @media (max-width: 991.98px) {
        .sr-checkout .order-summary {
            position: static;
            margin-top: 2rem;
        }

        .sr-checkout .checkout-form {
            margin-bottom: 2rem;
        }
    }

    @media (max-width: 767.98px) {
        .sr-checkout .item-image {
            width: 50px;
            height: 50px;
        }

        .sr-checkout .cart-item {
            font-size: 0.9rem;
        }

        .sr-checkout #submit-button {
            font-size: 1rem;
            padding: 0.75rem 1rem;
        }
    }

    @media (max-width: 575.98px) {
        .sr-checkout .order-totals {
            font-size: 0.9rem;
        }

        .sr-checkout .shipping-methods .form-check-label {
            flex-direction: column;
            align-items: flex-start;
        }
    }


    /* ==== IDENTITY AREA (.sr-identity) ==== */
    /* =========================================================
       IDENTITY AREA (.sr-identity)
       Source: identity-pages.css
       ========================================================= */
    /* v1.0.0 */
    .sr-identity .register-container {
        background: linear-gradient(135deg, var(--sr-identity-bg-dark) 0%, var(--sr-identity-bg-panel) 50%, var(--sr-identity-bg-dark) 100%);
        min-height: 100vh;
    }

    .sr-identity .register-brand-section {
        background: linear-gradient(135deg, var(--sr-identity-primary) 0%, var(--sr-identity-primary-dark) 100%);
        position: relative;
    }

    .sr-identity .register-brand-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='dartboard' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'><circle cx='10' cy='10' r='1' fill='rgba(255,255,255,0.1)'/></pattern></defs><rect width='100' height='100' fill='url(%23dartboard)'/></svg>");
        opacity: 0.3;
    }

    .sr-identity .register-brand-section > * {
        position: relative;
        z-index: 2;
    }

    .sr-identity .brand-icon {
        animation: sr-identity-pulse 2s infinite;
    }

    @keyframes sr-identity-pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            transform: scale(1);
        }
    }

    .sr-identity .feature-item {
        transition: transform 0.3s ease;
    }

    .sr-identity .feature-item:hover {
        transform: translateX(10px);
    }

    .sr-identity .register-form-section {
        background: var(--sr-identity-bg-panel) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* IMPORTANT: this was global; now scoped to Identity only */
    .sr-identity .form-control:focus {
        border-color: var(--sr-identity-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
        background-color: var(--sr-identity-bg-input) !important;
        color: var(--sr-identity-text-light) !important;
    }

    .sr-identity .form-floating > .form-control:focus ~ label,
    .sr-identity .form-floating > .form-control:not(:placeholder-shown) ~ label {
        color: var(--sr-identity-primary) !important;
    }

    /* IMPORTANT: this was global; now scoped */
    .sr-identity .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
        background: linear-gradient(135deg, var(--sr-identity-primary-dark), #004085) !important;
    }

    /* IMPORTANT: this was global; now scoped */
    .sr-identity .shadow-lg {
        box-shadow: 0 2rem 3rem rgba(0, 123, 255, 0.1) !important;
    }

    @media (max-width: 991.98px) {
        .sr-identity .register-brand-section {
            background: linear-gradient(45deg, var(--sr-identity-primary) 0%, var(--sr-identity-primary-dark) 100%);
            min-height: 300px;
        }

        .sr-identity .register-form-section {
            border-left: none;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--sr-identity-text-light) !important;
        }

        .sr-identity .features-list {
            display: none;
        }
    }

    @media (max-width: 575.98px) {
        /* IMPORTANT: was global .display-5; now scoped */
        .sr-identity .display-5 {
            font-size: 2rem !important;
        }

        .sr-identity .register-brand-section,
        .sr-identity .login-brand-section {
            padding: 2rem 1rem !important;
            min-height: 250px;
        }

        .sr-identity .register-form-section,
        .sr-identity .login-form-section {
            padding: 2rem 1rem !important;
        }
    }

    /* =========================
       LOGIN PAGE
       ========================= */
    .sr-identity .login-container {
        background: linear-gradient(135deg, var(--sr-identity-bg-dark) 0%, var(--sr-identity-bg-panel) 50%, var(--sr-identity-bg-dark) 100%);
        min-height: 100vh;
        color: var(--sr-identity-text-light) !important;
    }

    .sr-identity .login-brand-section {
        background: linear-gradient(135deg, var(--sr-identity-success) 0%, var(--sr-identity-success-alt) 100%);
        position: relative;
    }

    .sr-identity .login-brand-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='target' x='0' y='0' width='25' height='25' patternUnits='userSpaceOnUse'><circle cx='12.5' cy='12.5' r='2' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='0.5'/><circle cx='12.5' cy='12.5' r='5' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/></pattern></defs><rect width='100' height='100' fill='url(%23target)'/></svg>");
        opacity: 0.4;
    }

    .sr-identity .login-brand-section > * {
        position: relative;
        z-index: 2;
    }

    .sr-identity .login-form-section {
        background: var(--sr-identity-bg-panel) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--sr-identity-text-light) !important;
    }

    .sr-identity .welcome-back-icon {
        animation: sr-identity-bounce 2s infinite;
    }

    @keyframes sr-identity-bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-10px);
        }
        60% {
            transform: translateY(-5px);
        }
    }

    .sr-identity .benefit-item {
        transition: all 0.3s ease;
        opacity: 0.8;
    }

    .sr-identity .benefit-item:hover {
        opacity: 1;
        transform: translateX(10px);
    }

    /* IMPORTANT: was global; now scoped */
    .sr-identity .form-check-input:checked {
        background-color: var(--sr-identity-primary);
        border-color: var(--sr-identity-primary);
    }

    .sr-identity .auth-links {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 1rem;
        margin-top: 1rem;
    }

    .sr-identity .auth-links a {
        color: #6c757d;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .sr-identity .auth-links a:hover {
        color: var(--sr-identity-primary);
        text-decoration: underline;
    }

    @media (max-width: 991.98px) {
        .sr-identity .login-brand-section {
            background: linear-gradient(45deg, var(--sr-identity-success) 0%, var(--sr-identity-success-alt) 100%);
            min-height: 300px;
        }

        .sr-identity .login-form-section {
            border-left: none;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--sr-identity-text-light);
        }

        .sr-identity .benefits-list {
            display: none;
        }
    }



    /* ==== ADMIN AREA (.sr-admin) ==== */


}