* {
    box-sizing: border-box;
}

/* Compact guest header and continuous featured-business strip. */
@media (max-width: 600px) {
    .small-header:has(.account-menu-logged-out) {
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        min-height: 0;
        padding: 14px 18px;
    }
    .small-header:has(.account-menu-logged-out) > a:first-child {
        grid-column: 1;
        grid-row: 1;
    }
    .small-header .account-menu.account-menu-logged-out {
        position: static;
        display: flex;
        grid-column: 2;
        grid-row: 1;
        width: auto;
        margin: 0;
        gap: 12px;
        align-items: center;
        justify-content: flex-end;
    }
    .small-header:has(.account-menu-logged-out) .language-switcher {
        position: static;
        grid-column: 3;
        grid-row: 1;
        margin: 0;
    }
}
.nearby-featured-carousel-track {
    scroll-snap-type: none;
    scroll-behavior: smooth;
}
.nearby-featured-carousel-track .nearby-place-card {
    flex-basis: calc(100% - 28px);
    scroll-snap-align: none;
}
.nearby-featured-carousel-count,
.nearby-featured-carousel-dots {
    display: none;
}

/* Business-owner campaign analytics dashboard. */
.business-dashboard-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 10px; padding: 9px 14px; border: 1px solid #17212b; border-radius: 9px; color: #17212b; font-size: 12px; font-weight: 900; text-decoration: none; }
.campaign-dashboard-list { display: grid; gap: 16px; }
.campaign-dashboard-card { padding: 19px; border: 1px solid #d8dee3; border-radius: 15px; background: white; box-shadow: 0 3px 14px rgba(0,0,0,.05); }
.campaign-dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.campaign-dashboard-heading > div > span { color: #66727d; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.campaign-dashboard-heading h2 { margin: 4px 0 0; }
.campaign-dashboard-dates { margin: 8px 0 15px; color: #66727d; font-size: 12px; }
.campaign-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.campaign-metric-grid > div { display: grid; gap: 3px; padding: 13px; border-radius: 10px; background: #f4f6f8; }
.campaign-metric-grid strong { color: #17212b; font-size: 21px; }
.campaign-metric-grid span { color: #66727d; font-size: 10px; font-weight: 700; }
.campaign-action-breakdown { margin-top: 13px; border: 1px solid #e1e6ea; border-radius: 10px; }
.campaign-action-breakdown summary { padding: 11px 13px; cursor: pointer; font-size: 12px; font-weight: 900; }
.campaign-action-breakdown > div { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 0 13px 13px; }
.campaign-action-breakdown span { display: grid; gap: 2px; color: #66727d; font-size: 10px; }
.campaign-action-breakdown span strong { color: #17212b; font-size: 15px; }
.campaign-beach-results { display: grid; gap: 7px; margin-top: 14px; }
.campaign-beach-results > strong { font-size: 12px; }
.campaign-beach-results > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 8px; background: #fff9e9; font-size: 11px; }
.campaign-beach-results small { color: #66727d; text-align: right; }
@media(max-width:700px){.campaign-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.campaign-action-breakdown>div{grid-template-columns:repeat(2,minmax(0,1fr))}.campaign-beach-results>div{align-items:flex-start;flex-direction:column}.campaign-beach-results small{text-align:left}}

body {
    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #f4f7f9;
    color: #17212b;
}


.hero {
    position: relative;
    z-index: 1100;

    background: #c62828;
    color: white;

    padding: 28px 20px;
}

.logo {
    font-size: 24px;
    font-weight: 800;
}

.tagline {
    margin-top: 4px;
    opacity: 0.9;
}


.small-header {
    position: relative;
    z-index: 1100;

    padding: 16px 20px;

    background: white;

    border-bottom:
        1px solid #ddd;

    display: flex;

    justify-content:
        space-between;
}

.small-header a {
    color: #c62828;
    text-decoration: none;
}


.container {
    max-width: 650px;

    margin: auto;

    padding: 20px;
}


h1 {
    margin-bottom: 5px;
}

.intro {
    margin-top: 5px;

    color: #66727d;
}




/* ---------------------------------
   Public beach search
   --------------------------------- */

.beach-search-box {
    margin-top: 18px;
}

.beach-search-field {
    position: relative;
}


#public-beach-search {
    display: block;

    width: 100%;

    padding: 14px 50px 14px 16px;

    border:
        1px solid #ccd3d8;

    border-radius: 12px;

    background: white;

    color: #17212b;

    font-family: inherit;
    font-size: 16px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.05);
}


#public-beach-search::-webkit-search-cancel-button {
    appearance: none;
}


.beach-search-clear {
    position: absolute;
    top: 50%;
    right: 6px;

    width: 40px;
    height: 40px;

    padding: 0;

    transform: translateY(-50%);

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #66727d;

    font-family: inherit;
    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}


.beach-search-clear[hidden] {
    display: none;
}


.beach-search-clear:hover {
    background: #f1f3f5;
    color: #17212b;
}


.beach-search-clear:focus-visible {
    outline: 3px solid rgba(198, 40, 40, 0.2);
    outline-offset: 1px;
}


#public-beach-search:focus {
    outline: none;

    border-color: #c62828;

    box-shadow:
        0 0 0 3px
        rgba(198, 40, 40, 0.08);
}


.beach-search-empty {
    margin-top: 12px;

    padding: 16px;

    background: white;

    border-radius: 12px;

    color: #66727d;

    text-align: center;
}

.beach-card-shell {
    display: grid;

    gap: 8px;
}


.beach-card-shell[hidden] {
    display: none !important;
}


.beach-map-button {
    width: 100%;

    padding: 9px 12px;

    border:
        1px solid #ccd3d8;

    border-radius: 9px;

    background: white;

    color: #526579;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


.beach-map-button:hover {
    border-color: #c62828;

    color: #c62828;

    background: #fffafa;
}

.beach-map-button[hidden] {
    display: none !important;
}













.beach-list {
    display: grid;

    gap: 14px;

    margin-top: 25px;
}


.beach-card {
    background: white;

    padding: 18px;

    border-radius: 14px;

    text-decoration: none;

    color: inherit;

    box-shadow:
        0 2px 10px
        rgba(0,0,0,0.07);
}


.beach-top {
    display: flex;

    justify-content:
        space-between;

    gap: 10px;
}


.status {
    font-size: 13px;

    font-weight: 800;
}


.flag-icon {
    position: relative;

    display: inline-block;

    width: 30px;
    height: 18px;

    flex: 0 0 auto;

    margin-left: 3px;
    margin-right: 5px;

    border-radius: 1px 3px 3px 1px;

    vertical-align: -2px;

    box-shadow:
        0 0 0 1px
        rgba(0, 0, 0, 0.18);
}


.flag-icon::before {
    position: absolute;
    top: -1px;
    left: -4px;

    width: 2px;
    height: 25px;

    border-radius: 1px;

    background: #59636d;

    content: "";
}


.flag-green {
    background: #2e7d32;
}


.flag-yellow {
    background: #f9a825;
}


.flag-red {
    background: #c62828;
}


.flag-purple {
    background: #7b1fa2;
}


.flag-lifeguard {
    background:
        linear-gradient(
            to bottom,
            #d71920 0 50%,
            #ffd21e 50% 100%
        );
}


.flag-no-lifeguard::after {
    position: absolute;
    top: 7px;
    left: -3px;

    width: 36px;
    height: 3px;

    transform: rotate(-35deg);

    border:
        1px solid white;
    border-radius: 2px;

    background: #17212b;

    content: "";
}


/* ---------------------------------
   Calm water icon
   --------------------------------- */

.calm-water-icon {
    display: inline-flex;

    width: 34px;
    height: 22px;

    flex-direction: column;
    justify-content: space-between;

    flex: 0 0 auto;
}


.calm-water-icon > span {
    display: block;

    width: 100%;
    height: 5px;

    border-radius: 999px;
}


.calm-water-icon > span:nth-child(1) {
    background: #5bc0eb;
}


.calm-water-icon > span:nth-child(2) {
    background: #0f9fe8;
}


.calm-water-icon > span:nth-child(3) {
    background: #0b68b7;
}


/* Keep add-on condition icons
   visually consistent */

.condition-icon {
    display: inline-flex;

    width: 34px;
    height: 22px;

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

    flex: 0 0 auto;

    font-size: 24px;
    line-height: 1;
}



.report-count {
    margin-top: 10px;

    color: #6a757f;

    font-size: 14px;
}


.consensus-card {
    margin: 0 0 20px;
    padding: 16px;

    border:
        1px solid #d8dee3;
    border-radius: 14px;

    background: white;
}


.consensus-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}


.consensus-heading span,
.consensus-card small {
    color: #66727d;
}


.consensus-bar {
    display: flex;
    overflow: hidden;

    width: 100%;
    height: 18px;

    border-radius: 999px;

    background: #e5e8eb;
}


.consensus-bar-compact {
    height: 10px;
    margin-top: 10px;
}


.consensus-segment {
    display: block;
    height: 100%;
}


.consensus-good {
    background: #2e7d32;
}


.consensus-caution {
    background: #f9a825;
}


.consensus-marine_hazard {
    background: #7b1fa2;
}


.consensus-avoid_swimming {
    background: #c62828;
}


.consensus-unknown {
    background: #9e9e9e;
}


.consensus-counts {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 14px;

    margin: 10px 0 8px;

    font-size: 13px;
    font-weight: 800;
}


.consensus-count-good {
    color: #2e7d32;
}


.consensus-count-caution {
    color: #9a6700;
}


.consensus-count-marine_hazard {
    color: #7b1fa2;
}


.consensus-count-avoid_swimming {
    color: #c62828;
}


.consensus-compact-counts {
    margin-top: 6px;

    color: #66727d;

    font-size: 11px;
}


.report-contributor {
    margin-top: 10px;

    color: #66727d;

    font-size: 13px;
}


.header-contributor-level {
    display: block;

    color: #66727d;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.2;
}


.account-identity {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;

    gap: 3px;

    min-width: 0;

    list-style: none;
    cursor: pointer;
}

.account-identity::-webkit-details-marker {
    display: none;
}

.account-profile-menu {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}

.account-menu-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
}

.account-profile-menu[open] .account-menu-arrow {
    transform: rotate(180deg);
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;

    width: max-content;
    min-width: 180px;
    padding: 7px;

    border: 1px solid #d8dde2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}

.account-dropdown a,
.hero .account-dropdown a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 7px;
    color: #17212b;
    text-decoration: none;
    white-space: nowrap;
}

.account-dropdown a:hover {
    background: #f2f5f7;
}

.hero .account-menu .account-dropdown a,
.hero .account-menu .account-dropdown a:link,
.hero .account-menu .account-dropdown a:visited {
    color: #17212b;
}

.account-dropdown-logout {
    margin: 5px 0 0;
    padding-top: 5px;
    border-top: 1px solid #e3e7ea;
}

.account-dropdown-logout button {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #c62828;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.account-dropdown-logout button:hover {
    background: #fff1f1;
}


.account-greeting {
    line-height: 1.2;
    white-space: nowrap;
}


.hero .header-contributor-level {
    color: rgba(255, 255, 255, 0.82);
}


.arrival-report-prompt {
    margin-top: 14px;
    padding: 16px;

    border:
        2px solid #1976d2;
    border-radius: 14px;

    background: #f3f8fd;
}


.arrival-report-prompt[hidden] {
    display: none;
}


.arrival-report-prompt p {
    margin: 6px 0 12px;
}


.arrival-report-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.arrival-report-actions a,
.arrival-report-actions button {
    padding: 10px 14px;

    border-radius: 9px;

    font: inherit;
    font-weight: 800;
}


.arrival-report-actions a {
    background: #1976d2;
    color: white;

    text-decoration: none;
}


.arrival-report-actions button {
    border:
        1px solid #b8c1c8;

    background: white;
    color: #17212b;
}


.big-status {
    margin: 20px 0;

    padding: 25px;

    border-radius: 16px;

    text-align: center;

    font-size: 22px;

    font-weight: 900;

    background: white;
}


.big-status.good {
    border:
        3px solid #2e7d32;
}

.big-status.caution {
    border:
        3px solid #f9a825;
}

.big-status.marine_hazard {
    border:
        3px solid #7b1fa2;
}

.big-status.avoid_swimming {
    border:
        3px solid #c62828;
}

.big-status.unknown {
    border:
        3px solid #9e9e9e;
}


.safety-note {
    color: #66727d;

    font-size: 14px;
}


.report-button,
.submit-button {
    display: block;

    width: 100%;

    margin:
        24px 0;

    padding: 17px;

    border: 0;

    border-radius: 12px;

    background: #c62828;

    color: white;

    text-align: center;

    text-decoration: none;

    font-weight: 800;

    font-size: 16px;

    cursor: pointer;
}

.report-submit-status {
    margin: 18px 0 12px;
    padding: 14px;
    border: 1px solid #b9d7ef;
    border-radius: 12px;
    background: #eef7ff;
    color: #17324d;
}

.report-submit-status[hidden] {
    display: none;
}

.report-submit-status strong {
    display: block;
    margin-bottom: 9px;
}

.report-submit-status progress {
    width: calc(100% - 54px);
    height: 14px;
    vertical-align: middle;
    accent-color: #1677b8;
}

#report-upload-percent {
    display: inline-block;
    width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.submit-button:disabled {
    cursor: wait;
    opacity: 0.7;
}


.report-card {
    background: white;

    padding: 16px;

    border-radius: 12px;

    margin-bottom: 12px;
}


.report-card p {
    margin-bottom: 8px;
}


.report-card small {
    color: #78838d;
}


.empty {
    background: white;

    padding: 25px;

    text-align: center;

    border-radius: 12px;

    color: #66727d;
}


.condition-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin: 25px 0;
}


.condition-grid input {
    display: none;
}


.condition-grid label > span {
    min-height: 95px;

    background: white;

    border:
        2px solid #ddd;

    border-radius: 12px;

    padding: 14px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    cursor: pointer;

    text-align: center;
}

.primary-flag-grid {
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.primary-flag-grid label {
    display: flex;
    min-width: 0;
}

.primary-flag-grid label > span {
    width: 100%;
    min-height: 126px;
    height: 100%;
}

.primary-flag-grid strong {
    font-size: 15px;
    line-height: 1.2;
}

.primary-flag-grid .flag-meaning {
    color: #66727d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.primary-flag-grid input:checked + span .flag-meaning {
    color: inherit;
}


.condition-grid
input:checked + span {

    border-color:
        #c62828;

    background:
        #fff5f5;
}


.lifeguard-status-fieldset {
    margin: 0 0 24px;
    padding: 0;

    border: 0;
}


.lifeguard-status-fieldset legend {
    margin-bottom: 10px;

    font-weight: 800;
}


.lifeguard-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.lifeguard-status-grid input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}


.lifeguard-status-grid label > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 95px;
    padding: 14px;

    gap: 8px;

    border:
        2px solid #ddd;
    border-radius: 12px;

    background: white;

    cursor: pointer;
    text-align: center;
}


.lifeguard-status-grid input:checked + span {
    border-color: #1976d2;
    background: #f3f8fd;
}


.lifeguard-status-grid input:focus-visible + span {
    outline: 3px solid rgba(25, 118, 210, 0.2);
    outline-offset: 2px;
}


.current-lifeguard-status,
.report-lifeguard-status {
    display: flex;
    align-items: center;

    gap: 6px;

    border-radius: 12px;

    background: white;
}


.current-lifeguard-status {
    margin: -8px 0 20px;
    padding: 14px 16px;

    border:
        1px solid #d8dee3;
}


.current-lifeguard-label {
    color: #66727d;
}


.report-lifeguard-status {
    margin-top: 10px;
    padding: 8px 0;
}


@media (max-width: 520px) {
    .lifeguard-status-grid {
        grid-template-columns: 1fr;
    }
}


.comment-label {
    display: block;

    font-weight: 700;
}


textarea {
    width: 100%;

    height: 100px;

    margin-top: 10px;

    padding: 12px;

    border:
        1px solid #ccc;

    border-radius: 10px;

    resize: vertical;

    font-family: inherit;
}

#map {
    width: 100%;
    height: 380px;

    border-bottom:
        1px solid #ddd;
}


.map-popup {
    min-width: 150px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.map-popup strong {
    font-size: 16px;
}


.map-popup a {
    color: #c62828;

    font-weight: 700;

    text-decoration: none;
}


@media (max-width: 600px) {

    #map {
        height: 330px;
    }

}


.map-controls {
    max-width: 650px;

    margin: 12px auto 0;

    padding: 0 20px;
}


#location-button {
    width: 100%;

    padding: 13px;

    border: 0;

    border-radius: 10px;

    background: white;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,0.08);
}


