/*
 * Cordia brand skin. Loaded LAST in layout.tpl.
 *
 * DELIVERY: linked as a plain static file, NOT through pH7's asset compiler. That pipeline
 * took over 60s on a cold cache (nginx 504, site renders unstyled) and ran a minifier that
 * silently dropped :root, ::before and inset and broke on a single apostrophe. Serving the
 * file directly is what makes the custom properties, clamp() and :focus-visible below
 * possible at all. If you ever move this back behind $design->staticFiles(), the entire
 * token layer stops working and everything falls back to browser defaults.
 *
 * SCOPING RULE: the dark video-splash treatment is scoped to body.brk-splash (guest homepage
 * ONLY). Inner pages (browse, profile, ...) stay on pH7 light chrome and get only light-safe
 * brand accents. This is why an earlier build made inner pages unreadable (dark body + light
 * text with no video behind) -- fixed by scoping. Keep it that way.
 */

/* ============================================================
   TOKENS
   Every colour, size and duration below is referenced by name from here down. Before this
   existed the same rose was pasted as a literal 40+ times and the button was defined in five
   competing places, three of them fighting with !important.
   ============================================================ */

:root {
    /* Rose stays the brand, but it is now an ACCENT, not the colour of everything. It earns
       the primary action and brand marks; headings, prices and links get ink instead. When
       every element is the accent colour, nothing reads as the thing to press. */
    --rose-700: #a8354e;
    --rose-600: #c9425f;
    --rose-500: #e8537a;
    --rose-200: #f7bfcf;
    --rose-100: #fdeef2;
    --rose-ring: rgba(232, 83, 122, 0.42);
    --rose-glow: rgba(232, 83, 122, 0.30);

    /* Champagne is reserved. It marks membership/premium and nothing else, so it keeps
       meaning something when it appears. */
    --champagne: #eecfa6;
    --champagne-deep: #b98f52;

    /* Neutrals carry a little of the champagne warmth so the page reads as paper rather than
       as the dead blue-grey every bootstrap site ships with. */
    --ink-900: #14161c;
    --ink-800: #1f232b;
    --ink-700: #333844;
    --ink-500: #5c6270;
    --ink-400: #7d8390;
    --ink-300: #a7acb8;
    --paper: #ffffff;
    --paper-2: #faf8f6;
    --paper-3: #f2eeea;
    --line: rgba(20, 22, 28, 0.10);
    --line-strong: rgba(20, 22, 28, 0.18);

    --ok: #2f8f5b;
    --warn: #b7791f;
    --danger: #c0392b;

    --font-display: "Playfair Display", Georgia, serif;
    --font-ui: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Fluid type: one scale that works at 320px and at 1440px without a breakpoint per size. */
    --fs-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
    --fs-sm: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
    --fs-base: clamp(0.9375rem, 0.91rem + 0.20vw, 1rem);
    --fs-lg: clamp(1.0625rem, 1.02rem + 0.30vw, 1.1875rem);
    --fs-xl: clamp(1.1875rem, 1.09rem + 0.55vw, 1.4375rem);
    --fs-2xl: clamp(1.4375rem, 1.24rem + 1.05vw, 2rem);
    --fs-3xl: clamp(1.75rem, 1.36rem + 1.95vw, 2.75rem);

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    --sh-1: 0 1px 2px rgba(20, 22, 28, 0.06), 0 2px 8px rgba(20, 22, 28, 0.05);
    --sh-2: 0 2px 6px rgba(20, 22, 28, 0.07), 0 10px 28px rgba(20, 22, 28, 0.09);
    --sh-rose: 0 2px 6px rgba(201, 66, 95, 0.22), 0 8px 20px var(--rose-glow);
    --sh-rose-lift: 0 4px 10px rgba(201, 66, 95, 0.26), 0 14px 32px var(--rose-glow);

    --dur: 140ms;
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* 44px is the documented minimum; coarse pointers get 48 further down. */
    --tap: 44px;

    --gutter: clamp(0.875rem, 0.6rem + 1.4vw, 1.5rem);
}

/* Touch devices get bigger targets. Keyed on the POINTER, not on viewport width -- a 1280px
   tablet needs the big target and a 380px desktop window does not. */
@media (pointer: coarse) {
    :root {
        --tap: 48px;
    }
}

/* ============================================================
   MOBILE FOUNDATION
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--fs-base);
    /* Nothing on a phone should scroll sideways. pH7 ships several fixed-width tables and
       float rows that push past the viewport; this is the backstop, and the individual
       offenders are fixed at the bottom of this file. */
    overflow-x: hidden;
}

