/*
 * Superior Bay: the design's overlay skin.
 *
 * Ported from the site's own custom.css, measured 2026-09-09. Thirteen rule blocks; seven of them
 * selected the PREVIOUS generation's `uk-` framework classes and are rewritten here for `fwk-`, which
 * is the whole reason this could not simply be pasted across.
 *
 * Loaded last in the design chain (parent's manifests, then each design's own `<key>.css`), so it wins
 * over the parent without !important except where the source already used it.
 */

/* Brand colour. On :root, as in the source, so the token reaches everything the page paints with it. */
:root {
    --fwre-green: #B12029;
}

/*
 * Checkbox width in the modal and in the minimal search. `uk-` → `fwk-`.
 *
 * ⚠️ Ported but NOT observed firing: neither `.fwk-modal-dialog` nor `.fwre-search-minimal` is present
 * on the two pages this order covers, measured in a browser on the test stand. It is kept rather than
 * dropped because the selector is the one the PRODUCT itself uses for the same thing
 * (`design-theme.css`: `#fwre.fwk-modal-dialog .fwk-checkbox`), so it is correctly translated and will
 * apply wherever those surfaces do render. Dropping it would be deciding that a rule he has today is
 * unnecessary, on the evidence of two pages.
 */
#fwre.fwk-modal-dialog .fwk-checkbox,
.fwre-search-minimal .fwk-checkbox {
    width: 16px;
    margin-top: 0;
    display: inline-block;
}

#fwre {
    font-size: 15px;
}

/*
 * Section headers. ⚠️ The source selects the bare class; here it needs `#fwre` in front of it.
 *
 * The product's own rule is `#fwre .fwre-property-section-header`, so a bare class loses the
 * specificity contest no matter how late the file loads — measured in a browser, where this rule was
 * the one thing in the ported sheet that did nothing: 24px computed against the 25px asked for. Raised
 * to match, which puts the decision back on load order, where this overlay wins.
 */
#fwre .fwre-property-section-header {
    font-size: 25px;
    line-height: 3;
    font-weight: 600;
}

/*
 * Primary buttons: pill, uppercase, with a fill that wipes in from the right on hover.
 *
 * "Raleway" is named as the source names it. The site's own template is what loads that face; where it
 * is absent the stack falls through, which is the same thing that happens on the source site today.
 */
#fwre .fwk-button-primary {
    border: none;
    position: relative;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Raleway", inherit;
    font-weight: 400;
    line-height: 45px;
    letter-spacing: 1px;
    z-index: 1;
    border-radius: 50px;
    box-shadow: 10px 10px 20px rgba(2, 6, 32, 0.1);
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

#fwre .fwk-button-primary:after {
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    position: absolute;
    right: 0;
    z-index: -1;
    transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
}

#fwre .fwk-button-primary {
    background-color: #fff !important;
    color: #b12029 !important;
}

/*
 * One block of the source is NOT ported, and saying so is the point of this note: it selected
 * `#fwre.uk-button-primary:after` with no space, i.e. an element carrying BOTH the id and the class,
 * which nothing on the page is. It set the fill colour, and the hover rule below sets the same colour
 * on the same pseudo-element, so the look is unchanged by leaving it out. Porting it faithfully would
 * have carried a selector that matches nothing; asking for it back is one line.
 */

#fwre .fwk-button-primary:hover,
#fwre .fwk-button-primary:active,
#fwre .fwk-button-primary:focus {
    color: #fff !important;
}

#fwre .fwk-button-primary:hover:after,
#fwre .fwk-button-primary:active:after,
#fwre .fwk-button-primary:focus:after {
    width: 100%;
    left: 0;
    right: auto;
    background-color: #b12029;
}

