/* ─── SiteLink Integration Styles ─────────────────────────────────────────── */
/* Brand: bg #f1f6f2  accent #c9a170 */

.sl-section { margin: 2rem 0; }

/* ─── Tabs ──────────────────────────────────────────────────────────────────── */

.sl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.sl-tab {
    padding: .4rem 1.1rem;
    border-radius: 100px;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid #d4e2d6;
    background: #fff;
    color: #4a5e4c;
    transition: all .15s;
}
.sl-tab:hover { border-color: #c9a170; color: #c9a170; }
.sl-tab--active { background: #c9a170 !important; color: #fff !important; border-color: #c9a170 !important; }

/* ─── Unit Grid ─────────────────────────────────────────────────────────────── */

.sl-unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.sl-unit-card {
    background: #fff;
    border: 1px solid #dce8de;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    transition: box-shadow .2s;
}
.sl-unit-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.sl-unit-card--full { opacity: .75; }

/* ─── Badges ────────────────────────────────────────────────────────────────── */

.sl-unit-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-height: 24px;
    margin-bottom: .25rem;
}
.sl-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sl-badge-cc     { background: #eaf0fb; color: #2a4fa8; }
.sl-badge-drive  { background: #e8f2e9; color: #3a6b3f; }
.sl-badge-inside { background: #f5eef8; color: #6b3a9a; }
.sl-badge-ramp   { background: #fdf3e0; color: #a3690f; }

/* ─── Card content ───────────────────────────────────────────────────────────── */

.sl-unit-card__size  { font-size: 1.25rem; font-weight: 600; color: #1a2e1d; }
.sl-unit-card__sqft  { font-size: .8rem; color: #7a8f7d; margin-bottom: .15rem; }
.sl-unit-card__price { font-size: 1.5rem; font-weight: 700; color: #1a2e1d; margin: .25rem 0; }
.sl-unit-card__price span { font-size: .85rem; font-weight: 400; color: #7a8f7d; }
.sl-unit-card__avail { font-size: .8rem; font-weight: 500; margin-bottom: .25rem; }

.sl-avail-yes { color: #3a6b3f; }
.sl-avail-no  { color: #b85c3a; }

/* ─── Buttons ────────────────────────────────────────────────────────────────── */

.sl-unit-btn {
    display: block;
    margin-top: .5rem;
    padding: .6rem 1rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s;
}
.sl-unit-btn:hover { opacity: .88; }

.sl-unit-btn--reserve {
    background: #c9a170;
    color: #fff !important;
}
.sl-unit-btn--call {
    background: #f1f6f2;
    color: #4a5e4c !important;
    border: 1.5px solid #d4e2d6;
}

/* ─── Forms ──────────────────────────────────────────────────────────────────── */

.sl-form-wrap    { max-width: 680px; }
.sl-form-title   { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; }
.sl-form-section-label { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: #333; border-bottom: 1px solid #eee; padding-bottom: .25rem; }

.sl-field-row    { display: flex; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }

.sl-input {
    flex: 1 1 180px;
    padding: .65rem .85rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: .95rem;
    transition: border-color .15s;
    min-width: 0;
}
.sl-input:focus  { outline: none; border-color: #c9a170; box-shadow: 0 0 0 2px rgba(201,161,112,.2); }
.sl-input.sl-full  { flex: 1 1 100%; width: 100%; }
.sl-input.sl-small { flex: 0 0 90px; }
.sl-select       { cursor: pointer; background: #fff; }

/* ─── Form submit button ──────────────────────────────────────────────────────── */

.sl-btn {
    display: inline-block;
    margin-top: .75rem;
    padding: .7rem 1.6rem;
    background: #c9a170;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .2s;
}
.sl-btn:hover    { opacity: .88; }
.sl-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ─── Notices ────────────────────────────────────────────────────────────────── */

.sl-notice { padding: .85rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .95rem; }
.sl-notice-error   { background: #fdecea; border: 1px solid #f5c6cb; color: #c62828; }
.sl-notice-success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }

/* ─── Pre-selected unit banner (arriving from a "Reserve now" click) ──────────── */

.sl-preselect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #f7f2ea;
    border: 1px solid #e5d3b8;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}
.sl-preselect__info { font-size: .95rem; color: #3a3226; }
.sl-preselect__toggle {
    background: none;
    border: 1px solid #c9a170;
    color: #a3690f;
    border-radius: 100px;
    padding: .4rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.sl-preselect__toggle:hover { background: #c9a170; color: #fff; }

/* ─── Pay portal ─────────────────────────────────────────────────────────────── */

.sl-or { text-align: center; color: #999; margin: .5rem 0; font-style: italic; }
.sl-pay-summary { background: #f5f5f5; border-radius: 6px; padding: .85rem 1rem; margin-bottom: 1rem; }
.sl-pay-info .sl-balance { display: block; font-size: 1.2rem; font-weight: 700; color: #c62828; margin-top: .25rem; }
.sl-secure-note { font-size: .8rem; color: #666; margin: .25rem 0 .75rem; }

/* ─── Misc ───────────────────────────────────────────────────────────────────── */

.sl-loading { color: #888; font-style: italic; padding: 1rem 0; }
.sl-empty, .sl-error { color: #999; padding: 1rem 0; }
.sl-error   { color: #c62828; }

/* ─── Facility Map ───────────────────────────────────────────────────────────── */

/* Elementor's flex containers give child widgets a fixed default width
   (observed: 300px) unless overridden — this widget's own element ID
   (ec930bb, deterministic from our page-generator's fixed seed) needs an
   explicit override to actually fill its parent container. */
.elementor-element-ec930bb,
.elementor-element-ec930bb > .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
}
.sl-map-frame {
    width: 100%;
    margin: 0 auto;
}
.sl-map-svg { width: 100%; height: auto; display: block; }
.sl-map-toolbar {
    width: 100%;
    margin: 0 auto 1rem;
    font-size: .9rem;
    color: #4a5e4c;
}
.sl-map-toolbar label { display: flex; align-items: center; gap: .5rem; cursor: pointer; width: fit-content; }
.sl-map-unit { cursor: pointer; transition: opacity .1s; }
.sl-map-unit:hover { opacity: .8; }
.sl-map-unit--active { stroke: #272a27 !important; stroke-width: 1.2 !important; }
.sl-map-popup {
    max-width: 420px;
    margin: 1.25rem auto 0;
    background: #fff;
    border: 1px solid #e5d3b8;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    text-align: center;
}
.sl-map-popup__name { font-size: 1.1rem; font-weight: 700; color: #1a2e1d; }
.sl-map-popup__size { font-size: .85rem; color: #7a8f7d; margin-top: .2rem; }
.sl-map-popup__status { display: inline-block; margin-top: .5rem; padding: .2rem .7rem; border-radius: 100px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.sl-map-status--available { background: #e6f4ea; color: #2e7d32; }
.sl-map-status--rented    { background: #fdecea; color: #c62828; }
.sl-map-status--reserved  { background: #fdf3e0; color: #a3690f; }
.sl-map-popup__rate { font-size: 1.05rem; font-weight: 700; color: #1a2e1d; margin-top: .5rem; }
.sl-map-popup .sl-unit-btn { display: inline-block; margin-top: .75rem; }

@media (max-width: 480px) {
    .sl-unit-grid { grid-template-columns: 1fr 1fr; }
    .sl-tabs      { gap: .35rem; }
    .sl-tab       { font-size: .8rem; padding: .35rem .85rem; }
}