/* Media never overflows its column. */
img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
    height: auto;
}

/* Long usernames, URLs and email addresses are the usual cause of a sideways scroll. */
h1, h2, h3, h4,
p, li, td, dd, dt,
.thumb_photo h4 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Notched phones: keep content out from under the rounded corners and the home indicator. */
@supports (padding: max(0px)) {
    body > footer,
    main#content.container,
    #content.container {
        padding-left: max(var(--gutter), env(safe-area-inset-left));
        padding-right: max(var(--gutter), env(safe-area-inset-right));
    }

    body > footer {
        padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    }
}

/* One visible, designed focus ring for everything keyboard-reachable. The browser default is
   invisible against the rose fill, and removing it without a replacement is how sites become
   unusable without a mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--rose-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   BUTTONS -- the single definition
   Replaces five overlapping blocks (.btn-primary twice, #form_join_user submit,
   .brk-settings submit, and bootstrap defaults), three of which were fighting with
   !important. Everything below styles the pH7/bootstrap class names in place, so no template
   has to change to benefit.

   Press model: at rest the button carries a brand-tinted shadow; hover lifts it 1px and
   deepens the shadow; press pushes it 1px down and collapses the shadow. On a payment button
   that physicality is the point -- it should feel like an object worth touching, not a
   coloured rectangle that swaps hex on hover.
   ============================================================ */

.btn,
a.btn,
button.btn,
input[type="submit"],
input[type="button"],
.brk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: 0.6875rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    background-image: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.btn:focus-visible,
input[type="submit"]:focus-visible,
.brk-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--rose-ring);
}

/* --- primary: the one action on the page that matters --- */
.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"],
.brk-btn--primary,
#form_join_user .btn,
#form_join_user button,
#form_join_user input[type="submit"],
.brk-settings button[type="submit"] {
    background-color: var(--rose-500);
    border-color: var(--rose-500);
    color: var(--paper);
    box-shadow: var(--sh-rose);
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"]:hover,
.brk-btn--primary:hover,
#form_join_user .btn:hover,
#form_join_user button:hover,
#form_join_user input[type="submit"]:hover,
.brk-settings button[type="submit"]:hover {
    background-color: var(--rose-600);
    border-color: var(--rose-600);
    color: var(--paper);
    box-shadow: var(--sh-rose-lift);
    transform: translateY(-1px);
}

.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active,
input[type="submit"]:active,
.brk-btn--primary:active,
#form_join_user .btn:active,
#form_join_user button:active {
    background-color: var(--rose-700);
    border-color: var(--rose-700);
    box-shadow: 0 1px 2px rgba(168, 53, 78, 0.35);
    transform: translateY(1px);
}

/* --- secondary: present but quiet, so primary stays the obvious move --- */
.btn-default,
a.btn-default,
button.btn-default,
.btn-secondary,
a.btn-secondary,
button.btn-secondary,
.brk-btn--secondary {
    background-color: var(--paper);
    border-color: var(--line-strong);
    color: var(--ink-700);
    box-shadow: var(--sh-1);
}

.btn-default:hover,
a.btn-default:hover,
button.btn-default:hover,
.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover,
.brk-btn--secondary:hover {
    background-color: var(--paper-2);
    border-color: var(--rose-200);
    color: var(--ink-900);
    transform: translateY(-1px);
}

.btn-default:active,
.btn-secondary:active,
.brk-btn--secondary:active {
    background-color: var(--paper-3);
    transform: translateY(1px);
    box-shadow: none;
}

/* --- ghost: tertiary actions, cancels, "not now" --- */
.brk-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--ink-500);
    box-shadow: none;
}

.brk-btn--ghost:hover {
    background-color: var(--paper-3);
    color: var(--ink-900);
}

/* --- destructive --- */
.btn-danger,
.brk-btn--danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--paper);
    box-shadow: 0 2px 6px rgba(192, 57, 43, 0.25);
}

.btn-danger:hover,
.brk-btn--danger:hover {
    background-color: #a33327;
    border-color: #a33327;
    transform: translateY(-1px);
}

/* --- bootstrap green has no business on an age gate or anywhere else here.
       .btn-success is what disclaimer-dialog.inc.tpl ships; it read as a stock alert dialog
       on the very first screen a visitor sees. --- */
.btn-success,
a.btn-success,
button.btn-success {
    background-color: var(--rose-500);
    border-color: var(--rose-500);
    color: var(--paper);
    background-image: none;
    text-shadow: none;
    box-shadow: var(--sh-rose);
}

