html { outline: 8px solid hotpink !important; }

/* ========================================================= */
/* CherryCut Public – Theme CSS (SSR)                         */
/* ========================================================= */

/* ---------- CSS Variables (mapped to Mud theme) ----------- */

:root {
    --cc-primary: #540B0E;
    --cc-secondary: #D4A373;
    --cc-success: #D4A373;
    --cc-error: #c1272d;

    --cc-bg: #FFFDF2;
    --cc-surface: #FEFAE0;
    --cc-appbar-bg: #FEFAE0;
    --cc-drawer-bg: #FAEDCD;

    --cc-text: #330204;
    --cc-text-muted: rgba(51, 2, 4, 0.7);

    --cc-success-darken: #BC8A5F; /* Approx darken of #D4A373 */
    --cc-secondary-darken: #BC8A5F; /* Secondary is same as Success in AppTheme */
    --cc-tertiary: #A2AC81; /* Info color from AppTheme used as tertiary look-alike */
    --cc-white: #FEFAE0;

    --cc-radius: 12px;
    --cc-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* ---------------- Global resets ---------------- */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.hero-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--cc-radius);
    font-weight: 800;
    text-align: center;
    background: var(--cc-success-darken) !important;
    color: var(--cc-white) !important;
    transition: opacity 0.2s;
}

.hero-btn.secondary {
    background: var(--cc-secondary-darken) !important;
}

.hero-btn:hover {
    opacity: 0.9;
}

/* ---------------- AppBar ---------------- */

.public-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: var(--cc-appbar-bg);
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* left: logo + brand */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 700;          /* less bold */
    font-size: 1.25rem;
    color: var(--cc-primary);
    flex: 0 0 auto;
}

.brand img {
    height: 50px;
}

/* middle: language selector centered on the page */
.header-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* right: login/register */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Make buttons look like WASM: thinner border + not so bold */
.public-header .btn,
.public-header .cc-btn,
.public-header .lang-btn {
    border-radius: var(--cc-radius);
    font-weight: 600;          /* was 800 */
    border-width: 1px;         /* was 2px */
    box-shadow: none;
}

/* Tighten button padding to match WASM look */
.public-header .btn {
    padding: 10px 18px;
}

/* Outline buttons (Login + language) */
.public-header .btn-outline,
.public-header .btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--cc-primary) !important;  /* thinner */
    color: var(--cc-primary) !important;
    font-weight: 600;                                  /* less bold */
}

/* Register button */
.public-header .btn-success {
    background-color: var(--cc-secondary) !important;
    border-color: var(--cc-secondary) !important;
    color: var(--cc-primary) !important;
    font-weight: 600;                                  /* less bold */
}

/* Language selector button (overrides your current lang-btn 2px + 800 weight) */
.lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid var(--cc-primary);
    color: var(--cc-primary);
    border-radius: var(--cc-radius);
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 600;
}

/* page content offset */
.public-content {
    margin-top: 90px; /* push content below fixed header */
}


/* ---------------- Buttons ---------------- */

.cc-btn {
    border-radius: var(--cc-radius);
    padding: 10px 18px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
}

.cc-btn-outline {
    background: transparent;
    border: 2px solid var(--cc-primary);
    color: var(--cc-primary);
}

.cc-btn-filled {
    background: var(--cc-secondary);
    color: var(--cc-primary);
}

/* ---------------- Page layout ---------------- */

.cc-page {
    padding-top: 120px; /* push below AppBar */
}

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.flex-column { flex-direction: column; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mr-3 { margin-right: 12px; }
.mt-3 { margin-top: 12px; }
.my-5 { margin-top: 20px; margin-bottom: 20px; }

/* ========================================================= */
/* Language selector (SSR, cookie-based)                      */
/* ========================================================= */

.lang {
    position: relative;
    display: flex;
    align-items: center;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 2px solid var(--cc-primary);
    color: var(--cc-primary);
    border-radius: var(--cc-radius);
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 800;
}

.lang-btn .fi {
    font-size: 18px;
}

.lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--cc-surface);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    min-width: 220px;
    padding: 8px;
    z-index: 2000;
}

.lang-item {
    margin: 0;
}

.lang-item button {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    color: var(--cc-text);
    text-align: left;
    font-weight: 700;
}

.lang-item button:hover {
    background: rgba(0,0,0,.06);
}

/* ---------------- Utilities ---------------- */

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 32px;
}

/* FORCE bootstrap buttons to use CherryCut palette */
.btn-success {
    background-color: var(--cc-secondary) !important;
    border-color: var(--cc-secondary) !important;
    color: var(--cc-primary) !important;
    font-weight: 600;
}

.btn-tertiary {
    background-color: var(--cc-tertiary) !important;
    border-color: var(--cc-tertiary) !important;
    color: var(--cc-white) !important;
    font-weight: 600;
}

.btn-error {
    background-color: var(--cc-error) !important;
    border-color: var(--cc-error) !important;
    color: var(--cc-white) !important;
    font-weight: 600;
}

.btn-outline,
.btn-outline-primary {
    background: transparent !important;
    border: 2px solid var(--cc-primary) !important;
    color: var(--cc-primary) !important;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}