/* =========================================
   SIURENT APPLICATION DESIGN SYSTEM
   Screenshot-inspired UI
========================================= */

:root {

    --sr-yellow: #FFB800;
    --sr-yellow-soft: #FFF4CC;

    --sr-navy: #172033;
    --sr-navy-soft: #243047;

    --sr-text: #1D2738;
    --sr-muted: #6B7280;

    --sr-border: #E6E9EF;

    --sr-bg: #F7F8FA;
    --sr-white: #FFFFFF;

    --sr-sidebar-width: 230px;
    --sr-right-width: 330px;

}


body {

    background: var(--sr-bg) !important;
    color: var(--sr-text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


.navbar,
footer,
.web-footer {

    display: none !important;

}


.page-content {

    padding: 0 !important;

}


/* =========================================
   APP
========================================= */

.sr-app {

    min-height: 100vh;
    display: flex;
    background: var(--sr-bg);

}


/* =========================================
   LEFT SIDEBAR
========================================= */

.sr-sidebar {

    width: var(--sr-sidebar-width);
    min-width: var(--sr-sidebar-width);

    background: var(--sr-white);

    border-right: 1px solid var(--sr-border);

    padding: 24px 14px;

    display: flex;
    flex-direction: column;

    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    overflow-y: auto;

    z-index: 50;

}


.sr-logo {

    font-size: 27px;
    font-weight: 800;

    margin: 0 10px 28px;

    letter-spacing: -1px;

}

.sr-logo-dark {

    color: var(--sr-navy);

}

.sr-logo-yellow {

    color: var(--sr-yellow);

}


.sr-post-button {

    height: 46px;

    border-radius: 9px;

    background: var(--sr-yellow);

    color: var(--sr-navy) !important;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    font-weight: 700;

    text-decoration: none !important;

    margin-bottom: 28px;

    box-shadow:
        0 5px 15px rgba(255,184,0,.20);

}


.sr-nav-section {

    margin-bottom: 20px;

}


.sr-nav-title {

    font-size: 10px;

    font-weight: 800;

    color: #9AA1AE;

    letter-spacing: 1px;

    margin:
        10px
        12px
        10px;

}


.sr-nav-item {

    height: 40px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 0 12px;

    border-radius: 8px;

    color: #5F6878 !important;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none !important;

    margin-bottom: 3px;

    position: relative;

}


.sr-nav-item:hover {

    background: #F7F8FA;

    color: var(--sr-navy) !important;

}


.sr-nav-item.active {

    background: linear-gradient(
        90deg,
        rgba(255,184,0,.18),
        rgba(255,184,0,.04)
    );

    color: var(--sr-navy) !important;

}


.sr-nav-item > span:first-child {

    width: 18px;

    font-size: 17px;

    text-align: center;

}


.sr-badge {

    margin-left: auto;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--sr-yellow);

    color: var(--sr-navy);

    font-size: 10px;

}


.sr-sidebar-bottom {

    margin-top: auto;

}


.sr-business-card {

    border-top: 1px solid var(--sr-border);

    padding: 18px 12px 0;

}


.sr-business-card strong {

    font-size: 13px;

}


.sr-business-card p {

    color: var(--sr-muted);

    font-size: 11px;

    line-height: 1.5;

    margin: 6px 0 14px;

}


.sr-upgrade-button {

    display: block;

    padding: 12px;

    text-align: center;

    background: var(--sr-navy);

    color: white !important;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none !important;

}


/* =========================================
   WORKSPACE
========================================= */

.sr-workspace {

    margin-left: var(--sr-sidebar-width);

    width: calc(100% - var(--sr-sidebar-width));

    min-width: 0;

}


/* =========================================
   TOPBAR
========================================= */

.sr-topbar {

    height: 72px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 0 24px;

    background: var(--sr-white);

    border-bottom: 1px solid var(--sr-border);

    position: sticky;

    top: 0;

    z-index: 30;

}


.sr-menu-btn {

    border: 0;

    background: transparent;

    font-size: 20px;

    color: var(--sr-muted);

}


.sr-search {

    flex: 1;

    max-width: 720px;

    height: 42px;

    display: flex;
    align-items: center;

    border: 1px solid var(--sr-border);

    border-radius: 10px;

    background: #FAFBFC;

    overflow: hidden;

}


.sr-search-icon {

    padding-left: 15px;

    font-size: 18px;

    color: var(--sr-muted);

}


.sr-search input {

    flex: 1;

    border: 0 !important;

    outline: none !important;

    background: transparent !important;

    padding: 0 14px;

    font-size: 12px;

    color: var(--sr-text);

}


.sr-search button {

    width: 42px;
    height: 42px;

    border: 0;

    background: var(--sr-yellow);

    font-size: 18px;

}


.sr-location {

    height: 42px;

    padding: 0 15px;

    background: #FAFBFC;

    border: 1px solid var(--sr-border);

    border-radius: 10px;

    color: var(--sr-text);

    font-size: 12px;

    font-weight: 600;

}


.sr-location span {

    color: var(--sr-yellow);

    margin-right: 6px;

}


.sr-location small {

    margin-left: 7px;

}


.sr-header-actions {

    display: flex;
    align-items: center;

    gap: 12px;

    margin-left: auto;

}


.sr-header-icon {

    border: 0;

    background: transparent;

    position: relative;

    font-size: 19px;

    color: var(--sr-navy);

}


.sr-header-icon i {

    position: absolute;

    top: -8px;
    right: -8px;

    background: var(--sr-yellow);

    width: 16px;
    height: 16px;

    border-radius: 50%;

    font-size: 9px;

    font-style: normal;

    display: flex;
    align-items: center;
    justify-content: center;

}


.sr-profile {

    display: flex;
    align-items: center;

    gap: 9px;

    background: transparent;

    border: 0;

    text-align: left;

}


.sr-avatar {

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: var(--sr-navy);

    color: var(--sr-yellow);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;

    font-weight: 800;

}


.sr-profile strong {

    display: block;

    font-size: 12px;

}


.sr-profile small {

    display: block;

    font-size: 10px;

    color: var(--sr-muted);

}


/* =========================================
   MAIN BODY
========================================= */

.sr-body {

    display: flex;

    min-height: calc(100vh - 72px);

}


.sr-main {

    flex: 1;

    min-width: 0;

    padding: 22px;

}


.sr-right-panel {

    width: var(--sr-right-width);

    min-width: var(--sr-right-width);

    background: var(--sr-white);

    border-left: 1px solid var(--sr-border);

    padding: 0;

}


/* =========================================
   HERO
========================================= */

.sr-hero {

    min-height: 190px;

    background: var(--sr-white);

    border: 1px solid var(--sr-border);

    border-radius: 18px;

    padding: 26px;

    display: flex;

    justify-content: space-between;

    overflow: hidden;

    box-shadow:
        0 3px 12px rgba(20,30,50,.03);

}


.sr-hero-text {

    max-width: 520px;

}


.sr-hero-text p {

    margin: 0 0 5px;

    font-size: 14px;

    color: var(--sr-muted);

}


.sr-hero h1 {

    margin: 0 0 8px;

    font-size: 28px;

    font-weight: 800;

    letter-spacing: -.7px;

    color: var(--sr-navy);

}


.sr-hero-text > span {

    display: block;

    color: var(--sr-muted);

    font-size: 13px;

    line-height: 1.5;

    max-width: 450px;

}


.sr-find-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 18px;

    padding: 12px 20px;

    border-radius: 9px;

    background: var(--sr-yellow);

    color: var(--sr-navy) !important;

    font-weight: 700;

    font-size: 13px;

    text-decoration: none !important;

}