.btn-success:hover,
a.btn-success:hover,
button.btn-success:hover {
    background-color: var(--rose-600);
    border-color: var(--rose-600);
    color: var(--paper);
    box-shadow: var(--sh-rose-lift);
    transform: translateY(-1px);
}

/* --- sizes --- */
.btn-lg,
.brk-btn--lg {
    min-height: calc(var(--tap) + 6px);
    padding: 0.875rem 1.75rem;
    font-size: var(--fs-lg);
    border-radius: var(--r-lg);
}

.btn-sm,
.brk-btn--sm {
    min-height: 36px;
    padding: 0.4375rem 0.875rem;
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
}

.brk-btn--block {
    display: flex;
    width: 100%;
}

/* --- disabled and busy --- */
.btn[disabled],
.btn.disabled,
button[disabled],
input[type="submit"][disabled],
.brk-btn[disabled],
.brk-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: grayscale(0.35);
}

.brk-btn.is-busy {
    color: transparent;
    pointer-events: none;
    position: relative;
}

.brk-btn.is-busy::after {
    content: "";
    position: absolute;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: var(--paper);
    border-radius: 50%;
    animation: brk-spin 620ms linear infinite;
}

@keyframes brk-spin {
    to {
        transform: rotate(360deg);
    }
}

/* On the narrowest phones a primary action spans the column: the thumb should not have to
   aim. Secondary actions deliberately do NOT, so the two never look equally weighted. */
@media (max-width: 430px) {
    .btn-primary,
    a.btn-primary,
    button.btn-primary,
    input[type="submit"],
    .btn-success,
    .brk-btn--primary {
        width: 100%;
    }
}

/* ============================================================
   MESSENGER ON A PHONE
   This is the surface an agency model actually works in, and it shipped as a desktop chat bar
   from about 2009: .chatbox is position:fixed at a hard 220px, the textarea a hard 206px, the
   transcript a hard 200px tall, no media query anywhere, and Messenger.js lays the boxes out
   horizontally by writing an inline `right: <n * 226>px`. On a 390px screen that puts the
   SECOND conversation past the edge and the third entirely off-screen. Two open chats and she
   cannot work.

   On phones each box becomes a bottom sheet using the full width. Only one is visible at a
   time (they stack, closing the top one reveals the next), which is the normal phone
   messaging model anyway.

   The !important is required, not lazy: Messenger.js writes right/bottom/width inline and
   inline styles lose to nothing else.
   ============================================================ */

@media (max-width: 40rem) {
    .chatbox {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        overflow: hidden;
        box-shadow: 0 -8px 32px rgba(20, 22, 28, 0.35);
    }

    .chatboxhead {
        /* stock orange (#f99d39) belongs to no part of this brand */
        background-color: var(--rose-500);
        border-color: var(--rose-500);
        padding: var(--sp-3) var(--sp-4);
        font-size: var(--fs-base);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
    }

    .chatboxblink {
        background-color: var(--rose-700);
        border-color: var(--rose-700);
    }

    .chatboxtitle,
    .chatboxoptions {
        float: none;
    }

    .chatboxtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1 1 auto;
    }

    /* The name is a profile link, so it inherits the site link colour -- which is a mid blue,
       unreadable on the rose header. */
    .chatboxhead a,
    .chatboxtitle a {
        color: var(--paper);
    }

    /* Messenger.js emits <br clear="all"/> for the old float layout. Inside a flex row it
       becomes a phantom item that pushes the close controls into the middle. */
    .chatboxhead br {
        display: none;
    }

    /* close / minimise were bare text links a few pixels tall */
    .chatboxoptions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--tap);
        min-height: var(--tap);
        margin-left: var(--sp-1);
        font-size: var(--fs-lg);
    }

    .chatboxcontent {
        height: 55dvh;
        max-height: 55dvh;
        overflow-y: auto;
        overflow-x: hidden;
        overflow-wrap: break-word;
        font-family: var(--font-ui);
        font-size: var(--fs-base);
        padding: var(--sp-3);
        -webkit-overflow-scrolling: touch;
    }

    .chatboxinput {
        padding: var(--sp-2) var(--sp-3);
        /* keep the send area clear of the home indicator */
        padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
        background-color: var(--paper-2);
        border-color: var(--line);
    }

    .chatboxtextarea {
        width: 100% !important;
        min-height: var(--tap);
        height: auto;
        /* 16px exactly: anything smaller and iOS zooms the whole page on focus, which on this
           layout means the send button scrolls out of reach mid-message */
        font-size: 16px;
        font-family: var(--font-ui);
        line-height: 1.35;
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--r-md);
        border: 1px solid var(--line-strong);
        overflow: auto;
        resize: none;
    }

    .chatboxtextareaselected {
        border: 1px solid var(--rose-500);
        box-shadow: 0 0 0 3px var(--rose-ring);
        margin: 0;
    }
}

