:root { --sap-primary-color: #1e40af;
--sap-hover-color: #f92020;
--sap-text-color: #ffffff;
--sap-card-bg: #ffffff;
--sap-card-border: #055ba5;
--sap-card-title: #1a202c;
--sap-card-price: #1e40af;
--sap-card-desc: #4a5568;
--sap-tool-bg: #f9f9f9;
--sap-label-color: #4a5568;
--sap-slider-circle: #1e40af;
--sap-slider-circle-border: #ffffff;
--sap-slider-active-track: #1e40af;
--sap-slider-inactive-track: #cbd5e0;
--sap-slider-filter-color: #e53e3e; --sap-modal-overlay-bg: rgba(0, 0, 0, 0.75);
--sap-form-bg: #000000;
--sap-form-text: #ffffff;
--sap-form-input-bg: #000000;
--sap-form-input-text: #ffffff;
--sap-form-input-border: #4a5568;
--sap-form-input-focus-border: #3182ce;
--sap-form-dropdown-option-bg: #1a202c;
--sap-form-submit-bg: #1e40af;
--sap-form-submit-text: #ffffff;
--sap-form-submit-hover-bg: #f92020;
--sap-form-footer-text: #a0aec0;
--sap-form-footer-link: #ffffff;
} .storage-tool-container {
width: 100%;
margin: 0 auto 30px auto;
text-align: center;
background: var(--sap-tool-bg);
padding: 40px 30px;
border-radius: 25px;
color: var(--sap-label-color);
}
.storage-tool-container p,
.storage-tool-container a {
color: var(--sap-label-color);
}
.current-selection-label {
color: var(--sap-label-color);
}
.storage-range-input {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
outline: none;
margin: 15px 0 30px;
cursor: pointer; background: linear-gradient(
to right, 
var(--sap-slider-active-track) 0%, 
var(--sap-slider-active-track) var(--slider-progress, 0%), 
var(--sap-slider-inactive-track) var(--slider-progress, 0%), 
var(--sap-slider-inactive-track) 100%
);
} .storage-tool-container.is-filtered .storage-range-input {
background: linear-gradient(
to right, 
var(--sap-slider-filter-color) 0%, 
var(--sap-slider-filter-color) var(--slider-progress, 0%), 
var(--sap-slider-inactive-track) var(--slider-progress, 0%), 
var(--sap-slider-inactive-track) 100%
);
} .storage-range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--sap-slider-circle);
border: 4px solid var(--sap-slider-circle-border);
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
cursor: pointer;
transition: transform 0.1s ease;
}
.storage-range-input:active::-webkit-slider-thumb {
transform: scale(1.15);
} .storage-range-input::-moz-range-thumb {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--sap-slider-circle);
border: 4px solid var(--sap-slider-circle-border);
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
cursor: pointer;
transition: transform 0.1s ease;
}
.storage-range-input:active::-moz-range-thumb {
transform: scale(1.15);
} .storage-tool-container.is-filtered .storage-range-input::-webkit-slider-thumb {
background: var(--sap-slider-filter-color);
}
.storage-tool-container.is-filtered .storage-range-input::-moz-range-thumb {
background: var(--sap-slider-filter-color);
} .slider-labels {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 2px;
}
.slider-labels p {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--sap-label-color);
cursor: pointer;
} .storage-unit-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.unit-card {
position: relative;
overflow: hidden;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 15px;
background-color: var(--sap-card-bg);
border: 2px solid var(--sap-card-border);
padding: 30px;
border-radius: 12px;
text-align: center;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.unit-card .limited-tag {
position: absolute;
top: 10px;
left: -60px;
width: 180px;
transform: rotate(-45deg); background-color: var(--sap-slider-filter-color); 
color: #ffffff; font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
line-height: 1.2;
padding: 10px 0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
z-index: 5;
pointer-events: none; }
.unit-card:hover {
transform: translateY(-5px);
border-color: var(--sap-hover-color);
}
.unit-card * {
margin: 0;
}
.unit-card .unit-size {
color: var(--sap-card-title);
}
.unit-card .unit-price {
color: var(--sap-card-title);
text-transform: capitalize;
line-height: normal;
}
.unit-card .unit-price span {
display: block;
font-size: 0.6em;
}
.unit-card .unit-desc {
color: var(--sap-card-desc);
}
.storage-unit-grid .unit-desc-list {
margin: 0 !important;
list-style-type: none !important;
text-align: center;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
font-size: 1rem;
font-weight: 700;
padding: 0;
}
.storage-unit-grid ul.unit-desc-list li {
list-style-type: none !important;
margin: 0;
line-height: normal;
}
.unit-card .unit-sqft {
font-size: 14px;
font-weight: 600;
color: var(--sap-card-desc);
margin-top: -20px;
} .reserve-btn {
background-color: var(--sap-primary-color);
color: var(--sap-text-color);
display: block;
width: 100%;
padding: 10px 15px;
border-radius: 50px;
text-decoration: none;
font-family: sans-serif;
font-size: 20px;
font-weight: 600;
text-transform: initial;
transition: background 0.3s ease-in-out;
}
.reserve-btn:hover {
background-color: var(--sap-hover-color);
color: var(--sap-text-color);
}  #sap-reservation-modal,
div#sap-reservation-modal.sap-modal-overlay {
display: none;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: var(--sap-modal-overlay-bg, rgba(0, 0, 0, 0.75)) !important;
z-index: 99999999 !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
box-sizing: border-box !important;
backdrop-filter: blur(3px);
overflow-y: auto !important;
opacity: 1 !important;
visibility: visible !important;
} #sap-reservation-modal.is-active,
div#sap-reservation-modal.sap-modal-overlay.is-active {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.sap-modal-content {
background: var(--sap-form-bg, #000000) !important;
color: var(--sap-form-text, #ffffff) !important;
width: 100% !important;
max-width: 600px !important;
max-height: 85vh !important;
overflow-y: auto !important;
border-radius: 12px !important;
padding: 25px !important;
position: relative !important;
margin: auto !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
box-sizing: border-box !important;
}
.sap-modal-close {
position: absolute !important;
top: 15px !important;
right: 20px !important;
background: var(--sap-form-input-bg, #000000) !important;
border: 1px solid var(--sap-form-input-border, #4a5568) !important;
font-size: 24px !important;
line-height: 1 !important;
color: var(--sap-form-text, #ffffff) !important;
cursor: pointer !important;
padding: 4px 10px !important;
border-radius: 50% !important;
z-index: 999 !important;
} #form-first.reserve-now-frm {
background: var(--sap-form-bg) !important;
}
#form-first .form-row {
margin-bottom: 15px;
}
#form-first .half-width-group {
display: flex;
gap: 15px;
}
#form-first .half-width-group .half-width {
flex: 1;
} #form-first input[type="text"],
#form-first input[type="email"],
#form-first select,
#form-first textarea {
background-color: var(--sap-form-input-bg);
color: var(--sap-form-input-text);
border: 1px solid var(--sap-form-input-border);
border-radius: 4px;
padding: 10px 12px;
outline: none;
font-size: 15px;
box-sizing: border-box;
width: 100%;
} #form-first select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 35px;
cursor: pointer;
}
#form-first select option {
background-color: var(--sap-form-dropdown-option-bg);
color: var(--sap-form-input-text);
padding: 10px;
} #form-first input:focus,
#form-first select:focus,
#form-first textarea:focus {
border-color: var(--sap-form-input-focus-border);
} #form-first .submit-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin-top: 20px;
text-align: center;
}
#form-first input[type="submit"] {
display: inline-block;
margin: 0 auto;
width: 100%;
padding: 12px 30px;
background-color: var(--sap-form-submit-bg);
color: var(--sap-form-submit-text);
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
#form-first input[type="submit"]:hover {
background-color: var(--sap-form-submit-hover-bg);
} #form-first .reserve-title {
text-align: center;
margin-bottom: 25px;
font-size: 26px;
font-weight: 700;
color: var(--sap-form-text);
}
#form-first .call-footer-note h3 {
text-align: center;
margin-top: 20px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--sap-form-footer-text);
}
#form-first .call-footer-note a.btn-call-link {
color: var(--sap-form-footer-link);
text-decoration: underline;
font-weight: 700;
display: block;
margin-top: 4px;
transition: color 0.2s ease;
}
#form-first .call-footer-note a.btn-call-link:hover {
color: var(--sap-form-submit-hover-bg);
}