/*
 * ⛔ THE BUTTONS DECLARE THEIR OWN BOX, and this rule is the difference between a working card and
 * overlapping text on every phone.
 *
 * The buttons carry the SITE TEMPLATE's `jl-button` class, because that is what the pages being matched
 * use. On the site being matched that class computes `display: inline-block`, so the 15px/30px padding
 * from the media query below grows the button to 45px and four of them stack cleanly. **On any site
 * whose template does not define it, the anchor stays `inline`** — padding then does not grow the line
 * box, `width: 100%` is ignored, and the buttons paint over each other and over Read more.
 *
 * Measured 2026-09-11 in a browser, both sides: the live site 0 overlaps at 390/768/962/1024px with
 * `jl-button` computing inline-block; a stand without that template 3 overlaps per card at every width
 * below 1024, and none above — the boundary being exactly where the media query changes the line-height.
 *
 * So the layout stops depending on somebody else's stylesheet. Additive: where `jl-button` is defined
 * this changes nothing, because it already says the same.
 */
#fwre .fwre-superiorbay-button,
#fwre .fwre-item-more .fwre-read-more {
    display: inline-block;
}

/*
 * The card's data column, sized to match the media column beside it.
 *
 * ⛔ **`min-height`, where the source says `height` — a deliberate departure, and the only one.**
 *
 * A fixed height cannot hold the content: measured in a browser on the site being matched, the box is
 * 260px and its content 498px, with `overflow: visible`, so the surplus paints over the card below.
 * At 1024px that is **19 overlapping pairs of text on the source site itself** — the title lying across
 * the description, the address across the amenities — and it has been that way for years.
 *
 * The customisation already carries half the repair: the media query below releases the height under
 * 962px, which is the shape of a fix made after somebody complained about phones. Desktop was never
 * covered. `min-height` finishes it: the card keeps its proportion wherever the content is short, and
 * grows where it is not.
 *
 * Owner's instruction, 2026-09-11: a rebuild carries the work forward, not the defects.
 */
#fwre .fwre-item-data {
    min-height: 260px;
}

@media (max-width: 962px) {
    #fwre .fwre-item-data {
        min-height: 0;
    }

    /* `jl-button` is the site template's own button class, which the booking buttons carry. */
    #fwre .fwre-item-data a.jl-button {
        padding: 15px 30px;
        line-height: 15px;
    }
}

/*
 * The two specification tables, side by side.
 *
 * The site being matched puts them in a `uk-child-width-1-2@m` grid: the product's own three rows in
 * the left column, the three this add-on contributes in the right, stacking below the grid's `@m`
 * breakpoint. Neither table can carry that grid — the page prints the first one and then dispatches
 * the event the second arrives through, so nothing owns the pair — and `inline-table` needs no owner:
 * two of them sit on one line and any block element after them starts a new one.
 *
 * ⛔ **The width is conditional on there BEING a pair, and that is not a refinement.** A record with
 * none of this add-on's three values contributes no second table, and an unconditional 47% would leave
 * that record's stock table half-width and alone — a layout defect on exactly the records nobody
 * checks. `:has()` is the only thing in CSS that can look forward to a later sibling.
 *
 * ⚠️ **Where `:has()` is not supported the whole rule is dropped, which is the intended fallback**:
 * an unknown pseudo-class invalidates the entire selector list, so both tables keep the parent's full
 * width and stack. Stacked-but-correct is the right thing to degrade to.
 *
 * Scoped to `#fwre-details` because that is the only section that holds two of these. The id is
 * emitted in all three body modes (panels, tabs and the accordion), so the rule does not depend on
 * which one the site runs, and the Monthly Costs table below — a lone one inside `.fwre-specification`
 * — never matches `:has()` in the first place and needs no exception of its own.
 */
#fwre #fwre-details .fwre-spec-table-plain:has(+ .fwre-spec-table-plain),
#fwre #fwre-details .fwre-spec-table-plain:has(+ .fwre-spec-table-plain) + .fwre-spec-table-plain {
    display: inline-table;
    width: 47%;
    vertical-align: top;
}

#fwre #fwre-details .fwre-spec-table-plain:has(+ .fwre-spec-table-plain) + .fwre-spec-table-plain {
    margin-left: 4%;
}

/*
 * The customer's grid is `@m`, which is 960px in the framework his site runs.
 *
 * ⚠️ The selectors are repeated in full rather than shortened: the rule above carries an extra class
 * of specificity through `:has()`, and a shorter selector here would lose to it inside its own media
 * query — order does not decide a contest specificity has already settled.
 */