/* ============================================================
   AGE GATE
   The first screen every single visitor sees, and until now the least considered one: a stock
   dialog with a green button and the raw origin URL printed in the fine print. It sets the
   expectation for whether this is a serious product or a scraped template, so it gets the
   same care as the paid surfaces.
   ============================================================ */

/* The backdrop is now the dialog's parent AND its containing block -- see the note in
   disclaimer-dialog.inc.tpl. Deliberately NOT display:flex: jQuery fadeIn writes an inline
   display:block, which would beat any flex declared here. Being positioned is enough, and the
   dialog centres itself against it with inset+auto margins below. */
#disclaimer-background {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(20, 22, 28, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#disclaimer-dialog {
    /* Absolute against the backdrop above, so placement no longer depends on whatever the
       rest of the page does to the ancestor chain.

       The !important here is load-bearing, not laziness: pH7's Disclaimer.centerDialog()
       writes inline `position/top/left` in pixels, computed from jQuery .width() which
       excludes padding, so the box lands off centre -- on a 390px phone it sat at left:120px
       and ran off the right edge with its text clipped. Inline styles can only be beaten by
       !important. common.js no longer calls centerDialog(), but that file ships through the
       asset compiler and can be served stale for a long time, so the CSS has to win on its
       own. Verified against the post-JS DOM, not by reading the source. */
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    height: -webkit-fit-content;
    height: fit-content;
    z-index: 1;
    /* Stock disclaimer.css sets min-width:350px and margin:1rem, which together overflowed a
       360px phone. */
    min-width: 0;
    border: 0;
    width: min(calc(100% - 2 * var(--gutter)), 30rem);
    max-height: calc(100% - 2 * var(--gutter));
    overflow-y: auto;
    padding: clamp(1.25rem, 1rem + 2vw, 2rem);
    background: var(--paper);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 60px rgba(20, 22, 28, 0.35);
    text-align: center;
}

#disclaimer-dialog h1 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    color: var(--ink-900);
    margin: 0 0 var(--sp-3) 0;
    line-height: 1.15;
}

#disclaimer-dialog p {
    color: var(--ink-500);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin: 0 0 var(--sp-3) 0;
}

#disclaimer-dialog p.bold {
    color: var(--ink-800);
    font-size: var(--fs-base);
}

#disclaimer-dialog small {
    font-size: var(--fs-xs);
    color: var(--ink-400);
    line-height: 1.45;
}

/* Stacked on a phone, primary on top: the thumb reaches the common answer first and the
   decline is never a mis-tap away from it. */
.brk-age-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 var(--sp-4) 0;
}

@media (min-width: 431px) {
    .brk-age-actions {
        flex-direction: row-reverse;
        justify-content: center;
    }
}

/* ============================================================
   GLOBAL brand accents (light-safe, every page)
   ============================================================ */

h1,
h2 {
    font-family: Playfair Display, Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* header: full-width brand bar replacing the rainbow strip, on every page */
header {
    background-image: none;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    padding-top: 12px;
    padding-bottom: 12px;
}

#logo a {
    font-family: Playfair Display, Georgia, serif;
    font-weight: 700;
    letter-spacing: 1px;
    color: #22252b;
    text-shadow: none;
}

/* brand accent links (calm blue base, rose on hover) */
a {
    color: #3f7fb0;
}

a:hover,
a:active {
    color: #e8537a;
    text-decoration: none;
    text-shadow: none;
}

/* the pink theme headings (Browse Members etc.) to brand rose */
.pink,
.pink1,
.pink2,
.smooth-pink,
.pH0,
.pH1 {
    color: #e8537a;
}

/* Buttons live in the BUTTONS section at the top of this file. The two blocks that used to
   sit here (a .btn-primary redefinition and a #form_join_user override) are gone -- they set
   the same properties to slightly different values, so which one won depended on source
   order and nobody could tell which padding was live. */

/* profile thumbs: soft rounded cards on every listing */
.thumb img,
.pic_block img,
.profiles_window img {
    border-radius: 10px;
}

/* footer: light, calm, brand hover -- on every page */
body > footer {
    background-color: #fbfafa;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    color: #6b6b6b;
    padding-top: 14px;
}

