/* =========================================================
SITE.CSS – MASTER STYLESHEET
========================================================= */
/* Declare layer order first */
@layer vendor, reset, base, layout, components, utilities, pages;
/* Import local vendor styles so production serves only app-hosted assets */
@import url("/lib/bootstrap/css/bootstrap.min.css") layer(vendor);
@import url("/lib/bootstrap-icons/font/bootstrap-icons.min.css") layer(vendor);
@import url("/lib/font-awesome/css/all.min.css") layer(vendor);
:root {
--srl-bg: #ffffff;;
--srl-bg-dark: #6c757d;
--srl-bg-one: rgba(99, 102, 241, .28);
--srl-bg-two: rgba(34, 211, 238, .18);
--srl-card: #ffffff;
--srl-border: #dee2e6;
--srl-text: #212529;
--srl-text-dark: #212529;
--srl-text-light: #ffffff;
--srl-muted: #6c757d;
--sr-color-bg: var(--srl-bg);
--sr-color-text: var(--srl-text);
--sr-color-border: var(--srl-bg);
--sr-color-white: rgba(255, 255, 255, 0.92); /* “white” in your dark theme */
--sr-color-light: rgba(255, 255, 255, 0.06); /* “light surface” in dark theme */
--sr-color-primary: #6366f1; /* matches holding page glow tone */
--sr-color-light: #f8f9fa;
--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: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--sr-space-lg: 1.5rem;
/* MAIN CONTENT */
--sr-content-color-bg: #FFFFFF;
--sr-content-color-text: var(--sr-color-dark);
--sr-content-color-border: var(--srl-border);
--sr-content-color-white: rgba(255, 255, 255, 0.92); /* “white” in your dark theme */
--sr-content-color-light: rgba(255, 255, 255, 0.06); /* “light surface” in dark theme */
/* IDENTITY THEME TOKENS */
/* Identity brand colours */
--sr-identity-primary: #6366f1;
--sr-identity-primary-dark: #4f46e5;
--sr-identity-success: #22c55e;
--sr-identity-success-alt: #10b981;
/* Identity surfaces */
--sr-identity-bg-dark: var(--srl-bg);
--sr-identity-bg-panel: rgba(0, 0, 0, .18);
--sr-identity-bg-input: rgba(255, 255, 255, .06);
/* Identity text */
--sr-identity-text-light: var(--srl-text);
--sr-identity-text-muted: var(--srl-muted);
/* Identity borders / effects */
--sr-identity-border-subtle: rgba(255, 255, 255, .10);
--sr-identity-focus-ring: rgba(99, 102, 241, .25);
/* Override Bootstrap's Variables */
--bs-secondary-color: var(--srl-muted);
--bs-secondary-color-rgb: 255, 0, 0;
--bs-nav-link-color: var(--srl-text);
--bs-btn-border-color: var(--srl-border);
}
/* RESET */
@layer reset {
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
}
/* BASE */
@layer base {
body, .srl-body {
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--srl-text);
/*background: radial-gradient(1100px 700px at 10% 10%, var(--srl-bg-one), transparent 60%),*/
/*radial-gradient(900px 600px at 90% 30%, var(--srl-bg-two), transparent 55%),*/
/*linear-gradient(180deg, var(--srl-bg), var(--srl-bg-2));*/
min-height: 100vh;
}
}
/* LAYOUT */
@layer layout {
}
/* =========================================================
COMPONENTS
========================================================= */
@layer components {
.srl-body .card {
height: auto;
display: flex;
align-items: center;
justify-content: center;
background: var(--srl-card);
border: 1px solid var(--srl-border);
border-radius: 16px;
color: var(--srl-muted);
/*backdrop-filter: blur(12px);*/
/*-webkit-backdrop-filter: blur(12px);*/
}
.srl-body .card-body, .srl-body .card-header {
width: 100%;
}
.footer-container a {
color: var(--srl-text);
text-decoration: none;
transition: color 0.3s ease;
}
.sr-pagination .page-link {
color: var(--sr-color-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.srl-body .form-select option {
color: var(--sr-color-dark);
}
.srl-body .modal {
color: var(--sr-color-dark) !important;
}
/* =========================================================
LEGACY HEADER: _MainMenu.cshtml
Retained for future reuse. Do not couple the live header to these classes.
========================================================= */
.main-header.navbar {
background: rgba(0, 0, 0, .10) !important;
border-bottom: 1px solid rgba(255, 255, 255, .05);
box-shadow: 0 10px 35px rgba(0, 0, 0, .25);
}
.main-header.bg-dark {
background: rgba(0, 0, 0, .10) !important;
}
.main-header .navbar-brand {
display: inline-flex;
align-items: center;
gap: .75rem;
color: var(--srl-text) !important;
text-decoration: none;
}
.main-header .navbar-brand:hover {
color: var(--srl-text) !important;
}
.main-header .brand-text-container {
display: inline-flex;
flex-direction: column;
line-height: 1.05;
}
.main-header .brand-text-main {
font-weight: 800 !important;
letter-spacing: .04em !important;
color: var(--srl-text);
}
.main-header .brand-text-sub {
font-size: .75rem;
letter-spacing: .02em;
color: var(--srl-muted);
}
/* Search bar: glass input group */
.main-header #searchForm .input-group {
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 10px 35px rgba(0, 0, 0, .15);
}
.main-header #searchForm .form-control {
background: transparent;
color: var(--srl-text);
border: 0;
}
.main-header #searchForm .form-control::placeholder {
color: rgba(255, 255, 255, .60);
}
.main-header #searchForm .form-control:focus {
box-shadow: none;
outline: none;
}
.main-header #searchForm .input-group > :is(select, .btn, .input-group-text) {
background: rgba(255, 255, 255, .08);
border: 0;
color: var(--srl-text);
}
.main-header #searchCategory.search-category-select {
width: 96px;
max-width: 96px;
flex: 0 0 96px;
padding-right: 1.7rem;
padding-left: 0.7rem;
border: 0;
border-right: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px 0 0 999px;
color: var(--srl-text) !important;
background-color: rgba(255, 255, 255, .10);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(255,255,255,0.82)' d='M3.2 5.8a.75.75 0 0 1 1.06 0L8 9.54l3.74-3.74a.75.75 0 1 1 1.06 1.06L8.53 11.13a.75.75 0 0 1-1.06 0L3.2 6.86a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 14px 14px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.main-header #searchCategory.search-category-select:focus {
color: var(--srl-text) !important;
border-right-color: rgba(255, 255, 255, .2);
box-shadow: none;
outline: none;
}
.main-header #searchCategory.search-category-select option {
color: var(--srl-text);
background-color: #111a32;
}
.main-header #searchButton.btn-warning {
background: rgba(255, 255, 255, .10);
border: 0;
color: var(--srl-text);
}
.main-header #searchButton.btn-warning:hover {
background: rgba(255, 255, 255, .14);
}
.main-header .btn-outline-light,
.main-header .btn-outline-warning {
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .08);
color: var(--srl-text) !important;
}
.main-header .btn-outline-light:hover,
.main-header .btn-outline-warning:hover {
background: rgba(255, 255, 255, .12) !important;
border-color: rgba(255, 255, 255, .18);
color: #1a1a1a !important;
}
.main-header .cart-badge {
border: 1px solid rgba(0, 0, 0, .35);
}
.main-header .main-header-actions .btn,
.main-header .main-header-actions .btn i,
.main-header .main-header-actions .btn small,
.main-header .main-header-actions .btn strong,
.main-header .main-header-actions .cart-button-text {
color: var(--srl-text) !important;
}
.main-header .main-header-actions .btn:hover,
.main-header .main-header-actions .btn:focus {
background: rgba(255, 255, 255, .08) !important;
color: #1a1a1a !important;
}
.main-header .main-header-actions .btn strong {
font-weight: 700;
}
.main-header .main-header-actions .btn small {
color: var(--srl-muted) !important;
}
.main-header .header-login-icon {
color: var(--srl-text);
}
.main-header .mega-dropdown.dropdown-menu {
min-width: 420px;
padding: 0;
border-radius: 22px;
background: rgba(0, 0, 0, .20);
border: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 20px 60px rgba(0, 0, 0, .40);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: var(--srl-text);
}
.main-header .mega-dropdown .dropdown-header {
color: var(--srl-muted);
font-weight: 700;
letter-spacing: .02em;
}
.main-header .mega-dropdown .dropdown-item {
color: var(--srl-text);
padding: .65rem .9rem;
}
.main-header .mega-dropdown .dropdown-item:hover {
background: rgba(255, 255, 255, .08);
color: var(--srl-text);
}
.main-header .mega-dropdown .dropdown-divider {
border-top-color: rgba(255, 255, 255, .10);
}
@media (max-width: 991.98px) {
.main-header .container-fluid {
align-items: center;
}
.main-header .navbar-brand {
margin-right: 0;
}
.main-header .navbar-brand img {
width: 56px;
height: auto;
}
.main-header .main-header-actions {
margin-left: auto;
gap: 0.25rem;
}
.main-header .main-header-actions .btn {
padding: 0.35rem 0.45rem;
}
.main-header .main-header-actions small {
display: none;
}
.main-header .main-header-actions strong {
font-size: 0.85rem;
line-height: 1;
white-space: nowrap;
}
.main-header .main-header-search-wrap {
flex: 1 1 auto;
min-width: 180px;
margin: 0 .5rem;
}
.main-header #searchForm,
.main-header #searchForm .input-group {
max-width: 420px;
width: 100%;
}
}
@media (max-width: 575.98px) {
.main-header .container-fluid {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 0.45rem;
}
.main-header .navbar-brand img {
width: 44px;
}
.main-header .main-header-search-wrap {
min-width: 0;
margin: 0;
}
.main-header #searchForm .input-group {
border-radius: 14px;
}
.main-header #searchInput.form-control {
font-size: 0.95rem;
padding-top: 0.35rem;
padding-bottom: 0.35rem;
}
.main-header #searchCategory.search-category-select {
width: 64px;
max-width: 64px;
flex: 0 0 64px;
font-size: 0.9rem;
padding-left: 0.5rem;
padding-right: 1.2rem;
background-position: right 0.32rem center;
background-size: 12px 12px;
}
.main-header .main-header-actions .btn {
padding: 0.25rem 0.35rem;
}
.main-header .main-header-actions .btn small,
.main-header .main-header-actions strong {
display: none;
}
.main-header .header-login-icon {
margin-right: 0;
}
}
/* =========================================================
SHARED HEADER: live header used by _Layout.cshtml and _AdminLayout.cshtml
========================================================= */
header {
position: relative;
overflow: visible;
z-index: 2000;
color: var(--srl-text);
border-bottom: 1px solid rgba(255, 255, 255, .08);
backdrop-filter: blur(12px);
}
header::before {
content: "";
position: absolute;
inset: -60px auto auto -80px;
width: 240px;
height: 240px;
border-radius: 999px;
}
header::after {
content: "";
position: absolute;
inset: auto -100px -110px auto;
width: 280px;
height: 280px;
border-radius: 999px;
}
.header-row {
position: relative;
z-index: 2;
display: flex;
align-items: center;
min-height: 44px;
padding: 0.3rem 0.5rem;
}
.header-row-top {
z-index: 30;
}
.header-row-search {
z-index: 20;
}
.header-row-nav {
z-index: 10;
}
.header-row:first-of-type {
border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.header-section-left {
flex: 0 0 auto;
min-width: 120px;
}
.header-section-middle {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.header-section-right {
flex: 0 0 auto;
min-width: 120px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.header-row-top {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
column-gap: 0.5rem;
}
.header-row-search {
padding-top: 0.1rem;
padding-bottom: 0.35rem;
}
.header-row-nav {
padding-top: 0.15rem;
padding-bottom: 0.45rem;
}
.header-row-nav .header-section-middle {
min-width: 0;
justify-content: flex-start;
}
.header-menu-slot,
.header-actions-slot {
min-width: auto;
}
.header-brand-slot {
min-width: 0;
justify-content: center;
}
.header-search-slot {
display: none;
min-width: 0;
flex: 1 1 auto;
}
.mobile-logo {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-decoration: none;
color: var(--srl-text);
min-width: 126px;
line-height: 1;
}
.mobile-logo img {
display: block;
width: min(220px, 100%);
height: auto;
}
.header-menu-bottom {
justify-content: space-between;
display: flex;
gap: 0.95rem;
}
.header-menu-rail {
width: 100%;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding-inline: 0.1rem;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.header-menu-bottom::-webkit-scrollbar {
display: none;
}
.header-menu-bottom a {
color: var(--srl-text);
text-decoration: none;
font-weight: 600;
border-bottom: 2px solid transparent;
}
.header-menu-bottom a:hover {
color: var(--srl-text);
border-bottom: 2px solid rgba(255, 255, 255, .45);
background: transparent;
}
.mobile-wordmark {
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.04em;
text-transform: lowercase;
color: var(--srl-text);
}
.mobile-wordmark-smile {
width: 72px;
height: 6px;
margin-top: 1px;
margin-left: 8px;
border-bottom: 2px solid rgba(255, 255, 255, .55);
border-radius: 0 0 28px 28px;
opacity: 0.95;
}
.mobile-account {
color: var(--srl-text);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
margin-right: 0.1rem;
max-width: 86px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-account:hover {
color: var(--srl-text);
text-decoration: none;
}
.mobile-icon-btn {
color: var(--srl-text) !important;
background: transparent;
border: 0;
padding: 0.25rem 0.35rem;
font-size: 1.18rem;
line-height: 1;
border-radius: 4px;
}
.mobile-icon-btn:hover,
.mobile-icon-btn:focus {
color: var(--srl-text) !important;
background: rgba(255, 255, 255, .08);
}
.header-searchbar {
position: relative;
z-index: 2;
width: 100%;
padding: 0.15rem 0.5rem 0.2rem;
}
@media (max-width: 380px) {
.mobile-wordmark {
font-size: 1.58rem;
}
.mobile-wordmark-smile {
width: 64px;
margin-left: 7px;
}
}
.header-searchbar .input-group {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--srl-border);
background: var(--srl-card);
min-height: 42px;
box-shadow: 0 10px 35px rgba(0, 0, 0, .18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.header-searchbar .form-control {
border: 0;
font-size: 1.02rem;
padding: 0.45rem 0.75rem;
background: transparent;
color: var(--srl-text);
}
.header-searchbar .form-control::placeholder {
color: var(--srl-muted);
}
.header-searchbar .form-control:focus {
box-shadow: none;
}
.mobile-search-btn {
border: 0;
background: rgba(255, 255, 255, .12);
color: var(--srl-text);
width: 50px;
padding: 0;
font-size: 1.25rem;
}
.mobile-search-btn:hover,
.mobile-search-btn:focus {
background: rgba(255, 255, 255, .18);
color: var(--srl-text);
}
.mobile-location {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.6rem 0.42rem;
background: rgba(255, 255, 255, .06);
color: var(--srl-text);
font-size: 0.85rem;
font-weight: 600;
}
.mobile-location-chevron {
margin-left: auto;
font-size: 0.72rem;
opacity: .85;
}
.header-side-drawer {
width: min(84vw, 360px);
background: var(--srl-card);
color: var(--srl-text);
border-right: 1px solid rgba(255, 255, 255, .12);
backdrop-filter: blur(14px);
}
.header-side-drawer-header {
background: rgba(255, 255, 255, .06);
color: var(--srl-text);
min-height: 62px;
padding: 0.9rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.header-side-drawer-account {
background: rgba(255, 255, 255, .03);
padding: 0 1rem 1rem;
}
.header-side-drawer-account a {
color: var(--srl-text);
text-decoration: none;
font-weight: 700;
font-size: 1.04rem;
}
.header-side-drawer-section {
display: flex;
flex-direction: column;
background: transparent;
border-top: 1px solid rgba(255, 255, 255, .10);
}
.header-side-drawer-section a {
color: var(--srl-text);
text-decoration: none;
padding: 0.92rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, .08);
font-size: 1.02rem;
font-weight: 500;
}
.header-side-drawer-section a:hover {
background: rgba(255, 255, 255, .08);
}
.header-side-drawer-feature {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
}
.header-side-drawer-title {
padding: 0.9rem 1rem 0.55rem;
font-size: 1.72rem;
font-weight: 700;
line-height: 1;
color: var(--srl-text);
background: transparent;
border-top: 4px solid rgba(255, 255, 255, .10);
}
.cart-badge-mini {
font-size: 0.6rem;
min-width: 1rem;
line-height: 1rem;
background: rgba(255, 255, 255, .14);
color: var(--srl-text);
border: 1px solid rgba(255, 255, 255, .18);
}
.header-support-slot {
display: none;
}
.site-header-actions {
gap: 0.35rem;
}
.site-header-actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.45rem 0.6rem;
white-space: nowrap;
flex-wrap: nowrap;
line-height: 1;
}
.site-header-actions .cart-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1rem;
line-height: 1;
}
.site-header-actions .dropdown {
display: flex;
align-items: center;
position: relative;
z-index: 2600;
}
.site-header-account-toggle {
gap: 0.4rem;
}
.site-header-account-toggle::after {
margin-left: 0.1rem;
}
.site-header-account-menu {
min-width: 220px;
margin-top: 0.35rem;
border-radius: 16px;
background: rgba(255, 255, 255, .96);
border: 1px solid rgba(15, 23, 42, .08);
box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
z-index: 3000;
}
.site-header-account-menu .dropdown-item,
.site-header-account-menu .dropdown-item:focus,
.site-header-account-menu .dropdown-item:hover {
color: #1f2937;
}
.site-header-account-menu .dropdown-item:hover,
.site-header-account-menu .dropdown-item:focus {
background: rgba(15, 23, 42, .06);
}
.site-header-account-menu .dropdown-divider {
border-top-color: rgba(15, 23, 42, .08);
}
.site-header-actions .btn span:not(.cart-badge) {
display: none !important;
}
.header-side-drawer-link-button {
width: 100%;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, .08);
background: transparent;
color: var(--srl-text);
text-align: left;
padding: 0.92rem 1rem;
font-size: 1.02rem;
font-weight: 500;
}
.header-side-drawer-link-button:hover,
.header-side-drawer-link-button:focus {
background: rgba(255, 255, 255, .08);
color: var(--srl-text);
}
@media (min-width: 768px) {
.header-searchbar {
padding: 0.35rem 0.9rem 0.5rem;
}
.header-searchbar form {
max-width: 960px;
margin: 0 auto;
}
.header-menu-bottom {
gap: 1.1rem;
}
.mobile-logo img {
width: min(260px, 100%);
}
.mobile-location {
padding: 0.45rem 0.95rem 0.5rem;
}
.header-section-left,
.header-section-right {
min-width: 150px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.header-row-top {
grid-template-columns: minmax(0, auto) auto;
align-items: center;
}
.header-brand-slot {
justify-content: flex-start;
min-width: 0;
}
.header-actions-slot,
.header-section-right {
min-width: auto;
}
.mobile-logo img {
width: min(220px, 100%);
}
.site-header-actions {
gap: 0.25rem;
flex-wrap: nowrap;
}
.site-header-actions .btn {
padding: 0.35rem 0.45rem;
}
}
@media (min-width: 992px) {
header {
box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.header-row-top {
display: grid;
align-items: center;
grid-template-columns: auto auto minmax(360px, 1fr) auto;
gap: 1rem;
}
.header-row {
min-height: 52px;
}
.header-menu-slot {
display: flex;
min-width: auto;
}
.header-brand-slot {
justify-content: flex-start;
flex: 0 0 auto;
min-width: auto;
}
.header-search-slot {
display: flex;
align-items: center;
min-width: 0;
}
.header-actions-slot {
min-width: max-content;
flex: 0 0 auto;
}
.mobile-wordmark {
font-size: 1.95rem;
}
.mobile-wordmark-smile {
width: 80px;
}
.header-row-top .header-searchbar {
padding: 0;
min-width: 0;
}
.header-row-top .header-searchbar form {
width: 100%;
margin: 0;
max-width: none;
}
.header-searchbar {
padding: 0.35rem 1.25rem 0.55rem;
}
.header-searchbar form {
max-width: 1120px;
}
.header-row-search {
display: none;
}
.mobile-logo img {
width: min(260px, 100%);
}
.header-menu-bottom {
justify-content: center;
overflow-x: visible;
white-space: normal;
padding: 0.55rem 1.25rem 0.6rem;
}
.header-support-slot {
display: flex;
}
.mobile-location {
justify-content: center;
padding: 0.45rem 1.25rem 0.5rem;
}
.mobile-location-chevron {
margin-left: 0.4rem;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.mobile-logo img {
width: min(220px, 100%);
}
.header-search-slot {
flex: 1 1 320px;
min-width: 220px;
}
.header-row-top .header-searchbar,
.header-row-top .header-searchbar form {
width: 100%;
max-width: none;
}
.site-header-actions .btn span:not(.cart-badge) {
display: none !important;
}
}
@media (min-width: 1200px) {
.mobile-logo img {
width: min(280px, 100%);
}
.header-search-slot {
flex: 1 1 520px;
min-width: 360px;
}
.header-row-top .header-searchbar,
.header-row-top .header-searchbar form {
width: 100%;
max-width: none;
}
.site-header-actions .btn span:not(.cart-badge) {
display: inline !important;
}
}
/* =========================================================
LEGACY SECONDARY NAV: paired with _MainMenu.cshtml
========================================================= */
.secondary-navbar {
background: rgba(0, 0, 0, .08) !important; /* override bg-light */
border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.secondary-navbar .nav-link {
color: rgba(255, 255, 255, .85) !important;
}
.secondary-navbar .nav-link:hover,
.secondary-navbar .nav-link:focus {
color: var(--srl-text) !important;
}
.secondary-navbar .dropdown-menu {
border-radius: 18px;
background: rgba(0, 0, 0, .22);
border: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 18px 55px rgba(0, 0, 0, .45);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.secondary-navbar .dropdown-item {
color: var(--srl-text);
}
.secondary-navbar .dropdown-item:hover {
background: rgba(255, 255, 255, .08);
}
.secondary-navbar .dropdown-divider {
border-top-color: rgba(255, 255, 255, .10);
}
/* Toggler icon contrast on dark-ish secondary bar */
.secondary-navbar .navbar-toggler {
border-color: rgba(255, 255, 255, .25);
}
.secondary-navbar .navbar-toggler-icon {
filter: invert(1) opacity(.85);
}
@media (max-width: 991.98px) {
.secondary-navbar .container-fluid {
align-items: flex-start;
}
.secondary-navbar .navbar-toggler {
margin: 0.2rem 0;
}
.secondary-navbar .navbar-collapse {
width: 100%;
margin-top: 0.6rem;
padding: 0.35rem 0;
border-top: 1px solid rgba(255, 255, 255, .10);
}
.secondary-navbar .navbar-nav {
width: 100%;
gap: 0.15rem;
}
.secondary-navbar .secondary-nav .nav-link {
padding: 0.65rem 0.5rem;
border-radius: 10px;
font-weight: 600;
}
.secondary-navbar .secondary-nav .nav-item.show > .nav-link {
background: rgba(255, 255, 255, .07);
}
.secondary-navbar .secondary-nav .dropdown-menu {
position: static;
float: none;
transform: none !important;
margin: 0 0 0.45rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .10);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255, 255, 255, .03);
}
.secondary-navbar .secondary-nav .dropdown-item {
padding: 0.5rem 0.9rem;
border-radius: 8px;
}
}
}
/* =========================================================
UTILITIES
========================================================= */
@layer utilities {
.srl-body .text-muted,
.srl-body small.text-muted,
.srl-body .text-body-secondary {
color: var(--srl-muted) !important;
}
}
/* =========================================================
PAGES (last by design)
========================================================= */
@layer pages {
/* =========================
PRODUCT INDEX PAGE
========================= */
.sr-product-index {
background: var(--srl-bg);
color: var(--srl-text);
}
.sr-product-index .border-bottom {
border-color: rgba(255, 255, 255, .12);
}
.sr-product-index .text-muted,
.sr-product-index small.text-muted {
color: var(--srl-muted);
}
.sr-product-index .product-index-toolbar {
border-radius: 14px;
padding: .65rem .7rem;
row-gap: .6rem;
}
.sr-product-index .product-index-search-form {
width: 100%;
max-width: 760px;
margin-inline: auto;
}
.sr-product-index .product-index-search-group {
/*border-radius: 10px;*/
overflow: hidden;
}
.sr-product-index .product-index-search-form .form-control {
min-width: 0;
border-right: 0;
}
/* =========================
TOOLBAR: SEARCH + FILTERS
========================= */
.sr-product-index .product-index-search-btn {
white-space: nowrap;
min-width: 102px;
}
.sr-product-index .product-index-clear-btn {
min-width: 38px;
padding-inline: .7rem;
}
.sr-product-index .product-index-filter-item,
.sr-product-index .product-index-filter-item-link {
flex: 0 0 auto !important;
white-space: nowrap;
}
.sr-product-index .product-index-filter-strip {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sr-product-index .product-index-filter-strip.product-index-filter-strip--dropdown-open {
overflow: visible;
}
.sr-product-index .product-index-filter-strip::-webkit-scrollbar {
display: none;
}
.sr-product-index .product-index-filter-strip > * {
flex: 0 0 auto !important;
width: auto !important;
max-width: none;
}
.sr-product-index .product-index-filter-strip .dropdown,
.sr-product-index .product-index-filter-strip > a,
.sr-product-index .product-index-filter-strip .btn,
.sr-product-index .product-index-filter-strip .dropdown-toggle {
display: inline-flex;
align-items: center;
flex: 0 0 auto !important;
white-space: nowrap;
}
.sr-product-index .filters-sidebar {
background: var(--srl-card);
border: 1px solid var(--srl-border);
color: var(--srl-text);
padding: var(--sr-space-md);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-size: 0.9rem;
}
.sr-product-index .filters-sidebar h6 {
color: var(--srl-text);
font-size: 0.95rem;
border-bottom: 1px solid rgba(255, 255, 255, .12);
padding-bottom: 5px;
margin-bottom: 10px;
}
.sr-product-index .form-check {
margin-bottom: 5px;
}
.sr-product-index .form-check-label {
color: var(--srl-text);
cursor: pointer;
}
.sr-product-index .form-check-label:hover {
color: var(--srl-text);
text-decoration: underline;
}
.sr-product-index .form-check-input {
background-color: var(--srl-bg);
border-color: var(--srl-border);
}
.sr-product-index .form-check-input:checked {
background-color: var(--sr-color-primary);
border-color: var(--sr-color-primary);
}
/* =========================
LEGACY GRID / FALLBACK CARD LAYOUT
Retained because the view still contains an inactive alternative markup block.
========================= */
.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(--srl-card);
border: 1px solid var(--srl-border);
border-radius: 16px;
padding: var(--sr-space-md);
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.sr-product-index .product-item:hover {
box-shadow: 0 16px 32px rgba(0, 0, 0, .26);
border-color: rgba(255, 255, 255, .24);
transform: translateY(-2px);
}
.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: rgba(255, 255, 255, .06);
border: 1px dashed rgba(255, 255, 255, .2);
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
margin: 0 auto;
color: var(--srl-muted);
font-size: 2rem;
}
/* =========================
ACTIVE PRODUCT CARD MEDIA
========================= */
.sr-product-index .product-card-image {
height: 240px;
overflow: hidden;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.sr-product-index .product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* =========================
PRODUCT CARD CONTENT
========================= */
.sr-product-index .product-title a {
color: var(--srl-text);
text-decoration: none;
font-size: 0.95rem;
line-height: 1.3;
display: block;
margin-bottom: 8px;
}
.sr-product-index .product-title a:hover {
color: #ffffff;
text-decoration: underline;
}
.sr-product-index .product-description {
font-size: 0.8rem;
color: var(--srl-muted);
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: var(--srl-text);
}
.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;
}
/* =========================
PAGINATION
========================= */
.sr-product-index .pagination .page-link {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .16);
color: var(--srl-text);
}
.sr-product-index .pagination .page-item.active .page-link {
background: rgba(255, 255, 255, .18);
border-color: rgba(255, 255, 255, .24);
color: #fff;
}
.sr-product-index .pagination .page-link:hover {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .24);
color: #fff;
}
/* =========================
RESPONSIVE (PRODUCT INDEX)
========================= */
@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;
}
.sr-product-index .product-index-toolbar {
padding: .6rem;
}
.sr-product-index .product-index-filter-strip {
gap: .5rem !important;
padding-bottom: .2rem;
}
.sr-product-index .product-index-search-form {
max-width: none;
}
.sr-product-index .product-index-search-form .form-control {
flex: 1 1 auto;
min-height: 42px;
padding-inline: .85rem;
}
.sr-product-index .product-index-search-group {
display: flex;
width: 100%;
border-radius: 12px;
}
.sr-product-index .product-index-search-btn {
min-width: 48px;
padding-inline: .85rem;
font-size: 0;
}
.sr-product-index .product-index-search-btn i {
font-size: .95rem;
margin-right: 0;
}
.sr-product-index .product-index-clear-btn {
min-width: 44px;
padding-inline: .75rem;
}
}
/* =========================================================
PRODUCT DETAIL PAGE
========================================================= */
.sr-product-detail {
background: transparent;
color: var(--srl-text);
}
.sr-product-detail .text-muted,
.sr-product-detail small.text-muted {
color: var(--srl-text);
}
.sr-product-detail .breadcrumb-nav a {
color: var(--srl-text);
}
.sr-product-detail .breadcrumb-nav a:hover {
color: var(--srl-text);
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: 1px solid rgba(255, 255, 255, .12);
border-radius: 8px;
cursor: pointer;
padding: 3px;
transition: border-color 0.2s, background-color 0.2s;
background: var(--srl-bg);
}
.sr-product-detail .thumbnail-item:hover,
.sr-product-detail .thumbnail-item.active {
border-color: rgba(255, 255, 255, .3);
background: rgba(255, 255, 255, .1);
}
.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: 16px;
background: var(--srl-card);
border: 1px solid var(--srl-border);
padding: 0.75rem;
box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.sr-product-detail .no-image {
height: 400px;
display: flex;
align-items: center;
justify-content: center;
background: var(--srl-card);
border: 1px solid var(--srl-border);
border-radius: 16px;
color: var(--srl-muted);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* =========================
PRODUCT INFO
========================= */
.sr-product-detail .product-title {
font-size: 1.5rem;
color: var(--srl-text);
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: var(--srl-text);
font-weight: 400;
}
.sr-product-detail .section-title {
font-size: 1.1rem;
font-weight: bold;
color: var(--srl-text);
margin-bottom: 10px;
}
.sr-product-detail .product-description {
font-size: 0.9rem;
line-height: 1.5;
color: var(--srl-text);
}
/* =========================
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: var(--srl-text);
width: 100px;
}
.sr-product-detail .detail-value {
color: var(--srl-text);
}
.sr-product-detail .availability-status {
color: #13e474;
font-weight: 500;
}
/* =========================
PURCHASE SIDEBAR
========================= */
.sr-product-detail .purchase-sidebar {
position: sticky;
top: 20px;
}
.sr-product-detail .purchase-box {
background: var(--srl-card);
border-color: var(--srl-border);
border-radius: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.sr-product-detail .sidebar-price .price-current {
font-size: 1.5rem;
color: var(--srl-text);
font-weight: 400;
}
.sr-product-detail .delivery-info {
font-size: 0.9rem;
line-height: 1.4;
}
.sr-product-detail .cart-buttons .btn-success,
.sr-product-detail .cart-buttons .btn-warning {
background: var(--srl-bg-dark);
border-color: var(--srl-border);
color: var(--srl-text-light);
font-weight: 600;
}
.sr-product-detail .cart-buttons .btn-success:hover,
.sr-product-detail .cart-buttons .btn-warning:hover {
/*background: rgba(255, 255, 255, .18);*/
border-color: rgba(255, 255, 255, .32);
color: #fff;
}
.sr-product-detail .additional-options .option-line {
margin-bottom: 2px;
font-size: 0.85rem;
}
.sr-product-detail .gift-options {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .12);
}
/* =========================
TABS & REVIEWS
========================= */
.sr-product-detail .nav-tabs .nav-link {
color: var(--srl-text);
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
font-weight: 400;
}
.sr-product-detail .nav-tabs .nav-link.active {
color: #fff;
border-bottom: 2px solid rgba(255, 255, 255, .42);
background: transparent;
}
.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: var(--srl-text);
margin-bottom: 8px;
}
.sr-product-detail .product-description :is(p, li, span) {
color: var(--srl-text);
}
.sr-product-detail .table :is(td, th) {
color: var(--srl-text);
}
.sr-product-detail .table .fw-bold {
color: var(--srl-text);
}
.sr-product-detail :is(.product-info-section, .info-tabs .tab-content, .specifications) {
background: var(--srl-card);
border: 1px solid var(--srl-border);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 1rem;
}
.sr-product-detail .info-tabs .tab-content {
margin-top: 0;
}
.sr-product-detail .specifications h4,
.sr-product-detail .customer-reviews h4 {
color: var(--srl-text);
}
.sr-product-detail .table {
color: var(--srl-text);
--bs-table-bg: transparent;
--bs-table-border-color: rgba(255, 255, 255, .12);
}
.sr-product-detail .table-bordered > :not(caption) > * {
border-color: rgba(255, 255, 255, .12);
}
.sr-product-detail .badge.bg-success {
background: rgba(255, 255, 255, .18);
color: var(--srl-text);
}
.sr-product-detail :is(.form-control, .form-select) {
background: rgba(255, 255, 255, .08);
border-color: var(--srl-border);
color: var(--srl-text);
}
.sr-product-detail :is(.form-control, .form-select):focus {
border-color: var(--srl-border);
box-shadow: 0 0 0 .2rem var(--srl-border);
color: var(--srl-text);
background: rgba(255, 255, 255, .1);
}
.sr-product-detail .text-primary {
color: var(--srl-text);
}
/* =========================
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 {
background: transparent;
color: var(--srl-text);
}
.sr-cart .text-muted,
.sr-cart small.text-muted {
color: var(--srl-muted);
}
.sr-cart .text-gray-800 {
color: var(--srl-text);
}
.sr-cart .cart-item,
.sr-cart .card,
.sr-cart .empty-cart {
background: var(--srl-card);
border: 1px solid var(--srl-border);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.sr-cart .empty-cart {
background: rgba(255, 255, 255, .1);
}
.sr-cart .empty-cart .text-muted,
.sr-cart .empty-cart h3,
.sr-cart .empty-cart p,
.sr-cart .empty-cart i {
color: var(--srl-text);
opacity: 1;
}
.sr-cart .empty-cart .display-1 {
color: var(--srl-text);
}
.sr-cart .d-flex .text-muted.me-3 {
color: var(--srl-muted);
}
.sr-cart .cart-item {
transition: box-shadow 0.3s ease;
}
.sr-cart .cart-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.sr-cart .cart-actions .btn,
.sr-cart .cart-actions noscript,
.sr-cart .cart-actions noscript form {
display: inline-flex;
align-items: center;
}
.sr-cart .cart-actions .btn {
margin: 0 !important;
white-space: nowrap;
}
.sr-cart .quantity-controls {
flex-wrap: nowrap;
}
.sr-cart .cart-item:hover {
box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}
.sr-cart .quantity-input:disabled {
opacity: 0.6;
}
.sr-cart .quantity-input::-webkit-outer-spin-button,
.sr-cart .quantity-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sr-cart .quantity-input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.sr-cart .card-header {
/*background: var(--srl-card);*/
/*border-bottom: 1px solid rgba(255, 255, 255, .12);*/
/*color: var(--srl-text);*/
}
.sr-cart .card-body {
color: var(--srl-text);
}
.sr-cart h1,
.sr-cart h2,
.sr-cart h3,
.sr-cart h4,
.sr-cart h5,
.sr-cart h6,
.sr-cart p,
.sr-cart label,
.sr-cart li,
.sr-cart strong,
.sr-cart span {
color: var(--srl-text);
}
.sr-cart :is(.form-control, .form-select) {
background: rgba(255, 255, 255, .12);
border: var(--srl-border);
color: var(--srl-text);
}
.sr-cart :is(.form-control, .form-select):focus {
border-color: var(--srl-border);
box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .12);
color: var(--srl-text);
background: rgba(255, 255, 255, .14);
}
.sr-cart .alert {
/*background: var(--srl-text);*/
border: 1px solid var(--srl-border);
color: var(--srl-text);
}
.sr-cart .btn-primary,
.sr-cart .btn-outline-primary,
.sr-cart .btn-outline-secondary,
.sr-cart .btn-outline-danger,
.sr-cart .btn-outline-info,
.sr-cart .btn-secondary {
/*border-color: var(--srl-border);*/
/*color: var(--srl-text);*/
/*background: rgba(255, 255, 255, .14);*/
}
.sr-cart .btn-primary:hover,
.sr-cart .btn-outline-primary:hover,
.sr-cart .btn-outline-secondary:hover,
.sr-cart .btn-outline-danger:hover,
.sr-cart .btn-outline-info:hover,
.sr-cart .btn-secondary:hover {
/*border-color: var(--srl-border);*/
/*color: var(--srl-text);*/
/*background: var(--srl-bg-dark);*/
}
.sr-cart .badge.bg-warning {
background: rgba(255, 255, 255, .16);
color: var(--srl-text);
border: 1px solid rgba(255, 255, 255, .24);
}
.sr-cart a {
/*color: #fff;*/
/*text-decoration-color: rgba(255, 255, 255, .45);*/
}
.sr-cart .form-check-input {
background-color: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .32);
}
.sr-cart .form-check-input:checked {
background-color: rgba(255, 255, 255, .95);
border-color: rgba(255, 255, 255, .95);
}
/* =========================
ORDER SUMMARY
========================= */
.sr-cart .order-summary-card .card-header {
/*background: rgba(255, 255, 255, .10);*/
}
.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;
}
.sr-cart .order-summary-card {
margin-top: 1rem;
}
}
@media (max-width: 575.98px) {
.sr-cart .cart-actions {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
}
.sr-cart .cart-actions .btn,
.sr-cart .cart-actions noscript form {
width: 100%;
justify-content: center;
}
.sr-cart .quantity-controls {
justify-content: flex-start;
}
}
/* =========================================================
CHECKOUT PAGE
========================================================= */
.sr-checkout {
/*background: transparent;*/
/*color: var(--srl-text);*/
}
.sr-checkout :is(.card, .alert, .breadcrumb, .order-summary, .order-items) .text-muted,
.sr-checkout :is(.card, .alert, .breadcrumb, .order-summary, .order-items) small.text-muted {
/*color: rgba(255, 255, 255, .86);*/
}
.sr-checkout .text-muted {
/*color: #ffffff !important;*/
}
.sr-checkout h1,
.sr-checkout h2,
.sr-checkout h3,
.sr-checkout h4,
.sr-checkout h5,
.sr-checkout h6,
.sr-checkout p,
.sr-checkout label,
.sr-checkout li,
.sr-checkout strong,
.sr-checkout span {
/*color: rgba(255, 255, 255, .94);*/
}
.sr-checkout .breadcrumb {
/*background: var(--srl-card);*/
/*border: 1px solid var(--srl-border);*/
/*border-radius: 12px;*/
/*padding: .5rem .75rem;*/
/*backdrop-filter: blur(12px);*/
/*-webkit-backdrop-filter: blur(12px);*/
}
.sr-checkout .breadcrumb a {
/*color: var(--srl-text);*/
}
.sr-checkout .breadcrumb-item.active {
/*color: rgba(255, 255, 255, .82);*/
}
.sr-checkout .checkout-form .card {
/*border: 1px solid var(--srl-border);*/
/*background: var(--srl-card);*/
/*margin-bottom: var(--sr-space-lg);*/
/*border-radius: 16px;*/
/*box-shadow: 0 10px 30px rgba(0, 0, 0, .2);*/
/*backdrop-filter: blur(12px);*/
/*-webkit-backdrop-filter: blur(12px);*/
}
.sr-checkout .card {
/*border: 1px solid var(--srl-border);*/
/*background: var(--srl-card);*/
/*border-radius: 16px;*/
/*box-shadow: 0 10px 30px rgba(0, 0, 0, .2);*/
/*backdrop-filter: blur(12px);*/
/*-webkit-backdrop-filter: blur(12px);*/
}
.sr-checkout .checkout-form .card-header {
/*background: rgba(255, 255, 255, .08);*/
/*border-bottom: 1px solid rgba(255, 255, 255, .12);*/
/*font-weight: 600;*/
/*color: var(--srl-text);*/
}
.sr-checkout .card-header {
/*background: rgba(255, 255, 255, .08);*/
/*border-bottom: 1px solid rgba(255, 255, 255, .12);*/
/*color: var(--srl-text);*/
width: 100%;
}
.sr-checkout .card-body {
width: 100%;
}
.sr-checkout .checkout-form .card-header h4 {
margin-bottom: 0;
color: var(--srl-text);
}
/* ORDER SUMMARY */
.sr-checkout .order-summary {
top: 20px;
}
.sr-checkout .order-summary .card {
border: 1px solid var(--srl-border);
background: var(--srl-card);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* 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 rgba(255, 255, 255, .12);
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: var(--srl-text);
}
/* STRIPE CARD ELEMENT */
.sr-checkout #card-element {
/*border: 1px solid rgba(255, 255, 255, .16);*/
/*border-radius: var(--sr-radius-sm);*/
/*padding: 0.75rem;*/
/*min-height: 40px;*/
/*background: rgba(255, 255, 255, .08);*/
/*color: var(--srl-text);*/
/*transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/
}
.sr-checkout #card-element.StripeElement--focus {
/*border-color: rgba(255, 255, 255, .28);*/
/*box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.08);*/
}
.sr-checkout #card-element.StripeElement--invalid {
/*border-color: rgba(255, 255, 255, .3);*/
/*box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.08);*/
}
.sr-checkout #card-errors {
/*margin-top: var(--sr-space-sm);*/
/*font-size: 0.875rem;*/
}
/* PAYMENT BUTTON */
.sr-checkout #submit-button {
/*background: rgba(255, 255, 255, .12);*/
/*border: 1px solid var(--sr-color-white);*/
/*color: var(--srl-text);*/
/*font-weight: 600;*/
/*text-transform: uppercase;*/
/*letter-spacing: 0.5px;*/
/*transition: all 0.3s ease;*/
}
.sr-checkout #submit-button:hover:not(:disabled) {
/*background: var(--sr-color-primary);*/
/*border-color: rgba(255, 255, 255, .32);*/
/*color: #fff;*/
/*transform: translateY(-1px);*/
/*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);*/
}
.sr-checkout #submit-button:disabled {
/*opacity: 0.6;*/
/*cursor: not-allowed;*/
}
/* SHIPPING METHODS */
.sr-checkout .shipping-methods .form-check {
/*border: 1px solid rgba(255, 255, 255, .14);*/
/*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;*/
/*background: rgba(255, 255, 255, .05);*/
}
.sr-checkout .shipping-methods .form-check:hover {
/*border-color: rgba(255, 255, 255, .28);*/
/*background: rgba(255, 255, 255, .1);*/
}
.sr-checkout .shipping-methods .form-check-input:checked + .form-check-label {
/*color: var(--srl-text);*/
/*font-weight: 500;*/
}
.sr-checkout .shipping-methods .form-check:has(.form-check-input:checked) {
/*border-color: rgba(255, 255, 255, .3);*/
/*background: rgba(255, 255, 255, .12);*/
/*box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, .08);*/
}
/* 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;
background: rgba(255, 255, 255, .08);
color: var(--srl-text);
border-color: rgba(255, 255, 255, .14);
}
.sr-checkout .promo-code .btn {
border-left: 0;
background-color: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .14);
color: var(--srl-text);
font-weight: 500;
}
/* ORDER TOTALS */
.sr-checkout .order-totals {
border-radius: var(--sr-radius-sm);
}
.sr-checkout .order-totals .tax-amount,
.sr-checkout .order-totals .tax-label {
font-size: 0.8rem;
}
/* FREE SHIPPING NOTICE */
.sr-checkout .free-shipping-notice {
border-left: 4px solid rgba(255, 255, 255, .32);
background: rgba(255, 255, 255, .08);
color: var(--srl-text);
}
.sr-checkout .free-shipping-notice i {
color: var(--srl-text);
margin-right: var(--sr-space-xs);
}
.sr-checkout :is(.form-control, .form-select) {
/*background: rgba(255, 255, 255, .12);*/
/*border: var(--srl-border);*/
/*color: var(--srl-text);*/
}
.sr-checkout :is(.form-control, .form-select)::placeholder {
/*color: var(--srl-muted);*/
}
.sr-checkout :is(.form-control, .form-select):focus {
/*border-color: var(--srl-border);*/
/*box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .12);*/
/*color: var(--srl-text);*/
/*background: rgba(255, 255, 255, .14);*/
}
.sr-checkout .alert {
/*background: rgba(255, 255, 255, .08);*/
/*border: 1px solid rgba(255, 255, 255, .16);*/
/*color: var(--srl-text);*/
}
.sr-checkout .btn-primary,
.sr-checkout .btn-outline-primary,
.sr-checkout .btn-outline-secondary,
.sr-checkout .btn-outline-info {
/*border-color: rgba(255, 255, 255, .3);*/
/*color: #fff;*/
/*background: rgba(255, 255, 255, .14);*/
}
.sr-checkout .btn-primary:hover,
.sr-checkout .btn-outline-primary:hover,
.sr-checkout .btn-outline-secondary:hover,
.sr-checkout .btn-outline-info:hover {
/*border-color: rgba(255, 255, 255, .42);*/
/*color: #fff;*/
/*background: rgba(255, 255, 255, .22);*/
}
.sr-checkout a {
/*color: #fff;*/
/*text-decoration-color: rgba(255, 255, 255, .45);*/
}
.sr-checkout .form-check-input {
/*background-color: rgba(255, 255, 255, .12);*/
/*border-color: rgba(255, 255, 255, .32);*/
}
.sr-checkout .form-check-input:checked {
/*background-color: var(--sr-color-bg);*/
/*border-color: rgba(255, 255, 255, .95);*/
}
/* =========================
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)
Source: identity-pages.css
========================================================= */
.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,");
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,");*/
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;
}
}
/* =========================================================
HOLDING PAGE (SRL) – SCOPED
========================================================= */
/*.sr-holding {*/
/* color: var(--srl-text);*/
/* background: radial-gradient(1100px 700px at 10% 10%, rgba(99, 102, 241, .28), transparent 60%),*/
/* radial-gradient(900px 600px at 90% 30%, rgba(34, 211, 238, .18), transparent 55%),*/
/* linear-gradient(180deg, var(--srl-bg), var(--srl-bg-2));*/
/* min-height: 100vh;*/
/*}*/
.sr-holding header,
.sr-holding footer {
background: rgba(0, 0, 0, .10);
border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.sr-holding footer {
border-top: 1px solid rgba(255, 255, 255, .05);
border-bottom: 0;
}
.sr-holding .srl-brand {
display: inline-flex;
align-items: center;
gap: .75rem;
color: var(--srl-text);
}
.sr-holding .srl-brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 14px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
font-weight: 800;
letter-spacing: .04em;
}
.sr-holding .srl-brand-name {
font-weight: 700;
letter-spacing: .01em;
}
.sr-holding .srl-badge {
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .08) !important;
color: var(--srl-text) !important;
}
.sr-holding .srl-hero {
padding: 3rem 0 3rem 0;
}
.sr-holding .srl-card {
border-radius: 22px;
background: var(--srl-card);
border: 1px solid var(--srl-border);
box-shadow: 0 10px 35px rgba(0, 0, 0, .25);
backdrop-filter: blur(12px);
}
.sr-holding .srl-btn {
border-radius: 14px;
padding-left: 1rem;
padding-right: 1rem;
}
.sr-holding .srl-pill {
border-radius: 999px;
padding: .55rem .8rem;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .14);
}
.sr-holding .srl-visual {
position: relative;
overflow: hidden;
}
.sr-holding .srl-visual::before {
content: "";
position: absolute;
inset: -60px -60px auto auto;
width: 220px;
height: 220px;
background: rgba(99, 102, 241, .28);
filter: blur(24px);
border-radius: 50%;
}
.sr-holding .srl-visual::after {
content: "";
position: absolute;
inset: auto auto -80px -80px;
width: 260px;
height: 260px;
background: rgba(34, 211, 238, .18);
filter: blur(28px);
border-radius: 50%;
}
.sr-holding .srl-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .75rem;
}
.sr-holding .srl-kpi {
padding: .85rem .9rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(0, 0, 0, .10);
}
.sr-holding .srl-kpi-value {
font-weight: 700;
}
.sr-holding .srl-kpi-label {
font-size: .85rem;
color: var(--srl-muted);
}
.sr-holding .srl-list {
position: relative;
z-index: 1;
color: var(--srl-muted);
}
.sr-holding .srl-dot {
display: inline-block;
width: .55rem;
height: .55rem;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
margin-right: .6rem;
}
.sr-holding .srl-link {
color: var(--srl-text);
text-decoration: none;
border-bottom: 1px dotted rgba(255, 255, 255, .35);
}
.sr-holding .srl-link:hover {
border-bottom-style: solid;
}
.sr-holding .srl-footer {
color: rgba(255, 255, 255, .70);
}
/* =========================================================
ABOUT PAGE
========================================================= */
.about-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
}
@media (min-width: 768px) {
.about-icon {
width: 70px;
height: 70px;
border-radius: 15px;
font-size: 28px;
}
.display-md-4 {
font-size: calc(1.475rem + 2.7vw);
}
}
/* ==== ADMIN AREA (.sr-admin) ==== */
.sr-admin {
background: #ffffff !important;
/*color: #ffffff !important;*/
}
.sr-admin .text-muted, .sr-admin small.text-muted {
color: var(--srl-muted) !important;
}
.sr-admin .admin-card {
border: var(--srl-border);
background: var(--srl-border);
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
transition: all 0.3s ease;
height: 100%;
}
.sr-admin .admin-card .card-title {
font-weight: 600;
font-size: 1.25rem;
margin-bottom: 0.75rem;
color: var(--srl-text);
}
.sr-admin .admin-card .card-text {
color: var(--srl-muted);
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.sr-admin .admin-card .btn {
border-radius: 8px;
padding: 0.5rem 1.5rem;
font-weight: 500;
transition: all 0.2s ease;
}
.sr-admin .admin-card .btn:hover {
transform: scale(1.05);
}
.sr-admin .icon-wrapper {
width: 100px;
height: 100px;
margin: 0 auto 1.5rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: visible;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.sr-admin .icon-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
opacity: 0.1;
border-radius: 20px;
}
.sr-admin .icon-wrapper::after {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 20px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
filter: blur(10px);
}
.sr-admin .icon-wrapper img,
.sr-admin .icon-wrapper i {
position: relative;
z-index: 1;
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
transition: all 0.3s ease;
}
.sports-hero {
position: relative;
overflow: hidden;
background: #08111f;
min-height: 420px;
display: flex;
align-items: stretch;
}
.sports-hero__media,
.sports-hero__overlay {
position: absolute;
inset: 0;
}
.sports-hero__image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
}
.sports-hero__overlay {
background: linear-gradient(
180deg,
rgba(4, 10, 20, 0.45) 0%,
rgba(4, 10, 20, 0.60) 35%,
rgba(4, 10, 20, 0.88) 100%
);
z-index: 1;
}
.sports-hero__container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 2rem 1rem;
display: flex;
align-items: flex-end;
}
.sports-hero__content {
width: 100%;
max-width: 100%;
color: #fff;
}
.sports-hero__eyebrow {
display: inline-block;
margin-bottom: 0.875rem;
padding: 0.4rem 0.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sports-hero__title {
margin: 0 0 0.85rem;
font-size: clamp(2rem, 7vw, 4.75rem);
line-height: 0.95;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.03em;
max-width: 10ch;
}
.sports-hero__text {
margin: 0 0 1.25rem;
max-width: 36rem;
font-size: 0.98rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
}
.sports-hero__actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
max-width: 320px;
}
.sports-hero__btn {
width: 100%;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
border-radius: 0.8rem;
padding: 0.9rem 1.25rem;
}
/* Small devices */
@media (min-width: 576px) {
.sports-hero {
min-height: 500px;
}
.sports-hero__container {
padding: 2.5rem 1.25rem;
}
.sports-hero__text {
font-size: 1rem;
}
}
/* Tablets */
@media (min-width: 768px) {
.sports-hero {
min-height: 560px;
}
.sports-hero__overlay {
background: linear-gradient(
90deg,
rgba(4, 10, 20, 0.86) 0%,
rgba(4, 10, 20, 0.68) 38%,
rgba(4, 10, 20, 0.36) 64%,
rgba(4, 10, 20, 0.42) 100%
);
}
.sports-hero__container {
align-items: center;
padding: 3rem 1.5rem;
}
.sports-hero__content {
max-width: 620px;
}
.sports-hero__actions {
flex-direction: row;
flex-wrap: wrap;
max-width: none;
}
.sports-hero__btn {
width: auto;
min-width: 180px;
}
}
/* Desktop */
@media (min-width: 992px) {
.sports-hero {
min-height: 620px;
}
.sports-hero__container {
padding: 4rem 2rem;
}
.sports-hero__content {
max-width: 640px;
}
.sports-hero__title {
max-width: 9ch;
}
.sports-hero__text {
font-size: 1.08rem;
}
}
/* Large desktop */
@media (min-width: 1200px) {
.sports-hero {
min-height: 680px;
}
}
}