@media (max-width: 959px) {
    #fwre #fwre-details .fwre-spec-table-plain:has(+ .fwre-spec-table-plain),
    #fwre #fwre-details .fwre-spec-table-plain:has(+ .fwre-spec-table-plain) + .fwre-spec-table-plain {
        display: table;
        width: 100%;
        margin-left: 0;
    }
}

/*
 * ⚠️ **And the header above them has to stop being inline.**
 *
 * The product declares `.fwre-property-section-header` as `inline-block`, so the first table joins the
 * header's own line: measured at 1280px, the header took 149px of a 573px line and the second table
 * had 151px left, which is how two tables that both fit ended up stacked. Nothing about the header
 * LOOKS different as a block — the rule carries type and spacing, no background and no border — it just
 * ends its line, which is what the site being matched gets for free from the grid `div` underneath it.
 *
 * Scoped to this section, because it is the only one where two of these tables follow a header.
 */
#fwre #fwre-details .fwre-property-section-header {
    display: block;
}

/*
 * The label column needs no rule here: `#fwre .fwre-spec-name { width: 45% }` has been in the product
 * all along and was simply inert in the paired form, where the name is a `span` sharing a cell with
 * the value. In this shape it is the cell, so the product's own width applies again.
 */

/* The minimal search layout (views/module/search/minimal.php), from the design's legacy stylesheet. */
/* The official design styles this class as a floating hero bar; this layout sits in the flow. */
#fwre.fwre-search-minimal {
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
#fwre.fwre-search-minimal .fwre-search-minimal-fields {
    padding: 25px;
    background: white;
    border-radius: 15px;
    box-shadow: var(--fwre-shadow-small);
}
#fwre.fwre-search-minimal .fwre-search-minimal-fields .fwk-grid-divider > div > div:first-child { cursor: pointer; }
#fwre.fwre-search-minimal .fwre-search-minimal-fields .fwk-grid-divider > :not(.fwk-first-column)::before {
    top: calc(50% - 12px);
    height: 24px;
}
#fwre.fwre-search-minimal .fwre-search-minimal-fields .fwk-grid-divider > div:last-child::before { content: none; }
#fwre.fwre-search-minimal .fwre-filters {
    color: white;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, .5);
    border-color: rgba(255, 255, 255, .7);
}
#fwre.fwre-search-minimal .fwre-filters svg { color: white; margin-bottom: 5px; }
#fwre.fwre-search-minimal .fwre-sb-accent { color: var(--fwre-green); }
#fwre.fwre-search-minimal .fwk-dropdown .fwk-text-lead {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
#fwre.fwre-search-minimal .fwk-dropdown .fwk-button-default,
#fwre.fwre-search-minimal .fwre-sb-dialog .fwk-button-default {
    color: var(--fwre-grey-dark-deep);
    width: 100%;
    padding: 4px 16px;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    text-transform: none;
    border: 1px solid var(--fwre-grey-border);
    border-radius: 5px;
}
#fwre.fwre-search-minimal .fwre-sb-dialog .fwk-modal-footer .fwk-button-default { width: auto; }
#fwre.fwre-search-minimal .fwk-dropdown .fwk-button-default.fwre-sb-checked,
#fwre.fwre-search-minimal .fwre-sb-dialog .fwk-button-default.fwre-sb-checked {
    color: var(--fwre-green);
    border-color: var(--fwre-green) !important;
    background: var(--fwre-green-alpha);
}
#fwre.fwre-search-minimal .fwre-sb-dialog .fwk-checkbox {
    width: 16px;
    margin-top: 0;
    display: inline-block;
}
#fwre.fwre-search-minimal .irs--flat .irs-bar,
#fwre.fwre-search-minimal .irs--flat .irs-handle > i:first-child,
#fwre.fwre-search-minimal .irs--flat .irs-handle:hover > i:first-child { background: var(--fwre-green); }

/* The card's buttons column takes one width on every card, so the divider does not move with the button labels. */
@media (min-width: 960px) {
    #fwre .fwre-superiorbay-actions {
        flex: 0 0 300px;
        width: 300px;
    }
}
/* The site template gives its buttons a 45px line-height, which doubles a button whose label wraps. */
#fwre .fwre-superiorbay-actions .jl-button {
    line-height: 1.3;
    padding-top: 15px;
    padding-bottom: 15px;
}