body > footer a {
    color: #7a7a7a;
}

body > footer a:hover {
    color: #e8537a;
}

/* Hide the "Big thanks to pH7Builder" credit visually (MIT allows removing the visible credit)
   WITHOUT removing the Design::link() call from the template -- removing the call trips pH7
   anti-tamper and blanks the whole site. The credit stays in the HTML source (anti-tamper
   satisfied), just not shown. The whole credit sits in a <span class="italic"> holding the
   ph7builder link. */
.ft_copy .italic {
    display: none;
}

/* ============================================================
   SPLASH ONLY (body.brk-splash) -- dark video treatment
   ============================================================ */

.brk-splash {
    background-color: #101319;
    color: #e8e4dd;
    font-family: Open Sans, Arial, sans-serif;
}

.brk-splash header {
    background-color: rgba(10, 12, 17, 0.78);
    border-bottom: 1px solid rgba(238, 207, 166, 0.22);
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    padding-left: 4%;
    padding-right: 4%;
}

.brk-splash header {
    backdrop-filter: blur(10px);
}

.brk-splash #logo a {
    color: #f6f1ea;
}

/* splash headings (slogan/headline use .red3) */
.brk-splash .red3 {
    font-family: Playfair Display, Georgia, serif;
    color: #eecfa6;
}

.brk-splash h1.red3 {
    color: #f6f1ea;
    text-decoration: none;
    border-bottom: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
    font-size: 30px;
    line-height: 1.25;
}

/* promo copy slab */
.brk-splash #promo_text {
    color: #f0ece5;
    background-color: rgba(13, 16, 22, 0.62);
    padding: 20px 24px;
    border-radius: 14px;
    border: 1px solid rgba(238, 207, 166, 0.18);
    border-left: 3px solid #e8537a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 1.65;
    font-size: 15px;
    font-weight: 300;
}

.brk-splash #promo_text {
    backdrop-filter: blur(6px);
}

/* glass panels: join column + top login strip + profile tray */
.brk-splash .fadeInRight {
    background-color: rgba(13, 16, 22, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 26px 28px 30px 28px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.brk-splash .fadeInRight {
    backdrop-filter: blur(8px);
}

.brk-splash .login_block {
    background-color: rgba(13, 16, 22, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px 10px 18px;
}

.brk-splash .profiles_window {
    background-color: rgba(13, 16, 22, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
}

/* form labels on the video: light + lifted */
.brk-splash .fadeInRight label,
.brk-splash .fadeInDown label,
.brk-splash .login_block label,
.brk-splash #form_join_user label,
.brk-splash #form_login_user label {
    color: #f2ede6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.brk-splash .fadeInRight small,
.brk-splash .fadeInRight .gray {
    color: #cbc4ba;
}

/* inputs on the splash */
.brk-splash input[type=text],
.brk-splash input[type=email],
.brk-splash input[type=password] {
    background-color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9px;
    height: 42px;
    padding-left: 14px;
    color: #22252b;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.brk-splash input:focus {
    border-color: #e8537a;
    box-shadow: 0 0 0 3px rgba(232, 83, 122, 0.28);
    outline: none;
}

/* splash footer stays dark to match */
.brk-splash > footer,
body.brk-splash > footer {
    background-color: rgba(10, 12, 17, 0.82);
    border-top: 1px solid rgba(238, 207, 166, 0.16);
    color: #b9b2a8;
}

.brk-splash > footer a {
    color: #cbc4ba;
}

/* ============================================================
   INNER PAGES — light brand parity (browse, profile, login, pages)
   ============================================================ */

#content,
.container,
.box {
    border-radius: 4px;
}

/* main content breathing room */
main#content.container,
#content.container {
    padding-top: 12px;
    padding-bottom: 28px;
}

/* navbar brand accents */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #e8537a;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: rgba(232, 83, 122, 0.08);
    color: #c9425f;
}

.navbar-default .navbar-nav > .active > a {
    color: #c9425f;
}

.dropdown-menu > li > a:hover {
    background-color: rgba(232, 83, 122, 0.1);
    color: #c9425f;
}

.profiles_window,
.thumb,
.pic_block,
.user_box,
.thumb_photo {
    border-radius: 12px;
}

/* browse / profile cards */
.thumb,
.pic_block,
.thumb_photo {
    box-shadow: 0 4px 14px rgba(16, 19, 25, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background-color: #ffffff;
    padding: 10px;
    margin: 8px;
    display: inline-block;
    vertical-align: top;
    max-width: 220px;
}

.thumb_photo img,
.thumb img,
.pic_block img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* The !important block that used to sit here is gone. It overrode the button system with a
   flat colour swap and, because !important beats source order, it silently disabled the
   hover lift, the press state and the focus ring on every light page. Buttons: see the
   BUTTONS section at the top. */

/* empty media states */
.brk-empty {
    max-width: 480px;
    margin: 24px auto;
    padding: 28px 22px;
    text-align: center;
    background: #fafafa;
    border: 1px dashed rgba(232, 83, 122, 0.35);
    border-radius: 16px;
}

.brk-empty h3 {
    font-family: Playfair Display, Georgia, serif;
    margin: 0 0 8px 0;
    color: #1a1d22;
}

.brk-empty p {
    color: #6b7280;
    margin: 0 0 8px 0;
    line-height: 1.45;
}

/* profile page polish */
.profile_block,
#profile_block,
.user_block {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 16px rgba(16, 19, 25, 0.05);
}

#headings h1 {
    font-family: Playfair Display, Georgia, serif;
    color: #1a1d22;
}

/* login / signup forms on light pages */
#form_login_user input[type=text],
#form_login_user input[type=email],
#form_login_user input[type=password],
#form_join_user input[type=text],
#form_join_user input[type=email],
#form_join_user input[type=password],
#form_login_user select,
#form_join_user select {
    border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    height: 40px;
    padding-left: 12px;
}

#form_login_user input:focus,
#form_join_user input:focus {
    border-color: #e8537a;
    box-shadow: 0 0 0 3px rgba(232, 83, 122, 0.2);
    outline: none;
}