.sr-hero-gallery {

    width: 205px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 7px;

    align-content: center;

}


.sr-hero-photo {

    height: 57px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #E9EDF2,
            #B8C0CC
        );

}


.photo-2 {

    background:
        linear-gradient(
            135deg,
            #D8C4A8,
            #8B735C
        );

}

.photo-3 {

    background:
        linear-gradient(
            135deg,
            #2A2E35,
            #A0A8B2
        );

}

.photo-4 {

    background:
        linear-gradient(
            135deg,
            #D5D8DA,
            #72777D
        );

}

.photo-5 {

    background:
        linear-gradient(
            135deg,
            #E7C77D,
            #A9712D
        );

}

.photo-6 {

    background:
        linear-gradient(
            135deg,
            #C5D7E4,
            #6B8FA5
        );

}


/* =========================================
   CATEGORY PILLS
========================================= */

.sr-categories {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding: 18px 0;

}


.sr-category {

    height: 38px;

    padding: 0 16px;

    border-radius: 18px;

    border: 1px solid var(--sr-border);

    background: var(--sr-white);

    color: #596274;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

}


.sr-category.active {

    background: var(--sr-yellow);

    border-color: var(--sr-yellow);

    color: var(--sr-navy);

}


/* =========================================
   FILTER BAR
========================================= */