#location-message {
    margin-top: 8px;

    text-align: center;

    font-size: 13px;

    color: #66727d;
}

.photo-upload {
    background: white;
    padding: 18px;
    border-radius: 12px;
    margin-top: 20px;
}

.photo-upload label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
}

.photo-upload input {
    width: 100%;
}

.photo-upload small {
    display: block;
    margin-top: 8px;
    color: #66727d;
}


.report-photo {
    width: 100%;
    max-height: 420px;

    object-fit: cover;

    border-radius: 10px;

    margin-top: 12px;
}

.auth-container {
    max-width: 480px;
}


.auth-form {
    margin-top: 25px;
}


.auth-form label {
    display: block;

    margin-bottom: 18px;

    font-weight: 700;
}


.auth-form input {
    width: 100%;

    margin-top: 8px;

    padding: 14px;

    border:
        1px solid #ccd3d8;

    border-radius: 10px;

    font-size: 16px;

    font-family: inherit;
}


.auth-form input:focus {
    outline: none;

    border-color: #c62828;
}


/* ---------------------------------
   Certification date picker
   iPhone / Safari final sizing
   --------------------------------- */

.certification-date-field {
    position: relative;

    display: block;

    width: 100%;
    max-width: 100%;

    margin-top: 8px;
}


.certification-date-field
input[type="date"] {
    display: block;

    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 52px;

    margin: 0;

    padding:
        14px 52px 14px 14px;

    border:
        1px solid #ccd3d8;

    border-radius: 10px;

    background-color: white;

    color: #17212b;

    font-family: inherit;
    font-size: 16px;

    line-height: 1.2;

    color-scheme: light;

    -webkit-appearance: none;
    appearance: none;

    cursor: pointer;
}


.certification-date-field
input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;

    padding: 0;

    text-align: left;
}


.certification-date-field
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}


.certification-date-icon {
    position: absolute;

    top: 50%;
    right: 16px;

    transform: translateY(-50%);

    font-size: 21px;
    line-height: 1;

    width: 34px;
    height: 34px;
    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}


.auth-error {
    background: #fff1f1;

    border:
        1px solid #e0a1a1;

    color: #9d1c1c;

    padding: 12px;

    border-radius: 10px;

    margin-top: 18px;
}


.auth-switch {
    text-align: center;

    color: #66727d;
}


.auth-switch a {
    color: #c62828;

    font-weight: 700;

    text-decoration: none;
}

.hero-top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}


.account-menu {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    font-size: 14px;

    flex-wrap: nowrap;
}

.account-menu > a,
.account-menu > span {
    line-height: 14px;
}


.account-menu a {
    color: inherit;

    text-decoration: none;

    font-weight: 700;
}


.hero .account-menu a {
    color: white;
}





.logout-button {
    display: inline-block;

    border: 0;

    padding: 0;

    margin: 0;

    background: transparent;

    color: inherit;

    font: inherit;

    font-weight: 700;

    line-height: 14px;

    cursor: pointer;
}

.logout-form {
    display: flex;

    align-items: flex-start;

    margin: 0;
}



.hero .logout-button {
    color: white;
}



.join-link {
    border:
        1px solid rgba(255, 255, 255, 0.8);

    border-radius: 8px;

    padding: 7px 11px;
}


.small-account {
    font-size: 13px;
}


.small-account a {
    color: #c62828;
}


@media (max-width: 600px) {

    .hero {
        padding: 20px 14px;
    }

    .hero-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
    }

    .header-controls {
        width: auto;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .language-switcher {
        justify-content: flex-end;
        white-space: nowrap;
    }

    .account-menu {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .small-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .small-account {
        width: 100%;
        justify-content: flex-end;
    }

}

.cooldown-message {
    background: #fff7e6;

    border:
        1px solid #e6b85c;

    padding: 18px;

    border-radius: 12px;

    margin: 20px 0;

    line-height: 1.5;
}

.wind-card {
    background: white;
    padding: 16px;
    border-radius: 12px;
    margin: 16px 0;
}

.wind-main {
    font-weight: 700;
}

.wind-value {
    font-size: 26px;
    font-weight: 800;
    margin-top: 4px;
}

.wind-detail {
    color: #66727d;
    margin-top: 4px;
}

.photo-pending-message {
    background: #fff7e6;
    border: 1px solid #e6b85c;
    padding: 14px 16px;
    border-radius: 12px;
    margin: 16px 0;
    line-height: 1.5;
}

.photo-review-status {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #8a6518;
}

.photo-policy {
    margin: 8px 0 12px;
    font-size: 13px;
    color: #66727d;
    line-height: 1.4;
}

.photo-rights-check {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    margin-top: 18px;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;
}

.photo-rights-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.photo-approved-message,
.photo-pending-message,
.photo-rejected-message {
    padding: 14px 16px;
    border-radius: 12px;
    margin: 16px 0;
    line-height: 1.5;
}

.photo-approved-message {
    background: #eef8ee;
    border: 1px solid #8bbf8b;
}

.photo-pending-message {
    background: #fff7e6;
    border: 1px solid #e6b85c;
}

.photo-rejected-message {
    background: #fff0f0;
    border: 1px solid #d89a9a;
}

.admin-photo-card {
    background: white;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 24px;
}

.admin-review-photo {
    display: block;
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 10px;
    margin: 16px 0;
}

.admin-photo-actions {
    display: flex;
    gap: 12px;
}

.admin-photo-actions form {
    flex: 1;
}

.approve-button,
.reject-button {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.approve-button {
    background: #278a49;
    color: white;
}

.reject-button {
    background: #c93636;
    color: white;
}

.admin-review-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 6px 10px;

    background: #fff4d6;
    border-radius: 8px;

    color: #805d13;
    font-weight: 700;
    text-decoration: none;
}

.admin-review-link:hover {
    background: #ffe9aa;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---------------------------------
   Language selector
   --------------------------------- */

.language-switcher {
    display: flex;

    align-items: center;

    margin: 0;
}


.language-switcher-label {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


.language-select {
    min-width: 64px;

    height: 34px;

    padding:
        5px 28px 5px 10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.65);

    border-radius: 8px;

    background-color:
        rgba(255, 255, 255, 0.12);

    color: white;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


.language-select option {
    color: #17212b;

    background: white;
}


.small-header
.language-select {
    border-color: #ccd3d8;

    background: white;

    color: #17212b;
}




/* Red Flag Day header branding */
.brand {
    display: flex;
    flex-direction: row;
    align-items: center;

    position: relative;

    gap: 12px;
}

.site-logo {
    display: block;
    flex: 0 0 auto;
}

.header-lifeguard-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    margin-left: 4px;

    padding: 0;

    font-size: 34px;
    line-height: 1;

    text-decoration: none;

    transform: translateY(0);

    cursor: pointer;

    filter:
        drop-shadow(
            0 2px 2px
            rgba(0, 0, 0, 0.18)
        );
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
}

.tagline {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.2;
    opacity: 0.9;
}

@media (max-width: 600px) {

    .brand {
        gap: 9px;
    }

    .site-logo {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .brand .logo {
        font-size: 21px;
    }

    .brand .tagline {
        font-size: 14px;
        margin-top: 4px;
    }

    .header-lifeguard-verified {
        width: 38px;
        height: 38px;

        font-size: 30px;
    }

}


/* ---------------------------------
   Current weather
---------------------------------- */

.wind-card {
    background: white;
    padding: 18px;
    border-radius: 14px;
    margin: 16px 0;
}

.weather-card-header {
    display: flex;

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

    gap: 12px;

    margin-bottom: 18px;
}


.wind-main {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}


.weather-unit-toggle {
    display: inline-flex;

    flex: 0 0 auto;

    padding: 3px;

    background: #eef1f3;

    border-radius: 9px;
}


.weather-unit-button {
    padding: 6px 9px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    color: #66727d;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


.weather-unit-button.active {
    background: white;

    color: #17212b;

    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.12);
}


/* Two-column layout */

.weather-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}


/* LEFT - temperature */

.weather-section {
    padding-right: 20px;
}

.weather-primary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.weather-icon {
    font-size: 48px;
    line-height: 1;
}

.weather-temperature {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.weather-description {
    margin-top: 10px;
    margin-left: 60px;

    font-size: 16px;
    color: #526579;
}


/* RIGHT - wind */

.wind-section {
    padding-left: 20px;

    border-left:
        1px solid #dfe4e8;
}

.wind-primary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wind-icon {
    font-size: 48px;
    line-height: 1;
}

.wind-speed {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.wind-unit {
    font-size: 15px;
    font-weight: 400;
}

.wind-direction {
    margin-top: 8px;
    margin-left: 60px;

    font-size: 16px;
    font-weight: 700;

    color: #526579;
}

.wind-gusts {
    margin-top: 12px;
    margin-left: 60px;

    font-size: 14px;

    color: #526579;
}


/* ---------------------------------
   Mobile
---------------------------------- */

@media (max-width: 480px) {

    .wind-card {
        padding: 16px;
    }

    .weather-layout {
        grid-template-columns: 1fr 1fr;
    }

    .weather-section {
        padding-right: 12px;
    }

    .wind-section {
        padding-left: 12px;
    }

    .weather-icon,
    .wind-icon {
        font-size: 38px;
    }

    .weather-temperature,
    .wind-speed {
        font-size: 26px;
    }

    .wind-unit {
        font-size: 12px;
    }

    .weather-description,
    .wind-direction,
    .wind-gusts {
        font-size: 13px;
    }

    .weather-description {
        margin-left: 50px;
    }

    .wind-direction,
    .wind-gusts {
        margin-left: 50px;
    }

}


/* ---------------------------------
   Rate limit page
---------------------------------- */

.rate-limit-container {
    max-width: 520px;
    padding-top: 50px;
}

.rate-limit-card {
    background: white;

    padding: 36px 28px;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 2px 12px
        rgba(0, 0, 0, 0.08);
}

.rate-limit-icon {
    font-size: 48px;

    margin-bottom: 12px;
}

.rate-limit-card h1 {
    margin:
        0 0 14px;
}

.rate-limit-message {
    margin:
        0 0 12px;

    font-size: 18px;
    font-weight: 700;
}

.rate-limit-detail {
    margin:
        0 auto 28px;

    max-width: 390px;

    color: #66727d;

    line-height: 1.5;
}

.rate-limit-button {
    display: block;

    width: 100%;

    padding: 15px;

    border-radius: 10px;

    background: #c62828;

    color: white;

    text-decoration: none;

    font-size: 15px;
    font-weight: 800;
}

.rate-limit-button:hover {
    background: #a91f1f;
}

.auth-message {
    background: #eef8ee;

    border:
        1px solid #8bbf8b;

    color: #245b2a;

    padding: 14px;

    border-radius: 10px;

    margin-top: 18px;

    line-height: 1.5;
}


/* ---------------------------------
   Verification resend
---------------------------------- */

.verification-resend {
    margin-top: 24px;

    padding: 18px;

    background: white;

    border-radius: 12px;

    border:
        1px solid #e0e5e9;
}

.verification-resend p {
    margin:
        0 0 12px;

    color: #66727d;

    font-size: 14px;
}

.resend-form {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.resend-form input {
    width: 100%;

    padding: 12px;

    border:
        1px solid #ccd3d8;

    border-radius: 10px;

    font-size: 15px;
}

.resend-button {
    width: 100%;

    padding: 12px;

    border: 0;

    border-radius: 10px;

    background: #c62828;

    color: white;

    font-weight: 800;

    cursor: pointer;
}

.resend-button:hover {
    background: #a91f1f;
}

.password-field {
    position: relative;
}

.password-field input {
    width: 100%;
    padding-right: 50px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;

    transform: translateY(-50%);

    width: 28px;
    height: 28px;

    padding: 2px;

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

    border: 0;
    background: transparent;

    color: #17212b;

    cursor: pointer;
}

.password-toggle:hover {
    background: transparent;
}

.password-toggle svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-toggle .eye-open {
    display: none;
}

.password-toggle.password-visible .eye-closed {
    display: none;
}

.password-toggle.password-visible .eye-open {
    display: block;
}

/* ---------------------------------
   Admin review links
   --------------------------------- */

.hero .account-menu a.admin-review-link,
.hero .account-menu a.admin-review-link:link,
.hero .account-menu a.admin-review-link:visited,
.hero .account-menu a.admin-review-link:hover,
.hero .account-menu a.admin-review-link:active {
    color: #000000 !important;
}

.hero .account-menu a.admin-review-link {
    background: #fff4d6;
}

.hero .account-menu a.admin-review-link:hover {
    background: #ffe9aa;
}

/* ---------------------------------
   Beach suggestion form
   --------------------------------- */

#beach-suggestion-form {
    margin-top: 14px;

    padding: 16px 18px;

    background: white;

    border-radius: 12px;

    text-align: left;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.06);
}

#beach-suggestion-form label {
    display: block;

    margin-bottom: 8px;

    font-size: 15px;
    font-weight: 700;

    color: #17212b;
}

#beach-suggestion-form input[type="text"] {
    display: block;

    width: 100%;

    margin-bottom: 10px;

    padding: 12px;

    border:
        1px solid #ccd3d8;

    border-radius: 10px;

    font-family: inherit;
    font-size: 15px;

    color: #17212b;

    background: white;
}

#beach-suggestion-form input[type="text"]:focus {
    outline: none;

    border-color: #c62828;
}

