html, body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:root{
--mud-palette-black: rgba(39,39,47,1) !important;
--mud-palette-white: rgba(255,255,255,1) !important;
--mud-palette-primary: rgba(57,181,74,1) !important;
--mud-palette-primary-rgb: 57,181,74 !important;
--mud-palette-primary-text: rgba(255,255,255,1) !important;
--mud-palette-primary-darken: rgb(45,143,58) !important;
--mud-palette-primary-lighten: rgb(95,201,111) !important;
--mud-palette-primary-hover: rgba(57,181,74,0.058823529411764705) !important;
--mud-palette-secondary: rgba(255,64,129,1) !important;
--mud-palette-secondary-rgb: 255,64,129 !important;
--mud-palette-secondary-text: rgba(255,255,255,1) !important;
--mud-palette-secondary-darken: rgb(255,31,105) !important;
--mud-palette-secondary-lighten: rgb(255,102,153) !important;
--mud-palette-secondary-hover: rgba(255,64,129,0.058823529411764705) !important;
--mud-palette-tertiary: rgba(30,200,165,1) !important;
--mud-palette-tertiary-rgb: 30,200,165 !important;
--mud-palette-tertiary-text: rgba(255,255,255,1) !important;
--mud-palette-tertiary-darken: rgb(25,169,140) !important;
--mud-palette-tertiary-lighten: rgb(42,223,187) !important;
--mud-palette-tertiary-hover: rgba(30,200,165,0.058823529411764705) !important;
--mud-palette-info: rgba(50,153,255,1) !important;
--mud-palette-info-rgb: 50,153,255 !important;
--mud-palette-info-text: rgba(255,255,255,1) !important;
--mud-palette-info-darken: rgb(10,133,255) !important;
--mud-palette-info-lighten: rgb(92,173,255) !important;
--mud-palette-info-hover: rgba(50,153,255,0.058823529411764705) !important;
--mud-palette-success: rgba(11,186,131,1) !important;
--mud-palette-success-rgb: 11,186,131 !important;
--mud-palette-success-text: rgba(255,255,255,1) !important;
--mud-palette-success-darken: rgb(9,154,108) !important;
--mud-palette-success-lighten: rgb(13,222,156) !important;
--mud-palette-success-hover: rgba(11,186,131,0.058823529411764705) !important;
--mud-palette-warning: rgba(255,168,0,1) !important;
--mud-palette-warning-rgb: 255,168,0 !important;
--mud-palette-warning-text: rgba(255,255,255,1) !important;
--mud-palette-warning-darken: rgb(214,143,0) !important;
--mud-palette-warning-lighten: rgb(255,182,36) !important;
--mud-palette-warning-hover: rgba(255,168,0,0.058823529411764705) !important;
--mud-palette-error: rgba(246,78,98,1) !important;
--mud-palette-error-rgb: 246,78,98 !important;
--mud-palette-error-text: rgba(255,255,255,1) !important;
--mud-palette-error-darken: rgb(244,47,70) !important;
--mud-palette-error-lighten: rgb(248,119,134) !important;
--mud-palette-error-hover: rgba(246,78,98,0.058823529411764705) !important;
--mud-palette-dark: rgba(39,39,47,1) !important;
--mud-palette-dark-rgb: 39,39,47 !important;
--mud-palette-dark-text: rgba(255,255,255,1) !important;
--mud-palette-dark-darken: rgb(23,23,28) !important;
--mud-palette-dark-lighten: rgb(56,56,67) !important;
--mud-palette-dark-hover: rgba(39,39,47,0.058823529411764705) !important;
--mud-palette-text-primary: rgba(255,255,255,0.6980392156862745) !important;
--mud-palette-text-secondary: rgba(255,255,255,0.4980392156862745) !important;
--mud-palette-text-disabled: rgba(255,255,255,0.2) !important;
--mud-palette-action-default: rgba(173,173,177,1) !important;
--mud-palette-action-default-hover: rgba(173,173,177,0.058823529411764705) !important;
--mud-palette-action-disabled: rgba(255,255,255,0.25882352941176473) !important;
--mud-palette-action-disabled-background: rgba(255,255,255,0.11764705882352941) !important;
--mud-palette-surface: rgba(55,55,64,1) !important;
--mud-palette-background: rgba(49,51,60,1) !important;
--mud-palette-background-gray: rgba(49,51,60,1) !important;
--mud-palette-drawer-background: rgba(39,39,46,1) !important;
--mud-palette-drawer-text: rgba(255,255,255,0.4980392156862745) !important;
--mud-palette-drawer-icon: rgba(255,255,255,0.4980392156862745) !important;
--mud-palette-appbar-background: rgba(39,39,46,1) !important;
--mud-palette-appbar-text: rgba(255,255,255,0.6980392156862745) !important;
--mud-palette-lines-default: rgba(255,255,255,0.11764705882352941) !important;
--mud-palette-lines-inputs: rgba(255,255,255,0.2980392156862745) !important;
--mud-palette-table-lines: rgba(255,255,255,0.11764705882352941) !important;
--mud-palette-table-striped: rgba(255,255,255,0.2) !important;
--mud-palette-table-hover: rgba(0,0,0,0.0392156862745098) !important;
--mud-palette-divider: rgba(255,255,255,0.11764705882352941) !important;
--mud-palette-divider-light: rgba(255,255,255,0.058823529411764705) !important;
--mud-palette-skeleton: rgba(255,255,255,0.10980392156862745) !important;
--mud-palette-gray-default: #9E9E9E !important;
--mud-palette-gray-light: #BDBDBD !important;
--mud-palette-gray-lighter: #E0E0E0 !important;
--mud-palette-gray-dark: #757575 !important;
--mud-palette-gray-darker: #616161 !important;
--mud-palette-overlay-dark: rgba(33,33,33,0.4980392156862745) !important;
--mud-palette-overlay-light: rgba(255,255,255,0.4980392156862745) !important;
--mud-ripple-color: var(--mud-palette-text-primary) !important;
--mud-ripple-opacity: 0.1 !important;
--mud-ripple-opacity-secondary: 0.2 !important;
--mud-elevation-0: none !important;
--mud-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12) !important;
--mud-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12) !important;
--mud-elevation-3: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12) !important;
--mud-elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12) !important;
--mud-elevation-5: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12) !important;
--mud-elevation-6: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12) !important;
--mud-elevation-7: 0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12) !important;
--mud-elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12) !important;
--mud-elevation-9: 0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12) !important;
--mud-elevation-10: 0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12) !important;
--mud-elevation-11: 0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12) !important;
--mud-elevation-12: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12) !important;
--mud-elevation-13: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12) !important;
--mud-elevation-14: 0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12) !important;
--mud-elevation-15: 0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12) !important;
--mud-elevation-16: 0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12) !important;
--mud-elevation-17: 0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12) !important;
--mud-elevation-18: 0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12) !important;
--mud-elevation-19: 0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12) !important;
--mud-elevation-20: 0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12) !important;
--mud-elevation-21: 0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12) !important;
--mud-elevation-22: 0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12) !important;
--mud-elevation-23: 0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12) !important;
--mud-elevation-24: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12) !important;
--mud-elevation-25: 0 5px 5px -3px rgba(0,0,0,.06), 0 8px 10px 1px rgba(0,0,0,.042), 0 3px 14px 2px rgba(0,0,0,.036) !important;
--mud-default-borderradius: 4px !important;
--mud-drawer-width-left: 260px !important;
--mud-drawer-width-right: 300px !important;
--mud-drawer-width-mini-left: 56px !important;
--mud-drawer-width-mini-right: 56px !important;
--mud-drawer-height-bottom: 300px !important;
--mud-appbar-height: 64px !important;
--mud-typography-default-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-default-size: .875rem !important;
--mud-typography-default-weight: 400 !important;
--mud-typography-default-lineheight: 1.43 !important;
--mud-typography-default-letterspacing: .01071em !important;
--mud-typography-default-text-transform: none !important;
--mud-typography-h1-family: 'Oxanium','Helvetica','Arial','sans-serif' !important;
--mud-typography-h1-size: 3rem !important;
--mud-typography-h1-weight: 800 !important;
--mud-typography-h1-lineheight: 1.167 !important;
--mud-typography-h1-letterspacing: -.01562em !important;
--mud-typography-h1-text-transform: none !important;
--mud-typography-h2-family: 'Oxanium','Helvetica','Arial','sans-serif' !important;
--mud-typography-h2-size: 2.5rem !important;
--mud-typography-h2-weight: 800 !important;
--mud-typography-h2-lineheight: 1.2 !important;
--mud-typography-h2-letterspacing: -.00833em !important;
--mud-typography-h2-text-transform: none !important;
--mud-typography-h3-family: 'Oxanium','Helvetica','Arial','sans-serif' !important;
--mud-typography-h3-size: 2rem !important;
--mud-typography-h3-weight: 800 !important;
--mud-typography-h3-lineheight: 1.167 !important;
--mud-typography-h3-letterspacing: 0 !important;
--mud-typography-h3-text-transform: none !important;
--mud-typography-h4-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-h4-size: 2.125rem !important;
--mud-typography-h4-weight: 400 !important;
--mud-typography-h4-lineheight: 1.235 !important;
--mud-typography-h4-letterspacing: .00735em !important;
--mud-typography-h4-text-transform: none !important;
--mud-typography-h5-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-h5-size: 1.5rem !important;
--mud-typography-h5-weight: 400 !important;
--mud-typography-h5-lineheight: 1.334 !important;
--mud-typography-h5-letterspacing: 0 !important;
--mud-typography-h5-text-transform: none !important;
--mud-typography-h6-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-h6-size: 1.25rem !important;
--mud-typography-h6-weight: 500 !important;
--mud-typography-h6-lineheight: 1.6 !important;
--mud-typography-h6-letterspacing: .0075em !important;
--mud-typography-h6-text-transform: none !important;
--mud-typography-subtitle1-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-subtitle1-size: 1rem !important;
--mud-typography-subtitle1-weight: 400 !important;
--mud-typography-subtitle1-lineheight: 1.75 !important;
--mud-typography-subtitle1-letterspacing: .00938em !important;
--mud-typography-subtitle1-text-transform: none !important;
--mud-typography-subtitle2-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-subtitle2-size: .875rem !important;
--mud-typography-subtitle2-weight: 500 !important;
--mud-typography-subtitle2-lineheight: 1.57 !important;
--mud-typography-subtitle2-letterspacing: .00714em !important;
--mud-typography-subtitle2-text-transform: none !important;
--mud-typography-body1-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-body1-size: 1rem !important;
--mud-typography-body1-weight: 400 !important;
--mud-typography-body1-lineheight: 1.5 !important;
--mud-typography-body1-letterspacing: .00938em !important;
--mud-typography-body1-text-transform: none !important;
--mud-typography-body2-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-body2-size: .875rem !important;
--mud-typography-body2-weight: 400 !important;
--mud-typography-body2-lineheight: 1.43 !important;
--mud-typography-body2-letterspacing: .01071em !important;
--mud-typography-body2-text-transform: none !important;
--mud-typography-input-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-input-size: 1rem !important;
--mud-typography-input-weight: 400 !important;
--mud-typography-input-lineheight: 1.1876 !important;
--mud-typography-input-letterspacing: .00938em !important;
--mud-typography-input-text-transform: none !important;
--mud-typography-button-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-button-size: .875rem !important;
--mud-typography-button-weight: 500 !important;
--mud-typography-button-lineheight: 1.75 !important;
--mud-typography-button-letterspacing: .02857em !important;
--mud-typography-button-text-transform: uppercase !important;
--mud-typography-caption-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-caption-size: 11px !important;
--mud-typography-caption-weight: 400 !important;
--mud-typography-caption-lineheight: 1.66 !important;
--mud-typography-caption-letterspacing: .03333em !important;
--mud-typography-caption-text-transform: none !important;
--mud-typography-overline-family: 'Montserrat','Helvetica','Arial','sans-serif' !important;
--mud-typography-overline-size: .75rem !important;
--mud-typography-overline-weight: 400 !important;
--mud-typography-overline-lineheight: 2.66 !important;
--mud-typography-overline-letterspacing: .08333em !important;
--mud-typography-overline-text-transform: none !important;
--mud-zindex-drawer: 1100 !important;
--mud-zindex-appbar: 1300 !important;
--mud-zindex-dialog: 1400 !important;
--mud-zindex-popover: 1200 !important;
--mud-zindex-snackbar: 1500 !important;
--mud-zindex-tooltip: 1600 !important;
--mud-native-html-color-scheme: dark !important;
}