.sr-filter-bar {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px;

    background: var(--sr-white);

    border: 1px solid var(--sr-border);

    border-radius: 14px;

}


.sr-filter-bar button {

    height: 36px;

    padding: 0 13px;

    border: 1px solid var(--sr-border);

    background: #FBFCFD;

    border-radius: 8px;

    color: #5C6575;

    font-size: 11px;

    font-weight: 600;

}


.sr-filter-bar button span {

    margin-left: 15px;

}


.sr-filter-bar .sr-filter-search {

    margin-left: auto;

    background: var(--sr-navy);

    color: white;

    border-color: var(--sr-navy);

    padding: 0 24px;

}


/* =========================================
   SECTIONS
========================================= */

.sr-section {

    margin-top: 22px;

}


.sr-section-heading {

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 14px;

}


.sr-section-heading h2 {

    margin: 0;

    color: var(--sr-navy);

    font-size: 17px;

    font-weight: 800;

}


.sr-section-heading p {

    margin: 4px 0 0;

    font-size: 11px;

    color: var(--sr-muted);

}


.sr-section-heading a {

    color: #C78600 !important;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none !important;

}


/* =========================================
   DYNAMIC LISTINGS
========================================= */

.sr-listings-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

}


/* Make dynamically generated cards fit */

.sr-listings-grid > * {

    min-width: 0;

}


.sr-listings-grid .siurent-listing-card,
.sr-listings-grid .listing-card {

    background: var(--sr-white);

    border: 1px solid var(--sr-border);

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 3px 10px rgba(0,0,0,.03);

}


/* =========================================
   RIGHT PANEL
========================================= */

.sr-ai-card {

    border-bottom: 1px solid var(--sr-border);

    padding-bottom: 15px;

}


.sr-ai-header {

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 16px;

    background: var(--sr-yellow);

    color: var(--sr-navy);

}


.sr-ai-header div {

    display: flex;
    align-items: center;

    gap: 7px;

}


.sr-ai-header strong {

    font-size: 14px;

}


.sr-ai-header small {

    background: var(--sr-navy);

    color: white;

    padding: 3px 6px;

    border-radius: 4px;

    font-size: 8px;

    font-weight: 800;

}


.sr-ai-header button {

    border: 0;

    background: transparent;

    font-size: 17px;

}


.sr-ai-message {

    margin: 10px 14px;

    padding: 13px 14px;

    border-radius: 12px;

    background: #F4F6F8;

    color: #505A6B;

    font-size: 12px;

    line-height: 1.5;

}


.sr-ai-suggestions {

    padding: 3px 14px;

}


.sr-ai-suggestions button {

    width: 100%;

    text-align: left;

    border: 0;

    background: transparent;

    padding: 8px 0;

    color: #A66B00;

    font-size: 11px;

    font-weight: 600;

}


.sr-ai-input {

    display: flex;

    margin: 12px 14px 0;

    background: #F5F6F8;

    border-radius: 9px;

    overflow: hidden;

}