#beach-suggestion-form button {
    display: block;

    width: 100%;

    padding: 12px;

    border: 0;

    border-radius: 10px;

    background: #c62828;

    color: white;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;
}

#beach-suggestion-form button:hover {
    background: #a91f1f;
}

#beach-suggestion-form small {
    display: block;

    margin-top: 10px;

    color: #66727d;

    font-size: 13px;
    line-height: 1.4;

    text-align: left;
}


/* ---------------------------------
   Lifeguard verification
   --------------------------------- */

.verification-privacy-note,
.verification-evidence,
.verification-consent {
    background: white;

    padding: 18px;

    margin: 18px 0;

    border-radius: 12px;

    border:
        1px solid #e0e5e9;
}

.verification-privacy-note p,
.verification-consent p {
    color: #66727d;

    line-height: 1.5;
}

.verification-privacy-note ol {
    padding-left: 22px;

    line-height: 1.6;
}

.verification-evidence h2 {
    margin-top: 0;

    font-size: 18px;
}

.verification-evidence p {
    color: #66727d;

    line-height: 1.5;
}

.verification-evidence label {
    display: block;

    margin-top: 14px;

    font-weight: 700;
}

.verification-evidence input[type="file"] {
    display: block;

    width: 100%;

    margin-top: 10px;

    padding: 10px;

    border:
        1px solid #ccd3d8;

    border-radius: 10px;

    background: #f8fafb;

    font-family: inherit;
}

.verification-evidence small {
    display: block;

    margin-top: 8px;

    color: #66727d;

    font-size: 13px;
}

.lifeguard-verification-form textarea {
    display: block;

    width: 100%;

    margin-top: 8px;
}

.verification-consent {
    font-size: 14px;
}

/* ---------------------------------
   Admin lifeguard review
   --------------------------------- */

.admin-lifeguard-card {
    background: white;

    padding: 20px;

    margin-bottom: 24px;

    border-radius: 14px;

    box-shadow:
        0 2px 10px
        rgba(0, 0, 0, 0.07);
}

.admin-lifeguard-card h2 {
    margin-top: 0;
}

.admin-lifeguard-details {
    margin-bottom: 20px;
}

.admin-lifeguard-details p {
    margin:
        8px 0;
}

.lifeguard-evidence-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    margin:
        22px 0;
}

.lifeguard-evidence-card {
    background: #f8fafb;

    padding: 14px;

    border:
        1px solid #e0e5e9;

    border-radius: 12px;
}

.lifeguard-evidence-card h3 {
    margin:
        0 0 12px;

    font-size: 16px;
}

.lifeguard-review-image {
    display: block;

    width: 100%;

    max-height: 420px;

    object-fit: contain;

    background: white;

    border-radius: 10px;
}

.admin-lifeguard-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    align-items: start;
}

.lifeguard-approve-form,
.lifeguard-reject-form {
    margin: 0;
}

.lifeguard-reject-form label {
    display: block;

    margin-bottom: 8px;

    font-weight: 700;
}

.lifeguard-reject-form textarea {
    width: 100%;

    margin:
        0 0 10px;

    min-height: 110px;
}

.lifeguard-approve-form .approve-button,
.lifeguard-reject-form .reject-button {
    width: 100%;
}

@media (max-width: 700px) {

    .lifeguard-evidence-grid,
    .admin-lifeguard-actions {
        grid-template-columns:
            1fr;
    }

}

/* ---------------------------------
   Verified lifeguard account
   --------------------------------- */

.account-menu .lifeguard-verified-link {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;

    flex: 0 0 auto;

    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    position: relative;

    /* Reserve room for the countdown
       without moving the heading down */
    padding-bottom: 13px;
}


.account-menu .lifeguard-verified-title {
    display: block;

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

    line-height: 14px;
}


.account-menu .lifeguard-countdown {
    position: absolute;

    top: 16px;
    left: 22px;

    display: block;

    padding: 0;

    font-size: 11px;
    font-weight: 600;
    line-height: 12px;

    opacity: 0.85;
}

/* ---------------------------------
   Verified lifeguard beach report
   --------------------------------- */

.report-count {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}

.lifeguard-report-badge {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 12px;

    font-weight: 800;

    color: #17212b;

    white-space: nowrap;
}

.beach-card-lifeguard-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #17212b;
    font-size: 12px;
    white-space: nowrap;
}

.beach-card-lifeguard-status .flag-icon {
    width: 22px;
    height: 15px;
}

.beach-card-statuses {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
}

.beach-card-statuses .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ---------------------------------
   Favorite beaches
   --------------------------------- */

.favorite-star {
    color: #e7a500;
}

.beach-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}

.beach-title-row h1 {
    margin: 0;
}

.favorite-toggle-form {
    display: inline-flex;
    margin: 0;
}

.favorite-toggle-button,
.favorite-remove-button {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #c9d0d6;
    border-radius: 10px;
    background: #fff;
    color: #17212b;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.favorite-toggle-button.is-favorite {
    border-color: #e7a500;
    background: #fff8dc;
}

.favorite-toggle-button {
    width: 38px;
    padding: 6px;
    color: #b05a00;
    font-size: 18px;
    line-height: 1;
}

.favorite-beach-list {
    display: grid;
    gap: 14px;
}

.favorite-beach-card {
    padding: 18px;
    border: 1px solid #d8dde2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.favorite-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.favorite-card-details {
    flex: 1 1 auto;
    min-width: 0;
}

.favorite-card-main > form {
    flex: 0 0 auto;
    margin: 0;
}

.favorite-beach-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.favorite-beach-heading a {
    color: #17212b;
    text-decoration: none;
}

.favorite-report-count {
    margin: 9px 0 0;
    color: #66727d;
    font-size: 13px;
}

.favorite-remove-button {
    color: #c62828;
}

.favorite-beach-card small {
    display: block;
    color: #66727d;
    line-height: 1.4;
}

.favorites-empty {
    padding: 24px;
    text-align: center;
}

/* ---------------------------------
   Account settings
   --------------------------------- */

.account-settings-page {
    display: grid;
    gap: 16px;
}

.account-settings-page > h1 {
    margin-bottom: 0;
}

.account-settings-card {
    padding: 20px;
    border: 1px solid #d8dde2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.account-settings-card h2 {
    margin-top: 0;
}

.account-settings-card form {
    display: grid;
    gap: 9px;
}

.account-settings-card label {
    margin-top: 6px;
    font-weight: 800;
}

.account-settings-card input,
.account-settings-card select {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid #c9d0d6;
    border-radius: 9px;
    background: #fff;
    color: #17212b;
    font: inherit;
}

.account-settings-card input:disabled {
    background: #f2f5f7;
    color: #66727d;
}

.settings-save-button {
    min-height: 44px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 0;
    border-radius: 9px;
    background: #c62828;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.settings-saved-message {
    padding: 12px 14px;
    border: 1px solid #7eb987;
    border-radius: 10px;
    background: #eef8ef;
    color: #236b2e;
    font-weight: 700;
}

.settings-muted {
    color: #66727d;
}

.settings-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 0;
    cursor: pointer;
}

.account-settings-card .settings-checkbox input {
    width: 20px;
    min-height: 20px;
    margin: 0;
    flex: 0 0 auto;
}

.settings-error-message {
    padding: 12px 14px;
    border: 1px solid #ef9a9a;
    border-radius: 10px;
    background: #fff1f1;
    color: #b71c1c;
    font-weight: 700;
}

.danger-zone {
    border-color: #ef9a9a;
}

.danger-zone h2 {
    color: #b71c1c;
}

.delete-account-button {
    min-height: 44px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 0;
    border-radius: 9px;
    background: #8e0000;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 600px) {
    .favorite-beach-heading {
        flex-direction: column;
    }

    .favorite-beach-heading .status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
}