h1:focus {
 outline: none;
}

a, .btn-link {
 color: #39b54a;
}

.btn-primary {
 color: #fff;
 background-color: #39b54a;
 border-color: #2d8f3a;
}

.section-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(57, 181, 74, 0.3), transparent);
    margin: 2rem 0;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
 box-shadow:0000.1rem white,0000.25rem #5fc96f;
}

.content {
 padding-top:1.1rem;
}

.valid.modified:not([type=checkbox]) {
 outline:1px solid #26b050;
}

.invalid {
 outline:1px solid red;
}

.validation-message {
 color: red;
}

#blazor-error-ui {
 color-scheme: light only;
 background: lightyellow;
 bottom:0;
 box-shadow:0 -1px2px rgba(0,0,0,0.2);
 box-sizing: border-box;
 display: none;
 left:0;
 padding:0.6rem1.25rem0.7rem1.25rem;
 position: fixed;
 width:100%;
 z-index:1000;
}

 #blazor-error-ui .dismiss {
 cursor: pointer;
 position: absolute;
 right:0.75rem;
 top:0.5rem;
 }

.blazor-error-boundary {
 background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTEuMDg0MiAyMzcuNTU5IDk2LjI5MDQgMjM3Ljg4NSA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat1rem/1.8rem, #b32121;
 padding:1rem1rem1rem3.7rem;
 color: white;
}

 .blazor-error-boundary::after {
 content: "An error has occurred."
 }

