/* Plaza Noble · Public Web · seg-styles CSS
   Migrated from app/resources/views/pn/_partials/seg-styles.blade.php
*/

.pn-seg { background: var(--pn-pearl); }
    .pn-seg-layout {
        display: flex; gap: var(--pn-s5); align-items: flex-start;
        padding-bottom: var(--pn-s10);
    }
    .pn-seg-filters { width: 260px; flex: 0 0 260px; position: sticky; top: 152px; align-self: flex-start; }
    .pn-seg-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--pn-s3); }

    /* Reuse the hoteis screen system. These selectors mirror what hoteis ships. */
    .pn-res-summary {
        background: var(--pn-pearl);
        border-bottom: 1px solid var(--pn-divider);
        position: sticky; top: 64px; z-index: var(--pn-z-sticky, 30);
    }
    .pn-res-summary__inner { padding: var(--pn-s4) 0; }
    .pn-searchbar--compact { padding: 0; background: transparent; box-shadow: none; }
    .pn-searchbar--compact .pn-searchbar__field { padding: var(--pn-s3) var(--pn-s5); }
    .pn-searchbar--compact .pn-searchbar__btn {
        background: var(--pn-ink); color: var(--pn-pearl);
        padding: var(--pn-s3) var(--pn-s5);
    }

    .pn-res-header { padding: var(--pn-s8) 0 var(--pn-s5); }
    .pn-res-header__inner {
        display: flex; align-items: flex-end; justify-content: space-between;
        gap: var(--pn-s5); flex-wrap: wrap;
    }
    .pn-res-crumb {
        font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
        display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    }
    .pn-res-crumb a { color: inherit; text-decoration: none; }
    .pn-res-crumb a:hover { color: var(--pn-emerald); }
    .pn-res-title {
        font-size: clamp(36px, 5vw, 52px); font-weight: 500;
        letter-spacing: 0.04em; margin: var(--pn-s4) 0 0;
        line-height: 1.05; text-transform: uppercase;
    }
    .pn-res-title .pn-accent { font-style: normal; }
    .pn-res-subtitle { font-size: 13px; letter-spacing: 0.08em; margin-top: var(--pn-s3); }
    .pn-res-sort {
        display: inline-flex; gap: 4px; align-items: center;
        background: rgba(15, 11, 10, 0.05); border-radius: 999px; padding: 4px;
        flex-wrap: wrap;
    }
    .pn-res-sort__btn {
        border: 0; background: transparent;
        padding: 9px 14px; border-radius: 999px;
        font-size: 13px; cursor: pointer; color: var(--pn-text);
        font-family: inherit; transition: background .15s ease;
    }
    .pn-res-sort__btn.is-active { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

    .pn-res-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pn-s5); }
    .pn-res-filters__clear { background: none; border: 0; color: var(--pn-text-muted); font-size: 12px; cursor: pointer; font-family: inherit; }
    .pn-res-filters__clear:hover { color: var(--pn-emerald); }

    .pn-res-filterblock { padding-bottom: var(--pn-s5); margin-bottom: var(--pn-s5); border-bottom: 1px solid var(--pn-divider); }
    .pn-res-filterblock--last { border-bottom: 0; }
    .pn-res-filterblock__title { font-size: 13px; font-weight: 500; margin-bottom: var(--pn-s4); }

    .pn-res-check { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; cursor: pointer; }
    .pn-res-check__label { display: flex; align-items: center; gap: 10px; }
    .pn-res-check__box {
        width: 16px; height: 16px; border-radius: 4px;
        border: 1.5px solid var(--pn-divider); background: #fff;
        display: grid; place-items: center; color: var(--pn-pearl);
    }
    .pn-res-check__box.is-checked { background: var(--pn-ink); border-color: var(--pn-ink); }

    /* Cross-sell */
    .pn-res-crosssell { margin-top: var(--pn-s7); padding-top: var(--pn-s7); border-top: 1px solid var(--pn-divider); }
    .pn-res-crosssell__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--pn-s5); gap: var(--pn-s4); flex-wrap: wrap; }
    .pn-res-crosssell__title { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin-top: 6px; }
    .pn-res-crosssell__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pn-s3); }
    .pn-res-crosssell__card {
        background: #fff; border: 1px solid var(--pn-divider);
        border-radius: var(--pn-r-md); padding: var(--pn-s5);
        display: flex; flex-direction: column; gap: var(--pn-s3);
        cursor: pointer; text-decoration: none; color: inherit;
        transition: border-color .15s ease, transform .15s ease;
    }
    .pn-res-crosssell__card:hover { border-color: var(--pn-ink); transform: translateY(-2px); }
    .pn-res-crosssell__cardhead { display: flex; align-items: center; justify-content: space-between; }
    .pn-res-crosssell__cardicon {
        width: 40px; height: 40px; border-radius: 10px;
        background: var(--pn-emerald-soft); color: var(--pn-emerald);
        display: grid; place-items: center;
    }
    .pn-res-crosssell__cardtitle {
        font-size: 15px; letter-spacing: -0.005em;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pn-res-crosssell__cardsub { font-size: 12px; color: var(--pn-text-muted); margin-top: 4px; }
    .pn-res-crosssell__cardfoot {
        margin-top: auto; display: flex; align-items: center; justify-content: space-between;
        font-size: 13px; font-weight: 500;
    }

    @media (max-width: 1023px) {
        .pn-seg-filters { display: none; }
        .pn-res-crosssell__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 767px) {
        .pn-res-crosssell__grid { grid-template-columns: 1fr; }
        .pn-res-header__inner { flex-direction: column; align-items: stretch; }
        .pn-res-sort { overflow-x: auto; white-space: nowrap; }
    }