@charset "UTF-8";

/**
 * Mandola Vihar Core — public styles
 * ============================================================================
 *
 * Built by Bakhoobi Services Private Limited
 * https://bakhoobiservices.com  |  online@bakhoobiservices.com
 * Copyright 2026 Bakhoobi Services Private Limited. Licensed GPL-2.0-or-later.
 *
 * Styles the shortcode output: rate tables, the sector map, notice lists and
 * the enquiry form.
 *
 * DESIGN INHERITANCE
 *
 * Every colour and font here reads a --bspl_mv_* custom property from the theme,
 * with a fallback after each var(). That means:
 *
 *   - With the Mandola Vihar theme active, plugin output matches the site
 *     exactly, and a palette change in the theme updates it automatically.
 *   - With any OTHER theme active, the fallbacks keep it legible rather than
 *     unstyled. A plugin must never look broken because the theme changed.
 *
 * Mobile first throughout: min-width queries only.
 */

/* ==========================================================================
   Tables
   ========================================================================== */

.bspl_mv_table-scroll {
    overflow-x: auto;
    background: var(--bspl_mv_surface, #ffffff);
    border: 1px solid var(--bspl_mv_line, #d3d7cf);
    border-radius: var(--bspl_mv_radius, 4px);
    -webkit-overflow-scrolling: touch;
}

.bspl_mv_table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.9375rem;

    /* Below this the columns crush together and the figures stop being
       comparable; the container scrolls instead. */
    min-width: 560px;
}

.bspl_mv_table th,
.bspl_mv_table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--bspl_mv_line-soft, #e6e8e1);
    text-align: left;
    vertical-align: middle;
}