.loading-progress {
 position: relative;
 display: block;
 width:8rem;
 height:8rem;
 margin:20vh auto1rem auto;
}

 .loading-progress circle {
 fill: none;
 stroke: #e0e0e0;
 stroke-width:0.6rem;
 transform-origin:50%50%;
 transform: rotate(-90deg);
 }

 .loading-progress circle:last-child {
 stroke: #1b6ec2;
 stroke-dasharray: calc(3.141 * var(--blazor-load-percentage,0%) *0.8),500%;
 transition: stroke-dasharray0.05s ease-in-out;
 }

.loading-progress-text {
 position: absolute;
 text-align: center;
 font-weight: bold;
 inset: calc(20vh +3.25rem)0 auto0.2rem;
}

 .loading-progress-text:after {
 content: var(--blazor-load-percentage-text, "Loading");
 }

code {
 color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
 color: var(--bs-secondary-color);
 text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
 text-align: start;
}

.fmc-black-gradient {
 background: #221F1F;
}

/* Navigation menu drawer styling */
.mud-drawer {
 background-color: #221F1F !important;
}

.mud-drawer .mud-navmenu {
 background-color: #221F1F !important;
}

.mud-navmenu {
 background-color: #221F1F !important;
}

.loader {
 border:24px solid #FFFFFF;
 border-bottom-color: #39b54a;
 border-radius:50%;
 display: inline-block;
 position: relative;
 box-sizing: border-box;
 animation: rotation1s linear infinite;
}

