/* MyCityDekho - Smart Colony Modern Photorealistic Design System */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --sc-primary: #E85D04;        /* MyCityDekho Brand Orange */
    --sc-primary-hover: #D04D00;
    --sc-dark: #0F172A;           /* Slate 900 */
    --sc-body-bg: #F8FAFC;        /* Slate 50 */
    --sc-card-bg: #FFFFFF;
    --sc-text-main: #1E293B;      /* Slate 800 */
    --sc-text-muted: #64748B;     /* Slate 500 */
    --sc-border: #E2E8F0;
    
    /* Photorealistic Plot Fills */
    --status-available-grad: linear-gradient(135deg, #22C55E 0%, #15803D 100%);
    --status-booked-grad: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
    --status-sold-grad: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
    --status-nfs-grad: linear-gradient(135deg, #9CA3AF 0%, #4B5563 100%);

    /* Type scale -- additive, existing hardcoded font-sizes are untouched */
    --sc-font-xs: 11px;
    --sc-font-sm: 12.5px;
    --sc-font-base: 15px;
    --sc-font-lg: 17px;
    --sc-font-xl: 22px;
    --sc-font-2xl: 28px;
    --sc-font-3xl: 40px;

    /* Spacing scale -- additive, existing hardcoded padding/margin are untouched */
    --sc-space-1: 4px;
    --sc-space-2: 8px;
    --sc-space-3: 12px;
    --sc-space-4: 16px;
    --sc-space-5: 24px;
    --sc-space-6: 32px;
    --sc-space-7: 48px;
    --sc-space-8: 64px;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--sc-body-bg);
    color: var(--sc-text-main);
    -webkit-font-smoothing: antialiased;
}

body.sc-explorer-page {
    overflow-x: hidden !important;
}

/* Minimalist View Tab Switcher Buttons */
.sc-tab-btn-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 2px !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    border: none !important;
}

.view-tab-btn {
    border-radius: 30px !important;
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    color: #475569 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.view-tab-btn i {
    color: #E85D04 !important;
    margin-right: 6px !important;
    transition: color 0.2s ease !important;
}

.view-tab-btn:hover {
    border-color: #E85D04 !important;
    color: #E85D04 !important;
    background: #FFF5EF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(232, 93, 4, 0.12) !important;
}

.view-tab-btn.active {
    background: linear-gradient(135deg, #E85D04 0%, #FF6B35 100%) !important;
    color: #FFFFFF !important;
    border-color: #E85D04 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(232, 93, 4, 0.32) !important;
}

.view-tab-btn.active i {
    color: #FFFFFF !important;
}

/* Minimalist Soft Status Badges */
.hc-status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: capitalize;
    display: inline-block;
}
.hc-status-available, .badge-available {
    background: #ECFDF5 !important;
    color: #047857 !important;
    border: 1px solid #A7F3D0 !important;
}
.hc-status-booked, .badge-booked {
    background: #FEF9C3 !important;
    color: #854D0E !important;
    border: 1px solid #FDE047 !important;
}
.hc-status-sold, .badge-sold {
    background: #FEF2F2 !important;
    color: #B91C1C !important;
    border: 1px solid #FECACA !important;
}
.hc-status-not_for_sale, .badge-not_for_sale {
    background: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
}

/* Approval-status badges (pending/approved/rejected) -- same soft-pill
   treatment as the plot status badges above, reused across property
   submission pages (my_listings.blade.php) instead of ad-hoc inline
   styles or raw Bootstrap opacity utilities. */
.hc-status-badge.badge-sc-pending, .badge-sc-pending {
    background: #FEF9C3 !important;
    color: #854D0E !important;
    border: 1px solid #FDE047 !important;
}
.hc-status-badge.badge-sc-approved, .badge-sc-approved {
    background: #FFF3ED !important;
    color: var(--sc-primary) !important;
    border: 1px solid var(--sc-primary) !important;
}
.hc-status-badge.badge-sc-rejected, .badge-sc-rejected {
    background: #FEF2F2 !important;
    color: #B91C1C !important;
    border: 1px solid #FECACA !important;
}