.bspl_mv_table thead th {
    background: var(--bspl_mv_wash, #edefe9);
    color: var(--bspl_mv_muted, #6e7872);
    font-family: var(--bspl_mv_font-mono, ui-monospace, Consolas, monospace);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bspl_mv_table tbody tr:nth-child(even) {
    background: #fafbf8;
}

.bspl_mv_table tbody tr:last-child th,
.bspl_mv_table tbody tr:last-child td {
    border-bottom: 0;
}

.bspl_mv_table__sector {
    color: var(--bspl_mv_ink, #0f1512);
    font-weight: 600;
    white-space: nowrap;
}

/**
 * Numeric cells.
 *
 * tabular-nums forces every digit to the same width, so rates line up down
 * the column and can be compared. Without it a 1 is narrower than a 7 and the
 * column visibly wobbles.
 */
.bspl_mv_table__figure {
    font-family: var(--bspl_mv_font-mono, ui-monospace, Consolas, monospace);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   Status pills and chips
   ========================================================================== */

.bspl_mv_status {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: var(--bspl_mv_radius-sm, 3px);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Each state carries distinct TEXT as well as colour, so the meaning survives
   for a colour-blind reader. WCAG 1.4.1. */
.bspl_mv_status--open,
.bspl_mv_status--auction {
    background: var(--bspl_mv_green-tint, #e3efea);
    border: 1px solid var(--bspl_mv_green-line, #b7d3ca);
    color: var(--bspl_mv_green, #12574a);
}

.bspl_mv_status--waitlist,
.bspl_mv_status--upcoming {
    background: var(--bspl_mv_ochre-tint, #f3eddf);
    border: 1px solid var(--bspl_mv_ochre-line, #dfcb9e);
    color: var(--bspl_mv_ochre, #8a6420);
}

.bspl_mv_status--allotted {
    background: var(--bspl_mv_wash, #edefe9);
    border: 1px solid var(--bspl_mv_line, #d3d7cf);
    color: var(--bspl_mv_muted, #6e7872);
}

.bspl_mv_chip {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: var(--bspl_mv_green-tint, #e3efea);
    border: 1px solid var(--bspl_mv_green-line, #b7d3ca);
    border-radius: var(--bspl_mv_radius-sm, 3px);
    color: var(--bspl_mv_green, #12574a);
    font-family: var(--bspl_mv_font-mono, ui-monospace, Consolas, monospace);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ==========================================================================
   Sector map
   --------------------------------------------------------------------------
   Hotspot POSITION comes from wp_add_inline_style() in Frontend\Shortcodes,
   because x/y/w/h are per-sector data and cannot live in a static file.
   Everything else is here.
   ========================================================================== */

.bspl_mv_map {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 0 1.5rem;
    line-height: 0;
}

.bspl_mv_map__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--bspl_mv_radius, 4px);
}

.bspl_mv_map__hotspot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 2px;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.bspl_mv_map__hotspot:hover,
.bspl_mv_map__hotspot:focus-visible {
    background: rgba(18, 87, 74, 0.28);
    border-color: var(--bspl_mv_green, #12574a);
}

/* A hotspot is invisible until hovered, so without a strong focus ring a
   keyboard user has no idea where they are on the map. */
.bspl_mv_map__hotspot:focus-visible {
    outline: 3px solid var(--bspl_mv_gold, #c9a227);
    outline-offset: 2px;
}

.bspl_mv_map__label {
    padding: 0.15rem 0.4rem;
    background: var(--bspl_mv_green, #12574a);
    border-radius: 2px;
    color: #ffffff;
    font-family: var(--bspl_mv_font-body, system-ui, sans-serif);
    font-size: 0.75rem;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 160ms ease;
}

.bspl_mv_map__hotspot:hover .bspl_mv_map__label,
.bspl_mv_map__hotspot:focus-visible .bspl_mv_map__label {
    opacity: 1;
}

/* The plain-text sector list under the map. Not a fallback — a peer. */
.bspl_mv_map__list {
    line-height: 1.6;
}

.bspl_mv_map__list-title {
    margin: 0 0 0.5rem;
    color: var(--bspl_mv_muted, #6e7872);
    font-family: var(--bspl_mv_font-mono, ui-monospace, Consolas, monospace);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bspl_mv_map__list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bspl_mv_map__list a {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    background: var(--bspl_mv_surface, #ffffff);
    border: 1px solid var(--bspl_mv_line, #d3d7cf);
    border-radius: var(--bspl_mv_radius-sm, 3px);
    color: var(--bspl_mv_ink-soft, #39433d);
    font-size: 0.875rem;
    text-decoration: none;
}

.bspl_mv_map__list a:hover {
    border-color: var(--bspl_mv_green-line, #b7d3ca);
    color: var(--bspl_mv_green, #12574a);
}

/* ==========================================================================
   Notices
   ========================================================================== */

.bspl_mv_notices {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bspl_mv_notice {
    padding: 1.25rem;
    background: var(--bspl_mv_surface, #ffffff);
    border: 1px solid var(--bspl_mv_line, #d3d7cf);
    border-radius: var(--bspl_mv_radius, 4px);
}

.bspl_mv_notice__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.bspl_mv_notice__title {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
    line-height: 1.35;
}

.bspl_mv_notice__title a {
    color: var(--bspl_mv_ink, #0f1512);
    text-decoration: none;
}

.bspl_mv_notice__title a:hover {
    color: var(--bspl_mv_green, #12574a);
}

.bspl_mv_notice__deadline {
    margin: 0;
    color: var(--bspl_mv_muted, #6e7872);
    font-family: var(--bspl_mv_font-mono, ui-monospace, Consolas, monospace);
    font-size: 0.8125rem;
}

/* ==========================================================================
   Enquiry form
   ========================================================================== */

.bspl_mv_form {
    display: grid;
    gap: 0.85rem;
}

.bspl_mv_form__row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

.bspl_mv_form__row label {
    color: var(--bspl_mv_ink, #0f1512);
    font-size: 0.9375rem;
    font-weight: 600;
}

.bspl_mv_form__row input,
.bspl_mv_form__row select,
.bspl_mv_form__row textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--bspl_mv_surface, #ffffff);
    border: 1px solid var(--bspl_mv_line, #d3d7cf);
    border-radius: var(--bspl_mv_radius-sm, 3px);
    color: var(--bspl_mv_ink, #0f1512);
    font-family: inherit;
    font-size: 1rem;

    /* 44px minimum touch target. WCAG 2.5.8. */
    min-height: 44px;
}

.bspl_mv_form__row textarea {
    min-height: 110px;
    resize: vertical;
}

.bspl_mv_form__row input:focus-visible,
.bspl_mv_form__row select:focus-visible,
.bspl_mv_form__row textarea:focus-visible {
    outline: 3px solid var(--bspl_mv_green, #12574a);
    outline-offset: 2px;
}

.bspl_mv_required {
    color: var(--bspl_mv_seal, #8b2b24);
}

.bspl_mv_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    background: var(--bspl_mv_green, #12574a);
    border: 1px solid var(--bspl_mv_green, #12574a);
    border-radius: var(--bspl_mv_radius-sm, 3px);
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.bspl_mv_btn:hover,
.bspl_mv_btn:focus {
    background: var(--bspl_mv_green-dark, #0c3d34);
    color: #ffffff;
}

.bspl_mv_form__note {
    margin: 0;
    color: var(--bspl_mv_muted, #6e7872);
    font-size: 0.8125rem;
}

/**
 * Honeypot.
 *
 * Genuinely invisible AND unreachable — but deliberately NOT display:none.
 * Some bots specifically skip display:none fields, which would defeat the
 * whole trap. Positioning it off-screen keeps it in the DOM for a bot to find
 * while no human ever encounters it; aria-hidden and tabindex="-1" in the
 * markup keep it away from assistive technology.
 */
.bspl_mv_honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   Alerts and empty states
   ========================================================================== */

.bspl_mv_alert {
    margin: 0 0 1rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--bspl_mv_radius-sm, 3px);
    font-size: 0.9375rem;
}

.bspl_mv_alert--success {
    background: var(--bspl_mv_green-tint, #e3efea);
    border-left: 3px solid var(--bspl_mv_green, #12574a);
    color: var(--bspl_mv_green-dark, #0c3d34);
}

.bspl_mv_alert--error {
    background: #f7eae8;
    border-left: 3px solid var(--bspl_mv_seal, #8b2b24);
    color: var(--bspl_mv_seal, #8b2b24);
}

.bspl_mv_empty {
    margin: 0;
    padding: 1.5rem;
    background: var(--bspl_mv_wash, #edefe9);
    border: 1px dashed var(--bspl_mv_line, #d3d7cf);
    border-radius: var(--bspl_mv_radius, 4px);
    color: var(--bspl_mv_muted, #6e7872);
    text-align: center;
}

/* ==========================================================================
   Larger screens
   ========================================================================== */

@media (min-width: 768px) {
    .bspl_mv_form {
        grid-template-columns: 1fr 1fr;
    }

    /* The message field, the submit button and the privacy note each span the
       full width; the short fields pair up. */
    .bspl_mv_form__actions,
    .bspl_mv_form__note {
        grid-column: 1 / -1;
    }

    .bspl_mv_form__row--wide {
        grid-column: 1 / -1;
    }

    .bspl_mv_notices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bspl_mv_map__hotspot,
    .bspl_mv_map__label {
        transition: none;
    }
}

/**
 * Sector category cell.
 *
 * Small and quiet: the category qualifies the sector name rather than
 * competing with it, and the rate figures are what the eye should land on.
 */
.bspl_mv_table__category {
    color: var(--bspl_mv_muted, #6e7872);
    font-size: 0.8125rem;
    white-space: nowrap;
}