@keyframes rotation {
0% {
 transform: rotate(0deg);
 }

100% {
 transform: rotate(360deg);
 }
}


.selected-card {
 border:2px solid #39b54a !important;
 box-shadow:0020px rgba(57,181,74,0.3);
}

.garage-card-wrapper {
 position: relative;
 border-radius:12px;
 overflow: hidden;
 transition: all0.3s ease;
 height:100%;
}

.garage-card-wrapper .mud-card-content {
 display: flex;
 flex-direction: column;
 height:100%;
}

.garage-stats-container {
 background: #27272F;
 padding:8px;
 margin-top: auto;
}

.stat-item {
 text-align: center;
 padding:8px8px;
 border-radius:6px;
 background: rgba(0,0,0,0.5);
 transition: all0.2s ease;
 border:2px solid #39b54a;
}

.stat-label {
 font-size:0.75rem;
 text-transform: uppercase;
 letter-spacing:0.5px;
 opacity:0.8;
 color: var(--border-color);
}

.stat-value {
 font-size:1.25rem;
 font-weight:700;
 color: var(--border-color);
 margin-top:4px;
}

.empty-slot-card {
 opacity:0.6;
 border:2px dashed #666;
}

@media (max-width:360px) {
 .garage-stats-container {
 padding:8px;
 }

 .stat-item {
 padding:4px6px;
 }

 .stat-label {
 font-size:0.65rem;
 }

 .stat-value {
 font-size:1rem;
 }
}