.advertising-beach-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid #d8dee3;
    border-radius: 12px;
    background: #f8fafb;
}
.advertising-beach-picker legend { padding: 0 5px; color: #17212b; font-size: 14px; font-weight: 900; }
.advertising-beach-picker > p { grid-column: 1 / -1; margin: 0 0 4px; color: #66727d; font-size: 12px; font-weight: 500; line-height: 1.4; }
.advertise-campaign-form .advertising-beach-option {
    display: flex;
    min-width: 0;
    padding: 11px;
    align-items: center;
    gap: 10px;
    border: 1px solid #d8dee3;
    border-radius: 10px;
    background: white;
    cursor: pointer;
}
.advertise-campaign-form .advertising-beach-option:has(input:checked) { border-color: #d5a83e; background: #fff8e6; box-shadow: inset 0 0 0 1px #d5a83e; }
.advertise-campaign-form .advertising-beach-option input { width: 18px; height: 18px; min-width: 18px; margin: 0; accent-color: #c62828; }
.advertising-beach-option > span { display: grid; min-width: 0; gap: 2px; }
.advertising-beach-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advertising-beach-option small { color: #66727d; font-size: 11px; font-weight: 500; }
.advertising-no-beaches { grid-column: 1 / -1; padding: 12px; border-radius: 9px; background: #fff0f0; color: #9d1c1c; font-size: 13px; }
.advertising-review-targets { margin: 14px 0; }
.advertising-review-targets > strong { display: block; margin-bottom: 7px; font-size: 12px; }
.advertising-review-targets > div { display: flex; flex-wrap: wrap; gap: 6px; }
.advertising-review-targets span { padding: 6px 9px; border: 1px solid #e1b95e; border-radius: 999px; background: #fff8e6; color: #62480f; font-size: 12px; font-weight: 700; }
.advertising-form-error { display: grid; gap: 3px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid #e3a2a2; border-left: 4px solid #c62828; border-radius: 10px; background: #fff4f4; color: #8e1c1c; }
.advertising-form-error span { color: #572020; font-size: 14px; }
.advertising-form-error small { margin-top: 3px; color: #7b5d5d; font-size: 11px; }
@media (max-width: 700px) {
    .advertising-beach-picker { grid-template-columns: 1fr; padding: 13px; }
    .advertising-beach-picker > p { grid-column: auto; }
}


/* ---------------------------------
   Logged-out account menu
   --------------------------------- */

.account-menu.account-menu-logged-out {
    align-items: center;
}

.account-menu.account-menu-logged-out > a {
    line-height: normal;
}

.account-menu.account-menu-logged-out .join-link {
    display: inline-flex;

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

    line-height: 1;

    margin: 0;
}



/* =================================================
   MOBILE HEADER - FINAL LAYOUT
   ================================================= */

@media (max-width: 600px) {

    .hero {
        position: relative;
        padding: 16px 14px 20px;
    }

    .hero-top {
        display: block;
    }


    /* ---------- BRAND ---------- */

    .brand {
        display: flex;
        align-items: center;

        gap: 8px;

        min-height: 54px;

        /* Space for language selector */
        padding-right: 90px;
    }

    .site-logo {
        width: 52px;
        height: 52px;

        flex: 0 0 52px;
    }

    .brand .logo {
        font-size: 20px;
        line-height: 1.05;

        white-space: nowrap;
    }

    .brand .tagline {
        margin-top: 4px;

        font-size: 13px;
        line-height: 1.15;

        white-space: nowrap;
    }

    /* Keep verified badge beside RED FLAG DAY */

    .header-lifeguard-verified {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;

        margin-left: 2px;

        font-size: 27px;
    }


    /* ---------- HEADER CONTROLS ---------- */

    .header-controls {
        display: block;

        width: 100%;
    }


    /* EN · EL */

    /* ---------- LANGUAGE ---------- */

    .language-switcher {
        position: absolute;

        top: 16px;
        right: 14px;

        display: flex;

        align-items: center;

        margin: 0 0 8px 0;
    }


    .language-select {
        min-width: 62px;

        height: 32px;

        padding:
            4px 24px 4px 9px;

        font-size: 12px;
    }

    .language-switcher a {
        line-height: 20px;
    }


    /* ---------- LOGOUT ---------- */

    .account-menu:not(.account-menu-logged-out)
    .logout-form {
        position: absolute;

        top: 54px;
        right: 14px;

        display: inline-flex;

        margin: 0;

        align-items: center;
        justify-content: flex-end;
    }

    .logout-button {
        line-height: 1.2;
    }


    /* ---------- LOGGED-IN ROW ---------- */

    .account-menu:not(.account-menu-logged-out) {
        display: flex;

        width: 100%;

        margin-top: 16px;
        padding: 0;

        align-items: center;

        gap: 10px;

        font-size: 13px;
    }



    /* Hi, David Cover */

    .account-menu:not(.account-menu-logged-out)
    > span {
        flex: 0 0 auto;

        margin: 0;

        margin-right: auto;

        white-space: nowrap;

        line-height: 1.2;
    }

    /* ---------- NON-VERIFIED USER ---------- */

    /*
       Lifeguard Verification stays under Logout
       for users who are NOT verified.
    */

    .account-menu:not(.account-menu-logged-out)
    > a[href="/lifeguard-verification"] {

        position: absolute;

        right: 14px;
        bottom: 14px;

        width: auto;
        height: auto;

        margin: 0;
        padding: 0;

        display: inline-flex;

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

        font-size: 11px;
        font-weight: 700;

        line-height: 1.15;

        white-space: nowrap;
    }


    /* ---------- VERIFIED LIFEGUARD ---------- */

    /*
       Hi, David Cover                Lifeguard Verified
    */

    .account-menu:not(.account-menu-logged-out)
    .lifeguard-verified-link {

        position: absolute;

        top: 94px;
        right: 14px;

        display: inline-flex;

        width: auto;
        height: auto;

        margin: 0;
        padding: 0;

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

        overflow: visible;

        font-size: 11px;
        font-weight: 700;

        line-height: 1.15;

        white-space: nowrap;
    }

    .account-menu
    .lifeguard-verified-title {

        display: inline;

        font-size: 11px;

        line-height: 1.15;
    }

    .account-menu
    .lifeguard-verified-title::before {
        content: none;
    }

    .account-menu
    .lifeguard-countdown {
        display: none;
    }


    /* ---------- ADMIN ---------- */

    /*
       Hi, David Cover       [camera] [pin] [lifeguard]
    */

    .admin-header-actions {
        display: flex;

        width: auto;

        flex: 0 0 auto;

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

        gap: 7px;

        margin-left: auto;
    }

    .hero .account-menu
    .admin-review-link {

        display: inline-flex;

        min-width: 48px;
        height: 38px;

        padding: 6px 9px;

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

        gap: 5px;

        border-radius: 9px;

        line-height: 1;

        white-space: nowrap;
    }

    .admin-action-label {
        display: none;
    }

    .admin-action-icon {
        display: inline-block;

        font-size: 18px;

        line-height: 1;
    }

    .admin-action-count {
        display: inline-block;

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

        line-height: 1;
    }


    /* ---------- LOGGED OUT ---------- */

    /*
       EN · EL
       Login Join
    */

    .account-menu.account-menu-logged-out {
        position: absolute;

        top: 56px;
        right: 14px;

        width: auto;

        display: flex;

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

        gap: 12px;

        margin: 0;

        font-size: 13px;
    }

    .account-menu.account-menu-logged-out
    .join-link {
        padding: 6px 10px;
    }

}


/* ---------------------------------
   Weather source attribution
   --------------------------------- */

.weather-source {
    margin-top: 10px;
    text-align: left;
    font-size: 0.72rem;
    color: #6b7280;
}

.weather-source a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.weather-source a:hover {
    color: #374151;
}

/* ---------------------------------
   Admin beach management
   --------------------------------- */

.admin-beach-page {
    max-width: 900px;

    margin: 0 auto;

    padding:
        24px 16px 60px;
}


.admin-beach-heading {
    margin-bottom: 20px;
}


.admin-beach-heading h1 {
    margin-bottom: 8px;
}


.admin-beach-heading p {
    margin-top: 0;

    color: #66727d;

    line-height: 1.5;
}


.admin-beach-summary {
    display: grid;

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

    gap: 12px;

    margin-bottom: 20px;
}


.admin-beach-summary > div {
    background: white;

    padding: 16px;

    border-radius: 12px;

    text-align: center;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.06);
}


.admin-beach-summary strong {
    display: block;

    font-size: 24px;
}


.admin-beach-summary span {
    display: block;

    margin-top: 4px;

    color: #66727d;

    font-size: 13px;
}


.admin-beach-tools {
    background: white;

    padding: 18px;

    border-radius: 12px;

    margin-bottom: 12px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.06);
}


.admin-beach-tools > label:first-child {
    display: block;

    margin-bottom: 7px;

    font-weight: 700;
}


.local-place-dashboard {
    padding: 24px;
}


.local-place-dashboard-heading h2,
.local-place-island-heading h3 {
    margin: 0;
}


.local-place-dashboard-heading p {
    margin: 6px 0 0;

    color: #66727d;
}

.local-place-dashboard-heading,
.featured-listing-admin-heading,
.featured-listing-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.local-place-manage-featured {
    color: #c62828;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.featured-listing-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #ccd3d8;
    border-radius: 9px;
}

.featured-listing-search {
    display: grid;
    grid-template-columns:
        minmax(100px, 1fr)
        minmax(100px, 1fr)
        minmax(180px, 1.7fr)
        minmax(115px, 1fr)
        auto;
    align-items: center;
    justify-content: initial;
}

.featured-listing-search > label {
    grid-column: 1 / 2;
}

.featured-listing-search > input {
    grid-column: 2 / -1;
    width: 100%;
}

.featured-listing-search select {
    width: 100%;
    min-width: 0;
}

.featured-listing-search select,
.featured-listing-manual input,
.featured-listing-manual select,
.featured-listing-manual textarea {
    padding: 10px 12px;
    border: 1px solid #ccd3d8;
    border-radius: 9px;
    font: inherit;
}

.featured-listing-manual summary { cursor: pointer; font-weight: 800; }
.featured-listing-manual form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.featured-listing-manual textarea,
.featured-listing-manual button { grid-column: 1 / -1; }
.advertise-campaign-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px; }
.advertise-campaign-form label { display: grid; gap: 7px; color: #17212b; font-size: 13px; font-weight: 800; }
.advertise-campaign-form input,.advertise-campaign-form select,.advertise-campaign-form textarea { width: 100%; padding: 12px; border: 1px solid #ccd3d8; border-radius: 9px; background: white; font: inherit; }
.advertise-campaign-form textarea { min-height: 110px; resize: vertical; }
.advertise-campaign-form label:nth-of-type(3),.advertise-campaign-form .advertise-cover-field,.advertise-campaign-form button { grid-column: 1 / -1; }
.advertise-cover-field { padding: 16px; border: 1px dashed #b8c1c8; border-radius: 11px; background: #f8fafb; }
.advertise-cover-field span { color: #66727d; font-size: 12px; font-weight: 400; }
.advertise-campaign-form .field-label { display: inline; }
.advertise-campaign-form .field-optional { display: inline; margin-left: 5px; color: #77838d; font-size: 11px; font-weight: 600; }
@media (max-width:700px){.advertise-campaign-form{grid-template-columns:1fr;padding:18px}.advertise-campaign-form label:nth-of-type(3),.advertise-campaign-form .advertise-cover-field,.advertise-campaign-form button{grid-column:auto}}
.featured-listing-location { color: #66727d; font-size: 13px; }
.featured-listing-selected-beach { margin: 10px 0; padding: 8px 10px; border-radius: 8px; background: #edf7f1; color: #276142; font-size: 13px; }
.featured-listing-beaches { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.featured-listing-beaches strong { width: 100%; font-size: 12px; }
.featured-listing-beaches span { padding: 5px 8px; border-radius: 999px; background: #f0f3f5; color: #52606c; font-size: 12px; }

.featured-listing-search button {
    padding: 10px 18px;
    border: 0;
    border-radius: 9px;
    background: #17212b;
    color: white;
    font-weight: 800;
}

.featured-listing-hint { color: #66727d; }

.featured-listing-admin-grid {
    display: grid;
    gap: 14px;
}

.featured-listing-admin-card {
    padding: 18px;
    border: 1px solid #d8dee3;
    border-radius: 14px;
    background: white;
}
.featured-listing-admin-card h2 { margin: 0 0 8px; }
.featured-listing-address { margin: 0 0 12px; color: #52606b; }
.featured-listing-nearby { display: grid; gap: 7px; margin: 12px 0 8px; }
.featured-listing-nearby > strong { color: #17212b; font-size: 12px; }
.featured-listing-nearby > div { display: flex; flex-wrap: wrap; gap: 6px; }
.featured-listing-nearby span { padding: 6px 9px; border-radius: 999px; background: #f0f3f5; color: #52606b; font-size: 11px; line-height: 1.2; }
.featured-listing-coordinates { margin: 8px 0 14px; color: #7b8791; font-size: 11px; }

.featured-listing-admin-card.is-featured {
    border-color: #e1b95e;
    box-shadow: 0 3px 14px rgba(128, 93, 19, 0.1);
}

.featured-listing-admin-heading h2 { margin: 3px 0 14px; }
.featured-listing-admin-heading span { color: #66727d; font-size: 12px; text-transform: uppercase; }
.featured-listing-admin-heading > strong { color: #805d13; background: #fff4d6; padding: 5px 9px; border-radius: 999px; font-size: 11px; }
.featured-listing-toggle { display: block; margin-bottom: 14px; font-weight: 700; }
.featured-listing-fields { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.featured-listing-fields label { font-size: 12px; font-weight: 700; }
.featured-listing-fields input { display: block; width: 100%; margin-top: 5px; padding: 9px; border: 1px solid #ccd3d8; border-radius: 8px; }

@media (max-width: 700px) {
    .local-place-dashboard-heading,
    .featured-listing-search { align-items: stretch; flex-direction: column; }
    .featured-listing-fields { grid-template-columns: 1fr; }
    .featured-listing-manual form { grid-template-columns: 1fr; }
    .featured-listing-manual textarea,
    .featured-listing-manual button { grid-column: auto; }
    .featured-listing-search { display: grid; grid-template-columns: 1fr; }
    .featured-listing-search > label,
    .featured-listing-search > input { grid-column: auto; }
}


.local-place-coverage-metrics {
    display: grid;

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

    gap: 10px;

    margin: 20px 0 14px;
}


.local-place-coverage-metric {
    padding: 14px;

    border: 1px solid #e4e8eb;
    border-radius: 11px;

    background: #f8fafb;
}


.local-place-coverage-metric strong,
.local-place-coverage-metric span {
    display: block;
}


.local-place-coverage-metric strong {
    color: #17212b;

    font-size: 21px;
}


.local-place-coverage-metric span {
    margin-top: 3px;

    color: #66727d;

    font-size: 12px;
}


.local-place-remote-note {
    margin: 0 0 18px;

    padding: 10px 12px;

    border-radius: 9px;

    background: #fff8e6;

    color: #5f4a16;

    font-size: 13px;
    line-height: 1.45;
}


.local-place-refresh-all-form {
    margin: 0;
}


.local-place-refresh-all-button,
.local-place-retry-button {
    width: 100%;

    min-height: 42px;

    border-radius: 9px;

    font-family: inherit;
    font-weight: 800;

    cursor: pointer;
}


.local-place-refresh-all-button {
    border: 0;

    background: #c62828;
    color: white;

    box-shadow:
        0 6px 16px
        rgba(198, 40, 40, 0.2);
}


.local-place-refresh-all-button:hover {
    background: #ad2020;

    transform: translateY(-1px);
}


.local-place-island-heading {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 12px;

    margin: 22px 0 10px;
}


.local-place-island-heading h3 {
    font-size: 15px;
}


.local-place-island-heading span {
    color: #78838d;

    font-size: 12px;
}


.local-place-island-grid {
    display: block;
    columns: 3 250px;
    column-gap: 12px;
}


.local-place-region-form {
    display: inline-block;
    width: 100%;
    margin: 0;
    margin-bottom: 12px;
    break-inside: avoid;
}

.local-place-outlier-form {
    display: block;
    width: 100%;
    margin-bottom: 16px;
}

.local-place-outlier-button {
    border-color: #d19a25;
    background: #fffaf0;
}


.local-place-region-button {
    width: 100%;
    min-height: 64px;

    padding: 10px;

    border: 1px solid #d8dee3;
    border-radius: 10px;

    background: white;
    color: #17212b;

    font-family: inherit;
    text-align: left;

    cursor: pointer;
}


.local-place-region-button strong,
.local-place-region-button span {
    display: block;
}


.local-place-region-button span {
    margin-top: 4px;

    color: #78838d;

    font-size: 12px;
}


.local-place-region-button:hover {
    border-color: #9eabb5;

    background: #f8fafb;
}

.local-place-region-button.is-complete {
    border-color: #79bd8b;
    background: #eef9f1;
    box-shadow: 0 3px 12px rgba(30, 120, 61, .1);
}

.local-place-region-history {
    display: grid;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

.local-place-region-history-item {
    display: grid;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #f2f4f6;
    color: #66727d;
    text-align: left;
}

.local-place-region-history-item.is-complete {
    background: #dff3e5;
    color: #176b35;
}

.local-place-region-history-item strong,
.local-place-region-history-item small {
    font: inherit;
}

.local-place-region-history-item strong {
    font-weight: 900;
}

.local-place-region-history-item small {
    font-size: 10px;
}


.local-place-retry-form {
    margin-top: 12px;
}


.local-place-retry-button {
    border: 1px solid #e0a1a1;

    background: #fff5f5;
    color: #9d1c1c;
}


.local-place-refresh-result {
    margin-top: 16px;

    padding-top: 14px;

    border-top: 1px solid #edf0f2;

    color: #43515d;

    font-size: 13px;
}


.local-place-refresh-result p {
    margin: 0;
}


.local-place-refresh-result div {
    margin-top: 7px;

    color: #9d1c1c;
}


.local-place-dashboard button:disabled {
    opacity: 0.55;

    cursor: wait;
}


@media (max-width: 760px) {
    .local-place-dashboard {
        padding: 18px;
    }

    .local-place-coverage-metrics {
        grid-template-columns: 1fr;
    }

    .local-place-island-grid {
        columns: 1;
    }

    .local-place-region-form,
    .local-place-region-button {
        width: 100%;
    }

    .local-place-island-heading {
        display: block;
    }

    .local-place-island-heading span {
        display: block;

        margin-top: 4px;
    }
}


#beach-search {
    display: block;

    width: 100%;

    padding: 12px 14px;

    border:
        1px solid #ccd3d8;

    border-radius: 10px;

    font-family: inherit;
    font-size: 16px;
}


#beach-search:focus {
    outline: none;

    border-color: #c62828;
}


.admin-beach-filter {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

    font-size: 14px;

    cursor: pointer;
}


.admin-beach-filter input {
    width: 17px;
    height: 17px;

    margin: 0;
}


.admin-beach-result-count {
    margin:
        12px 2px 16px;

    color: #66727d;

    font-size: 13px;
}


.admin-beach-list {
    display: grid;

    gap: 14px;
}


.admin-beach-card {
    background: white;

    padding: 18px;

    border:
        1px solid #e0e5e9;

    border-radius: 14px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.05);
}


.admin-beach-card-archived {
    opacity: 0.7;

    background: #f2f3f4;
}


.admin-beach-card-top {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 16px;
}


.admin-beach-card h2 {
    margin:
        0 0 9px;

    font-size: 20px;
}


.admin-beach-badges {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.admin-beach-badge {
    display: inline-flex;

    padding:
        4px 8px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}


.admin-beach-badge-active {
    background: #e9f7ed;

    color: #246b36;
}


.admin-beach-badge-archived {
    background: #e6e8ea;

    color: #59636d;
}


.admin-beach-badge-source {
    background: #eef3f8;

    color: #40566c;
}


.admin-beach-report-count {
    flex: 0 0 auto;

    min-width: 65px;

    text-align: center;
}


.admin-beach-report-count strong {
    display: block;

    font-size: 22px;
}


.admin-beach-report-count span {
    display: block;

    color: #66727d;

    font-size: 11px;
}


.admin-beach-details {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px 18px;

    margin-top: 18px;

    padding-top: 14px;

    border-top:
        1px solid #edf0f2;
}


.admin-beach-details > div {
    min-width: 0;
}


.admin-beach-details span {
    display: block;

    margin-bottom: 3px;

    color: #78838d;

    font-size: 11px;
}


.admin-beach-details strong {
    display: block;

    overflow-wrap: anywhere;

    font-size: 13px;
}


.admin-beach-seed-name {
    grid-column:
        1 / -1;
}


.admin-beach-duplicate-warning {
    margin-top: 15px;

    padding: 12px;

    border:
        1px solid #e6b85c;

    border-radius: 10px;

    background: #fff7e6;

    font-size: 13px;

    line-height: 1.5;
}


.admin-beach-duplicate-warning strong {
    display: block;

    margin-bottom: 5px;

    color: #805d13;
}


.admin-beach-readonly-note {
    margin-top: 14px;

    color: #8b949d;

    font-size: 11px;

    text-align: right;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


@media (max-width: 600px) {

    .admin-beach-page {
        padding:
            18px 12px 50px;
    }


    .admin-beach-summary {
        gap: 8px;
    }


    .admin-beach-summary > div {
        padding:
            13px 8px;
    }


    .admin-beach-summary strong {
        font-size: 20px;
    }


    .admin-beach-card {
        padding: 15px;
    }


    .admin-beach-card-top {
        gap: 10px;
    }


    .admin-beach-card h2 {
        font-size: 18px;
    }


    .admin-beach-details {
        grid-template-columns:
            1fr;
    }


    .admin-beach-seed-name {
        grid-column: auto;
    }

}


/* ---------------------------------
   Admin beach actions
   --------------------------------- */

.admin-beach-management-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 16px;

    padding-top: 14px;

    border-top:
        1px solid #edf0f2;
}


.admin-beach-inline-form {
    margin: 0;
}


.admin-beach-action-button,
.admin-beach-management-actions summary,
.admin-beach-archive-button,
.admin-beach-restore-button {
    min-height: 38px;

    padding:
        9px 12px;

    border:
        1px solid #ccd3d8;

    border-radius: 9px;

    background: white;

    color: #17212b;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}


.admin-beach-management-actions summary {
    display: inline-flex;

    align-items: center;

    list-style: none;
}


.admin-beach-management-actions summary::-webkit-details-marker {
    display: none;
}


.admin-beach-edit {
    width: auto;
}


.admin-beach-edit[open] {
    width: 100%;

    padding: 14px;

    border:
        1px solid #dfe4e8;

    border-radius: 10px;

    background: #f8fafb;
}


.admin-beach-edit[open] summary {
    margin-bottom: 14px;
}


.admin-beach-edit form {
    display: grid;

    gap: 12px;
}


.admin-beach-edit label {
    display: block;

    font-size: 13px;

    font-weight: 700;
}


.admin-beach-edit input {
    display: block;

    width: 100%;

    margin-top: 6px;

    padding: 10px;

    border:
        1px solid #ccd3d8;

    border-radius: 8px;

    font-family: inherit;

    font-size: 15px;
}


.admin-beach-edit-coordinates {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.admin-beach-save-button,
.admin-beach-primary-button,
.admin-beach-merge-button {
    width: 100%;

    padding: 12px;

    border: 0;

    border-radius: 9px;

    background: #c62828;

    color: white;

    font-family: inherit;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;
}


.admin-beach-archive-button {
    color: #9d1c1c;

    border-color: #e0a1a1;

    background: #fff5f5;
}


.admin-beach-restore-button {
    color: #246b36;

    border-color: #9bc7a5;

    background: #eef8ee;
}


/* ---------------------------------
   Beach merge page
   --------------------------------- */

.admin-merge-source,
.admin-merge-confirmation {
    padding: 18px;

    margin-bottom: 18px;

    background: white;

    border:
        1px solid #dfe4e8;

    border-radius: 12px;
}


.admin-merge-source > span,
.admin-merge-confirmation > span {
    color: #66727d;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;
}


.admin-merge-source h2,
.admin-merge-confirmation h2 {
    margin:
        7px 0 8px;
}


.admin-merge-select-form {
    padding: 18px;

    background: white;

    border-radius: 12px;
}


.admin-merge-select-form label {
    display: block;

    margin-bottom: 8px;

    font-weight: 700;
}


.admin-merge-select-form select {
    display: block;

    width: 100%;

    margin-bottom: 14px;

    padding: 12px;

    border:
        1px solid #ccd3d8;

    border-radius: 9px;

    background: white;

    font-family: inherit;

    font-size: 15px;
}


.admin-merge-arrow {
    margin-bottom: 8px;

    font-size: 28px;

    text-align: center;
}


.admin-merge-warning {
    margin:
        18px 0;

    padding: 16px;

    border:
        1px solid #e6b85c;

    border-radius: 12px;

    background: #fff7e6;

    line-height: 1.5;
}


.admin-merge-warning p:last-child {
    margin-bottom: 0;
}


.admin-beach-merge-button {
    background: #b42318;
}


.admin-beach-cancel-link {
    display: block;

    margin-top: 14px;

    color: #66727d;

    text-align: center;
}


@media (max-width: 600px) {

    .admin-beach-management-actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }


    .admin-beach-edit {
        width: 100%;
    }


    .admin-beach-edit[open] {
        grid-column:
            1 / -1;
    }


    .admin-beach-action-button,
    .admin-beach-management-actions summary,
    .admin-beach-inline-form,
    .admin-beach-inline-form button {
        width: 100%;
    }


    .admin-beach-action-button,
    .admin-beach-management-actions summary,
    .admin-beach-archive-button,
    .admin-beach-restore-button {
        display: flex;

        align-items: center;
        justify-content: center;
    }


    .admin-beach-edit-coordinates {
        grid-template-columns:
            1fr;
    }

}

/* ---------------------------------
   Admin beach source filter
   --------------------------------- */

.admin-beach-filter-row {
    display: flex;

    align-items: flex-end;

    gap: 16px;

    margin-top: 14px;
}


.admin-beach-filter-row > label:first-child {
    flex: 1;

    font-size: 14px;

    font-weight: 700;
}


#source-filter {
    display: block;

    width: 100%;

    margin-top: 6px;

    padding: 10px;

    border:
        1px solid #ccd3d8;

    border-radius: 9px;

    background: white;

    font-family: inherit;

    font-size: 14px;
}


@media (max-width: 600px) {

    .admin-beach-filter-row {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }

}

/* ---------------------------------
   Admin duplicate map
   --------------------------------- */

.admin-beach-row {
    display: block;
}

.admin-beach-row[hidden] {
    display: none !important;
}


.admin-beach-row-conflict {
    display: grid;

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

    gap: 18px;

    align-items: stretch;
}


.admin-beach-row-conflict
.admin-beach-card {
    height: 100%;
}


.admin-conflict-map {
    width: 100%;

    min-height: 330px;

    border:
        2px solid #c62828;

    border-radius: 14px;

    overflow: hidden;

    background: #e9eef2;
}


.admin-conflict-map
.leaflet-tooltip {
    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}


@media (max-width: 850px) {

    .admin-beach-row-conflict {
        grid-template-columns:
            1fr;
    }


    .admin-conflict-map {
        min-height: 280px;
    }

}


.admin-beach-management-page {
    max-width: 1320px;
}

.admin-beach-row:not(
    .admin-beach-row-conflict
) {
    max-width: 900px;
}

/* ---------------------------------
   Admin beach warning review
   --------------------------------- */

.admin-beach-filter-row > label {
    font-size: 14px;

    font-weight: 700;
}


#warning-filter {
    display: block;

    width: 100%;

    margin-top: 6px;

    padding: 10px;

    border:
        1px solid #ccd3d8;

    border-radius: 9px;

    background: white;

    font-family: inherit;

    font-size: 14px;
}


.admin-beach-warning-item {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 8px 0;

    border-top:
        1px solid rgba(
            128,
            93,
            19,
            0.15
        );
}


.admin-beach-warning-item:first-of-type {
    margin-top: 7px;
}


.admin-beach-warning-item
.admin-beach-inline-form {
    flex: 0 0 auto;
}


.admin-beach-approve-separate-button {
    min-height: 34px;

    padding:
        7px 10px;

    border:
        1px solid #9bc7a5;

    border-radius: 8px;

    background: #eef8ee;

    color: #246b36;

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}


.admin-beach-approve-separate-button:hover {
    background: #dff1e3;

    border-color: #76ad83;
}


@media (max-width: 700px) {

    .admin-beach-warning-item {
        flex-direction: column;

        align-items: stretch;

        gap: 8px;
    }


    .admin-beach-warning-item
    .admin-beach-inline-form {
        width: 100%;
    }


    .admin-beach-approve-separate-button {
        width: 100%;
    }

}

/* ---------------------------------
   Beach photo gallery
   --------------------------------- */

.beach-photo-gallery {
    margin:
        18px 0 4px;
}


.beach-photo-gallery h2 {
    margin:
        0 0 10px;

    font-size: 18px;
}


.beach-photo-strip {
    display: flex;

    gap: 9px;

    overflow-x: auto;

    padding:
        2px 2px 8px;

    scrollbar-width: thin;

    -webkit-overflow-scrolling:
        touch;
}


.beach-photo-thumbnail {
    flex:
        0 0 82px;

    width: 82px;
    height: 70px;

    padding: 0;

    overflow: hidden;

    border:
        2px solid white;

    border-radius: 10px;

    background: #e9eef2;

    box-shadow:
        0 1px 5px
        rgba(0, 0, 0, 0.12);

    cursor: pointer;
}


.beach-photo-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.beach-photo-thumbnail:hover,
.beach-photo-thumbnail:focus-visible {
    border-color:
        #c62828;

    outline: none;
}


/* ---------------------------------
   Beach photo lightbox
   --------------------------------- */

.photo-lightbox-open {
    overflow: hidden;
}


.beach-photo-lightbox {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

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

    padding: 28px 70px;

    background:
        rgba(0, 0, 0, 0.88);
}


.beach-photo-lightbox[hidden] {
    display: none !important;
}


.beach-photo-lightbox-content {
    position: relative;

    display: flex;

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

    width: 100%;
    height: 100%;

    max-width: 1100px;
}


.beach-photo-lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: 88vh;

    object-fit: contain;

    border-radius: 8px;

    background: black;
}


.beach-photo-lightbox-close {
    position: absolute;

    top: 16px;
    right: 20px;

    z-index: 2;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.14);

    color: white;

    font-size: 34px;
    line-height: 1;

    cursor: pointer;
}


.beach-photo-lightbox-nav {
    position: absolute;

    top: 50%;

    z-index: 2;

    width: 48px;
    height: 58px;

    padding: 0;

    transform:
        translateY(-50%);

    border: 0;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.14);

    color: white;

    font-size: 42px;
    line-height: 1;

    cursor: pointer;
}


.beach-photo-lightbox-previous {
    left: 16px;
}


.beach-photo-lightbox-next {
    right: 16px;
}


.beach-photo-lightbox-close:hover,
.beach-photo-lightbox-nav:hover {
    background:
        rgba(255, 255, 255, 0.25);
}


.beach-photo-counter {
    position: absolute;

    left: 50%;
    bottom: 12px;

    transform:
        translateX(-50%);

    padding:
        6px 10px;

    border-radius: 999px;

    background:
        rgba(0, 0, 0, 0.65);

    color: white;

    font-size: 13px;
    font-weight: 700;
}


@media (max-width: 600px) {

    .beach-photo-thumbnail {
        flex-basis: 74px;

        width: 74px;
        height: 64px;
    }


    .beach-photo-lightbox {
        padding:
            62px 12px 50px;
    }


    .beach-photo-lightbox-close {
        top: 10px;
        right: 12px;
    }


    .beach-photo-lightbox-nav {
        top: auto;
        bottom: 8px;

        width: 48px;
        height: 42px;

        transform: none;

        font-size: 34px;
    }


    .beach-photo-lightbox-previous {
        left: 12px;
    }


    .beach-photo-lightbox-next {
        right: 12px;
    }


    .beach-photo-counter {
        bottom: 18px;
    }

}




/* ---------------------------------
   Admin beach photo management
   --------------------------------- */

.admin-beach-photo-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 24px;
}


.admin-beach-photo-card {
    background: white;

    padding: 14px;

    border:
        1px solid #e0e5e9;

    border-radius: 14px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.05);
}


.admin-beach-photo-image {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: 10px;
}


.admin-beach-photo-card p {
    margin:
        12px 0 8px;

    line-height: 1.4;
}


.admin-beach-photo-card small {
    display: block;

    margin-bottom: 14px;

    color: #78838d;
}


.admin-beach-photo-card form {
    margin: 0;
}


@media (max-width: 600px) {

    .admin-beach-photo-grid {
        grid-template-columns:
            1fr;
    }

}


/* ---------------------------------
   Mobile small header
   --------------------------------- */

@media (max-width: 600px) {

    .small-header {
        position: relative;

        display: grid;

        grid-template-columns:
            1fr auto;

        align-items: start;

        gap: 12px;

        padding:
            18px 20px 14px;
    }


    .small-header > strong {
        display: none;
    }


    .small-header
    .header-controls {
        position: static;

        display: flex;

        width: auto;

        flex-direction: column;

        align-items: flex-end;

        gap: 8px;
    }


    .small-header
    .language-switcher {
        position: static;

        margin: 0;
    }


    .small-header
    .account-menu {
        position: static;

        display: flex;

        width: auto;

        margin: 0;

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

        gap: 8px;
    }


    .small-header
    .account-menu:not(
        .account-menu-logged-out
    )
    .logout-form {
        position: static;

        margin: 0;
    }


    .small-header
    .admin-header-actions {
        position: absolute;

        left: 20px;
        right: 20px;

        top: 68px;

        display: flex;

        justify-content: flex-end;

        gap: 7px;
    }

    /* Put user name on the left side
       of the admin action row */

    .small-header
    .account-menu:not(
        .account-menu-logged-out
    )
    > span {
        position: absolute;

        top: 79px;
        left: 20px;

        margin: 0;

        line-height: 15px;

        white-space: nowrap;
    }
    .small-header
    .account-menu:not(
        .account-menu-logged-out
    )
    .logout-form {
        position: absolute;

        top: 27px;
        right: 104px;

        margin: 0;

        z-index: 3;

        align-items: center;
    }

    .small-header {
        padding-bottom: 54px;
    }

}


/* ---------------------------------
   Small header verified lifeguard
   alignment
   --------------------------------- */

@media (max-width: 600px) {

    .small-header
    .account-menu:not(
        .account-menu-logged-out
    )
    .lifeguard-verified-link {
        position: absolute;

        top: 77px;
        right: 20px;
    }

}

/* ---------------------------------
   Verified lifeguard final alignment
   --------------------------------- */

@media (max-width: 600px) {

    .small-header
    .lifeguard-verified-link {
        transform:
            translateY(-3px);
    }


    .hero
    .lifeguard-verified-link {
        transform:
            translateY(-7px);
    }

}

/* ---------------------------------
   Lifeguard verification alignment
   --------------------------------- */

@media (max-width: 600px) {

    /* Beach / small header */
    .small-header
    .account-menu
    > a[href="/lifeguard-verification"] {
        transform:
            translateY(-3px);
    }


    /* Homepage */
    .hero
    .account-menu
    > a[href="/lifeguard-verification"] {
        transform:
            translateY(-7px);
    }

}


/* ---------------------------------
   Localized file picker
   --------------------------------- */

.localized-file-picker {
    display: flex;

    width: 100%;

    margin-top: 10px;

    align-items: center;

    gap: 10px;
}


.localized-file-input {
    position: absolute;

    width: 1px !important;
    height: 1px;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;

    opacity: 0;
}


.localized-file-picker
.localized-file-button {
    display: inline-flex;

    flex: 0 0 auto;

    min-height: 38px;

    margin: 0;

    padding: 8px 12px;

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

    border: 1px solid #aeb8c0;
    border-radius: 8px;

    background: #f8fafb;

    color: #17212b;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;

    cursor: pointer;
}


.localized-file-picker
.localized-file-button:hover {
    background: #eef2f4;
}


.localized-file-input:focus-visible
+ .localized-file-button {
    outline: 3px solid rgba(25, 118, 210, 0.3);
    outline-offset: 2px;
}


.localized-file-name {
    min-width: 0;

    overflow: hidden;

    color: #66727d;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.localized-file-field-label {
    margin-top: 14px;

    font-weight: 700;
}


@media (max-width: 480px) {

    .localized-file-picker {
        align-items: flex-start;
        flex-direction: column;
    }

    .localized-file-name {
        width: 100%;
    }

}


/* =========================================================
   MOBILE BEACH CARDS
   Keep beach name + condition on one clean line
   ========================================================= */

@media (max-width: 600px) {

    .beach-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 12px;

        width: 100%;
    }


    .beach-top > strong {
        flex: 1 1 auto;

        min-width: 0;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .beach-top .status {
        flex: 0 0 auto;

        white-space: nowrap;

        text-align: right;

        font-size: 13px;

        line-height: 1.1;
    }

}


/* Final contributor header placement overrides */
@media (max-width: 600px) {

    .hero .account-menu:not(
        .account-menu-logged-out
    ) > .account-profile-menu {
        flex: 0 1 auto;
        max-width: 190px;
        margin-right: auto;
    }

    .hero .header-contributor-level {
        overflow: hidden;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero .account-menu-admin > .account-profile-menu {
        max-width: 135px;
    }

    .hero .account-menu-verified > .account-profile-menu,
    .hero .account-menu-standard > .account-profile-menu {
        max-width: 165px;
    }

    .small-header {
        padding-bottom: 62px;
    }

    .small-header
    .account-menu:not(
        .account-menu-logged-out
    ) > .account-profile-menu {
        position: absolute;
        top: 72px;
        left: 20px;

        max-width: 220px;
        margin: 0;

        text-align: left;
    }

    .small-header .header-contributor-level {
        overflow: hidden;
        color: #66727d;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .small-header .account-menu-admin > .account-profile-menu {
        width: 112px;
        max-width: 112px;
    }

    .small-header .account-menu-admin .account-greeting,
    .small-header .account-menu-admin .header-contributor-level {
        display: block;
        width: 100%;
        white-space: nowrap;
    }

    .small-header .account-menu-admin > .admin-header-actions {
        left: 144px;
    }

    .small-header .account-menu-verified > .account-profile-menu,
    .small-header .account-menu-standard > .account-profile-menu {
        max-width: 190px;
    }

    /* Align both lifeguard links with the contributor row on beach pages. */
    .small-header .account-menu-verified .lifeguard-verified-link,
    .small-header .account-menu-standard > a[href="/lifeguard-verification"] {
        transform: translateY(-7px);
    }

    /* Keep beach-card labels inside narrow mobile screens. */
    .beach-card .beach-top {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 7px;
    }

    .beach-card .beach-top > strong {
        width: 100%;
        flex: 1 0 100%;
    }

    .beach-card .beach-card-statuses {
        display: flex;
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 8px;
    }

    .beach-card .beach-card-lifeguard-status,
    .beach-card .beach-card-statuses .status {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        font-size: 11px;
        line-height: 1.2;
        white-space: normal;
    }

    .beach-card .beach-card-lifeguard-status {
        align-items: flex-start;
    }

    .beach-card .beach-card-statuses .status:only-child {
        flex: 0 1 auto;
    }

}

/* Keep status and contribution count attached to the account name. */
.header-contribution-count {
    display: block;
    color: #66727d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.hero .header-contribution-count {
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 600px) {
    .hero {
        padding-bottom: 20px;
    }

    .hero .account-profile-menu,
    .small-header .account-profile-menu {
        overflow: visible;
    }

    .hero .account-identity,
    .small-header .account-identity {
        gap: 1px;
    }

    .hero .header-contributor-level,
    .hero .header-contribution-count,
    .small-header .header-contributor-level,
    .small-header .header-contribution-count {
        position: static;
        width: auto;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .small-header {
        padding-bottom: 62px;
    }

    .small-header .account-menu-admin .account-greeting,
    .small-header .account-menu-admin .header-contributor-level {
        width: auto;
    }

    .small-header .account-menu-verified,
    .small-header .account-menu-standard {
        position: absolute;
        top: 64px;
        left: 20px;
        right: 20px;
        width: auto;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .small-header .account-menu.account-menu-verified > .account-profile-menu,
    .small-header .account-menu.account-menu-standard > .account-profile-menu,
    .small-header .account-menu.account-menu-verified .lifeguard-verified-link,
    .small-header .account-menu.account-menu-standard > a[href="/lifeguard-verification"] {
        position: static;
        margin: 0;
        transform: none;
    }

    .small-header .account-menu.account-menu-verified .lifeguard-verified-link {
        padding-bottom: 0;
        align-self: flex-end;
    }
}


/* =================================================
   Around the beach / local places
   ================================================= */


/* ---------------------------------
   Beach page entry button
   --------------------------------- */

.nearby-button {
    display: flex;

    width: 100%;

    min-height: 58px;

    margin:
        -8px 0 30px;

    padding:
        15px 16px;

    align-items: center;

    gap: 11px;

    border:
        1px solid #cfd7dd;

    border-radius: 12px;

    background: white;

    color: #17212b;

    text-decoration: none;

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

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.05);
}


.nearby-button:hover {
    border-color:
        #c62828;

    background:
        #fffafa;
}


.nearby-button-icon {
    flex: 0 0 auto;

    font-size: 21px;

    line-height: 1;
}


.nearby-button-text {
    flex:
        1 1 auto;

    min-width: 0;

    text-align: left;
}


.nearby-button-arrow {
    flex: 0 0 auto;

    color: #66727d;

    font-size: 20px;

    line-height: 1;
}



/* ---------------------------------
   Nearby page
   --------------------------------- */

.nearby-page {
    padding-bottom: 60px;
}


.nearby-page-heading {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin:
        5px 0 22px;
}


.nearby-heading-icon {
    flex: 0 0 auto;

    margin-top: 3px;

    font-size: 29px;

    line-height: 1;
}


.nearby-page-heading h1 {
    margin:
        0 0 6px;
}


.nearby-page-heading p {
    margin: 0;

    color: #66727d;

    line-height: 1.45;
}



/* ---------------------------------
   Category filters
   --------------------------------- */

.nearby-category-filter {
    display: flex;

    gap: 8px;

    overflow-x: auto;

    margin:
        0 -2px 22px;

    padding:
        2px 2px 8px;

    scrollbar-width: thin;

    -webkit-overflow-scrolling:
        touch;
}


.nearby-category-chip {
    display: inline-flex;

    flex: 0 0 auto;

    min-height: 36px;

    padding:
        8px 12px;

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

    border:
        1px solid #ccd3d8;

    border-radius: 999px;

    background: white;

    color: #526579;

    text-decoration: none;

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

    white-space: nowrap;
}


.nearby-category-chip:hover {
    border-color:
        #c62828;

    color:
        #c62828;
}


.nearby-category-chip.active {
    border-color:
        #c62828;

    background:
        #fff1f1;

    color:
        #a91f1f;
}



/* ---------------------------------
   Place cards
   --------------------------------- */

.nearby-place-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 14px;
    align-items: stretch;
}


.nearby-place-card {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    padding: 18px;

    border:
        1px solid #d8dee3;

    border-radius: 14px;

    background: white;

    box-shadow:
        0 2px 10px
        rgba(0, 0, 0, 0.05);
}

.nearby-place-card-content {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
}


.nearby-place-promoted {
    border-color:
        #d5a83e;

    border-width: 2px;

    background:
        linear-gradient(
            180deg,
            #fffaf0 0,
            #ffffff 88px
        );

    box-shadow:
        0 2px 12px
        rgba(128, 93, 19, 0.09);
}

.nearby-featured-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    padding-bottom: 11px;
    border-bottom: 1px solid #f0dfb8;
    color: #805d13;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.nearby-place-promoted .nearby-place-card-header {
    display: block;
}

.nearby-place-promoted .nearby-place-category {
    margin-bottom: 5px;
}

.nearby-place-promoted h2 {
    font-size: 20px;
    line-height: 1.25;
}

.manual-place-location-button {
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid #c62828;
    border-radius: 9px;
    background: #fffafa;
    color: #a91f1f;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.manual-place-location-status {
    align-self: center;
    color: #66727d;
    font-size: 12px;
    line-height: 1.4;
}

.nearby-featured-kicker span { color: #d39b20; font-size: 14px; }
.nearby-featured-cover { display: block; width: calc(100% + 36px); height: 220px; margin: -18px -18px 16px; object-fit: cover; border-radius: 12px 12px 0 0; }
.nearby-featured-headline { margin-top: 6px; color: #805d13; font-size: 15px; font-weight: 800; }
.nearby-featured-offer { display: grid; gap: 3px; margin-top: 14px; padding: 12px; border-radius: 10px; background: #fff4d6; color: #62480f; }
.nearby-featured-offer span { font-size: 13px; }
.nearby-featured-campaign-action { display: flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 16px; padding: 10px 14px; border-radius: 9px; background: #c62828; color: white; font-size: 14px; font-weight: 900; text-decoration: none; }
.nearby-featured-campaign-action:hover { background: #ad2020; }

.nearby-place-actions a.nearby-featured-primary-action {
    border-color: #c62828;
    background: #c62828;
    color: white;
}

.nearby-place-actions a.nearby-featured-primary-action:hover {
    background: #ad2020;
    color: white;
}

.business-owner-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 18px 0 14px;
    padding: 14px;
    border: 1px solid #d8dee3;
    border-radius: 11px;
    background: #f8fafb;
    cursor: pointer;
}

.business-owner-toggle input,
.account-settings-card .business-owner-toggle input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    accent-color: #c62828;
}

#business-owner-fields {
    margin: 0 0 18px;
    padding: 14px;
    border-left: 3px solid #c62828;
    border-radius: 0 10px 10px 0;
    background: #fffafa;
}

#business-owner-fields[hidden] { display: none; }
.advertising-review-grid { display: grid; gap: 18px; }
.advertising-review-card { overflow: hidden; border: 1px solid #d8dee3; border-radius: 15px; background: white; box-shadow: 0 3px 14px rgba(0,0,0,.06); }
.advertising-review-card > img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.advertising-review-body { padding: 20px; }
.advertising-review-body h2 { margin: 8px 0; }
.advertising-review-status { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #fff4d6; color: #805d13; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.advertising-review-status.active { background: #e8f6ed; color: #276142; }
.advertising-review-status.scheduled { background: #e8f1fa; color: #285d89; }
.advertising-review-status.awaiting_payment { background: #edf0f5; color: #46586c; }
.advertising-review-status.expired { background: #eeeeee; color: #606870; }
.advertising-review-status.rejected { background: #f8eaea; color: #9d1c1c; }
.advertising-review-offer { display: grid; gap: 3px; padding: 12px; border-radius: 10px; background: #fff8e6; }
.advertising-review-body dl { display: grid; grid-template-columns: 130px 1fr; gap: 7px 12px; }
.advertising-review-body dt { font-weight: 800; }.advertising-review-body dd { margin: 0; overflow-wrap: anywhere; }
.advertising-review-actions { display: flex; gap: 10px; margin-top: 18px; }.advertising-review-actions form { flex: 1; }
.advertising-review-actions button { width: 100%; padding: 12px; border-radius: 9px; font-weight: 800; cursor: pointer; }
.advertising-approve-button { border: 0; background: #c62828; color: white; }.advertising-reject-button { border: 1px solid #ccd3d8; background: white; color: #17212b; }
.advertising-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.advertising-edit-link { color: #17212b; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.advertising-edit-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.advertising-edit-title-row h1 { margin-bottom: 4px; }
.advertising-edit-title-row p { margin: 0; }
.advertising-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; grid-column: 1 / -1; }
.advertising-edit-actions > a { color: #52606b; font-weight: 800; text-decoration: none; }
.advertising-edit-actions .local-place-refresh-all-button { width: auto; min-width: 220px; }
@media (max-width:700px){.advertising-edit-actions{align-items:stretch;flex-direction:column-reverse}.advertising-edit-actions>a{text-align:center}.advertising-edit-actions .local-place-refresh-all-button{width:100%;min-width:0}}
.advertising-delete-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 18px; border: 1px solid #efb3b3; border-radius: 12px; background: #fff7f7; }
.advertising-delete-panel strong { color: #8f1616; font-size: 15px; }
.advertising-delete-panel p { margin: 4px 0 0; color: #66727d; font-size: 12px; line-height: 1.4; }
.advertising-delete-panel button { min-height: 40px; padding: 9px 14px; border: 1px solid #b91c1c; border-radius: 9px; background: white; color: #b91c1c; font-weight: 900; cursor: pointer; white-space: nowrap; }
.advertising-delete-panel button:hover { background: #b91c1c; color: white; }
.advertising-promotion-field { grid-column: 1 / -1; padding: 14px; border: 1px dashed #d5a83e; border-radius: 10px; background: #fff9e9; }
.advertising-promotion-field > span:not(.field-label) { display: block; margin: 4px 0 9px; color: #66727d; font-size: 11px; line-height: 1.4; }
.advertising-promotion-field input { text-transform: uppercase; }
.advertising-complimentary-label { color: #176b35; }
.promotion-code-admin-grid { display: grid; gap: 16px; }
.promotion-code-admin-card { display: grid; gap: 13px; }
.promotion-code-admin-card > div:first-of-type { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promotion-code-value { padding: 7px 10px; border-radius: 7px; background: #17212b; color: white; font-family: monospace; font-size: 15px; font-weight: 900; letter-spacing: .04em; }
.promotion-code-admin-card > p { margin: 0; color: #66727d; font-size: 13px; }
.promotion-code-usage { display: flex; align-items: baseline; gap: 6px; padding: 12px; border-radius: 9px; background: #f2fbf5; color: #176b35; }
.promotion-code-usage strong { font-size: 21px; }
.promotion-code-active { display: flex !important; align-items: center; gap: 9px; }
.promotion-code-active input { width: 20px !important; height: 20px; margin: 0; accent-color: #c62828; }
.campaign-submitted-card { display: grid; justify-items: start; gap: 12px; max-width: 620px; margin: 30px auto; }
.campaign-submitted-card h1,.campaign-submitted-card p { margin: 0; }
.campaign-submitted-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #e7f7ec; color: #176b35; font-size: 23px; font-weight: 900; }
.campaign-email-result { display: grid; gap: 3px; width: 100%; padding: 13px; border-radius: 10px; font-size: 12px; }
.campaign-email-result.success { background: #f2fbf5; color: #176b35; }
.campaign-email-result.warning { background: #fff9e9; color: #805d13; }
.campaign-email-result span { color: #52606b; line-height: 1.4; }
.advertising-admin-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.business-owner-advertise-link.secondary { border: 1px solid #c62828; background: white; color: #c62828; }
.business-directory-filters { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(180px,.7fr) auto; gap: 10px; }
.business-directory-filters button { min-height: 42px; padding: 9px 16px; border: 0; border-radius: 9px; background: #17212b; color: white; font-weight: 900; }
.business-directory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0 12px; }
.business-directory-toolbar a { color: #b91c1c; font-size: 12px; font-weight: 900; }
.business-directory-grid { display: grid; gap: 14px; }
.business-directory-card { padding: 18px; border: 1px solid #d8dee3; border-radius: 14px; background: white; box-shadow: 0 3px 12px rgba(0,0,0,.05); }
.business-directory-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.business-directory-heading > div > span { color: #66727d; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.business-directory-heading h2 { margin: 4px 0 14px; }
.business-consent-badge { padding: 6px 8px; border-radius: 999px; background: #f0f3f5; color: #66727d; font-size: 10px; font-weight: 900; white-space: nowrap; }
.business-consent-badge.opted-in { background: #e7f7ec; color: #176b35; }
.business-directory-card dl { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 7px 12px; margin: 0 0 14px; font-size: 12px; }
.business-directory-card dt { font-weight: 900; }
.business-directory-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #52606b; }
.business-directory-card dd a { color: #b91c1c; }
@media(max-width:700px){.business-directory-filters{grid-template-columns:1fr}.business-directory-heading{align-items:flex-start;flex-direction:column}.business-directory-card dl{grid-template-columns:95px minmax(0,1fr)}.business-directory-toolbar{align-items:flex-start;flex-direction:column}}
@media (max-width:700px){.advertising-delete-panel{align-items:stretch;flex-direction:column}.advertising-delete-panel button{width:100%}}

/* Keep featured cover images inside the complete gold card border. */
.nearby-place-card.nearby-place-has-cover {
    padding: 0;
    overflow: hidden;
}
.nearby-place-has-cover .nearby-featured-cover {
    width: 100%;
    height: 170px;
    margin: 0;
    border-radius: 0;
    object-fit: contain;
    background: white;
    object-position: center;
}
.nearby-place-has-cover .nearby-place-card-content {
    padding: 18px;
}
.nearby-featured-socials { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.nearby-featured-socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #d8dee3; border-radius: 50%; background: white; color: #805d13; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.nearby-featured-socials a:hover { border-color: #d5a83e; background: #fff8e6; transform: translateY(-1px); }
.nearby-featured-socials svg { width: 19px; height: 19px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; }
.nearby-featured-socials svg rect,.nearby-featured-socials svg circle:not(.social-icon-dot) { fill: none; }
.nearby-featured-socials .social-icon-dot { stroke: none; }
.nearby-featured-socials svg path { stroke: none; }
.nearby-featured-carousel { min-width: 0; }
.nearby-featured-carousel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.nearby-featured-carousel-title { display: grid; gap: 2px; color: #17212b; font-size: 14px; font-weight: 900; }
.nearby-featured-carousel-title span { color: #66727d; font-size: 11px; font-weight: 600; }
.nearby-featured-carousel-controls { display: flex; align-items: center; gap: 7px; }
.nearby-featured-carousel-count { min-width: 38px; color: #66727d; font-size: 12px; font-weight: 700; text-align: center; }
.nearby-featured-carousel-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid #d8dee3; border-radius: 50%; background: white; color: #17212b; font-size: 20px; line-height: 1; cursor: pointer; }
.nearby-featured-carousel-button:hover { border-color: #d5a83e; background: #fff8e6; }
.nearby-featured-carousel-track { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.nearby-featured-carousel-track.is-jumping { scroll-snap-type: none; }
.nearby-featured-carousel-track::-webkit-scrollbar { display: none; }
.nearby-featured-carousel-track .nearby-place-card { flex: 0 0 calc(100% - 4px); scroll-snap-align: start; }
.nearby-featured-carousel-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 12px; }
.nearby-featured-carousel-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #cbd2d8; cursor: pointer; }
.nearby-featured-carousel-dot.active { width: 18px; border-radius: 999px; background: #d5a83e; }

/* Administrator management navigation lives on its own second row. */
.account-menu.account-menu-admin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 12px;
}
.account-menu-admin > .account-profile-menu { grid-column: 1; }
.account-menu-admin > .admin-header-actions { grid-column: 2; margin-left: 0; }
.admin-management-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    gap: 8px;
    width: 100%;
}
.account-menu .admin-management-link {
    display: flex;
    min-height: 40px;
    padding: 8px 11px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 9px;
    background: rgba(255, 255, 255, .13);
    color: white;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}
.account-menu .admin-management-link:hover { background: rgba(255, 255, 255, .22); }
.admin-management-icon { font-size: 17px; line-height: 1; }
.admin-management-count {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: white;
    color: #c62828;
    font-size: 11px;
    font-weight: 900;
}
.small-header .account-menu .admin-management-link {
    border-color: #d8dee3;
    background: #f7f9fa;
    color: #17212b;
}
.small-header .account-menu .admin-management-link:hover { border-color: #c62828; background: #fff5f5; }
.small-header .admin-management-count { background: #c62828; color: white; }

@media (max-width: 600px) {
    .hero .account-menu.account-menu-admin {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        gap: 10px;
    }
    .hero .account-menu-admin > .account-profile-menu {
        grid-column: 1;
        width: auto;
        max-width: 145px;
        margin: 0;
    }
    .hero .account-menu-admin > .admin-header-actions {
        position: static;
        grid-column: 2;
        margin: 0;
    }
    .admin-management-actions { gap: 7px; }
    .account-menu .admin-management-link {
        min-height: 42px;
        padding: 8px 9px;
        font-size: 11px;
    }
    .small-header .account-menu-admin > .admin-header-actions {
        position: static;
        left: auto;
    }
}
@media (max-width:700px) {
    .nearby-place-card.nearby-place-has-cover { padding: 0; }
    .nearby-place-has-cover .nearby-place-card-content { padding: 15px; }
    .nearby-place-has-cover .nearby-featured-cover { height: 150px; }
}

.business-owner-next-step { margin: 12px 0; color: #66727d; font-size: 13px; line-height: 1.45; }
.business-owner-advertise-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; border-radius: 9px; background: #c62828; color: white; font-size: 13px; font-weight: 800; text-decoration: none; }
.business-campaign-status { margin-top: 12px; }
.business-campaign-status.is-pending,
.business-campaign-status.is-active,
.business-campaign-status.is-scheduled,
.business-campaign-status.is-awaiting_payment { display: grid; gap: 6px; padding: 13px; border: 1px solid #e1e6ea; border-radius: 10px; background: #fff; }
.business-campaign-status.is-pending { border-color: #ead59a; background: #fff9e9; }
.business-campaign-status.is-active,.business-campaign-status.is-scheduled { border-color: #a9d6b7; background: #f2fbf5; }
.business-campaign-status.is-awaiting_payment { border-color: #b9c9dd; background: #f4f7fb; }
.business-campaign-status-label { color: #17212b; font-size: 13px; font-weight: 900; }
.business-campaign-status.is-pending .business-campaign-status-label { color: #805d13; }
.business-campaign-status.is-active .business-campaign-status-label,.business-campaign-status.is-scheduled .business-campaign-status-label { color: #176b35; }
.business-campaign-status strong { color: #17212b; font-size: 14px; }
.business-campaign-status p { margin: 0; color: #66727d; font-size: 12px; line-height: 1.4; }
.business-early-access-notice { display: grid; gap: 6px; margin-top: 13px; padding: 13px; border: 1px solid #ead59a; border-radius: 10px; background: #fff9e9; }
.business-early-access-notice strong { color: #805d13; font-size: 13px; }
.business-early-access-notice p { margin: 0; color: #52606b; font-size: 12px; line-height: 1.45; }
.business-early-access-notice small { color: #805d13; font-size: 11px; font-weight: 700; }
.business-partner-plans-link { display: inline-flex; margin-top: 12px; color: #b91c1c; font-size: 12px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.business-contact-fields { display: grid; gap: 7px; margin-top: 13px; }
.business-contact-fields label { margin-top: 5px; }
.business-contact-fields textarea { min-height: 78px; resize: vertical; }
.business-marketing-consent { display: flex !important; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid #d8dee3; border-radius: 10px; background: white; }
.business-marketing-consent input { flex: 0 0 auto; width: 20px !important; height: 20px; margin: 1px 0 0; accent-color: #c62828; }
.business-marketing-consent span { display: grid; gap: 3px; }
.business-marketing-consent small { color: #66727d; font-size: 11px; font-weight: 500; line-height: 1.4; }
.business-partner-page { max-width: 920px; }
.business-partner-hero { padding: 28px; border-radius: 18px; background: linear-gradient(135deg, #17212b, #293747); color: white; }
.business-partner-hero .eyebrow { margin: 0 0 8px; color: #ffd36b; font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.business-partner-hero h1 { margin: 0 0 10px; color: white; }
.business-partner-hero > p { max-width: 680px; margin: 0; color: #e1e7eb; line-height: 1.55; }
.business-partner-beta-note { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.08); font-size: 12px; line-height: 1.45; }
.business-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 20px; }
.business-plan-card { display: grid; align-content: start; padding: 20px; border: 1px solid #d8dee3; border-radius: 15px; background: white; box-shadow: 0 3px 14px rgba(0,0,0,.05); }
.business-plan-card.featured { border-color: #d5a83e; box-shadow: 0 4px 18px rgba(128,93,19,.12); }
.business-plan-card .plan-label { color: #805d13; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.business-plan-card h2 { margin: 7px 0 3px; }
.business-plan-price { margin: 0 0 14px; color: #17212b; font-size: 26px; font-weight: 900; }
.business-plan-price span { color: #66727d; font-size: 12px; font-weight: 600; }
.business-plan-card ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: #52606b; font-size: 13px; line-height: 1.4; }
.business-partner-features { margin-top: 20px; padding: 22px; border: 1px solid #d8dee3; border-radius: 15px; background: white; }
.business-partner-features h2 { margin-top: 0; }
.business-partner-features-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; color: #52606b; font-size: 13px; }
.business-partner-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 20px; border-radius: 15px; background: #fff4f4; }
.business-partner-cta p { margin: 4px 0 0; color: #66727d; font-size: 12px; }
@media(max-width:700px){.business-plan-grid{grid-template-columns:1fr}.business-partner-features-grid{grid-template-columns:1fr}.business-partner-hero{padding:22px}.business-partner-cta{align-items:stretch;flex-direction:column}}


.nearby-place-card-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.nearby-place-card h2 {
    margin:
        3px 0 0;

    font-size: 19px;
}


.nearby-place-category {
    color: #66727d;

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

    text-transform: uppercase;

    letter-spacing:
        0.035em;
}


.nearby-sponsored-badge {
    display: inline-flex;

    flex: 0 0 auto;

    padding:
        5px 8px;

    border-radius: 999px;

    background:
        #fff4d6;

    color:
        #805d13;

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

    text-transform: uppercase;

    letter-spacing:
        0.04em;
}


.nearby-place-distance {
    margin-top: 10px;

    color: #526579;

    font-size: 13px;
    font-weight: 700;
}


.nearby-place-description {
    margin:
        14px 0 0;

    color: #344451;

    line-height: 1.5;
}


.nearby-place-address {
    margin:
        10px 0 0;

    color: #66727d;

    font-size: 13px;

    line-height: 1.4;
}



/* ---------------------------------
   Place actions
   --------------------------------- */

.nearby-place-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 16px;

    padding-top: 14px;

    border-top:
        1px solid #edf0f2;
}


.nearby-place-actions a {
    display: inline-flex;

    min-height: 38px;

    padding:
        9px 12px;

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

    border:
        1px solid #ccd3d8;

    border-radius: 9px;

    background: white;

    color: #17212b;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
}


.nearby-place-actions a:hover {
    border-color:
        #c62828;

    color:
        #c62828;

    background:
        #fffafa;
}



/* ---------------------------------
   Empty nearby state
   --------------------------------- */

.nearby-empty {
    padding:
        34px 22px;

    border-radius: 14px;

    background: white;

    color: #66727d;

    text-align: center;
}


.nearby-empty strong {
    display: block;

    margin-top: 8px;

    color: #17212b;

    font-size: 17px;
}


.nearby-empty p {
    margin:
        8px auto 0;

    max-width: 420px;

    line-height: 1.5;
}


.nearby-empty-icon {
    font-size: 34px;
}



@media (max-width: 600px) {

    /* ---------------------------------
       Nearby page - mobile
       --------------------------------- */

    .nearby-page {
        padding-top: 22px;
        padding-bottom: 40px;
    }


    .nearby-page-heading {
        display: block;

        margin:
            0 0 18px;
    }


    .nearby-heading-icon {
        display: none;
    }


    .nearby-page-heading h1 {
        margin:
            0 0 6px;

        font-size: 25px;
        line-height: 1.15;
    }


    .nearby-page-heading h1::before {
        content: "📍";

        display: inline-block;

        margin-right: 7px;

        font-size: 18px;

        vertical-align: 2px;
    }


    .nearby-page-heading p {
        margin: 0;

        font-size: 14px;
        line-height: 1.45;
    }


    /* ---------------------------------
       Horizontal category selector
       --------------------------------- */

    .nearby-category-filter {
        gap: 7px;

        margin:
            0 -8px 20px;

        padding:
            2px 8px 4px;

        overflow-x: auto;

        scrollbar-width: none;

        -ms-overflow-style: none;
    }


    .nearby-category-filter::-webkit-scrollbar {
        display: none;
    }


    .nearby-category-chip {
        min-height: 34px;

        padding:
            7px 11px;

        font-size: 12px;
    }


    /* ---------------------------------
       Place cards
       --------------------------------- */

    .nearby-place-card {
        padding: 15px;

        border-radius: 12px;
    }


    .nearby-place-card-header {
        gap: 8px;
    }


    .nearby-place-card h2 {
        font-size: 18px;
    }


    .nearby-place-actions {
        display: flex;
        gap: 8px;
    }


    .nearby-place-actions a {
        flex: 1 1 0;
        width: auto;
        min-width: 0;

        padding-left: 7px;
        padding-right: 7px;

        white-space: nowrap;
    }


    .nearby-place-actions a {
        width: 100%;
    }


    /* ---------------------------------
       Empty state
       --------------------------------- */

    .nearby-empty {
        padding:
            24px 18px;

        border-radius: 12px;
    }


    .nearby-empty-icon {
        font-size: 27px;
    }


    .nearby-empty strong {
        margin-top: 5px;

        font-size: 15px;
    }


    .nearby-empty p {
        margin-top: 6px;

        font-size: 14px;
        line-height: 1.4;
    }


    /* ---------------------------------
       Beach page nearby button
       --------------------------------- */

    .nearby-button {
        min-height: 54px;

        padding:
            13px 14px;
    }

}


.nearby-osm-import-form {
    margin-top: 28px;
}


.nearby-osm-import-button {
    width: 100%;

    padding: 12px 14px;

    border:
        1px dashed #9aa6af;

    border-radius: 10px;

    background: transparent;

    color: #66727d;

    font: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


.nearby-osm-import-button:hover {
    border-color: #c62828;

    color: #c62828;

    background: white;
}


.nearby-data-attribution {
    margin-top: 24px;

    color: #78838d;

    font-size: 11px;

    text-align: center;
}


.nearby-data-attribution a {
    color: inherit;
}


.nearby-osm-import-button:disabled {
    cursor: wait;
    opacity: 0.75;
}


.nearby-osm-import-loading[hidden] {
    display: none;
}


.nearby-osm-import-loading {
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.nearby-osm-spinner {
    width: 15px;
    height: 15px;

    border:
        2px solid
        currentColor;

    border-right-color:
        transparent;

    border-radius: 50%;

    animation:
        nearby-osm-spin
        0.7s
        linear
        infinite;
}


@keyframes nearby-osm-spin {

    to {
        transform:
            rotate(360deg);
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {

    .nearby-osm-spinner {
        animation: none;
    }
}

/* Final compact layout for administrator controls in small headers. */
@media (max-width: 600px) {
    .small-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px 12px;
        padding: 14px 18px;
    }
    .small-header > .header-controls { display: contents; }
    .small-header .language-switcher {
        position: static;
        grid-column: 2;
        grid-row: 1;
        margin: -2px 0 0;
    }
    .small-header .account-menu.account-menu-admin {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin: 0;
        gap: 9px 10px;
        align-items: center;
    }
    .small-header .account-menu-admin > .account-profile-menu {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 1;
        width: auto;
        max-width: 150px;
        margin: 0;
        text-align: left;
        transform: translateY(-17px);
    }
    .small-header .account-menu-admin > .admin-header-actions {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        grid-column: 2;
        width: auto;
        margin: 0;
        justify-self: end;
    }
    .small-header .account-menu-admin > .admin-management-actions {
        grid-column: 1 / -1;
        width: 100%;
    }
    .small-header .account-menu .admin-management-link {
        min-height: 40px;
        padding: 8px 7px;
    }
    .small-header .account-menu.account-menu-verified,
    .small-header .account-menu.account-menu-standard {
        position: static;
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin: 0;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .small-header .account-menu.account-menu-verified > .account-profile-menu,
    .small-header .account-menu.account-menu-standard > .account-profile-menu {
        position: relative;
        top: auto;
        left: auto;
        max-width: 190px;
        margin: 0;
        transform: none;
    }
    .small-header .account-menu.account-menu-verified > .lifeguard-verified-link,
    .small-header .account-menu.account-menu-standard > a[href="/lifeguard-verification"] {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        margin: 0;
        padding: 0;
        align-self: center;
        transform: none;
    }
}
/* Admin review queues */
.admin-review-queue {
    box-sizing: border-box;
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.admin-review-queue-heading h1 {
    margin: 0 0 6px;
}

.admin-review-queue-heading p {
    margin: 0 0 22px;
    color: #5e6b7a;
}

.admin-review-tile-list {
    display: grid;
    gap: 12px;
}

.admin-review-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 14px 16px;
    color: #14202e;
    text-decoration: none;
    background: #fff;
    border: 1px solid #dfe4e9;
    border-radius: 18px;
    box-shadow: 0 5px 16px rgba(20, 32, 46, .06);
}

.admin-review-tile:hover,
.admin-review-tile:focus-visible {
    border-color: #cf272b;
    transform: translateY(-1px);
}

.admin-review-tile-image {
    width: 72px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
}

.admin-review-tile-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 23px;
    background: #fff2f3;
    border-radius: 14px;
}

.admin-review-tile-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-review-tile-copy strong {
    font-size: 1.05rem;
}

.admin-review-tile-copy span,
.admin-review-tile-copy small {
    overflow-wrap: anywhere;
    color: #647181;
}

.admin-review-tile-chevron {
    color: #a2a9b2;
    font-size: 2rem;
    line-height: 1;
}

.admin-review-empty {
    margin-top: 20px;
}

@media (max-width: 560px) {
    .admin-review-queue {
        padding: 26px 12px 48px;
    }

    .admin-review-tile {
        min-height: 86px;
        padding: 12px;
        border-radius: 16px;
    }

    .admin-review-tile-image {
        width: 62px;
        height: 58px;
    }
}