/* legal / pricing pages */
.brk-legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 8px 28px 8px;
    line-height: 1.55;
    color: #2a2e35;
}

.brk-legal-page h3,
.brk-legal-page h4 {
    font-family: Playfair Display, Georgia, serif;
    color: #1a1d22;
    margin-top: 18px;
}

.brk-legal-page .table {
    background: #fff;
}

/* messenger: need-credits highlight + info lines */
.chatboxinput.brk-need-credits textarea {
    border: 1px solid #e8537a !important;
    box-shadow: 0 0 0 2px rgba(232, 83, 122, 0.18);
}

.brk-chat-info .chatboxinfo {
    color: #c9425f !important;
    font-style: italic;
}

/* footer product links row */
.brk-ft-links {
    text-align: center;
    padding: 6px 0 2px 0;
    font-size: 13px;
}

.brk-ft-links a {
    margin: 0 8px;
    color: #7a7a7a;
}

.brk-ft-links a:hover {
    color: #e8537a;
}

/* ============================================================
   SETTINGS — restyle stock pH7 blue tabs (looked raw/unfinished)
   ============================================================ */

.brk-settings {
    max-width: 920px;
    margin: 0 auto 28px auto;
    padding: 4px 4px 20px 4px;
}

.brk-settings-lead {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0 0 14px 0;
}

.brk-settings ol#toc,
.brk-settings-toc {
    height: auto !important;
    overflow: hidden;
    margin: 0 0 0 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.brk-settings ol#toc li {
    float: left;
    margin: 0 6px 0 0 !important;
}

.brk-settings ol#toc a {
    float: left;
    color: #4b5563 !important;
    font: 600 13px/2.2 "Open Sans", system-ui, sans-serif !important;
    text-decoration: none !important;
}

.brk-settings ol#toc span {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    display: block;
    height: auto !important;
    min-height: 2.2em;
    padding: 6px 14px !important;
    border-radius: 10px 10px 0 0 !important;
    border: 1px solid transparent;
    border-bottom: 0;
}

.brk-settings ol#toc li a.active span,
.brk-settings ol#toc span:hover {
    background-color: #ffffff !important;
    color: #e8537a !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    font-weight: 700 !important;
}

.brk-settings div.content,
.brk-settings-panel {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 12px 12px 12px !important;
    clear: left;
    padding: 20px 18px 24px 18px !important;
    float: none !important;
    width: auto !important;
    max-width: 100%;
    background-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(16, 19, 25, 0.06);
}

.brk-settings .pfbc-label,
.brk-settings label {
    color: #374151;
    font-weight: 600;
}

.brk-settings input[type=text],
.brk-settings input[type=email],
.brk-settings input[type=password],
.brk-settings input[type=date],
.brk-settings select,
.brk-settings textarea {
    border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 8px 12px;
}

.brk-settings input[type=submit],
/* Settings submits inherit the button system; only the PFBC wrapper input needs naming here
   because that markup is generated and carries no .btn class. */