/* Responsive image container: fixed aspect ratio, images contained without cropping */
.image-container {
 /* Default aspect ratio; can be overridden via inline style or modifier classes */
 --image-ar:4/3;
 width:100%;
 position: relative;
 display: block;
 padding-bottom: 8px;
 aspect-ratio: var(--image-ar);
 padding-left:8px;
 padding-right:8px;
}

/* Allow easy aspect overrides via utility classes if needed */
.image-container.--square { --image-ar:1/1; }
.image-container.--4x3 { --image-ar:4/3; }
.image-container.--3x2 { --image-ar:3/2; }
.image-container.--21x9 { --image-ar:21/9; }

/* Children fill the container */
.image-container > * {
 width:100%;
 height:100% !important;
}

/* Ensure images fill container width and height */
.image-container img,
.image-container .mud-image,
.image-container .actual-image,
.image-container .placeholder-image {
 width:100% !important;
 height:100% !important;
 object-fit: fill !important;
 display: block;
}

/* Aspect ratio no longer forced - images control their own height based on natural aspect ratio */

.weekend-leagues-card {
 background-color: #27272E !important;
 border-radius:16px !important;
 border: none !important;
}

.svg-title {
 margin-bottom:2rem;
}

 .svg-title svg {
 width:100%;
 max-width:350px;
 height: auto;
 }

.weekend-description {
 color: #a0a0a0 !important;
 font-size:1.1rem !important;
 line-height:1.6 !important;
 margin-bottom:3rem !important;
 max-width:400px;
 margin-left: auto !important;
 margin-right: auto !important;
}

.weekend-button {
 background-color: var(--mud-palette-primary) !important;
 border-radius:8px !important;
 font-weight:600 !important;
 padding:16px !important;
}

.title {
    font-size: 2.7rem;
    font-weight: 800;
    font-family: 'Oxanium', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1.2px var(--mud-palette-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* League Title Styles - Unified */
.league-title {
    font-size: 2.7rem;
    font-weight: 800;
    font-family: 'Oxanium', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1.2px var(--mud-palette-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.league-title-filled {
    font-size: 2.7rem;
    font-weight: 800;
    font-family: 'Oxanium', sans-serif;
    color: white;
    line-height: 1;
}


/* League Title Small Variants */
.league-title-small {
    font-size: 2rem;
    font-weight: 800;
    font-family: 'Oxanium', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1.2px var(--mud-palette-primary);
    line-height: 1;
}

.league-title-small-filled {
    font-size: 2rem;
    font-weight: 800;
    font-family: 'Oxanium', sans-serif;
    color: white;
    line-height: 1;
}

/* League Title Responsive - Tablet */
@media (max-width: 768px) {
    .league-title {
        font-size: 2rem;
    }

    .league-title-filled {
        font-size: 2rem;
    }

    .league-title-small {
        font-size: 1.5rem;
    }

    .league-title-small-filled {
        font-size: 1.5rem;
    }
}

/* League Title Responsive - Mobile */
@media (max-width: 480px) {
    .league-title {
        font-size: 2.5rem;
    }

    .league-title-filled {
        font-size: 2.5rem;
    }

    .league-title-small {
        font-size: 1.5rem;
    }

    .league-title-small-filled {
        font-size: 1.5rem;
    }
}

/* Social Media Icons */
.social-icons-container {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 20px;
    justify-content: center;
    justify-items: center;
    margin: 0 auto;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(57, 181, 74, 0.3);
    color: rgba(255, 255, 255, 0.7);
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #39b54a;
    border-color: #39b54a;
    color: white;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px rgba(57, 181, 74, 0.4);
}

@media (max-width: 600px) {
    .social-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .social-icons-container {
        gap: 15px;
    }
}