.sr-ai-input input {

    flex: 1;

    height: 38px;

    border: 0 !important;

    outline: none !important;

    background: transparent !important;

    padding: 0 12px;

    font-size: 11px;

}


.sr-ai-input button {

    width: 40px;

    border: 0;

    background: transparent;

    color: #D99000;

}


.sr-panel-card {

    padding: 18px 16px;

    border-bottom: 1px solid var(--sr-border);

}


.sr-panel-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 14px;

}


.sr-panel-heading strong {

    font-size: 14px;

    color: var(--sr-navy);

}


.sr-panel-heading a {

    color: #C78600 !important;

    text-decoration: none !important;

    font-size: 11px;

    font-weight: 700;

}


.sr-booking {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 0;

}


.sr-booking-image {

    width: 38px;
    height: 38px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #F2B800,
            #303846
        );

    flex-shrink: 0;

}


.sr-booking-image.camera {

    background:
        linear-gradient(
            135deg,
            #20242A,
            #AAB2BD
        );

}


.sr-booking-image.tent {

    background:
        linear-gradient(
            135deg,
            #E2D6C4,
            #A9875C
        );

}


.sr-booking div:nth-child(2) {

    flex: 1;

    min-width: 0;

}


.sr-booking strong {

    display: block;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 10px;

}


.sr-booking small {

    display: block;

    color: var(--sr-muted);

    font-size: 9px;

    margin-top: 3px;

}


.sr-status {

    padding: 5px 7px;

    border-radius: 10px;

    font-size: 8px;

    font-weight: 700;

}


.ongoing {

    background: #E6F6EA;
    color: #31814B;

}

.upcoming {

    background: #FFF2D6;
    color: #A96800;

}

.completed {

    background: #EEF0F3;
    color: #6D7480;

}


.sr-market-card small {

    color: var(--sr-muted);

    font-size: 10px;

}


.sr-market-card h2 {

    margin: 8px 0 5px;

    color: var(--sr-navy);

    font-size: 22px;

}


.sr-market-card p {

    color: #4E9B64;

    font-size: 10px;

    margin: 0;

}


.sr-chart {

    text-align: right;

    font-size: 25px;

    color: var(--sr-yellow);

    letter-spacing: 2px;

    margin-top: 10px;

}


.sr-category-stat {

    display: flex;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid #F0F1F3;

    font-size: 11px;

}


.sr-category-stat small {

    color: var(--sr-muted);

}


/* =========================================
   LOADING
========================================= */

.sr-loading {

    grid-column: 1 / -1;

    padding: 35px;

    text-align: center;

    background: white;

    border: 1px solid var(--sr-border);

    border-radius: 12px;

    color: var(--sr-muted);

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1250px) {

    .sr-right-panel {

        display: none;

    }

    .sr-listings-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

}


@media (max-width: 900px) {

    .sr-sidebar {

        width: 70px;
        min-width: 70px;

    }

    .sr-workspace {

        margin-left: 70px;
        width: calc(100% - 70px);

    }

    .sr-logo {

        font-size: 0;

        text-align: center;

    }

    .sr-logo::after {

        content: "S";

        font-size: 28px;

        color: var(--sr-yellow);

    }

    .sr-post-button {

        font-size: 0;

    }

    .sr-post-button span {

        font-size: 20px;

    }

    .sr-nav-title,
    .sr-nav-item:not(.active) {
        font-size: 0;
    }

    .sr-nav-item span:first-child {

        font-size: 18px !important;

        margin: auto;

    }

    .sr-business-card {

        display: none;

    }

}


@media (max-width: 700px) {

    .sr-sidebar {

        display: none;

    }

    .sr-workspace {

        margin-left: 0;
        width: 100%;

    }

    .sr-location,
    .sr-profile div:not(.sr-avatar) {

        display: none;

    }

    .sr-hero-gallery {

        display: none;

    }

    .sr-listings-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .sr-filter-bar {

        overflow-x: auto;

    }

}