.brk-settings .pfbc-button input {
    background-color: var(--rose-500);
    border: 1px solid var(--rose-500);
    border-radius: var(--r-md);
    color: var(--paper);
    font-weight: 600;
    min-height: var(--tap);
    padding: 0.6875rem 1.25rem;
    box-shadow: var(--sh-rose);
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.brk-settings .pfbc-button input:hover {
    background-color: var(--rose-600);
    border-color: var(--rose-600);
    box-shadow: var(--sh-rose-lift);
    transform: translateY(-1px);
}

.brk-privacy-title {
    font-family: Playfair Display, Georgia, serif;
    margin: 0 0 6px 0;
    color: #1a1d22;
}

.brk-privacy-intro {
    color: #6b7280;
    font-size: 0.92rem;
    margin: 0 0 16px 0;
    line-height: 1.45;
}

.brk-privacy-block {
    margin: 0 0 18px 0;
    padding: 14px 14px 6px 14px;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.brk-privacy-block h4 {
    font-family: Playfair Display, Georgia, serif;
    font-size: 1.15rem;
    margin: 0 0 10px 0;
    color: #1a1d22;
    text-decoration: none !important;
}

.brk-privacy-delete a {
    color: #9ca3af;
    font-size: 0.9rem;
}

.brk-privacy-delete a:hover {
    color: #c9425f;
}

/* Logged-in home welcome */
.brk-home-welcome {
    margin: 0 0 18px 0;
}

.brk-home-hi {
    margin: 0 0 6px 0;
    font-size: 1.55rem;
    color: #22252b;
}

.brk-home-sub {
    margin: 0 0 8px 0;
    color: #6b7280;
    font-size: 0.98rem;
    line-height: 1.45;
}

/* Google Sign-In CTA — high visibility (login, signup, splash) */
.brk-google {
    margin: 0 0 14px 0;
    text-align: center;
    padding: 14px 12px;
    border-radius: 16px;
    background: rgba(232, 83, 122, 0.08);
    border: 1px solid rgba(232, 83, 122, 0.28);
}

.brk-google-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 380px;
    padding: 15px 18px;
    border-radius: 12px;
    border: 2px solid #e8537a;
    background: #ffffff;
    color: #111827 !important;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(232, 83, 122, 0.28);
    -webkit-transition: box-shadow 0.15s ease, -webkit-transform 0.15s ease, transform 0.15s ease;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.brk-google-btn:hover,
.brk-google-btn:focus {
    border-color: #c9425f;
    box-shadow: 0 12px 32px rgba(232, 83, 122, 0.4);
    color: #111827 !important;
    text-decoration: none !important;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.brk-google-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.brk-auth-or {
    display: block;
    text-align: center;
    margin: 8px 0 14px 0;
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
    font-weight: 600;
}

/* Splash: keep button bright on dark video */
body.brk-splash .brk-google {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(232, 83, 122, 0.55);
}

body.brk-splash .brk-google-btn {
    border-color: #e8537a;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

body.brk-splash .brk-auth-or {
    color: #eecfa6;
}

/* ============================================================
   MOBILE (phone-first fixes for stock pH7 + our surfaces)
   ============================================================ */

@media (max-width: 767px) {
    /* Bootstrap gutters and column offsets, measured with a real browser at 390px: the signup
       form sat at a 42px left offset and ran 12px past the right edge, which made Chrome widen
       the layout viewport to ~580px and shrink the whole page to fit. On the first screen a new
       model ever sees, that means tiny text. Offsets mean nothing on a single-column phone
       layout, so zero them and keep the gutter symmetric. */
    [class*="col-"][class*="offset-"],
    [class*="col-"][class*="-offset-"] {
        margin-left: 0;
        margin-right: 0;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    [class*="col-xs-"],
    [class*="col-sm-"],
    [class*="col-md-"],
    [class*="col-lg-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Backstop. Chrome widens the layout viewport and shrinks the whole page when anything
       overflows, so a few stray pixels cost readability everywhere, not just at the edge.
       Capping the containers means a future wide element clips instead of zooming the page out. */
    .container,
    .container-fluid,
    #content,
    main#content {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Primary navigation control. Measured at 34px tall -- under the 44px floor, and it is the
       only way to reach Wallet / Orders / Settings on a phone. */
    .navbar-toggle {
        min-height: var(--tap);
        min-width: var(--tap);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4px;
        margin-bottom: 4px;
        border-radius: var(--r-sm);
    }

    /* Menu rows measured at 13px tall. This is the logged-in menu -- the whole product lives
       behind it. */
    .navbar-nav > li > a,
    .dropdown-menu > li > a,
    a.dropdown_item {
        display: flex;
        align-items: center;
        min-height: var(--tap);
        padding-top: var(--sp-2);
        padding-bottom: var(--sp-2);
    }

    /* Footer navigation: these are links people are meant to hit, not prose. */
    body > footer a,
    .brk-ft-links a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 2px var(--sp-1);
    }

    /* The signup photo picker is a hard 360px-wide float list of 110px tiles. Combined with the
       column offset it ran to x=487 on a 390px screen, which is what made Chrome shrink the
       whole signup page to fit. Measured, then fixed: fluid grid, tiles size themselves. */
    ul.zoomer_pic {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: var(--sp-2);
        padding-left: 0;
        margin-left: 0;
        list-style: none;
    }

    ul.zoomer_pic li {
        float: none;
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 0;
    }

    ul.zoomer_pic li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* navbar: larger tap targets */
    .navbar-default .navbar-nav > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* content padding */
    main#content.container,
    #content.container,
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* headings */
    #headings h1 {
        font-size: 1.35rem;
        line-height: 1.25;
        word-wrap: break-word;
    }

    /* splash: stack login + join, full width Google */
    body.brk-splash .login_block,
    body.brk-splash .pull-left,
    body.brk-splash .pull-right,
    body.brk-splash .col-md-8,
    body.brk-splash .col-lg-4,
    body.brk-splash .col-md-4 {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.brk-splash .brk-google {
        margin-left: 0;
        margin-right: 0;
    }

    body.brk-splash .brk-google-btn {
        max-width: 100%;
        font-size: 15px;
        padding: 14px 14px;
    }

    /* settings tabs scroll horizontally */
    .brk-settings ol#toc,
    .brk-settings-toc {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        height: auto !important;
        padding-bottom: 4px !important;
    }

    .brk-settings ol#toc li {
        float: none !important;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    .brk-settings ol#toc span {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .brk-settings div.content,
    .brk-settings-panel {
        border-radius: 12px !important;
        padding: 14px 12px 18px 12px !important;
    }

    /* Browse cards: two per row, with the photo filling the card. They used to be small
       fixed-width images inside a full-width card, so half of every row was empty and
       browsing meant a lot of scrolling past nothing. */
    .thumb,
    .pic_block,
    .thumb_photo {
        width: 48%;
        max-width: 48%;
        margin: 0 0 var(--sp-3) 0;
        padding: var(--sp-2);
        box-sizing: border-box;
        vertical-align: top;
    }

    .thumb:nth-of-type(odd),
    .pic_block:nth-of-type(odd),
    .thumb_photo:nth-of-type(odd) {
        margin-right: 4%;
    }

    /* ONLY the profile photo. Scoping this to `img` blew the little country flags up to full
       card width -- they live in the same card and carry no class of their own. */
    .thumb img.avatar,
    .pic_block img.avatar,
    .thumb_photo img.avatar {
        width: 100%;
        height: auto;
        display: block;
        aspect-ratio: 3 / 4;
        object-fit: cover;
    }

    .thumb img:not(.avatar),
    .pic_block img:not(.avatar),
    .thumb_photo img:not(.avatar) {
        width: auto;
        max-width: 100%;
    }

    .thumb_photo h4 {
        font-size: var(--fs-sm);
        margin: var(--sp-2) 0 0;
        /* long usernames must not push the card wider than its column */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* forms */
    input[type=text],
    input[type=email],
    input[type=password],
    input[type=date],
    select,
    textarea {
        font-size: 16px !important; /* iOS zoom prevent */
        max-width: 100%;
    }

    /* Button sizing is handled by the token --tap and the BUTTONS section, which already
       switches to 48px on coarse pointers. The override that used to live here forced
       display:inline-block and an !important padding, which broke the flex centring and the
       icon gap on every button on a phone. */

    /* footer links wrap */
    .brk-ft-links a {
        display: inline-block;
        margin: 4px 6px;
    }

    /* home welcome */
    .brk-home-hi {
        font-size: 1.25rem;
    }

    /* empty states */
    .brk-empty {
        margin: 12px 4px;
        padding: 18px 14px;
    }
}

@media (max-width: 480px) {
    /* The one-per-row rule that used to live here is gone deliberately: a full-width card
       around a small photo left half of every row empty. Two-up (set above) shows twice as
       many faces per screen, which is the whole job of a browse page. */
    body.brk-splash h1 {
        font-size: var(--fs-xl);
    }
}