/* Minimalist Plot Specs Grid Item */
.spec-grid-item {
    background: #F8FAFC;
    border: 1px solid #F1F5F9;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: all 0.2s ease;
}
.spec-grid-item:hover {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.spec-grid-item .spec-icon {
    font-size: 14px;
    color: #E85D04;
    margin-bottom: 2px;
}
.spec-grid-item .spec-label {
    font-size: 11px;
    color: #64748B;
    font-weight: 500;
}
.spec-grid-item .spec-value {
    font-size: 13.5px;
    color: #0F172A;
    font-weight: 700;
}

/* Minimalist Plot Detail Card */
.plot-detail-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

/* Header Navbar -- explicit z-index higher than any other sticky element
   on these pages (sidebars, filter panels) so it always stays on top
   regardless of DOM paint order, instead of relying on both sharing
   Bootstrap's default .sticky-top z-index and the later one winning. */
.sc-navbar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--sc-border);
    padding: 0.75rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    z-index: 1030;
}

.sc-logo {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--sc-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sc-logo-icon {
    width: 34px;
    height: 34px;
    background: var(--status-available-grad);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
}

/* Standardized Navbar Navigation Links */
.sc-navbar .nav-link-sc {
    font-size: 0.925rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none !important;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.sc-navbar .nav-link-sc:hover {
    color: #E85D04;
    background-color: rgba(232, 93, 4, 0.08);
}

.sc-navbar .nav-link-sc.active {
    color: #E85D04;
    font-weight: 700;
    background-color: rgba(232, 93, 4, 0.1);
}

.btn-sc-primary {
    background: linear-gradient(135deg, #E85D04 0%, #FF6B35 100%);
    border: 1.5px solid #E85D04;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.5rem 1.15rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(232, 93, 4, 0.25);
}

.btn-sc-primary:hover {
    background: linear-gradient(135deg, #D04D00 0%, #E85D04 100%);
    border-color: #D04D00;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(232, 93, 4, 0.35);
}

.btn-sc-outline {
    border: 1.5px solid #CBD5E1;
    background: #ffffff;
    color: #1E293B !important;
    font-weight: 700;
    border-radius: 10px;
    padding: 0.5rem 1.15rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-sc-outline:hover {
    border-color: #E85D04;
    color: #E85D04 !important;
    background: rgba(232, 93, 4, 0.05);
}

/* Plot inventory list -- Housing.com-style scannable table, replacing the
   old abstract spatial diagram. */
.hc-plot-list-panel {
    background: #FFFFFF;
    border: 1px solid var(--sc-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.hc-plot-table {
    margin-bottom: 0;
}

.hc-plot-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--sc-text-muted);
    border-bottom: 1px solid var(--sc-border);
    padding: 10px 12px;
}

.hc-plot-table tbody td {
    padding: 14px 12px;
    font-size: 13.5px;
    color: var(--sc-text-main);
    border-bottom: 1px solid var(--sc-border);
}

.hc-plot-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.hc-plot-row:hover {
    background-color: #F8FAFC;
}

.hc-plot-row.selected {
    background-color: rgba(16, 185, 129, 0.06);
}

.hc-plot-row.selected td:first-child {
    box-shadow: inset 3px 0 0 var(--sc-primary);
}

.hc-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.hc-status-badge.hc-status-available { background: var(--status-available-grad); }
.hc-status-badge.hc-status-booked { background: var(--status-booked-grad); }
.hc-status-badge.hc-status-sold { background: var(--status-sold-grad); }
.hc-status-badge.hc-status-not_for_sale { background: var(--status-nfs-grad); }

/* Bare .badge-{status}, applied directly to Bootstrap's .badge in the explorer's
   plot-detail sidebar (distinct element from .hc-status-badge above, same colors) */
.badge-available { background: var(--status-available-grad); color: #fff; }
.badge-booked { background: var(--status-booked-grad); color: #fff; }
.badge-sold { background: var(--status-sold-grad); color: #fff; }
.badge-not_for_sale { background: var(--status-nfs-grad); color: #fff; }

/* Sticky plot-detail/booking panel (explorer's right column) -- same treatment
   as the equivalent card on the standalone plot_detail page */
.plot-detail-card {
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Spec Item Card Grid */
.spec-grid-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: all 0.2s ease;
}

.spec-grid-item:hover {
    background: #FFFFFF;
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.spec-icon {
    font-size: 20px;
    color: var(--sc-primary);
    margin-bottom: 6px;
}

.spec-label {
    font-size: 11px;
    color: var(--sc-text-muted);
    font-weight: 600;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--sc-dark);
}

/* 99acres-Style Verification Guide Card */
.verify-card {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border: 1px solid #86EFAC;
    border-radius: 14px;
    padding: 18px;
}

.verify-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #14532D;
    margin-bottom: 8px;
}

/* Trust Badges Bar */
.trust-badges-bar {
    background: #FFFFFF;
    border-top: 1px solid var(--sc-border);
    padding: 1rem 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-text-muted);
}

/* Custom Green Form Select Dropdown Styling (Pic 2 fix) */
.form-select, select {
    accent-color: var(--sc-primary) !important;
    border-color: #CBD5E1 !important;
    transition: all 0.2s ease !important;
}

.form-select:focus, select:focus, .form-control:focus {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.2) !important;
    outline: none !important;
}

/* Select2 Pure Emerald Green Theme Overrides (Prevents Browser Blue) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover,
.select2-container--default .select2-results__option--selected {
    background-color: #10B981 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #059669 !important;
    color: #ffffff !important;
}

.select2-dropdown {
    border: 1px solid #10B981 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #CBD5E1 !important;
    border-radius: 10px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.2) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

/* ============================================================
   Housing.com-style Search Results Layout
   ============================================================ */

.hc-body {
    background-color: var(--sc-body-bg);
}

.nav-pills .nav-link.active { background-color: var(--sc-primary); }
.nav-pills .nav-link:not(.active) { color: var(--sc-text-main); }

.hc-search-strip {
    background: #FFFFFF;
    border-bottom: 1px solid var(--sc-border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.hc-search-field .select2-container {
    width: 100% !important;
}

/* Buy / Rent tabs -- drive the `type` filter, not decorative */
.hc-type-tabs {
    display: flex;
    background: #F1F5F9;
    border-radius: 10px;
    padding: var(--sc-space-1);
    flex-shrink: 0;
}

.hc-type-tab {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sc-text-muted);
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.hc-type-tab.active {
    background: #FFFFFF;
    color: var(--sc-primary);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.hc-type-tab:hover:not(.active) {
    color: var(--sc-text-main);
}

/* Filter Sidebar */
.hc-filter-panel {
    background: #FFFFFF;
    border: 1px solid var(--sc-border);
    border-radius: 16px;
    padding: 20px;
    position: sticky;
    top: 90px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.hc-filter-group {
    padding: 14px 0;
    border-bottom: 1px solid var(--sc-border);
}

.hc-filter-group:last-of-type {
    border-bottom: none;
    padding-bottom: var(--sc-space-1);
}

.hc-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--sc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: block;
    margin-bottom: var(--sc-space-2);
}

.hc-help-card {
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
    border: 1px solid #A7F3D0;
    border-radius: 16px;
    padding: 18px;
    text-align: center;
}

/* Premium Property Card -- horizontal, Housing.com style */
.hc-card {
    background: #FFFFFF;
    border: 1px solid var(--sc-border);
    border-radius: 18px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    cursor: pointer;
}

.hc-card:hover {
    box-shadow: 0 14px 30px -10px rgba(15, 23, 42, 0.16);
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.hc-card:focus-visible {
    outline: 2px solid var(--sc-primary, #E85D04);
    outline-offset: 2px;
}

.hc-card-media {
    position: relative;
    flex: 0 0 280px;
    max-width: 280px;
    min-height: 200px;
    background: #F1F5F9;
}

.hc-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hc-card-media-placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    color: #CBD5E1;
    font-size: 38px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
}

.hc-card-media-placeholder span {
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.hc-badge-stack {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.hc-badge {
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    font-size: var(--sc-font-xs);
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}

.hc-badge-verified {
    background: var(--status-available-grad);
}

.hc-badge-siteplan {
    background: rgba(255, 255, 255, 0.92);
    color: var(--sc-text-main) !important;
    border: 1px solid var(--sc-border);
}

.hc-badge-siteplan:hover {
    background: #FFFFFF;
    color: var(--sc-primary) !important;
}

.hc-shortlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    font-size: var(--sc-font-base);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
    transition: all 0.2s ease;
}

.hc-shortlist-btn:hover {
    color: #EF4444;
    transform: scale(1.08);
}

.hc-shortlist-btn.active {
    color: #EF4444;
}

.hc-card-body {
    flex: 1;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.hc-card-price {
    font-size: 19px;
    font-weight: 800;
    color: var(--sc-dark);
}

.hc-card-price span {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-text-muted);
}

.hc-card-title {
    display: block;
    font-size: var(--sc-font-base);
    font-weight: 700;
    color: var(--sc-text-main);
    text-decoration: none !important;
    margin-top: 2px;
}

.hc-card-title:hover {
    color: var(--sc-primary);
}

.hc-card-location {
    font-size: var(--sc-font-sm);
    color: var(--sc-text-muted);
    margin-top: 2px;
}

.hc-developer-chip {
    font-size: var(--sc-font-xs);
    font-weight: 700;
    color: #475569;
    background: #F1F5F9;
    border: 1px solid var(--sc-border);
    padding: 5px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.hc-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px dashed var(--sc-border);
    border-bottom: 1px dashed var(--sc-border);
}

.hc-spec {
    font-size: var(--sc-font-sm);
    font-weight: 600;
    color: var(--sc-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hc-spec i {
    color: #94A3B8;
    font-size: 12px;
}

.hc-spec-available {
    color: #059669;
}

.hc-spec-available i {
    color: #10B981;
}

.hc-card-footer {
    display: flex;
    gap: 10px;
}

@media (max-width: 767.98px) {
    .hc-card {
        flex-direction: column;
    }

    .hc-card-media {
        flex: 0 0 auto;
        max-width: 100%;
        height: 180px;
    }

    .hc-filter-panel {
        position: static;
    }
}

/* Colony explorer photo gallery -- hero + thumbnail strip */
.sc-gallery {
    margin-bottom: 20px;
}

.sc-gallery-hero {
    height: 380px;
    border-radius: 18px;
    overflow: hidden;
    background: #F1F5F9;
    box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.2);
}

.sc-gallery-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.sc-gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: var(--sc-space-1);
}

.sc-gallery-thumb {
    width: 96px;
    height: 68px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.sc-gallery-thumb:hover {
    opacity: 0.9;
}

.sc-gallery-thumb.active {
    opacity: 1;
    border-color: var(--sc-primary);
}

@media (max-width: 767.98px) {
    .sc-gallery-hero {
        height: 240px;
    }
}

/* ============================================================
   Accessibility -- visible keyboard focus on every interactive
   element (buttons, links, cards, gallery thumbs, form controls)
   ============================================================ */
.sc-navbar a:focus-visible,
.btn-sc-primary:focus-visible,
.btn-sc-outline:focus-visible,
.hc-card-title:focus-visible,
.hc-shortlist-btn:focus-visible,
.sc-gallery-thumb:focus-visible,
.hc-plot-row:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2.5px solid var(--sc-primary);
    outline-offset: 2px;
}

/* ============================================================
   Navbar -- frosted glass once the page scrolls, instead of a
   flat bar for the whole session
   ============================================================ */
.sc-navbar {
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
}
.sc-navbar.sc-navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    box-shadow: 0 2px 16px rgba(15, 23, 42, 0.08);
}

/* ============================================================
   Motion primitives -- entrance, skeleton loading, toast, ripple.
   All disabled if the OS requests reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    @keyframes sc-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes sc-slide-up {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes sc-scale-in {
        from { opacity: 0; transform: scale(0.96); }
        to { opacity: 1; transform: scale(1); }
    }
    .sc-anim-in {
        animation: sc-slide-up 0.4s ease both;
    }
    .hc-card.sc-anim-in,
    .hc-plot-row.sc-anim-in {
        animation-duration: 0.35s;
    }
}

@keyframes sc-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.sc-skeleton {
    display: inline-block;
    border-radius: 6px;
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 37%, #E2E8F0 63%);
    background-size: 400% 100%;
}
@media (prefers-reduced-motion: no-preference) {
    .sc-skeleton { animation: sc-shimmer 1.4s ease-in-out infinite; }
}

.sc-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: scale(0);
    pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
    .sc-ripple { animation: sc-ripple-grow 0.55s ease-out; }
}
@keyframes sc-ripple-grow {
    to { transform: scale(3); opacity: 0; }
}

.sc-toast-stack {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sc-toast {
    background: var(--sc-dark);
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
}
.sc-toast i { color: var(--sc-primary); }
@media (prefers-reduced-motion: no-preference) {
    .sc-toast {
        animation: sc-toast-in 0.3s ease, sc-toast-out 0.3s ease 2.6s forwards;
    }
    @keyframes sc-toast-in {
        from { transform: translateX(30px); opacity: 0; }
        to { transform: none; opacity: 1; }
    }
    @keyframes sc-toast-out {
        to { transform: translateX(30px); opacity: 0; }
    }
}

/* ============================================================
   SMART COLONY EXPLORER MOBILE RESPONSIVE MEDIA QUERIES
   ============================================================ */

@media (max-width: 991.98px) {
    .container-fluid.px-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .plot-detail-card.sticky-top {
        position: static !important;
        top: auto !important;
        margin-top: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }

    body.sc-explorer-page {
        padding-bottom: 72px !important;
    }
}

@media (max-width: 767.98px) {
    /* Top Header Title & Badges */
    .sc-header-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    h3.fw-bold {
        font-size: 1.25rem !important;
    }

    /* Horizontal scrollable tab buttons on mobile */
    .sc-tab-btn-row {
        display: flex !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 4px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .view-tab-btn {
        flex: 1 0 auto !important;
        font-size: 12px !important;
        padding: 6px 14px !important;
    }

    /* Photo Gallery Hero Image */
    .sc-gallery-hero img {
        height: 220px !important;
        max-height: 220px !important;
        object-fit: cover !important;
    }
    .sc-gallery-overlay {
        padding: 8px 12px !important;
    }
    .sc-gallery-overlay .badge {
        font-size: 10.5px !important;
        padding: 3px 8px !important;
    }
    #btnOpenPhotoLightbox {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* Gallery Thumbnails */
    .sc-gallery-thumb {
        width: 72px !important;
        height: 48px !important;
        border-radius: 6px !important;
    }

    /* Summary Bar Grid Layout */
    .sc-summary-bar-container {
        padding: 10px !important;
    }
    .sc-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .sc-summary-grid > div {
        justify-content: flex-start !important;
        padding: 8px 10px !important;
    }
    .sc-summary-grid > div:first-child {
        grid-column: span 2;
    }

    /* Plot Inventory Table on Mobile */
    .hc-plot-table {
        font-size: 12px !important;
    }
    .hc-plot-table th, 
    .hc-plot-table td {
        padding: 8px 10px !important;
        white-space: nowrap;
    }
    .hc-status-badge {
        font-size: 10.5px !important;
        padding: 3px 8px !important;
    }

    /* Naksa Site Plan & GIS Map Canvas */
    #naksaContainer embed,
    #naksaContainer iframe,
    #naksaImage {
        max-height: 320px !important;
    }
    #mapCanvas {
        height: 350px !important;
    }

    /* Plot Details Card & Specs Grid */
    .plot-detail-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }
    .spec-grid-item {
        padding: 8px 10px !important;
    }
    .spec-grid-item .spec-label {
        font-size: 10.5px !important;
    }
    .spec-grid-item .spec-value {
        font-size: 12.5px !important;
    }

    /* Mobile Clearance & Floating Bottom Action Bar */
    body.sc-explorer-page {
        padding-top: 15px !important;
        padding-bottom: 75px !important;
    }
    .hc-body {
        padding-bottom: 90px !important;
    }

    .sc-mobile-bottom-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #FFFFFF !important;
        padding: 10px 14px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important;
        z-index: 1045 !important;
        gap: 10px !important;
        border-top: 1px solid #E2E8F0 !important;
    }
    .sc-mobile-bottom-bar button,
    .sc-mobile-bottom-bar a {
        flex: 1;
        font-weight: 700;
        font-size: 12.5px;
        padding: 9px 10px;
        border-radius: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .container-fluid.px-4 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .sc-gallery-hero img {
        height: 190px !important;
        max-height: 190px !important;
    }
}

/* Photo/Naksa lightbox modal headers -- title+badge and the zoom/close button
   group don't fit on one row at mobile widths without wrapping. */
@media (max-width: 576px) {
    #photoLightboxModal .modal-header,
    #naksaLightboxModal .modal-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 14px !important;
    }
    #photoLightboxModal .modal-header > div:first-child,
    #naksaLightboxModal .modal-header > div:first-child {
        min-width: 0;
        flex-wrap: wrap;
    }
    #photoLightboxModal .modal-header .modal-title,
    #naksaLightboxModal .modal-header .modal-title {
        font-size: 13.5px;
        margin-left: 0 !important;
        overflow-wrap: break-word;
    }
    #photoLightboxModal .modal-header > div:last-child,
    #naksaLightboxModal .modal-header > div:last-child {
        width: 100%;
        justify-content: flex-end;
    }
}