body {
    font-family: Georgia, serif;
    background-color: #f5f3ef;
    color: #222;
    text-align: center;
    margin: 0;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


header {
    padding: 50px 20px 20px;
}

header h1,
.spin-button {
    font-family: Arial, sans-serif;
}

header h1 {
    font-size: 40px;
    letter-spacing: 6px;
    margin: 0;
    font-weight: 600;
}


header p {
    color: #777;
    font-size: 16px;
    margin-top: 12px;
}

main {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 20px;
}


.cat-card {
    width: 500px;
    max-width: 90%;
}


.cat-image-container {
    width: 100%;
    aspect-ratio: 1 / 1;

    background-color: #e9e6e0;

    border-radius: 14px;
    overflow: hidden;

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

.cat-image-container img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    opacity: 1;
    transition: opacity 0.15s ease;
}


.cat-info {
    padding: 20px;
    opacity: 1;
    transition: opacity 0.15s ease;
}


.cat-info h2 {
    font-size: 32px;
    margin: 5px 0 8px;
    font-weight: 500;
}


.location {
    color: #777;
    margin: 5px 0 20px;
}


.description {
    font-size: 17px;
    line-height: 1.5;
    max-width: 450px;
    margin: auto;
}


.spin-button {
    margin-top: 10px;

    background-color: #222;
    color: white;

    border: none;
    border-radius: 30px;

    padding: 16px 40px;

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

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: transform 0.2s, opacity 0.2s;
}


.spin-button:not(:disabled):hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.spin-button:disabled {
    cursor: default;
    opacity: 0.6;
}

footer {
    padding: 30px;
    color: #777;
}


footer p {
    margin-bottom: 5px;
}


footer a {
    color: #222;
    font-weight: bold;
}

/* ADD YOUR CAT */

.submission-form {
    width: 600px;
    max-width: 90%;
    text-align: left;
}

.submission-form > p {
    text-align: center;
    margin: 5px 0;
    color: #777;
}

#cat-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 30px;
}

#cat-form label {
    font-size: 15px;
    font-weight: bold;
    margin-top: 12px;
}

#cat-form input,
#cat-form textarea {
    font-family: Georgia, serif;
    font-size: 16px;

    padding: 12px 14px;

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

    background-color: white;
    color: #222;

    box-sizing: border-box;
}

#cat-form input:focus,
#cat-form textarea:focus {
    outline: none;
    border-color: #999;
}

#cat-form textarea {
    min-height: 120px;
    resize: vertical;
}

#description-counter {
    text-align: right;
    color: #999;
    font-size: 13px;
    margin: 0;
}

.confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: normal !important;
    line-height: 1.5;
}

.confirmation input {
    margin-top: 4px;
}

#cat-form button {
    margin-top: 25px;

    background-color: #222;
    color: white;

    border: none;
    border-radius: 30px;

    padding: 16px 30px;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: transform 0.2s, opacity 0.2s;
}

#cat-form button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
/* ========================================
CATSROULETTE — SITE LAYOUT
======================================== */

body {
margin: 0;
background-color: #f5f3ef;
color: #222;
}

/* SIDEBAR */

.sidebar {
position: fixed;
left: 0;
top: 0;

```
width: 240px;
height: 100vh;

box-sizing: border-box;

padding: 34px 28px;

background-color: #eeece7;

display: flex;
flex-direction: column;

z-index: 10;
```

}

.logo {
color: #222;
text-decoration: none;

```
font-family: Arial, sans-serif;
font-size: 21px;
font-weight: 600;

letter-spacing: 3px;

white-space: nowrap;
```

}

.sidebar nav {
display: flex;
flex-direction: column;

```
margin-top: 55px;

gap: 20px;
```

}

.sidebar nav a,
.sidebar-footer a {
color: #555;
text-decoration: none;

```
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 600;

letter-spacing: 1.4px;

transition: color 0.2s ease;
```

}

.sidebar nav a:hover,
.sidebar-footer a:hover {
color: #111;
}

.nav-separator {
width: 100%;
height: 1px;

```
background-color: #d8d4cd;

margin: 5px 0;
```

}

.sidebar-footer {
margin-top: auto;
}

/* MAIN CONTENT */

.page-content {
min-height: 100vh;

```
margin-left: 240px;

box-sizing: border-box;

padding: 55px 70px;

position: relative;

display: flex;
flex-direction: column;
```

}

/* LANGUAGE */

.language-selector {
position: absolute;

```
top: 28px;
right: 40px;

font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 600;

letter-spacing: 1px;

color: #666;

cursor: pointer;
```

}

/* CAT PAGE */

.cat-page {
width: min(1000px, 100%);

```
margin: auto;

display: grid;

grid-template-columns: minmax(400px, 560px) minmax(260px, 1fr);

align-items: center;

gap: 70px;
```

}

/* PHOTO FRAME */

.cat-frame {
width: 100%;

```
aspect-ratio: 1 / 1;

box-sizing: border-box;

padding: 16px;

background-color: #e8e5df;

border: 1px solid #d7d3cc;

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

border-radius: 10px;

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

}

.cat-image-container {
width: 100%;
height: 100%;

```
background-color: #f7f5f1;

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

overflow: hidden;

border-radius: 5px;
```

}

.cat-image-container img {
width: 100%;
height: 100%;

```
object-fit: contain;

display: block;
```

}

/* CAT INFORMATION */

.cat-page .cat-info {
padding: 0;

```
text-align: left;
```

}

.cat-page .cat-info h1 {
margin: 0 0 10px;

```
font-family: Georgia, serif;

font-size: 44px;
font-weight: 400;

line-height: 1.1;
```

}

.cat-page .nicknames {
margin: 0 0 25px;

```
color: #888;

font-size: 15px;

font-style: italic;
```

}

.cat-page .location {
margin: 0 0 10px;

```
color: #555;

font-size: 16px;
```

}

.cat-page .years {
margin: 0 0 30px;

```
color: #777;

font-size: 15px;
```

}

.cat-page .description {
margin: 0;

```
max-width: 390px;

color: #444;

font-size: 17px;

line-height: 1.65;
```

}

/* METADATA */

.cat-metadata {
display: flex;

```
gap: 25px;

margin-top: 45px;

color: #999;

font-family: Arial, sans-serif;

font-size: 11px;

letter-spacing: 1px;
```

}

/* UPDATE NOTICE */

.update-notice {
margin: 0 auto 5px;

```
color: #999;

font-size: 12px;

text-align: center;
```

}

.update-notice a {
color: #777;

```
text-decoration: underline;
```

}

.update-notice a:hover {
color: #222;
}

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

@media (max-width: 850px) {

```
.sidebar {
    position: relative;

    width: 100%;
    height: auto;

    padding: 22px 20px;
}


.sidebar nav {
    margin-top: 25px;

    gap: 15px;
}


.sidebar-footer {
    margin-top: 25px;
}


.page-content {
    margin-left: 0;

    padding: 45px 20px;
}


.language-selector {
    top: 20px;
    right: 20px;
}


.cat-page {
    grid-template-columns: 1fr;

    gap: 35px;

    margin-top: 30px;
}


.cat-page .cat-info {
    text-align: center;
}


.cat-page .description {
    margin-left: auto;
    margin-right: auto;
}


.cat-metadata {
    justify-content: center;
}
```

}
/* ========================================
   CAT PAGE — VISUAL REFINEMENTS
   ======================================== */

.cat-page {
    width: min(920px, 100%);
    grid-template-columns: minmax(340px, 460px) minmax(280px, 360px);
    gap: 55px;
}


/* Smaller, cleaner fixed frame */

.cat-frame {
    width: 100%;
    max-height: calc(100vh - 150px);

    aspect-ratio: 4 / 5;

    padding: 9px;

    background: #ebe8e2;

    border: 1px solid #d4d0c8;

    border-radius: 6px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.07);
}


.cat-image-container {
    background: #f3f1ed;
    border-radius: 2px;
}


.cat-image-container img {
    object-fit: contain;
}


/* Force information alignment */

.cat-page .cat-info,
.cat-page .cat-info p,
.cat-page .cat-info h1 {
    text-align: left;
}


.cat-page .cat-info h1 {
    font-size: 46px;
    margin-bottom: 12px;
}


.cat-page .location {
    margin-bottom: 7px;
}


.cat-page .years {
    margin-bottom: 28px;
}


.cat-page .description {
    max-width: 350px;
}


/* Metadata */

.cat-metadata {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 38px;
}


.cat-metadata span + span::before {
    content: "•";
    margin-right: 18px;
    color: #bbb;
}


/* Correction link */

.update-notice {
    position: absolute;

    left: calc(50% + 170px);
    bottom: 30px;

    margin: 0;

    font-size: 11px;
}
/* ========================================
   CAT PAGE — REFINEMENT BASED ON MOCKUP 1
   ======================================== */

html,
body {
    height: 100%;
}

body {
    overflow: hidden;
}


/* Main area: more breathing room from sidebar */

.page-content {
    height: 100vh;

    margin-left: 240px;

    padding:
        44px
        70px
        34px
        90px;

    box-sizing: border-box;
}


/* Main composition */

.cat-page {
    width: min(1040px, 100%);

    height: 100%;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(390px, 525px)
        minmax(300px, 390px);

    align-items: center;

    justify-content: center;

    gap: 80px;
}


/* Photo frame */

.cat-frame {
    width: 100%;

    height: min(72vh, 650px);

    max-height: none;

    aspect-ratio: auto;

    padding: 10px;

    box-sizing: border-box;

    background-color: #ebe8e2;

    border: 1px solid #d5d0c7;

    border-radius: 6px;

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


.cat-image-container {
    width: 100%;
    height: 100%;

    background-color: #f7f5f1;

    border-radius: 2px;
}


.cat-image-container img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* Information */

.cat-page .cat-info {
    align-self: center;

    padding: 0;

    text-align: left;
}


.cat-page .cat-info h1 {
    margin: 0 0 20px;

    font-size: 48px;

    font-weight: 400;

    line-height: 1.05;

    text-align: left;
}


.cat-page .nicknames {
    margin: 0 0 18px;

    text-align: left;
}


.cat-page .location {
    margin: 0 0 8px;

    text-align: left;
}


.cat-page .years {
    margin: 0;

    text-align: left;
}


/* Small divider like mockup */

.cat-page .years::after {
    content: "";

    display: block;

    width: 280px;
    max-width: 100%;

    height: 1px;

    margin-top: 38px;
    margin-bottom: 34px;

    background-color: #ddd8cf;
}


.cat-page .description {
    max-width: 390px;

    margin: 0;

    font-size: 17px;
    line-height: 1.65;

    text-align: left;
}


/* Metadata */

.cat-metadata {
    margin-top: 42px;

    display: flex;

    align-items: center;

    gap: 18px;

    justify-content: flex-start;
}


/* Update link underneath the information */

.update-notice {
    position: absolute;

    left: auto;
    right: 70px;
    bottom: 28px;

    width: 390px;

    margin: 0;

    text-align: left;

    font-size: 11px;
}


/* Desktop only */

@media (min-width: 851px) {

    .sidebar {
        height: 100vh;
    }

}


/* Mobile keeps normal scrolling */

@media (max-width: 850px) {

    html,
    body {
        height: auto;
    }

    body {
        overflow-y: auto;
    }

    .page-content {
        height: auto;

        margin-left: 0;

        padding: 45px 20px;
    }

    .cat-page {
        height: auto;

        grid-template-columns: 1fr;

        gap: 35px;
    }

    .cat-frame {
        height: auto;

        aspect-ratio: 1 / 1;
    }

    .cat-page .cat-info,
    .cat-page .cat-info h1,
    .cat-page .cat-info p {
        text-align: center;
    }

    .cat-page .years::after {
        margin-left: auto;
        margin-right: auto;
    }

    .cat-metadata {
        justify-content: center;
    }

    .update-notice {
        position: static;

        width: auto;

        margin-top: 35px;

        text-align: center;
    }

}
/* Sidebar separator refinement */

.nav-separator {
    width: 100%;
    height: 1px;

    background-color: #d6d0c6;

    margin: 18px 0 16px;
}
/* More breathing room below the CatsRoulette logo */

.sidebar nav {
    margin-top: 75px;
}
/* Links to individual cat profile */

.cat-image-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.cat-name-link {
    color: inherit;
    text-decoration: none;
}

.cat-name-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* ========================================
   KEEP CAT PROFILE STYLES OUT OF HOME
   ======================================== */

/* Home returns to normal scrolling/layout */

body:not(.cat-profile-page) {
    height: auto;
    overflow-y: auto;
}


/* Home image container */

body:not(.cat-profile-page) .cat-image-container {
    height: auto;
    aspect-ratio: 1 / 1;
}


/* Individual cat page keeps its own behavior */

.cat-profile-page {
    height: 100vh;
    overflow: hidden;
}

.cat-profile-page .cat-image-container {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.cat-profile-page .cat-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ========================================
   SEARCH PAGE
   ======================================== */

.search-page {
    overflow-y: auto;
}


.search-section {
    width: min(720px, 100%);

    margin: auto;
}


.search-section h1 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: 46px;
    font-weight: 400;

    letter-spacing: 1px;
}


.search-intro {
    margin: 12px 0 35px;

    color: #777;

    font-size: 16px;
}


.search-box input {
    width: 100%;

    box-sizing: border-box;

    padding: 16px 18px;

    background-color: white;

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

    font-family: Georgia, serif;
    font-size: 17px;

    color: #222;

    outline: none;
}


.search-box input:focus {
    border-color: #999;
}


#search-results {
    margin-top: 30px;
}


.search-result {
    display: flex;
    align-items: center;

    gap: 20px;

    padding: 15px 0;

    border-bottom: 1px solid #ddd8cf;

    color: inherit;

    text-decoration: none;
}


.search-result img {
    width: 75px;
    height: 75px;

    object-fit: cover;

    border-radius: 5px;
}


.search-result-info {
    display: flex;
    flex-direction: column;

    gap: 5px;

    text-align: left;
}


.search-result-info strong {
    font-family: Georgia, serif;

    font-size: 21px;

    font-weight: 400;
}


.search-result-info span {
    color: #666;

    font-size: 14px;
}


.search-result-info small {
    color: #999;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 1px;
}


.search-result:hover strong {
    text-decoration: underline;

    text-underline-offset: 4px;
}


.no-results {
    color: #888;

    font-style: italic;
}
/* ========================================
   SIDEBAR SEARCH
   ======================================== */

.sidebar-search {
    position: relative;
    width: 100%;
}

.sidebar-search input {
    width: 100%;

    box-sizing: border-box;

    padding: 9px 10px;

    border: 1px solid #d6d0c6;
    border-radius: 5px;

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

    color: #333;

    font-family: Georgia, serif;
    font-size: 13px;
}

.sidebar-search input::placeholder {
    color: #999;
}

.sidebar-search input:focus {
    outline: none;
    border-color: #aaa49a;
    background-color: #fff;
}

#sidebar-search-results {
    display: none;

    position: absolute;

    left: 0;
    top: calc(100% + 6px);

    width: 100%;

    box-sizing: border-box;

    background-color: #f8f6f2;

    border: 1px solid #d6d0c6;
    border-radius: 5px;

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

    z-index: 50;
}

.sidebar-search-result {
    display: block;

    padding: 9px 10px;

    color: #333;

    text-decoration: none;

    font-family: Georgia, serif;
    font-size: 13px;

    border-bottom: 1px solid #e2ddd5;
}

.sidebar-search-result:last-child {
    border-bottom: none;
}

.sidebar-search-result:hover {
    background-color: #efebe5;
}

.sidebar-search-empty {
    padding: 9px 10px;

    color: #999;

    font-size: 12px;
    font-style: italic;
}
/* ========================================
   HOME — SIDEBAR LAYOUT
   ======================================== */

.home-page {
    min-height: 100vh;
    overflow-y: auto;
}


.home-content {
    min-height: 100vh;

    margin-left: 240px;

    padding: 45px 70px;

    box-sizing: border-box;

    position: relative;

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


.home-roulette {
    width: min(560px, 100%);

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


.home-intro {
    margin: 0 0 25px;

    color: #777;

    font-size: 15px;
}


/* Home cat card */

.home-page .cat-card {
    width: min(500px, 100%);
    max-width: none;
}


.home-page .cat-image-container {
    width: 100%;

    aspect-ratio: 1 / 1;

    height: auto;

    box-sizing: border-box;

    padding: 9px;

    background-color: #ebe8e2;

    border: 1px solid #d5d0c7;

    border-radius: 6px;

    box-shadow:
        0 9px 25px rgba(0, 0, 0, 0.07);
}


.home-page .cat-image-container img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 2px;
}


/* Cat information */

.home-page .cat-info {
    padding: 18px 10px 8px;
}


.home-page .cat-info h2 {
    margin: 4px 0 8px;

    font-family: Georgia, serif;

    font-size: 32px;
    font-weight: 400;
}


.home-page .nicknames {
    margin: 0 0 7px;
}


.home-page .location {
    margin: 5px 0 7px;
}


.home-page .years {
    margin: 0 0 16px;

    color: #777;
}


.home-page .description {
    max-width: 430px;

    margin: auto;

    font-size: 16px;
    line-height: 1.5;
}


/* Roulette button */

.home-page .spin-button {
    margin-top: 14px;
}


/* Mobile */

@media (max-width: 850px) {

    .home-content {
        margin-left: 0;

        min-height: auto;

        padding: 45px 20px;
    }

    .home-roulette {
        margin-top: 20px;
    }

}
/* ========================================
   HOME — MATCH CAT PROFILE LAYOUT
   ======================================== */

.home-page {
    height: 100vh;
    overflow: hidden;
}


.home-content {
    height: 100vh;

    margin-left: 240px;

    padding:
        44px
        70px
        34px
        90px;

    box-sizing: border-box;

    position: relative;

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


.home-roulette {
    width: min(1040px, 100%);

    display: grid;

    grid-template-columns:
        minmax(390px, 525px)
        minmax(300px, 390px);

    align-items: center;

    justify-content: center;

    gap: 80px;
}


/* Intro no topo da coluna direita */

.home-intro {
    grid-column: 2;

    margin: 0 0 -10px;

    color: #999;

    font-size: 13px;

    text-align: left;
}


/* Cat card becomes transparent grid content */

.home-page .cat-card {
    display: contents;
}


/* Photo */

.home-page .cat-image-link {
    grid-column: 1;
    grid-row: 1 / span 3;

    display: block;

    width: 100%;

    text-decoration: none;
}


.home-page .cat-image-container {
    width: 100%;

    height: min(72vh, 650px);

    aspect-ratio: auto;

    padding: 10px;

    box-sizing: border-box;

    background-color: #ebe8e2;

    border: 1px solid #d5d0c7;

    border-radius: 6px;

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


.home-page .cat-image-container img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    border-radius: 2px;
}


/* Right column */

.home-page .cat-info {
    grid-column: 2;

    padding: 0;

    text-align: left;
}


.home-page .cat-info h2 {
    margin: 0 0 20px;

    font-family: Georgia, serif;

    font-size: 48px;
    font-weight: 400;

    line-height: 1.05;

    text-align: left;
}


.home-page .cat-name-link {
    color: inherit;

    text-decoration: none;
}


.home-page .cat-name-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}


.home-page .nicknames {
    margin: 0 0 18px;

    color: #888;

    font-size: 15px;
    font-style: italic;

    text-align: left;
}


.home-page .location {
    margin: 0 0 8px;

    color: #555;

    font-size: 16px;

    text-align: left;
}


.home-page .years {
    margin: 0;

    color: #777;

    font-size: 15px;

    text-align: left;
}


/* Minimal divider */

.home-page .years::after {
    content: "";

    display: block;

    width: 280px;
    max-width: 100%;

    height: 1px;

    margin-top: 38px;
    margin-bottom: 34px;

    background-color: #ddd8cf;
}


.home-page .description {
    max-width: 390px;

    margin: 0;

    color: #444;

    font-size: 17px;

    line-height: 1.65;

    text-align: left;
}


/* Roulette button in the right column */

.home-page .spin-button {
    grid-column: 2;

    justify-self: start;

    margin-top: 38px;

    padding: 15px 32px;
}


/* Mobile */

@media (max-width: 850px) {

    .home-page {
        height: auto;

        overflow-y: auto;
    }


    .home-content {
        height: auto;

        margin-left: 0;

        padding: 45px 20px;
    }


    .home-roulette {
        display: flex;

        flex-direction: column;

        gap: 28px;
    }


    .home-intro {
        order: 0;

        text-align: center;

        margin: 0;
    }


    .home-page .cat-card {
        display: block;
    }


    .home-page .cat-image-container {
        height: auto;

        aspect-ratio: 1 / 1;
    }


    .home-page .cat-info,
    .home-page .cat-info h2,
    .home-page .cat-info p {
        text-align: center;
    }


    .home-page .years::after {
        margin-left: auto;
        margin-right: auto;
    }


    .home-page .spin-button {
        margin-top: 10px;

        align-self: center;
    }

}
/* ========================================
   HOME — HEADER REFINEMENT
   ======================================== */

.home-page .language-selector {
    top: 28px;
    right: 40px;
}


/* Intro spans both columns */

.home-page .home-intro {
    grid-column: 1 / -1;

    margin: 0 0 28px;

    text-align: center;

    font-family: Georgia, serif;
    font-size: 19px;
    font-weight: 400;

    color: #555;

    letter-spacing: 0.2px;
}


/* Slightly restructure vertical placement */

.home-page .home-roulette {
    align-items: center;
}


/* Make sure the cat/info content sits below intro */

.home-page .cat-image-link {
    grid-column: 1;
}

.home-page .cat-info {
    grid-column: 2;
}
/* ========================================
   HOME — FINAL GRID FIX
   ======================================== */

.home-page {
    height: 100vh;
    overflow: hidden;
}


/* Main content */

.home-content {
    height: 100vh;
    min-height: 0;

    margin-left: 240px;

    padding: 36px 70px 30px 90px;

    box-sizing: border-box;

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


/* Entire roulette composition */

.home-page .home-roulette {
    width: min(1040px, 100%);

    display: grid;

    grid-template-columns:
        minmax(390px, 525px)
        minmax(300px, 390px);

    grid-template-rows:
        auto
        1fr
        auto;

    grid-template-areas:
        "intro intro"
        "photo info"
        "photo button";

    column-gap: 80px;
    row-gap: 24px;

    align-items: center;

    margin: 0;
}


/* Intro */

.home-page .home-intro {
    grid-area: intro;

    margin: 0 0 6px;

    text-align: center;

    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.4;

    color: #555;

    justify-self: center;
}


/* Cat card remains transparent to the grid */

.home-page .cat-card {
    display: contents;
}


/* Photo */

.home-page .cat-image-link {
    grid-area: photo;

    grid-column: auto;
    grid-row: auto;

    width: 100%;

    align-self: center;
}


.home-page .cat-image-container {
    width: 100%;

    height: min(64vh, 590px);

    aspect-ratio: auto;

    padding: 10px;

    box-sizing: border-box;
}


/* Information */

.home-page .cat-info {
    grid-area: info;

    grid-column: auto;
    grid-row: auto;

    align-self: end;

    padding: 0;

    text-align: left;
}


/* Roulette button */

.home-page .spin-button {
    grid-area: button;

    grid-column: auto;
    grid-row: auto;

    justify-self: start;
    align-self: start;

    margin: 4px 0 0;
}


/* Language always stays in the upper-right corner */

.home-page .language-selector {
    position: fixed;

    top: 28px;
    right: 40px;

    z-index: 20;
}
/* ========================================
   HOME — BUTTON + METADATA REFINEMENT
   ======================================== */

.home-page .cat-metadata {
    margin-top: 38px;

    display: flex;
    align-items: center;

    gap: 18px;

    justify-content: flex-start;

    color: #999;

    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 1px;
}


.home-page .cat-metadata span + span::before {
    content: "•";

    margin-right: 18px;

    color: #bbb;
}


/* Roulette button centered under the entire composition */

.home-page .spin-button {
    grid-area: button;

    justify-self: center;

    margin-top: 8px;
}
.home-page .spin-button {
    grid-column: 1 / -1;
    grid-row: 3;

    justify-self: center;

    margin-top: 6px;
}
/* Home — center cat information against the photo */

.home-page .cat-info {
    align-self: center;
}
/* Fix stray metadata marks on cat profile */

.cat-profile-page .cat-metadata span + span::before {
    content: "•";
    position: static;
    display: inline;
    margin-right: 18px;
}

.cat-profile-page .cat-metadata {
    position: static;
}
/* ========================================
   CAT OF THE DAY
   ======================================== */

.cotd-label {
    margin: 0 0 18px;

    font-family: Arial, sans-serif;

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

    letter-spacing: 2px;

    color: #999;

    text-align: left;
}


.view-cat-profile {
    display: inline-block;

    margin-top: 35px;

    color: #666;

    font-size: 12px;

    text-decoration: underline;

    text-underline-offset: 4px;
}


.view-cat-profile:hover {
    color: #222;
}
/* ========================================
   CAT OF THE DAY — HIGHLIGHT
   ======================================== */

.cotd-heading {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 16px;
}


.cotd-crown {
    font-family: Georgia, serif;

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

    color: #a58b55;
}


.cotd-label {
    margin: 0;

    font-family: Arial, sans-serif;

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

    letter-spacing: 2px;

    color: #8f836d;

    text-align: left;
}
/* ========================================
   IN MEMORY
   ======================================== */

.in-memory-page {
    min-height: 100vh;
    overflow-y: auto;
}


.in-memory-content {
    min-height: 100vh;
    height: auto;

    padding-top: 70px;
    padding-bottom: 70px;
}


.in-memory-section {
    width: min(1080px, 100%);

    margin: 0 auto;
}


.in-memory-header {
    margin-bottom: 45px;

    text-align: center;
}


.in-memory-header h1 {
    margin: 0 0 12px;

    font-family: Georgia, serif;

    font-size: 44px;
    font-weight: 400;

    letter-spacing: 1px;
}


.in-memory-header p {
    margin: 0;

    color: #777;

    font-size: 16px;

    font-style: italic;
}


/* Grid */

#in-memory-grid {
    display: grid;

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

    gap: 42px 32px;
}


/* Cards */

.memory-card {
    display: block;

    color: inherit;
    text-decoration: none;
}


.memory-photo {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    padding: 7px;

    box-sizing: border-box;

    background-color: #ebe8e2;

    border: 1px solid #d5d0c7;

    border-radius: 5px;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.06);

    overflow: hidden;
}


.memory-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background-color: #f6f4f0;

    border-radius: 2px;
}


/* Temporary insignia until final art exists */

.memory-insignia-placeholder {
    position: absolute;

    right: 16px;
    bottom: 14px;

    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    background-color:
        rgba(245, 243, 239, 0.88);

    color: #9d968c;

    font-size: 31px;

    line-height: 1;

    pointer-events: none;
}


/* Information */

.memory-info {
    padding: 15px 4px 0;

    text-align: left;
}


.memory-info h2 {
    margin: 0 0 6px;

    font-family: Georgia, serif;

    font-size: 25px;
    font-weight: 400;
}


.memory-years {
    margin: 0 0 7px;

    color: #777;

    font-size: 14px;
}


.memory-location {
    margin: 0 0 8px;

    color: #666;

    font-size: 14px;
}


.memory-id {
    margin: 0;

    color: #aaa;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 1px;
}


.memory-card:hover h2 {
    text-decoration: underline;

    text-underline-offset: 4px;
}


.memory-empty {
    grid-column: 1 / -1;

    margin-top: 30px;

    color: #888;

    text-align: center;

    font-style: italic;
}


/* Tablet */

@media (max-width: 1100px) {

    #in-memory-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* Mobile */

@media (max-width: 850px) {

    .in-memory-content {
        margin-left: 0;

        padding:
            55px
            20px
            60px;
    }


    #in-memory-grid {
        grid-template-columns: 1fr;

        max-width: 440px;

        margin-left: auto;
        margin-right: auto;

        gap: 35px;
    }

}
/* ========================================
   MAP
   ======================================== */

.map-page {
    height: 100vh;
    overflow: hidden;
}


.map-content {
    height: 100vh;

    box-sizing: border-box;

    padding:
        55px
        60px
        45px
        80px;
}


.map-section {
    width: min(1200px, 100%);

    height: 100%;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
}


.map-header {
    margin-bottom: 28px;

    text-align: center;
}


.map-header h1 {
    margin: 0 0 10px;

    font-family: Georgia, serif;

    font-size: 44px;
    font-weight: 400;

    letter-spacing: 1px;
}


.map-header p {
    margin: 0;

    color: #777;

    font-size: 15px;
}


/* Map */

#cats-map {
    flex: 1;

    min-height: 400px;

    border: 1px solid #d5d0c7;

    border-radius: 7px;

    overflow: hidden;

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

    background-color: #ebe8e2;
}


/* Popup */

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

    display: flex;
    flex-direction: column;

    gap: 5px;

    font-family: Georgia, serif;
}


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

    font-weight: 400;
}


.map-popup span {
    color: #777;

    font-size: 12px;
}


.map-popup a {
    margin-top: 4px;

    color: #444;

    font-size: 12px;

    text-decoration: underline;

    text-underline-offset: 3px;
}


/* Leaflet refinements */

.leaflet-control-zoom a {
    color: #555;
}


.leaflet-popup-content-wrapper {
    border-radius: 6px;

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


/* Mobile */

@media (max-width: 850px) {

    .map-page {
        height: auto;
        overflow-y: auto;
    }


    .map-content {
        height: auto;

        margin-left: 0;

        padding:
            55px
            20px
            40px;
    }


    #cats-map {
        height: 65vh;

        flex: none;
    }

}
.map-popup-image {
    width: 120px;
    height: 90px;

    object-fit: cover;

    border-radius: 4px;

    margin-bottom: 5px;
}
/* ========================================
   DONATE
   ======================================== */

.donate-page {
    min-height: 100vh;
    overflow-y: auto;
}


.donate-content {
    min-height: 100vh;
    height: auto;

    box-sizing: border-box;

    padding-top: 60px;
    padding-bottom: 60px;
}


.donate-section {
    width: min(620px, 100%);

    margin: auto;
}


.donate-header {
    margin-bottom: 35px;

    text-align: center;
}


.donate-header h1 {
    margin: 0 0 14px;

    font-family: Georgia, serif;

    font-size: 40px;
    font-weight: 400;

    letter-spacing: 1px;
}


.donate-header p {
    max-width: 500px;

    margin: auto;

    color: #777;

    font-size: 15px;
    line-height: 1.6;
}


/* Donation box */

.donate-card {
    padding: 34px;

    box-sizing: border-box;

    background-color: #eeebe5;

    border: 1px solid #d9d4cc;

    border-radius: 8px;

    box-shadow:
        0 9px 26px rgba(0, 0, 0, 0.05);
}


.donate-label {
    margin: 0 0 14px;

    font-size: 14px;
    font-weight: bold;
}


/* Preset amounts */

.donation-options {
    display: grid;

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

    gap: 10px;

    margin-bottom: 25px;
}


.donation-amount {
    padding: 13px 8px;

    border: 1px solid #ccc6bd;
    border-radius: 6px;

    background-color: #f8f6f2;

    color: #444;

    font-family: Arial, sans-serif;

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

    cursor: pointer;
}


.donation-amount:hover {
    border-color: #999187;
}


.donation-amount.active {
    background-color: #222;
    border-color: #222;

    color: white;
}


/* Custom amount */

.custom-amount-wrapper {
    display: none;

    margin-bottom: 24px;
}


.custom-amount-wrapper label,
.donate-field-label,
.supporter-fields label {
    display: block;

    margin-bottom: 7px;

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


.custom-amount-field {
    position: relative;
}


.custom-amount-field span {
    position: absolute;

    left: 14px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #777;
}


.custom-amount-field input {
    padding-left: 30px;
}


.custom-amount-field input,
.donate-input,
.supporter-fields input {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    border: 1px solid #d1ccc4;
    border-radius: 6px;

    background-color: #fff;

    color: #222;

    font-family: Georgia, serif;
    font-size: 15px;

    outline: none;
}


.custom-amount-field input:focus,
.donate-input:focus,
.supporter-fields input:focus {
    border-color: #999187;
}


.donate-field-label {
    margin-top: 5px;
}


.donate-field-label span,
.supporter-fields label span {
    color: #999;

    font-weight: normal;
}


/* Supporter */

.supporter-option {
    margin-top: 25px;
}


.supporter-option label {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #555;

    font-size: 13px;

    cursor: pointer;
}


.supporter-fields {
    display: none;

    flex-direction: column;

    margin-top: 18px;

    gap: 8px;
}


.supporter-fields label:not(:first-child) {
    margin-top: 10px;
}


.donation-note {
    margin: 27px 0 22px;

    color: #888;

    font-size: 12px;

    line-height: 1.5;
}


/* Main donate button */

#donate-button {
    width: 100%;

    padding: 15px 25px;

    border: none;
    border-radius: 30px;

    background-color: #222;

    color: white;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.5px;

    cursor: pointer;

    transition:
        transform 0.2s,
        opacity 0.2s;
}


#donate-button:not(:disabled):hover {
    transform: translateY(-2px);

    opacity: 0.9;
}


#donate-button:disabled {
    cursor: default;

    opacity: 0.6;
}


/* Mobile */

@media (max-width: 850px) {

    .donate-content {
        margin-left: 0;

        padding:
            55px
            20px
            60px;
    }


    .donation-options {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .donate-card {
        padding: 25px 20px;
    }

}
/* ========================================
   SUPPORTERS
   ======================================== */

.supporters-section {
    margin-top: 55px;
}


.supporters-header {
    margin-bottom: 30px;

    text-align: center;
}


.supporters-header h2 {
    margin: 0 0 9px;

    font-family: Georgia, serif;

    font-size: 28px;
    font-weight: 400;

    letter-spacing: 1px;
}


.supporters-header p {
    margin: 0;

    color: #888;

    font-size: 13px;
}


/* Groups */

.supporter-group {
    margin-top: 32px;
}


.supporter-group:first-child {
    margin-top: 0;
}


.supporter-group h3 {
    margin: 0 0 12px;

    padding-bottom: 9px;

    border-bottom: 1px solid #d8d3ca;

    color: #817867;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.supporter-group-list {
    display: flex;

    flex-wrap: wrap;

    gap: 10px 22px;
}


.supporter-item {
    padding: 3px 0;
}


.supporter-item a,
.supporter-item span {
    color: #333;

    font-family: Georgia, serif;

    font-size: 15px;

    text-decoration: none;
}


.supporter-item a:hover {
    text-decoration: underline;

    text-underline-offset: 3px;
}


.supporters-empty {
    padding: 20px 0;

    color: #999;

    text-align: center;

    font-size: 13px;

    font-style: italic;
}.supporter-group-empty {
    margin: 0;

    color: #aaa;

    font-size: 13px;

    font-style: italic;
}
/* ========================================
   ANIMATED LOGO
   ======================================== */

.animated-logo {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;

    text-decoration: none;
}


/* Área da animação */

.logo-media {
    position: relative;

    display: block;

    width: 180px;
    aspect-ratio: 16 / 9;

    overflow: hidden;
}


/* Imagem e vídeo ocupam exatamente
   o mesmo espaço */

.logo-media img,
.logo-media video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


/* Imagem aparece normalmente */

#logo-static {
    opacity: 1;
}


/* Vídeo começa invisível */

#logo-video {
    opacity: 0;
}


/* Nome do site */

.logo-text {
    color: #222;

    font-family: Georgia, serif;

    font-size: 21px;
    font-weight: 600;

    letter-spacing: 2.8px;

    white-space: nowrap;
}
/* Sidebar + logo com o mesmo fundo */

.sidebar {
    background-color: #f5f3ef;
}
/* ========================================
   LOGO — FINAL VISUAL FIX
   ======================================== */

.sidebar {
    background-color: #f5f3ef;
}

.logo-media {
    background-color: #f5f3ef;
    overflow: hidden;
}

/* Imagem e vídeo com exatamente o mesmo tamanho */

.logo-media img,
.logo-media video {
    width: calc(100% + 2px);
    height: calc(100% + 2px);

    left: -1px;
    top: -1px;

    object-fit: cover;
}
/* ========================================
   PAGE BACKGROUND
   ======================================== */

/* Sidebar mantém a cor exata do logo */
.sidebar {
    background-color: #f5f3ef;
}

/* Área principal ligeiramente mais clara */
.page-content,
.home-content,
.in-memory-content,
.map-content,
.donate-content {
    background-color: #faf9f6;
}
/* Área principal */

.page-content,
.home-content,
.in-memory-content,
.map-content,
.donate-content {
    background-color: #fdfcf9;
}
/* ========================================
   SIDEBAR — LOGO REFINEMENT
   ======================================== */

/* Logo */
.animated-logo {
    width: 100%;
    gap: 2px;
}

/* Ilustração */
.logo-media {
    width: 184px;
    max-width: 100%;
}

/* CatsRoulette */
.logo-text {
    margin-top: 0;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;

    letter-spacing: 2.4px;

    color: #222;
}

/* Aproxima a navegação do novo logo */
.sidebar nav {
    margin-top: 42px;
}
.logo-text {
    margin-top: 2px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 22px;
    font-weight: 400;

    letter-spacing: 1.2px;

    color: #222;

    white-space: nowrap;
}
/* CatsRoulette — nome da marca */

.logo-text {
    margin-top: 2px;

    font-family: Georgia, "Times New Roman", serif;

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

    letter-spacing: 0.8px;

    color: #111;

    white-space: nowrap;
}
/* ========================================
   HOME — CAT INFORMATION REFINEMENT
   ======================================== */

/* Nome do gato */
.home-page .cat-info h2 {
    margin: 0 0 14px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 50px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: -0.6px;

    color: #1c1c1a;
}


/* Apelidos */
.home-page .nicknames {
    margin: 0 0 20px;

    font-size: 14px;
    font-style: italic;

    color: #8b8882;
}


/* Cidade e país */
.home-page .location {
    margin: 0 0 7px;

    font-size: 16px;

    color: #4e4c48;
}


/* Ano */
.home-page .years {
    margin: 0;

    font-size: 14px;

    color: #88847e;
}


/* Linha divisória */
.home-page .years::after {
    content: "";

    display: block;

    width: 70px;
    height: 1px;

    margin: 30px 0;

    background-color: #d8d4cd;
}


/* Descrição */
.home-page .description {
    max-width: 390px;

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;
    line-height: 1.7;

    color: #3f3d39;

    text-align: left;
}


/* ID + Joined */
.home-page .cat-metadata {
    margin-top: 32px;

    color: #aaa69f;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.1px;
}
/* ========================================
   HOME — ROULETTE ANIMATION
   ======================================== */

.home-page .cat-card img,
.home-page .cat-info {
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.home-page .cat-card img {
    transform: scale(1);
}

.home-page .cat-info {
    transform: translateY(0);
}


/* Estado temporário durante a troca */

.home-page .cat-card img.is-changing {
    opacity: 0;
    transform: scale(0.985);
}

.home-page .cat-info.is-changing {
    opacity: 0;
    transform: translateY(6px);
}
/* ========================================
   HOME — FINAL CAT EMPHASIS
   ======================================== */

.home-page .cat-card img.is-final-cat {
    animation: finalCatImage 0.42s ease;
}

.home-page .cat-info.is-final-cat {
    animation: finalCatInfo 0.42s ease;
}

@keyframes finalCatImage {
    0% {
        transform: scale(0.985);
    }

    55% {
        transform: scale(1.015);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes finalCatInfo {
    0% {
        opacity: 0.65;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ========================================
   HOME — ROULETTE BUTTON REFINEMENT
   ======================================== */

.home-page .spin-button {
    min-width: 210px;
    height: 48px;

    padding: 0 30px;

    border: 1px solid #242320;
    border-radius: 6px;

    background-color: #242320;
    color: #f8f6f1;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.7px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


/* Mouse sobre o botão */
.home-page .spin-button:hover:not(:disabled) {
    background-color: #393733;
    border-color: #393733;

    transform: translateY(-2px);

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.10);
}


/* Momento do clique */
.home-page .spin-button:active:not(:disabled) {
    transform: translateY(0) scale(0.98);

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


/* FINDING A CAT... */
.home-page .spin-button:disabled {
    background-color: #dedbd4;
    border-color: #dedbd4;

    color: #88847d;

    cursor: default;

    box-shadow: none;

    transform: none;
}
/* ========================================
   HOME — CAT PROFILE LINKS
   ======================================== */

/* Foto clicável */
.home-page .cat-image-link {
    cursor: pointer;
}


/* Moldura/foto com hover muito suave */
.home-page .cat-image-link .cat-image-container {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.home-page .cat-image-link:hover .cat-image-container {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.10);
}


/* Nome clicável */
.home-page .cat-name-link {
    color: inherit;
    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.home-page .cat-name-link:hover {
    color: #55514b;
}


/* Pequena linha elegante no nome */
.home-page .cat-name-link {
    position: relative;
}

.home-page .cat-name-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background-color: #8d8981;

    transition: width 0.25s ease;
}

.home-page .cat-name-link:hover::after {
    width: 100%;
}
/* ========================================
   HOME — INTRO REFINEMENT
   ======================================== */

.home-page .home-intro {
    margin: 0 0 8px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;

    color: #68645e;

    letter-spacing: 0.1px;

    text-align: center;
}


/* Destaque extremamente sutil */
.home-page .home-intro::before {
    content: "";

    display: block;

    width: 28px;
    height: 1px;

    margin: 0 auto 13px;

    background-color: #c9c4bb;
}
/* ========================================
   SIDEBAR — FINAL REFINEMENT
   ======================================== */

.sidebar {
    background-color: #f5f3ef;
}


/* Navegação principal */
.sidebar nav {
    margin-top: 42px;
}


/* Links da sidebar */
.sidebar nav a,
.sidebar .sidebar-link {
    display: block;

    padding: 8px 0;

    color: #45423d;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.15px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* Hover */
.sidebar nav a:hover,
.sidebar .sidebar-link:hover {
    color: #111;

    transform: translateX(3px);
}


/* Search */
.sidebar .search-container {
    margin-top: 18px;
    margin-bottom: 26px;
}

.sidebar .search-container input {
    width: 100%;
    height: 38px;

    box-sizing: border-box;

    padding: 0 12px;

    border: 1px solid #d8d4cc;
    border-radius: 5px;

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

    color: #333;

    font-family: Arial, sans-serif;
    font-size: 12px;

    outline: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sidebar .search-container input::placeholder {
    color: #99958e;
}

.sidebar .search-container input:focus {
    border-color: #9e9990;

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

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


/* Separador */
.sidebar .sidebar-divider {
    height: 1px;

    margin: 20px 0;

    background-color: #ddd9d1;
}


/* Add Your Cat recebe um pouco mais de destaque */
.sidebar .add-cat-link {
    color: #242320;

    font-weight: 700;
}


/* Donate usa a mesma cor dos demais links principais */
.sidebar .donate-link {
    color: #45423d;
}


/* Contact no rodapé */
.sidebar .contact-link {
    margin-top: auto;

    padding-top: 24px;

    color: #8c8881;

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

    letter-spacing: 1.2px;

    text-decoration: none;

    transition: color 0.2s ease;
}

.sidebar .contact-link:hover {
    color: #333;
}
/* ========================================
   SIDEBAR — FINAL REFINEMENT
   ======================================== */

.sidebar {
    background-color: #f5f3ef;
}


/* Navegação */
.sidebar nav {
    margin-top: 42px;
}


/* Links principais */
.sidebar nav > a {
    display: block;

    padding: 8px 0;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.15px;

    color: #45423d;
    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* Hover dos links */
.sidebar nav > a:hover {
    color: #111;

    transform: translateX(3px);
}


/* ========================================
   SEARCH
   ======================================== */

.sidebar-search {
    position: relative;

    margin-bottom: 25px;
}


#sidebar-search-input {
    width: 100%;
    height: 38px;

    box-sizing: border-box;

    padding: 0 12px;

    border: 1px solid #d8d4cc;
    border-radius: 5px;

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

    font-family: Arial, sans-serif;
    font-size: 12px;

    color: #333;

    outline: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


#sidebar-search-input::placeholder {
    color: #99958e;
}


#sidebar-search-input:focus {
    border-color: #9e9990;

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

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


/* ========================================
   SEARCH RESULTS
   ======================================== */

#sidebar-search-results {
    display: none;

    position: absolute;

    top: calc(100% + 5px);
    left: 0;

    width: 100%;

    box-sizing: border-box;

    background-color: #fff;

    border: 1px solid #ddd9d1;
    border-radius: 5px;

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

    overflow: hidden;

    z-index: 50;
}


.sidebar-search-result {
    display: block;

    padding: 10px 12px;

    font-family: Arial, sans-serif;
    font-size: 11px;

    color: #45423d;

    text-decoration: none;

    border-bottom: 1px solid #efede8;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}


.sidebar-search-result:last-child {
    border-bottom: none;
}


.sidebar-search-result:hover {
    background-color: #f5f3ef;

    color: #111;
}


.sidebar-search-empty {
    padding: 11px 12px;

    font-family: Arial, sans-serif;
    font-size: 11px;

    color: #99958e;
}


/* ========================================
   SEPARATOR
   ======================================== */

.nav-separator {
    height: 1px;

    margin: 20px 0;

    background-color: #ddd9d1;
}


/* ========================================
   ADD YOUR CAT
   ======================================== */

.sidebar nav > a[href="add-your-cat.html"] {
    color: #242320;

    font-weight: 700;
}


/* ========================================
   DONATE
   ======================================== */

.sidebar nav > a[href="donate.html"] {
    color: #45423d;
}


/* ========================================
   CONTACT US
   ======================================== */

.sidebar-footer {
    margin-top: auto;

    padding-top: 24px;
}


.sidebar-footer a {
    font-family: Arial, sans-serif;

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

    letter-spacing: 1.2px;

    color: #8c8881;

    text-decoration: none;

    transition: color 0.2s ease;
}


.sidebar-footer a:hover {
    color: #333;
}
/* ========================================
   CONTACT PAGE
   ======================================== */

.contact-page {
    min-height: 100vh;

    background-color: #faf9f6;
}


.contact-content {
    min-height: 100vh;

    margin-left: 240px;

    padding: 55px 70px;

    box-sizing: border-box;

    display: flex;

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


.contact-panel {
    width: 100%;
    max-width: 640px;
}


.contact-panel h1 {
    margin: 0 0 18px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 46px;
    font-weight: 600;

    letter-spacing: -0.6px;

    color: #1c1c1a;
}


.contact-intro {
    max-width: 560px;

    margin: 0 0 38px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;
    line-height: 1.65;

    color: #5e5a54;
}


/* ========================================
   CONTACT FORM
   ======================================== */

.contact-field {
    margin-bottom: 20px;
}


.contact-field label {
    display: block;

    margin-bottom: 8px;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.4px;

    color: #77736d;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 13px;

    border: 1px solid #d9d5ce;
    border-radius: 5px;

    background-color: #fbfaf8;

    font-family: Arial, sans-serif;

    font-size: 14px;

    color: #333;

    outline: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


.contact-field input,
.contact-field select {
    height: 44px;
}


.contact-field textarea {
    min-height: 150px;

    resize: vertical;

    line-height: 1.5;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: #9e9990;

    background-color: #fff;

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


/* ========================================
   CONTACT BUTTON
   ======================================== */

.contact-submit {
    min-width: 180px;
    height: 46px;

    padding: 0 26px;

    border: 1px solid #242320;
    border-radius: 6px;

    background-color: #242320;

    color: #f8f6f1;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.5px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}


.contact-submit:hover:not(:disabled) {
    background-color: #393733;

    transform: translateY(-2px);

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.10);
}


.contact-submit:active:not(:disabled) {
    transform: scale(0.98);
}


.contact-submit:disabled {
    background-color: #dedbd4;

    border-color: #dedbd4;

    color: #88847d;

    cursor: default;

    transform: none;

    box-shadow: none;
}


/* ========================================
   CONTACT STATUS
   ======================================== */

.contact-status {
    min-height: 20px;

    margin-top: 16px;

    font-family: Arial, sans-serif;

    font-size: 12px;
}


.contact-status.success {
    color: #4f6851;
}


.contact-status.error {
    color: #9b4c4c;
}
/* ========================================
   CAT OF THE DAY — REFINEMENT
   ======================================== */

.cat-of-the-day-page .cotd-heading {
    margin-bottom: 18px;
}


.cat-of-the-day-page .cotd-label {
    margin: 0;

    font-family: Arial, sans-serif;

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

    letter-spacing: 2px;

    color: #8f8b84;
}


.cat-of-the-day-page .cat-info h1 {
    margin-top: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 50px;
    font-weight: 600;

    letter-spacing: -0.6px;

    color: #1c1c1a;
}


.cat-of-the-day-page .view-cat-profile {
    display: inline-block;

    margin-top: 28px;

    padding-bottom: 3px;

    border-bottom: 1px solid #8f8b84;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.3px;

    color: #45423d;

    text-decoration: none;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.cat-of-the-day-page .view-cat-profile:hover {
    color: #111;

    border-color: #111;
}
/* ========================================
   CAT OF THE DAY — DATE
   ======================================== */

.cat-of-the-day-page .cotd-date {
    margin: 6px 0 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 14px;
    font-style: italic;

    color: #9b978f;
}


/* ========================================
   CAT OF THE DAY — HISTORY
   ======================================== */

.cat-of-the-day-page .cotd-history {
    width: min(1040px, 100%);

    margin: 70px auto 80px;

    padding-top: 38px;

    border-top: 1px solid #e2ded7;
}


.cat-of-the-day-page .cotd-history-header {
    margin-bottom: 28px;
}


.cat-of-the-day-page .cotd-history-header h2 {
    margin: 0 0 8px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 28px;
    font-weight: 600;

    color: #1c1c1a;
}


.cat-of-the-day-page .cotd-history-header p {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    color: #77736d;
}


.cat-of-the-day-page .cotd-history-list {
    display: grid;

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

    gap: 24px;
}
/* ========================================
   CAT OF THE DAY — HISTORY CARDS
   ======================================== */

.cat-of-the-day-page .cotd-history-card {
    display: block;

    color: inherit;
    text-decoration: none;
}


.cat-of-the-day-page .cotd-history-card img {
    width: 100%;

    aspect-ratio: 4 / 3;

    display: block;

    object-fit: cover;

    border-radius: 5px;

    background-color: #f5f3ef;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.cat-of-the-day-page .cotd-history-card:hover img {
    transform: translateY(-3px);

    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.09);
}


.cat-of-the-day-page .cotd-history-card-info {
    padding-top: 12px;
}


.cat-of-the-day-page .cotd-history-card h3 {
    margin: 0 0 5px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;
    font-weight: 600;

    color: #25231f;
}


.cat-of-the-day-page .cotd-history-card p {
    margin: 0;

    font-family: Arial, sans-serif;

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

    letter-spacing: 0.8px;

    color: #99958e;
}


.cat-of-the-day-page .cotd-history-empty {
    grid-column: 1 / -1;

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    color: #8d8982;
}
/* ========================================
   CAT OF THE DAY — ENABLE PAGE SCROLL
   ======================================== */

body.cat-of-the-day-page {
    height: auto;
    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;
}


.cat-of-the-day-page .page-content {
    height: auto;
    min-height: 100vh;

    overflow: visible;
}
/* ========================================
   CAT OF THE DAY — HISTORY POLISH
   ======================================== */

.cat-of-the-day-page .cotd-history-list {
    grid-template-columns:
        repeat(3, minmax(220px, 280px));

    justify-content: center;
}


.cat-of-the-day-page .cotd-history-card img {
    aspect-ratio: 1 / 1;

    object-fit: cover;
}


.cat-of-the-day-page .cotd-history-card-info {
    text-align: center;
}


.cat-of-the-day-page .cotd-history-card h3 {
    font-size: 19px;
}


.cat-of-the-day-page .cotd-history-card p {
    font-size: 9px;
}
/* ========================================
   CAT OF THE DAY — OFFICIAL BADGE
   ======================================== */

.cat-of-the-day-page .cotd-heading {
    display: flex;
    align-items: center;

    gap: 20px;

    margin-bottom: 18px;
}


.cat-of-the-day-page .cotd-badge {
    width: 110px;
    height: 110px;

    object-fit: contain;

    flex-shrink: 0;
}


.cat-of-the-day-page .cotd-heading-text {
    display: flex;
    flex-direction: column;

    justify-content: center;
}


.cat-of-the-day-page .cotd-label {
    margin: 0;

    font-family: Arial, sans-serif;

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

    letter-spacing: 2px;

    color: #8f8b84;
}


.cat-of-the-day-page .cotd-date {
    margin: 5px 0 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 14px;
    font-style: italic;

    color: #9b978f;
}
/* ========================================
   CAT OF THE DAY — SHOW MORE
   ======================================== */

.cat-of-the-day-page .cotd-history-actions {
    display: flex;

    justify-content: center;

    margin-top: 38px;
}


.cat-of-the-day-page .cotd-show-more {
    min-width: 150px;
    height: 42px;

    padding: 0 22px;

    border: 1px solid #bdb8af;
    border-radius: 5px;

    background-color: transparent;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.4px;

    color: #4f4b45;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}


.cat-of-the-day-page .cotd-show-more:hover:not(:disabled) {
    background-color: #242320;

    border-color: #242320;

    color: #f8f6f1;

    transform: translateY(-2px);
}


.cat-of-the-day-page .cotd-show-more:active:not(:disabled) {
    transform: translateY(0);
}


.cat-of-the-day-page .cotd-show-more:disabled {
    opacity: 0.5;

    cursor: default;

    transform: none;
}
/* =========================================================
   IN MEMORY — FINAL VISUAL
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

body.in-memory-page {
    min-height: 100vh;

    height: auto;

    overflow-x: hidden;
    overflow-y: auto;

    background-color: #faf9f6;
}


.in-memory-page .page-content {
    min-height: 100vh;

    height: auto;

    overflow: visible;

    padding-bottom: 90px;
}


/* ---------------------------------------------------------
   MAIN CONTENT
   --------------------------------------------------------- */

.in-memory-page .in-memory-content {
    box-sizing: border-box;
}


.in-memory-page .in-memory-section {
    width: min(1000px, calc(100% - 90px));

    margin: 0 auto;

    padding-top: 78px;
}


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

.in-memory-page .in-memory-header {
    max-width: 620px;

    margin: 0 auto 52px;

    text-align: center;
}


.in-memory-page .in-memory-header::before {
    content: "";

    display: block;

    width: 32px;
    height: 1px;

    margin: 0 auto 18px;

    background-color: #c9c4bb;
}


.in-memory-page .in-memory-header h1 {
    margin: 0 0 13px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 42px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 1px;

    color: #24221f;
}


.in-memory-page .in-memory-header p {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    line-height: 1.6;

    color: #77736d;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.in-memory-page #in-memory-grid {
    display: grid;

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

    gap: 46px 28px;

    width: 100%;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.in-memory-page .memory-card {
    display: block;

    min-width: 0;

    color: inherit;

    text-decoration: none;
}


/* ---------------------------------------------------------
   PHOTO
   --------------------------------------------------------- */

.in-memory-page .memory-photo {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    display: flex;

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

    overflow: visible;

    border-radius: 6px;

    background-color: #f1efea;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.in-memory-page .memory-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 6px;
}


/* ---------------------------------------------------------
   CARD HOVER
   --------------------------------------------------------- */

.in-memory-page .memory-card:hover .memory-photo {
    transform: translateY(-4px);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.09);
}


/* ---------------------------------------------------------
   TEMPORARY INSIGNIA PLACEHOLDER
   --------------------------------------------------------- */

.in-memory-page .memory-insignia-placeholder {
    position: absolute;

    left: 50%;
    bottom: -17px;

    transform: translateX(-50%);

    width: 34px;
    height: 34px;

    display: flex;

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

    border: 1px solid #d7d2ca;

    border-radius: 50%;

    background-color: #faf9f6;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    color: #aaa59d;

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

    z-index: 2;
}


/* ---------------------------------------------------------
   INFO
   --------------------------------------------------------- */

.in-memory-page .memory-info {
    padding-top: 30px;

    text-align: center;
}


/* ---------------------------------------------------------
   NAME
   --------------------------------------------------------- */

.in-memory-page .memory-info h2 {
    margin: 0 0 7px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
    font-weight: 600;

    line-height: 1.15;

    color: #292722;

    transition:
        color 0.2s ease;
}


.in-memory-page .memory-card:hover .memory-info h2 {
    color: #55514b;
}


/* ---------------------------------------------------------
   YEARS
   --------------------------------------------------------- */

.in-memory-page .memory-years {
    margin: 0 0 8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    font-style: italic;

    color: #858179;
}


/* ---------------------------------------------------------
   LOCATION
   --------------------------------------------------------- */

.in-memory-page .memory-location {
    margin: 0 0 8px;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #9d9992;
}


/* ---------------------------------------------------------
   CAT ID
   --------------------------------------------------------- */

.in-memory-page .memory-id {
    margin: 0;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1px;

    color: #bbb7b0;
}


/* ---------------------------------------------------------
   LOADING / EMPTY
   --------------------------------------------------------- */

.in-memory-page .memory-loading,
.in-memory-page .memory-empty {
    grid-column: 1 / -1;

    margin: 65px 0;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    color: #8d8982;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .in-memory-page .in-memory-section {
        width: min(760px, calc(100% - 60px));
    }


    .in-memory-page #in-memory-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .in-memory-page .in-memory-section {
        width: calc(100% - 36px);

        padding-top: 55px;
    }


    .in-memory-page .in-memory-header {
        margin-bottom: 38px;
    }


    .in-memory-page .in-memory-header h1 {
        font-size: 34px;
    }


    .in-memory-page .in-memory-header p {
        font-size: 15px;
    }


    .in-memory-page #in-memory-grid {
        grid-template-columns: 1fr;

        gap: 44px;
    }

}
.in-memory-page .memory-insignia {
    position: absolute;

    left: 50%;
    bottom: -42px;

    transform: translateX(-50%);

    width: 110px;
    height: 80px;

    object-fit: contain;

    z-index: 3;

    pointer-events: none;
}


.in-memory-page .memory-info {
    padding-top: 52px;
}
/* ========================================
   IN MEMORY — INSIGNIA FIX
   ======================================== */

/* A foto real do gato */
.in-memory-page .memory-photo > img:not(.memory-insignia) {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 6px;
}


/* A insígnia da gatinha voando */
.in-memory-page .memory-photo .memory-insignia {
    position: absolute;

    left: 50%;
    bottom: -42px;

    width: 130px;
    height: auto;

    max-width: none;

    object-fit: contain;

    transform: translateX(-50%);

    z-index: 5;

    pointer-events: none;
}


/* Abre espaço para a insígnia */
.in-memory-page .memory-info {
    padding-top: 55px;
}

.in-memory-page .memory-photo .memory-insignia {
    width: 150px;
    bottom: -48px;
}

.in-memory-page .memory-info {
    padding-top: 60px;
}
/* ========================================
   IN MEMORY — BORDA DA INSÍGNIA
   ======================================== */

.in-memory-page .memory-photo .memory-insignia {
    border: 1px solid #d8d3ca;
    border-radius: 8px;

    padding: 4px;

    background-color: #faf9f6;

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

    box-sizing: border-box;
}
/* ========================================
   IN MEMORY — HEADER ART
   ======================================== */

.in-memory-page .in-memory-header {
    max-width: none;
    margin: 0 auto 52px;
}


.in-memory-page .in-memory-header::before {
    display: none;
}


.in-memory-page .in-memory-title-row {
    display: flex;

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

    gap: 24px;
}


.in-memory-page .in-memory-header-art {
    width: 150px;
    height: auto;

    display: block;

    object-fit: contain;

    flex-shrink: 0;
}


.in-memory-page .in-memory-title-text {
    text-align: left;
}


.in-memory-page .in-memory-title-text h1 {
    margin: 0 0 10px;
}


.in-memory-page .in-memory-title-text p {
    margin: 0;
}


/* ========================================
   IN MEMORY — CARD WITHOUT INSIGNIA
   ======================================== */

.in-memory-page .memory-info {
    padding-top: 15px;
}
/* ========================================
   IN MEMORY — GLOBAL BADGE
   ======================================== */

.deceased-badge {
    width: 28px;
    height: 28px;

    display: inline-block;

    object-fit: contain;

    margin-left: 8px;

    vertical-align: middle;

    flex-shrink: 0;
}


/* Quando nome + badge estiverem em flex */

.cat-name-with-badge {
    display: flex;

    align-items: center;

    gap: 8px;
}
/* ========================================
   IN MEMORY — GLOBAL BADGE
   ======================================== */

.deceased-badge {
    width: 55px;
    height: 55px;

    display: inline-block;
    object-fit: contain;

    margin-left: -2px;
    vertical-align: middle;

    flex-shrink: 0;
}
.in-memory-page .memory-info h2 {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 2px;
}
/* ========================================
   HOME — IN MEMORY BADGE
   ======================================== */

.home-page .cat-name-row {
    display: flex;

    align-items: center;

    gap: 2px;

    margin: 0 0 14px;
}


.home-page .cat-name-row .deceased-badge {
    width: 55px;
    height: 55px;

    margin-left: 0;

    object-fit: contain;

    flex-shrink: 0;
}


/*
 * Esconde por padrão.
 * O JavaScript mostra somente
 * quando o gato é falecido.
 */
.home-page .home-deceased-badge {
    display: none;
}
/* ========================================
   CAT PROFILE — IN MEMORY BADGE
   ======================================== */

.cat-profile-page .cat-profile-name-row {
    display: flex;

    align-items: center;

    gap: 2px;
}


.cat-profile-page .cat-profile-name-row h1 {
    margin-right: 0;
}


.cat-profile-page .profile-deceased-badge {
    width: 55px;
    height: 55px;

    margin-left: 0;

    object-fit: contain;

    flex-shrink: 0;

    display: none;
}
/* ========================================
   CAT PROFILE — NAME
   ======================================== */

.cat-profile-page .cat-profile-name-row h1 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 50px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.6px;

    color: #1c1c1a;
}
/* ========================================
   CAT OF THE DAY — IN MEMORY BADGES
   ======================================== */

.cat-of-the-day-page .cotd-cat-name-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cat-of-the-day-page .cotd-cat-name-row h1 {
    margin-right: 0;
}

.cat-of-the-day-page .cotd-deceased-badge {
    width: 55px;
    height: 55px;

    margin-left: 0;

    object-fit: contain;

    flex-shrink: 0;

    display: none;
}

.cat-of-the-day-page .cotd-history-card-info h3 {
    display: flex;
    align-items: center;
    gap: 0;
}

.cat-of-the-day-page .cotd-history-deceased-badge {
    width: 38px;
    height: 38px;

    margin-left: 1px;

    object-fit: contain;

    flex-shrink: 0;
}
/* ========================================
   FIX — COTD HISTORY DECEASED BADGE
   ======================================== */

.cat-of-the-day-page
.cotd-history-card-info
h3
img.cotd-history-deceased-badge {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px;
    max-width: 38px;

    object-fit: contain;

    margin: 0 0 0 2px;

    border-radius: 0;

    box-shadow: none;

    flex: 0 0 38px;

    display: block;
}


.cat-of-the-day-page
.cotd-history-card-info
h3 {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 0;
}
/* ========================================
   FIX FINAL — COTD HISTORY BADGE
   ======================================== */

.cat-of-the-day-page
.cotd-history-card-info
h3
img.cotd-history-deceased-badge {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    max-width: 38px !important;

    padding: 0 !important;
    margin: 0 0 0 2px !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;

    object-fit: contain !important;

    display: inline-block !important;

    flex: 0 0 38px !important;
}
/* ========================================
   MAP — IN MEMORY BADGE
   ======================================== */

.map-page .map-popup-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.map-page .map-popup-deceased-badge {
    width: 34px !important;
    height: 34px !important;

    min-width: 34px;
    max-width: 34px;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    object-fit: contain !important;

    flex: 0 0 34px;
}
/* ========================================
   ADD YOUR CAT PAGE
   ======================================== */

body.add-cat-page {
    min-height: 100vh;
    height: auto;

    overflow-x: hidden;
    overflow-y: auto;

    background-color: #faf9f6;
}


.add-cat-page .page-content {
    min-height: 100vh;
    height: auto;

    overflow: visible;

    padding-bottom: 90px;
}


.add-cat-page .add-cat-section {
    width: min(
        760px,
        calc(100% - 90px)
    );

    margin: 0 auto;

    padding-top: 72px;
}


/* HEADER */

.add-cat-page .add-cat-header {
    text-align: center;

    margin-bottom: 28px;
}


.add-cat-page .add-cat-header::before {
    content: "";

    display: block;

    width: 30px;
    height: 1px;

    margin: 0 auto 17px;

    background-color: #c9c4bb;
}


.add-cat-page .add-cat-header h1 {
    margin: 0 0 12px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 42px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 1px;

    color: #24221f;
}


.add-cat-page .add-cat-header p {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;
    line-height: 1.6;

    color: #77736d;
}


/* FEE BOX */

.add-cat-page .add-cat-fee-box {
    display: flex;

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

    gap: 20px;

    margin-bottom: 34px;

    padding: 18px 20px;

    border: 1px solid #ddd8cf;
    border-radius: 6px;

    background-color: #f4f1eb;
}


.add-cat-page .add-cat-fee-box strong {
    font-family: Arial, sans-serif;

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

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #34312d;
}


.add-cat-page .add-cat-fee-box span {
    font-family: Arial, sans-serif;

    font-size: 11px;

    color: #77736d;
}


/* FORM */

.add-cat-page .add-cat-form {
    display: block;
}


.add-cat-page .form-grid {
    display: grid;

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

    gap: 22px 24px;
}


.add-cat-page .form-group {
    display: flex;

    flex-direction: column;

    min-width: 0;
}


.add-cat-page .form-group-full {
    margin-bottom: 24px;
}


.add-cat-page .form-group label {
    margin-bottom: 8px;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.1px;

    text-transform: uppercase;

    color: #514e48;
}


.add-cat-page .form-group input,
.add-cat-page .form-group textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #d8d4cc;
    border-radius: 5px;

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

    font-family: Arial, sans-serif;

    font-size: 13px;

    color: #333;

    outline: none;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}


.add-cat-page .form-group input {
    height: 43px;

    padding: 0 12px;
}


.add-cat-page .form-group textarea {
    min-height: 130px;

    resize: vertical;

    padding: 12px;

    line-height: 1.5;
}


.add-cat-page .form-group input:focus,
.add-cat-page .form-group textarea:focus {
    border-color: #9e9990;

    background-color: #fff;

    box-shadow:
        0 0 0 2px
        rgba(0, 0, 0, .025);
}


/* FILE */

.add-cat-page
.form-group
input[type="file"] {
    height: auto;

    padding: 10px;
}


/* HELP TEXT */

.add-cat-page .form-help {
    margin: 7px 0 0;

    font-family: Arial, sans-serif;

    font-size: 10px;

    color: #99958e;
}


/* DESCRIPTION COUNTER */

.add-cat-page .description-footer {
    display: flex;

    justify-content: space-between;

    margin-top: 7px;

    font-family: Arial, sans-serif;

    font-size: 10px;

    color: #99958e;
}


/* CONFIRMATION */

.add-cat-page .confirmation {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 30px;

    padding: 18px;

    border: 1px solid #e1ddd5;
    border-radius: 5px;

    background-color: #f7f5f1;

    cursor: pointer;
}


.add-cat-page .confirmation input {
    margin-top: 3px;

    flex-shrink: 0;
}


.add-cat-page .confirmation span {
    font-family: Arial, sans-serif;

    font-size: 11px;
    line-height: 1.6;

    color: #68645e;
}


/* SUBMIT */

.add-cat-page .add-cat-submit-area {
    display: flex;

    justify-content: center;

    margin-top: 30px;
}


.add-cat-page .add-cat-submit-button {
    min-width: 250px;
    height: 48px;

    padding: 0 30px;

    border: 1px solid #242320;
    border-radius: 6px;

    background-color: #242320;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.4px;

    color: #f8f6f1;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .15s ease,
        box-shadow .2s ease;
}


.add-cat-page
.add-cat-submit-button:hover:not(:disabled) {
    background-color: #393733;

    border-color: #393733;

    transform: translateY(-2px);

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, .10);
}


.add-cat-page
.add-cat-submit-button:active:not(:disabled) {
    transform:
        translateY(0)
        scale(.98);
}


.add-cat-page
.add-cat-submit-button:disabled {
    background-color: #dedbd4;

    border-color: #dedbd4;

    color: #88847d;

    cursor: default;

    box-shadow: none;

    transform: none;
}


/* MOBILE */

@media (
    max-width: 700px
) {

    .add-cat-page .add-cat-section {
        width:
            calc(
                100% - 36px
            );

        padding-top: 48px;
    }


    .add-cat-page .form-grid {
        grid-template-columns: 1fr;
    }


    .add-cat-page .add-cat-fee-box {
        flex-direction: column;

        align-items: flex-start;

        gap: 6px;
    }


    .add-cat-page .add-cat-submit-button {
        width: 100%;
    }

}

/* ========================================
   GLOBAL TYPOGRAPHY + LANGUAGE MENU
   ======================================== */
:root {
    --font-editorial: Georgia, "Times New Roman", serif;
    --font-ui: Arial, Helvetica, sans-serif;
}

body {
    font-family: var(--font-editorial);
}

button,
input,
textarea,
select,
.sidebar,
.language-selector,
.spin-button {
    font-family: var(--font-ui);
}

/* Page titles follow the same editorial typography as the Home cat name. */
.search-section h1,
.in-memory-header h1,
.add-cat-header h1,
.donate-header h1,
.contact-header h1,
.cotd-page-title,
.map-page-title {
    font-family: var(--font-editorial);
    font-weight: 400;
}

.language-selector {
    user-select: none;
    z-index: 100;
}

.language-selector .language-current {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.language-selector .language-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 126px;
    padding: 5px;
    background: #f8f6f2;
    border: 1px solid #d6d0c6;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.language-selector.open .language-menu { display: block; }

.language-selector .language-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #444;
    text-align: left;
    font: inherit;
    letter-spacing: .4px;
    cursor: pointer;
}

.language-selector .language-option:hover,
.language-selector .language-option.active {
    background: #ece8e1;
    color: #111;
}

/* Keep In Memory's heading near the top instead of vertically drifting down. */
.in-memory-content {
    padding-top: 38px;
}

.in-memory-section {
    margin-top: 36px;
}

/* ========================================
   PUBLIC PAGE TITLES — UNIFIED TYPOGRAPHY
   Matches the IN MEMORY title exactly.
   ======================================== */
.map-header h1,
.in-memory-header h1,
.add-cat-page .add-cat-header h1,
.donate-header h1,
.contact-panel h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 44px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
}

/* ========================================
   PUBLIC PAGE TITLES — EXACT IN MEMORY MATCH
   ======================================== */
.map-page .map-header h1,
.in-memory-page .in-memory-title-text h1,
.add-cat-page .add-cat-header h1,
.donate-page .donate-header h1,
.contact-page .contact-panel h1 {
    margin-top: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    color: #24221f;
}

.contact-page .contact-panel h1 {
    text-transform: uppercase;
}


/* Contact background aligned with the other public pages */
body.contact-page,
.contact-page .page-content,
.contact-page .contact-content {
    background-color: #faf9f6;
}


/* Desktop consistency: remove decorative top rules from Home and Add Your Cat. */
.home-page .home-intro::before,
.add-cat-page .add-cat-header::before {
    content: none !important;
    display: none !important;
}

/* ========================================
   PUBLIC PAGE SUBTITLES — UNIFIED
   Same typography across MAP, IN MEMORY,
   ADD YOUR CAT, SUPPORT and CONTACT US.
   ======================================== */
.map-page .map-header p,
.in-memory-page .in-memory-title-text p,
.add-cat-page .add-cat-header p,
.donate-page .donate-header p,
.contact-page .contact-intro {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #77736d;
}

/* Center the Contact Us subtitle beneath its title. */
.contact-page .contact-intro {
    max-width: 620px;
    margin: 0 auto 38px;
    text-align: center;
}

/* ========================================
   PUBLIC PAGE SUBTITLES — ITALIC
   Matches the IN MEMORY subtitle style.
   ======================================== */
.map-page .map-header p,
.in-memory-page .in-memory-title-text p,
.add-cat-page .add-cat-header p,
.donate-page .donate-header p,
.contact-page .contact-intro {
    font-style: italic;
}

/* ========================================
   HOME MOBILE — RESPONSIVE NAV + LAYOUT
   Desktop rules above remain untouched.
   ======================================== */
.mobile-header,
.mobile-sidebar-backdrop {
    display: none;
}

@media (max-width: 850px) {
    body.home-page {
        display: block;
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        background: #fdfcf9;
    }

    .home-page .mobile-header {
        position: sticky;
        top: 0;
        z-index: 60;
        height: 64px;
        padding: 0 18px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(253, 252, 249, 0.96);
        border-bottom: 1px solid #e5e1da;
    }

    .home-page .mobile-brand {
        color: #24221f;
        text-decoration: none;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 22px;
        font-weight: 400;
        letter-spacing: 1px;
    }

    .home-page .mobile-menu-button {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        padding: 8px;
        border: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
    }

    .home-page .mobile-menu-button span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: #24221f;
        transition: transform .2s ease, opacity .2s ease;
    }

    .home-page.menu-open .mobile-menu-button span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }
    .home-page.menu-open .mobile-menu-button span:nth-child(2) { opacity: 0; }
    .home-page.menu-open .mobile-menu-button span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    .home-page .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 80;
        width: min(82vw, 310px);
        height: 100dvh;
        padding: 26px 24px 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background: #f5f3ef;
        transform: translateX(-105%);
        transition: transform .25s ease;
        overflow-y: auto;
        box-shadow: 10px 0 30px rgba(0,0,0,.08);
    }

    .home-page.menu-open .sidebar { transform: translateX(0); }

    .home-page .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: block;
        background: rgba(25, 24, 22, .28);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .home-page.menu-open .mobile-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .home-page.menu-open { overflow: hidden; }

    .home-page .sidebar .logo-media { width: 160px; }
    .home-page .sidebar .logo-text { font-size: 20px; }
    .home-page .sidebar nav { margin-top: 30px; gap: 17px; }
    .home-page .sidebar-footer { margin-top: 34px; padding-bottom: 8px; }

    .home-page .home-content {
        width: 100%;
        height: auto;
        min-height: calc(100vh - 64px);
        margin-left: 0;
        padding: 52px 18px 38px;
        box-sizing: border-box;
        display: block;
        background: #fdfcf9;
    }

    .home-page .language-selector {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 40;
    }

    .home-page .home-roulette {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .home-page .home-intro {
        order: 0;
        margin: 0 auto 24px;
        padding: 0 28px;
        font-size: 17px;
        line-height: 1.45;
        text-align: center;
    }

    .home-page .cat-card {
        order: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .home-page .cat-image-link {
        width: 100%;
        display: block;
    }

    .home-page .cat-image-container {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 7px;
        border-radius: 6px;
    }

    .home-page .cat-info {
        padding: 22px 8px 0;
        text-align: center;
    }

    .home-page .cat-info h2 {
        margin: 0 0 10px;
        font-size: clamp(34px, 10vw, 44px);
        line-height: 1.08;
        text-align: center;
    }

    .home-page .cat-name-row {
        justify-content: center;
    }

    .home-page .nicknames,
    .home-page .location,
    .home-page .years,
    .home-page .description {
        text-align: center;
    }

    .home-page .years::after {
        width: 170px;
        margin: 25px auto 22px;
    }

    .home-page .description {
        max-width: 430px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 1.6;
    }

    .home-page .cat-metadata {
        margin-top: 24px;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .home-page .cat-metadata span + span::before { margin-right: 14px; }

    .home-page .spin-button {
        order: 2;
        align-self: center;
        width: min(100%, 330px);
        margin: 28px auto 0;
        padding: 16px 22px;
    }
}

@media (max-width: 420px) {
    .home-page .home-content { padding-left: 14px; padding-right: 14px; }
    .home-page .home-intro { padding: 0 18px; font-size: 16px; }
    .home-page .cat-image-container { padding: 6px; }
}


/* ========================================
   MOBILE — COMPLETE PUBLIC SITE
   Keeps all desktop rules unchanged.
   ======================================== */
@media (max-width: 850px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body:not(.home-page):not(.success-page) {
        display: block;
        min-height: 100vh;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        background: #faf9f6;
    }

    /* Shared mobile top bar */
    body:not(.home-page) .mobile-header {
        position: sticky;
        top: 0;
        z-index: 60;
        height: 64px;
        padding: 0 18px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(250, 249, 246, .97);
        border-bottom: 1px solid #e5e1da;
        backdrop-filter: blur(8px);
    }

    body:not(.home-page) .mobile-brand {
        color: #24221f;
        text-decoration: none;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 22px;
        font-weight: 400;
        letter-spacing: 1px;
    }

    body:not(.home-page) .mobile-menu-button {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        padding: 8px;
        border: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
    }

    body:not(.home-page) .mobile-menu-button span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: #24221f;
        transition: transform .2s ease, opacity .2s ease;
    }

    body:not(.home-page).menu-open .mobile-menu-button span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }
    body:not(.home-page).menu-open .mobile-menu-button span:nth-child(2) { opacity: 0; }
    body:not(.home-page).menu-open .mobile-menu-button span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    /* Same drawer used on Home */
    body:not(.home-page) .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 80;
        width: min(82vw, 310px) !important;
        height: 100dvh !important;
        padding: 26px 24px 24px !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background: #f5f3ef;
        transform: translateX(-105%);
        transition: transform .25s ease;
        overflow-y: auto;
        box-shadow: 10px 0 30px rgba(0,0,0,.08);
    }

    body:not(.home-page).menu-open .sidebar { transform: translateX(0); }

    body:not(.home-page) .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: block;
        background: rgba(25, 24, 22, .28);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    body:not(.home-page).menu-open .mobile-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body:not(.home-page).menu-open { overflow: hidden; }

    body:not(.home-page) .sidebar .logo-media { width: 160px; }
    body:not(.home-page) .sidebar .logo-text { font-size: 20px; }
    body:not(.home-page) .sidebar nav { margin-top: 30px; gap: 17px; }
    body:not(.home-page) .sidebar-footer { margin-top: 34px; padding-bottom: 8px; }

    /* Search page has a legacy text logo: keep it tidy in the drawer. */
    .search-page .sidebar > .logo {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 21px;
        font-weight: 400;
        letter-spacing: 1px;
        text-decoration: none;
        color: #24221f;
    }

    /* Shared content offset after sticky mobile bar */
    body:not(.home-page):not(.success-page) .page-content,
    body:not(.home-page):not(.success-page) .contact-content {
        width: 100%;
        min-height: calc(100vh - 64px);
        height: auto;
        margin-left: 0 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box;
    }

    body:not(.home-page) .language-selector {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 40;
    }

    /* CAT PROFILE + CAT OF THE DAY */
    .cat-profile-page .page-content {
        padding-top: 34px !important;
        padding-bottom: 52px !important;
    }

    .cat-profile-page .cat-page {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
        display: flex !important;
        flex-direction: column;
        gap: 26px;
    }

    .cat-profile-page .cat-frame {
        width: 100%;
        max-width: none;
        max-height: none;
        aspect-ratio: 1 / 1;
    }

    .cat-profile-page .cat-info,
    .cat-profile-page .cat-info p,
    .cat-profile-page .cat-info h1 { text-align: center !important; }

    .cat-profile-page .cat-info h1 {
        font-size: clamp(34px, 10vw, 44px);
        line-height: 1.08;
    }

    .cat-profile-page .cat-profile-name-row,
    .cat-profile-page .cotd-cat-name-row { justify-content: center; }

    .cat-profile-page .cat-info .description {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
        line-height: 1.6;
    }

    .cat-profile-page .cat-metadata {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 26px;
    }

    .cat-profile-page .correction-link,
    .cat-of-the-day-page .view-cat-profile {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    .cat-of-the-day-page .cotd-heading {
        justify-content: center;
        text-align: left;
    }

    .cat-of-the-day-page .cotd-history {
        width: 100%;
        max-width: 520px;
        margin: 52px auto 0;
    }

    .cat-of-the-day-page .cotd-history-header { text-align: center; }
    .cat-of-the-day-page .cotd-history-list { grid-template-columns: 1fr !important; }

    /* SEARCH */
    .search-page .page-content {
        padding-top: 44px !important;
        padding-bottom: 54px !important;
    }

    .search-page .search-section { max-width: 560px; }
    .search-page .search-section h1 {
        font-size: 36px;
        text-align: center;
    }
    .search-page .search-intro {
        margin: 10px auto 28px;
        text-align: center;
        font-style: italic;
        line-height: 1.6;
    }
    .search-page .search-box input {
        padding: 14px 15px;
        font-size: 16px;
    }
    .search-page .search-result { gap: 14px; }
    .search-page .search-result img { width: 68px; height: 68px; flex-shrink: 0; }
    .search-page .search-result-info { min-width: 0; }
    .search-page .search-result-info strong { font-size: 19px; }

    /* IN MEMORY */
    .in-memory-page .in-memory-content {
        padding-top: 34px !important;
        padding-bottom: 60px !important;
    }
    .in-memory-page .in-memory-section {
        width: 100% !important;
        max-width: 520px;
        padding-top: 0 !important;
    }
    .in-memory-page .in-memory-header { margin-bottom: 34px; }
    .in-memory-page .in-memory-title-row {
        justify-content: center;
        gap: 8px;
    }
    .in-memory-page .in-memory-header-art {
        width: 70px;
        height: 70px;
        object-fit: contain;
    }
    .in-memory-page .in-memory-title-text h1 { font-size: 34px; }
    .in-memory-page .in-memory-title-text p {
        max-width: 310px;
        margin-left: auto;
        margin-right: auto;
        font-size: 15px;
        line-height: 1.55;
    }
    .in-memory-page #in-memory-grid {
        grid-template-columns: 1fr !important;
        gap: 36px;
        max-width: 440px;
        margin: 0 auto;
    }

    /* MAP */
    .map-page .map-content {
        padding-top: 34px !important;
        padding-bottom: 28px !important;
    }
    .map-page .map-section { width: 100%; min-height: 0; }
    .map-page .map-header { margin-bottom: 22px; }
    .map-page .map-header h1 { font-size: 34px; }
    .map-page .map-header p {
        max-width: 330px;
        margin: 0 auto;
        font-size: 15px;
        line-height: 1.55;
    }
    .map-page #cats-map {
        width: 100%;
        height: min(68vh, 620px);
        min-height: 430px;
        border-radius: 6px;
    }

    /* ADD YOUR CAT */
    .add-cat-page .page-content {
        padding-top: 34px !important;
        padding-bottom: 64px !important;
    }
    .add-cat-page .add-cat-section {
        width: 100% !important;
        max-width: 620px;
        padding-top: 0 !important;
    }
    .add-cat-page .add-cat-header { margin-bottom: 24px; }
    .add-cat-page .add-cat-header h1 { font-size: 34px; }
    .add-cat-page .add-cat-header p { font-size: 15px; line-height: 1.55; }
    .add-cat-page .add-cat-fee-box {
        margin-bottom: 28px;
        padding: 16px;
        align-items: flex-start;
    }
    .add-cat-page .form-grid { grid-template-columns: 1fr !important; gap: 18px; }
    .add-cat-page .form-group-full { margin-bottom: 20px; }
    .add-cat-page .form-group input { min-height: 46px; }
    .add-cat-page .form-group textarea { min-height: 135px; }
    .add-cat-page .confirmation { margin-top: 24px; padding: 15px; }
    .add-cat-page .add-cat-submit-button { width: 100%; min-width: 0; }

    /* DONATE */
    .donate-page .donate-content {
        padding-top: 34px !important;
        padding-bottom: 60px !important;
    }
    .donate-page .donate-section { width: 100%; max-width: 560px; }
    .donate-page .donate-header { margin-bottom: 26px; }
    .donate-page .donate-header h1 { font-size: 34px; line-height: 1.08; }
    .donate-page .donate-header p { font-size: 15px; line-height: 1.55; }
    .donate-page .donate-card,
    .donate-page .pix-support-card { padding: 22px 16px; }
    .donate-page .donation-options { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .donate-page .donation-amount { min-height: 46px; }
    .donate-page .donate-input,
    .donate-page .supporter-fields input,
    .donate-page .custom-amount-field { max-width: 100%; box-sizing: border-box; }
    .donate-page #donate-button { width: 100%; }
    .donate-page .supporters-section { margin-top: 44px; }
    .donate-page .supporters-header { margin-bottom: 24px; }

    /* CONTACT */
    .contact-page .contact-content {
        display: block;
        padding-top: 34px !important;
        padding-bottom: 60px !important;
    }
    .contact-page .contact-panel { max-width: 560px; margin: 0 auto; }
    .contact-page .contact-panel h1 {
        margin-bottom: 12px;
        font-size: 34px;
        line-height: 1.08;
        text-align: center;
    }
    .contact-page .contact-intro {
        max-width: 420px;
        margin: 0 auto 30px;
        font-size: 15px;
        line-height: 1.55;
        text-align: center;
    }
    .contact-page .contact-field { margin-bottom: 18px; }
    .contact-page .contact-field input,
    .contact-page .contact-field select { height: 46px; }
    .contact-page .contact-submit { width: 100%; }
}

@media (max-width: 420px) {
    body:not(.home-page):not(.success-page) .page-content,
    body:not(.home-page):not(.success-page) .contact-content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .in-memory-page .in-memory-title-row { gap: 2px; }
    .in-memory-page .in-memory-header-art { width: 60px; height: 60px; }
    .in-memory-page .in-memory-title-text h1,
    .map-page .map-header h1,
    .add-cat-page .add-cat-header h1,
    .donate-page .donate-header h1,
    .contact-page .contact-panel h1,
    .search-page .search-section h1 { font-size: 31px; }
}

/* Confirmation pages */
.success-page {
    min-height: 100vh;
    margin: 0;
    padding: 70px 20px 48px;
    box-sizing: border-box;
    background: #faf9f6;
    color: #24221f;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
}
.success-page > header,
.success-page > main,
.success-page > footer {
    width: min(620px, 100%);
    margin-left: auto;
    margin-right: auto;
}
.success-page > header h1 {
    margin: 0 0 12px;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: 1px;
}
.success-page > header p {
    margin: 0 auto 28px;
    color: #77736d;
    font-style: italic;
    line-height: 1.6;
}
.success-page .submission-form {
    padding: 28px 30px;
    border: 1px solid #ddd8cf;
    border-radius: 7px;
    background: #f4f1eb;
}
.success-page .submission-form p { line-height: 1.65; }
.success-page footer { margin-top: 28px; }
.success-page footer a {
    color: #24221f;
    text-underline-offset: 4px;
}
@media (max-width: 600px) {
    .success-page { padding: 78px 16px 40px; }
    .success-page > header h1 { font-size: 34px; }
    .success-page .submission-form { padding: 22px 18px; }
    .success-page .language-selector { top: 18px; right: 16px; }
}

/* ========================================
   MOBILE LAYERING FIX — LEAFLET MAP
   Keep the mobile navigation above Leaflet panes/controls.
   ======================================== */
@media (max-width: 850px) {
    .map-page .sidebar {
        z-index: 3000 !important;
    }

    .map-page .mobile-sidebar-backdrop {
        z-index: 2900 !important;
    }

    .map-page .mobile-header {
        z-index: 3100 !important;
    }
}


/* ========================================
   HOME — MINIMAL ROULETTE SPIN COUNTER
   ======================================== */
.home-page .spin-counter {
    position: fixed;
    right: 18px;
    bottom: 14px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    color: #9a958d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.2px;
    opacity: 0.82;
    user-select: none;
    pointer-events: none;
}

.home-page .spin-counter-icon {
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 850px) {
    .home-page .spin-counter {
        right: 10px;
        bottom: 9px;
        font-size: 9px;
    }

    .home-page .spin-counter-icon {
        font-size: 11px;
    }
}


/* ========================================
   LEGAL LINKS + LEGAL PAGES
   ======================================== */
.sidebar-legal-links {
    margin-top: 8px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.sidebar-footer .sidebar-legal-links a {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.8px;
    color: #aaa59d;
}
.sidebar-legal-links span {
    font-family: Arial, sans-serif;
    font-size: 8px;
    color: #c4c0b9;
}
.sidebar-footer .sidebar-legal-links a:hover { color: #625f59; }
.legal-page { min-height: 100vh; background: #faf9f6; }
.legal-content {
    min-height: 100vh; margin-left: 240px; padding: 55px 70px 80px;
    box-sizing: border-box; display: flex; justify-content: center;
}
.legal-panel { width: min(820px, 100%); color: #403d38; }
.legal-panel h1 {
    margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif;
    font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: 1px; color: #24221f;
}
.legal-updated { margin: 0 0 34px !important; font-size: 12px !important; color: #99948d !important; }
.legal-panel h2 {
    margin: 30px 0 9px; font-family: Georgia, "Times New Roman", serif;
    font-size: 20px; font-weight: 600; color: #34312d;
}
.legal-panel p {
    margin: 0 0 14px; font-family: Georgia, "Times New Roman", serif;
    font-size: 15px; line-height: 1.72; color: #68645e;
}
.legal-panel a { color: #4e4a44; text-underline-offset: 2px; }
@media (max-width: 850px) {
    .legal-content { margin-left: 0; padding: 92px 22px 55px; }
    .legal-panel h1 { font-size: 32px; }
    .legal-panel h2 { font-size: 19px; }
    .legal-panel p { font-size: 14px; line-height: 1.68; }
    .sidebar-legal-links { margin-top: 9px; }
}


/* ========================================
   GAMES — MATCH THE CATS
   ======================================== */
.games-page .games-content {
    min-height: 100vh;
    padding: 42px 54px 38px;
    box-sizing: border-box;
    background: #fdfcf9;
}

.memory-game-section {
    width: min(760px, 100%);
    margin: 0 auto;
}

.memory-game-header {
    text-align: center;
    margin-bottom: 24px;
}

.memory-game-header .games-kicker {
    margin: 0 0 8px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 2.4px;
    color: #8b867e;
}

.memory-game-header h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 400;
    letter-spacing: 1px;
    color: #24221f;
}

.memory-game-header > p:last-child {
    margin: 9px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-style: italic;
    color: #77736d;
}

.memory-game-stats {
    width: min(610px, 100%);
    margin: 0 auto 22px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #ded9d0;
    border-radius: 5px;
    background: #f8f6f1;
    overflow: hidden;
}

.memory-game-stats > div {
    padding: 10px 8px 9px;
    text-align: center;
    border-right: 1px solid #e2ddd5;
}
.memory-game-stats > div:last-child { border-right: 0; }
.memory-game-stats span {
    display: block;
    margin-bottom: 4px;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #918b82;
}
.memory-game-stats strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 400;
    color: #24221f;
}
.memory-game-stats strong b { font-weight: 400; }

.memory-game-grid {
    width: min(700px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.memory-game-card {
    position: relative;
    aspect-ratio: 1 / 1.08;
    padding: 0;
    border: 0;
    background: transparent;
    perspective: 900px;
    cursor: pointer;
}

.memory-card-inner {
    position: absolute;
    inset: 0;
    display: block;
    transform-style: preserve-3d;
    transition: transform .42s cubic-bezier(.2,.7,.2,1);
}
.memory-game-card.flipped .memory-card-inner,
.memory-game-card.matched .memory-card-inner { transform: rotateY(180deg); }

.memory-card-front,
.memory-card-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    backface-visibility: hidden;
    overflow: hidden;
}

.memory-card-front {
    border: 1px solid #4a4742;
    background: #343330;
    box-shadow: 0 3px 10px rgba(36,34,31,.09);
}
.memory-card-front::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
}
.memory-paw { font-size: 29px; filter: grayscale(1); opacity: .58; }

.memory-card-back {
    transform: rotateY(180deg);
    flex-direction: column;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #d9d4cb;
    background: #f4f1eb;
    box-shadow: 0 3px 12px rgba(36,34,31,.10);
}
.memory-card-back img {
    width: 100%;
    min-height: 0;
    flex: 1;
    object-fit: cover;
    border-radius: 3px;
    user-select: none;
    -webkit-user-drag: none;
}
.memory-card-back > span {
    width: 100%;
    padding: 6px 3px 3px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    color: #24221f;
}
.memory-game-card.matched .memory-card-back { border-color: #a7a095; }

.memory-game-actions { text-align: center; margin-top: 22px; }
.memory-restart-button {
    padding: 11px 22px;
    border: 1px solid #cbc5bb;
    border-radius: 4px;
    background: transparent;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #494641;
    cursor: pointer;
}
.memory-restart-button:hover { background: #f2efe9; }
.memory-game-loading, .memory-game-error {
    grid-column: 1 / -1;
    padding: 80px 20px;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: #77736d;
}

.memory-finish[hidden] { display: none; }
.memory-finish {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(32,30,27,.48);
    backdrop-filter: blur(4px);
}
.memory-finish-card {
    width: min(390px, 100%);
    padding: 34px 34px 30px;
    box-sizing: border-box;
    border: 1px solid #d7d1c8;
    border-radius: 7px;
    background: #fdfcf9;
    text-align: center;
    box-shadow: 0 22px 70px rgba(0,0,0,.18);
}
.memory-finish-paw { font-size: 30px; filter: grayscale(1); }
.memory-finish-card h2 {
    margin: 10px 0 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 400;
    color: #24221f;
}
.memory-finish-subtitle {
    margin: 0 0 23px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: #77736d;
}
.memory-finish-score {
    padding: 17px 10px;
    border-top: 1px solid #ded9d0;
    border-bottom: 1px solid #ded9d0;
}
.memory-finish-score span,
.memory-finish-score small {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
    color: #8b867e;
}
.memory-finish-score strong {
    display: block;
    margin: 3px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 45px;
    font-weight: 400;
    color: #24221f;
}
.memory-final-details {
    margin: 15px 0 21px;
    font-family: Georgia, "Times New Roman", serif;
    color: #6e6962;
}
.memory-finish-card button {
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 4px;
    background: #242321;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
}

@media (max-width: 850px) {
    .games-page .games-content { padding-top: 34px !important; padding-bottom: 42px !important; }
    .memory-game-section { max-width: 620px; }
}

@media (max-width: 560px) {
    .memory-game-header { margin-bottom: 19px; }
    .memory-game-header h1 { font-size: 35px; }
    .memory-game-stats { grid-template-columns: repeat(2, 1fr); }
    .memory-game-stats > div:nth-child(2) { border-right: 0; }
    .memory-game-stats > div:nth-child(-n+2) { border-bottom: 1px solid #e2ddd5; }
    .memory-game-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
    .memory-card-back > span { font-size: 11px; padding-top: 4px; }
    .memory-paw { font-size: 24px; }
    .memory-finish-card { padding: 29px 24px 25px; }
}


/* ========================================
   GAMES — SWITCH + GUESS THE CAT
   ======================================== */
.games-switch { display:flex; justify-content:center; gap:7px; margin:0 auto 25px; }
.games-switch a { padding:8px 13px; border:1px solid #d7d1c8; border-radius:4px; background:#f8f6f1; color:#77716a; text-decoration:none; font-family:Arial,sans-serif; font-size:9px; font-weight:700; letter-spacing:1.2px; }
.games-switch a:hover { background:#f0ede7; }
.games-switch a.active { background:#343330; border-color:#343330; color:#fff; }
.guess-game-section { width:min(760px,100%); margin:0 auto; }
.guess-stats { width:min(610px,100%); margin:0 auto 18px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #ded9d0; border-radius:5px; background:#f8f6f1; overflow:hidden; }
.guess-stats>div { padding:9px 8px 8px; text-align:center; border-right:1px solid #e2ddd5; }
.guess-stats>div:last-child { border-right:0; }
.guess-stats span { display:block; margin-bottom:4px; font-family:Arial,sans-serif; font-size:9px; font-weight:700; letter-spacing:1.5px; color:#918b82; }
.guess-stats strong { font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:400; color:#24221f; }
.guess-stats strong b { font-weight:400; }
.guess-stage { width:min(500px,100%); margin:0 auto; text-align:center; }
.guess-photo-frame { width:100%; height:min(43vh,350px); min-height:245px; padding:8px; box-sizing:border-box; border:1px solid #d7d1c8; border-radius:7px; background:#f3f0ea; box-shadow:0 5px 18px rgba(36,34,31,.08); }
.guess-photo-frame img { width:100%; height:100%; object-fit:contain; border-radius:4px; user-select:none; -webkit-user-drag:none; }
.guess-question { margin:14px 0 12px; font-family:Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:1.8px; color:#5c5750; }
.guess-options { width:min(500px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.guess-option { min-height:45px; padding:10px 14px; border:1px solid #cfc9bf; border-radius:5px; background:#fdfcf9; color:#2d2b28; font-family:Georgia,"Times New Roman",serif; font-size:16px; cursor:pointer; transition:.15s ease; }
.guess-option:hover:not(:disabled) { background:#f0ede7; transform:translateY(-1px); }
.guess-option:disabled { cursor:default; opacity:.62; }
.guess-option.correct { border-color:#7f967d; background:#eaf0e8; opacity:1; }
.guess-option.wrong { border-color:#ad7e76; background:#f4e9e6; opacity:1; }
.guess-feedback { min-height:20px; margin:11px auto 0; text-align:center; font-family:Georgia,"Times New Roman",serif; font-size:14px; font-style:italic; color:#77736d; }
.guess-feedback.is-correct { color:#60785f; }
.guess-feedback.is-wrong { color:#8c625b; }
@media(max-width:560px){ .games-switch{margin-bottom:20px}.guess-stats{grid-template-columns:repeat(2,1fr)}.guess-stats>div:nth-child(2){border-right:0}.guess-stats>div:nth-child(-n+2){border-bottom:1px solid #e2ddd5}.guess-photo-frame{height:300px;min-height:0}.guess-options{gap:7px}.guess-option{font-size:14px;min-height:43px;padding:9px}.guess-game-section .memory-game-header h1{font-size:35px} }

/* ========================================
   GAMES HUB + UNIFIED GAME HEADERS
   ======================================== */
.games-page-header {
    text-align: center;
    margin: 0 auto 30px;
}
.games-page-header h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    color: #24221f;
}
.games-page-header p {
    margin: 13px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-style: italic;
    color: #817b73;
}
.games-hub-section {
    width: min(910px, 100%);
    margin: 42px auto 0;
}
.games-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.game-hub-card {
    min-height: 290px;
    padding: 29px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #ddd7cd;
    border-radius: 8px;
    background: #faf8f4;
    box-shadow: 0 7px 20px rgba(36,34,31,.055);
}
.game-card-symbol {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 19px;
    border: 1px solid #d5cfc5;
    border-radius: 50%;
    background: #f0ece5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    color: #35322e;
    filter: grayscale(1);
}
.game-hub-card h2 {
    margin: 0 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #2c2925;
}
.game-hub-card p {
    margin: 0 auto 24px;
    max-width: 220px;
    flex: 1;
    font-size: 14px;
    line-height: 1.55;
    color: #77716a;
}
.game-card-play {
    width: 100%;
    padding: 12px 14px;
    box-sizing: border-box;
    border-radius: 5px;
    background: #292826;
    color: #fff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    transition: .15s ease;
}
.game-card-play:hover { background: #111; transform: translateY(-1px); }
.back-to-games {
    display: inline-block;
    margin-bottom: 24px;
    color: #77716a;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}
.back-to-games:hover { color: #24221f; }
.game-detail-header { margin-bottom: 24px; }
.place-cat-name {
    margin: 10px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    color: #2b2926;
}

@media (max-width: 850px) {
    .games-hub-section { margin-top: 20px; }
    .games-hub-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .game-hub-card { min-height: 0; }
}
@media (max-width: 560px) {
    .games-page-header h1 { font-size: 34px; }
    .games-page-header p { font-size: 14px; }
    .games-hub-grid { gap: 12px; }
    .game-hub-card { padding: 23px 20px 20px; }
}

/* CATDLE */
.catdle-section{width:min(700px,100%);margin:0 auto;text-align:center}.daily-label{margin:-8px 0 18px;font:700 9px Arial,sans-serif;letter-spacing:1.5px;color:#938d84}.catdle-stage{width:min(360px,100%);margin:0 auto 14px}.catdle-photo{height:210px;padding:7px;border:1px solid #d7d1c8;border-radius:7px;background:#f3f0ea}.catdle-photo img{width:100%;height:100%;object-fit:contain;border-radius:4px;user-select:none;-webkit-user-drag:none}.catdle-length{margin:9px 0 0;font:700 9px Arial,sans-serif;letter-spacing:1.5px;color:#77716a}.catdle-board{display:grid;gap:6px;margin:15px auto;width:max-content;max-width:100%}.catdle-row{display:flex;gap:6px;justify-content:center}.catdle-tile{width:42px;height:42px;display:grid;place-items:center;box-sizing:border-box;border:1px solid #cbc5bb;background:#fdfcf9;font:700 18px Arial,sans-serif;color:#2b2926}.catdle-tile.correct{background:#728b70;border-color:#728b70;color:white}.catdle-tile.present{background:#b69b59;border-color:#b69b59;color:white}.catdle-tile.absent{background:#77736d;border-color:#77736d;color:white}.catdle-form{display:flex;gap:8px;width:min(430px,100%);margin:16px auto 0}.catdle-form input{flex:1;min-width:0;padding:12px;border:1px solid #cec8be;border-radius:5px;background:#fff;font:700 15px Arial,sans-serif;text-transform:uppercase;letter-spacing:2px;text-align:center}.catdle-form button,.catdle-profile-button,.catdle-back-button{padding:12px 18px;border:0;border-radius:5px;background:#292826;color:#fff;text-decoration:none;font:700 10px Arial,sans-serif;letter-spacing:1.4px;cursor:pointer}.catdle-keyboard{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;width:min(520px,100%);margin:14px auto}.catdle-keyboard span{width:28px;height:32px;display:grid;place-items:center;border-radius:3px;background:#ece8e1;font:700 10px Arial,sans-serif;color:#514d47}.catdle-profile-button,.catdle-back-button{display:block;margin-top:10px}.catdle-back-button{background:#f4f1eb;color:#514d47;border:1px solid #d4cec4}.games-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px;margin-left:auto;margin-right:auto}@media(max-width:560px){.catdle-tile{width:31px;height:36px;font-size:14px}.catdle-row{gap:4px}.catdle-board{gap:4px}.catdle-photo{height:190px}.catdle-form{flex-direction:column}.games-hub-grid{grid-template-columns:1fr}}

/* GLOBAL GAME RECORDS */
.games-leaderboard-cta{width:min(700px,100%);margin:0 auto 20px;padding:14px 18px;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid #d8d2c8;border-radius:6px;background:#f7f4ee;color:#2b2926;text-decoration:none}.games-leaderboard-cta>span{font-size:20px;filter:grayscale(1)}.games-leaderboard-cta strong{font:700 11px Arial,sans-serif;letter-spacing:1.4px}.games-leaderboard-cta small{font:italic 13px Georgia,serif;color:#817b73}.games-leaderboard-cta:hover{background:#f0ece5}
.global-score-box{margin-top:18px;text-align:center}.global-score-rule{height:1px;background:#ddd7cd;margin:0 0 17px}.global-score-box h3{margin:0 0 6px;font:700 11px Arial,sans-serif;letter-spacing:1.5px;color:#2c2925}.global-score-box>p{margin:0 0 12px;font-size:13px;line-height:1.45;color:#77716a}.global-score-form{display:grid;grid-template-columns:1fr 1fr;gap:7px}.global-score-form input{min-width:0;padding:10px 9px;box-sizing:border-box;border:1px solid #d2ccc2;border-radius:4px;background:#fff;font:12px Arial,sans-serif}.global-score-form button{grid-column:1/-1;padding:11px;border:0;border-radius:4px;background:#292826;color:#fff;font:700 9px Arial,sans-serif;letter-spacing:1.4px;cursor:pointer}.global-score-form button:disabled{opacity:.55}.global-score-help{margin-top:8px!important;font-size:10px!important;color:#999289!important}.global-score-message{margin-top:10px;font-size:12px;line-height:1.45}.global-score-message.success{color:#496348}.global-score-message.error{color:#9a4f47}.global-score-leaderboard{display:inline-block;margin-top:11px;color:#625d56;font:700 9px Arial,sans-serif;letter-spacing:1.2px;text-decoration:underline;text-underline-offset:3px}
.leaderboard-section{width:min(760px,100%);margin:0 auto}.leaderboard-note{text-align:center;margin:-10px 0 20px;font:700 9px Arial,sans-serif;letter-spacing:1.4px;color:#938d84}.leaderboard-list{border:1px solid #ddd7cd;border-radius:7px;overflow:hidden;background:#fbfaf7}.leaderboard-head,.leaderboard-row{display:grid;grid-template-columns:80px 1fr 90px 120px;align-items:center;gap:8px;padding:13px 18px}.leaderboard-head{background:#efebe4;font:700 9px Arial,sans-serif;letter-spacing:1.3px;color:#7f786f}.leaderboard-row{border-top:1px solid #e4ded5;font-size:14px;color:#4e4943}.leaderboard-row strong{font-family:Georgia,serif;font-size:15px}.leaderboard-row b{text-align:right;font-family:Georgia,serif;font-size:16px;color:#272421}.leaderboard-head span:last-child{text-align:right}.leaderboard-rank{font-weight:700}.leaderboard-row.top-three{background:#f8f5ef}.leaderboard-empty{padding:34px;text-align:center;font:italic 14px Georgia,serif;color:#817b73}
@media(max-width:560px){.games-leaderboard-cta{grid-template-columns:auto 1fr}.games-leaderboard-cta small{grid-column:2}.global-score-form{grid-template-columns:1fr}.global-score-form button{grid-column:auto}.leaderboard-head,.leaderboard-row{grid-template-columns:52px 1fr 62px 78px;padding:12px 10px;gap:5px}.leaderboard-head{font-size:7px}.leaderboard-row{font-size:12px}.leaderboard-row strong{font-size:13px}.leaderboard-row b{font-size:13px}}

/* CAT WORD SEARCH */
.wordsearch-section{width:min(900px,100%);margin:0 auto}.wordsearch-cat{width:min(700px,100%);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}.wordsearch-photo{width:86px;height:86px;padding:4px;box-sizing:border-box;border:1px solid #d8d2c8;border-radius:6px;background:#f4f1eb;flex:0 0 auto}.wordsearch-photo img{width:100%;height:100%;object-fit:contain;border-radius:3px;user-select:none;-webkit-user-drag:none}.wordsearch-cat span{font:700 8px Arial,sans-serif;letter-spacing:1.4px;color:#918a81}.wordsearch-cat h2{margin:3px 0 4px;font:400 24px Georgia,serif;color:#292622}.wordsearch-cat p{margin:0;font:italic 13px Georgia,serif;color:#827b72}.wordsearch-stats{width:min(700px,100%);margin:0 auto 16px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ded9d0;border-radius:5px;background:#f8f6f1;overflow:hidden}.wordsearch-stats>div{padding:8px;text-align:center;border-right:1px solid #e2ddd5}.wordsearch-stats>div:last-child{border-right:0}.wordsearch-stats span{display:block;margin-bottom:3px;font:700 8px Arial,sans-serif;letter-spacing:1.3px;color:#918b82}.wordsearch-stats strong{font:400 18px Georgia,serif;color:#292622}.wordsearch-stats b{font-weight:400}.wordsearch-layout{display:grid;grid-template-columns:minmax(0,1fr) 185px;gap:22px;align-items:start;width:min(700px,100%);margin:0 auto}.wordsearch-grid{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(15,1fr);border:1px solid #d3cdc3;border-radius:6px;overflow:hidden;background:#fff;touch-action:none;user-select:none}.wordsearch-cell{min-width:0;padding:0;border:0;border-right:1px solid #eeeae4;border-bottom:1px solid #eeeae4;background:#fff;color:#37332e;font:700 clamp(9px,1.05vw,14px) Arial,sans-serif;cursor:crosshair;user-select:none}.wordsearch-cell.selecting{background:#e6e0d6}.wordsearch-cell.found{background:#dce8da;color:#40523e}.wordsearch-cell.hinted{animation:wordHint .55s ease 3}@keyframes wordHint{50%{background:#e8d8a9}}.wordsearch-instruction{margin:8px 0 0;text-align:center;font:italic 11px Georgia,serif;color:#918a81}.wordsearch-words-panel{padding:14px;border:1px solid #ddd7ce;border-radius:6px;background:#f8f6f1}.wordsearch-words-panel h3{margin:0 0 11px;font:700 9px Arial,sans-serif;letter-spacing:1.3px;color:#5f5952}.wordsearch-words{display:flex;flex-direction:column;gap:7px}.wordsearch-words span{font:700 11px Arial,sans-serif;letter-spacing:.8px;color:#4c4842;transition:.15s}.wordsearch-words span.found{text-decoration:line-through;color:#8aa087}.wordsearch-words span.hinted{color:#a17f31}.wordsearch-hint{width:100%;margin-top:14px;padding:10px 6px;border:1px solid #cec8be;border-radius:4px;background:#fff;color:#5b554e;font:700 8px Arial,sans-serif;letter-spacing:1px;cursor:pointer}.wordsearch-hint:hover:not(:disabled){background:#efebe4}.wordsearch-hint:disabled{opacity:.45}.games-hub-grid{max-width:700px}
@media(max-width:650px){.wordsearch-layout{grid-template-columns:1fr}.wordsearch-words-panel{order:-1}.wordsearch-words{display:grid;grid-template-columns:repeat(2,1fr)}.wordsearch-grid{width:min(100%,520px);margin:auto}.wordsearch-cell{font-size:clamp(8px,2.7vw,12px)}.wordsearch-cat{justify-content:flex-start}.wordsearch-stats span{font-size:7px}.wordsearch-stats strong{font-size:15px}}

/* CAT WORD SEARCH — PROFILE CLUES */
.wordsearch-profile-card{width:min(700px,100%);margin:0 auto 16px;padding:16px;box-sizing:border-box;display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start;border:1px solid #ddd7ce;border-radius:7px;background:#faf8f4}.wordsearch-profile-photo{width:150px;height:150px;padding:6px;box-sizing:border-box;border:1px solid #d8d2c8;border-radius:6px;background:#f2eee7}.wordsearch-profile-photo img{width:100%;height:100%;object-fit:contain;border-radius:3px;user-select:none;-webkit-user-drag:none}.wordsearch-profile-info{text-align:left;min-width:0}.wordsearch-profile-kicker{display:block;margin-bottom:4px;font:700 8px Arial,sans-serif;letter-spacing:1.5px;color:#918a81}.wordsearch-profile-info h2{margin:0 0 10px;font:400 26px Georgia,serif;color:#292622}.wordsearch-profile-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.wordsearch-profile-meta p{margin:0;padding:8px 9px;border:1px solid #e4ded5;border-radius:4px;background:#fff}.wordsearch-profile-meta strong{display:block;margin-bottom:4px;font:700 7px Arial,sans-serif;letter-spacing:1.2px;color:#9a938a}.wordsearch-profile-meta span{font:13px Georgia,serif;color:#5e5851}.wordsearch-description{margin:0;font:14px/1.55 Georgia,serif;color:#625c55}.wordsearch-profile-note{margin:10px 0 0!important;font:italic 11px Georgia,serif!important;color:#918a81!important}.wordsearch-inline-profile{display:inline-block;margin-top:10px;color:#5f5952;text-decoration:none;font:700 8px Arial,sans-serif;letter-spacing:1.2px}.wordsearch-inline-profile:hover{text-decoration:underline;text-underline-offset:3px}.wordsearch-profile-word{padding:1px 3px;border-radius:3px;background:#e7dfc8;color:#342f27;font-weight:700}.wordsearch-profile-word.found{background:#dce8da;color:#40523e;text-decoration:line-through}.wordsearch-profile-word.hinted{animation:wordProfileHint .55s ease 3}@keyframes wordProfileHint{50%{background:#d6b75f}}@media(max-width:650px){.wordsearch-profile-card{grid-template-columns:92px 1fr;padding:12px;gap:12px}.wordsearch-profile-photo{width:92px;height:92px}.wordsearch-profile-info h2{font-size:22px}.wordsearch-profile-meta{grid-template-columns:1fr}.wordsearch-description{grid-column:1/-1;font-size:13px}.wordsearch-profile-note,.wordsearch-inline-profile{grid-column:1/-1}}


/* ========================================
   DAILY GAMES DASHBOARD + PERIOD LEADERBOARDS
   ======================================== */
.daily-dashboard{width:min(700px,100%);margin:0 auto 20px;border:1px solid #d8d2c8;border-radius:8px;background:#faf8f4;overflow:hidden}.daily-dashboard-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:18px 20px 15px;border-bottom:1px solid #e1dcd3}.daily-dashboard-top>div:first-child{display:flex;flex-direction:column;gap:5px}.daily-dashboard-kicker,.daily-score-total span{font:700 8px Arial,sans-serif;letter-spacing:1.45px;color:#928b82}.daily-dashboard-top strong{font:600 20px Georgia,serif;color:#292622}.daily-score-total{text-align:right}.daily-score-total strong{display:block;margin-top:4px}.daily-player{min-height:31px;padding:10px 20px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #e6e0d7;background:#f4f0e9;color:#615b54}.daily-player>span{font:700 8px Arial,sans-serif;letter-spacing:1.3px}.daily-player>strong{font:600 14px Georgia,serif;color:#2f2b27}.daily-player>small{font:italic 11px Georgia,serif;color:#8d867d}.daily-player button{margin-left:auto;padding:0;border:0;background:none;color:#837c73;font:700 8px Arial,sans-serif;letter-spacing:1px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.daily-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #e2ddd4}.daily-mini-stats>div{padding:11px 12px;text-align:center;border-right:1px solid #e2ddd4}.daily-mini-stats>div:last-child{border-right:0}.daily-mini-stats span{display:block;margin-bottom:4px;font:700 7px Arial,sans-serif;letter-spacing:1.2px;color:#999188}.daily-mini-stats strong{font:600 14px Georgia,serif;color:#36312c}.daily-game-rows{padding:7px 14px}.daily-game-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 6px;border-bottom:1px solid #ebe6de;color:#4e4943;text-decoration:none}.daily-game-row:last-child{border-bottom:0}.daily-game-row span{font:700 9px Arial,sans-serif;letter-spacing:1px}.daily-game-row strong{font:700 8px Arial,sans-serif;letter-spacing:.8px;color:#6c665e}.daily-game-row.done strong{color:#60765e}.daily-game-row.unsaved strong{color:#9a7741}.daily-game-row:hover{background:#f4f0e9}.daily-bonus-status{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:13px 20px;border-top:1px solid #e1dcd3;background:#f1ede6}.daily-bonus-status strong{font:700 9px Arial,sans-serif;letter-spacing:1.1px;color:#665f57}.daily-bonus-status span{font:italic 11px Georgia,serif;color:#8b847b;text-align:right}.daily-bonus-status.earned{background:#edf2ea}.daily-bonus-status.earned strong{color:#536c50}.game-hub-card.game-complete{border-color:#cbd7c8;background:#f7faf5}.game-hub-card.game-complete .game-card-play{background:#657b62}.leaderboard-tabs{display:flex;justify-content:center;gap:5px;margin:-6px auto 19px}.leaderboard-tabs button{padding:9px 13px;border:1px solid #d7d1c8;border-radius:4px;background:#faf8f4;color:#777068;font:700 8px Arial,sans-serif;letter-spacing:1.15px;cursor:pointer}.leaderboard-tabs button.active{background:#292826;border-color:#292826;color:#fff}.leaderboard-player-summary{margin:0 0 14px;padding:11px 14px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;border:1px solid #ddd7cd;border-radius:6px;background:#f5f1ea;font:700 8px Arial,sans-serif;letter-spacing:1px;color:#746d65}.leaderboard-player-summary strong{font-family:Georgia,serif;font-size:12px;letter-spacing:0;color:#332f2a}.leaderboard-row.is-player{box-shadow:inset 3px 0 0 #657b62;background:#f0f5ee}.leaderboard-row strong small{margin-left:5px;font:700 7px Arial,sans-serif;letter-spacing:1px;color:#657b62}
@media(max-width:560px){.daily-dashboard-top{padding:15px;align-items:center}.daily-dashboard-top strong{font-size:16px}.daily-player{padding:10px 15px;flex-wrap:wrap}.daily-player button{margin-left:auto}.daily-mini-stats strong{font-size:12px}.daily-game-rows{padding:6px 10px}.daily-game-row{grid-template-columns:1fr;padding:8px 5px;gap:4px}.daily-bonus-status{padding:12px 15px;align-items:flex-start;flex-direction:column;gap:4px}.daily-bonus-status span{text-align:left}.leaderboard-tabs{gap:3px}.leaderboard-tabs button{padding:8px 9px;font-size:7px}.leaderboard-player-summary{justify-content:flex-start}}

/* CatsRoulette official Instagram link */
.sidebar-instagram {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0 10px;
    color: inherit;
    opacity: .62;
    transition: opacity .18s ease, transform .18s ease;
}
.sidebar-instagram:hover { opacity: 1; transform: translateY(-1px); }
.sidebar-instagram svg { width: 19px; height: 19px; display: block; }

/* PIX / LivePix option on Donate */
.pix-support-card {
    margin-top: 22px;
    padding: 34px;
    box-sizing: border-box;
    border: 1px solid #d9d4cc;
    border-radius: 8px;
    background-color: #eeebe5;
    box-shadow: 0 9px 26px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.pix-support-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.pix-support-card p {
    margin: 0 auto 18px;
    max-width: 520px;
    color: #746f69;
    line-height: 1.5;
}

.pix-support-button {
    width: 100%;
    min-height: 46px;
    padding: 0 28px;
    box-sizing: border-box;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #222;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    transition: opacity .18s ease, transform .18s ease;
}

.pix-support-button:hover {
    opacity: .90;
    transform: translateY(-2px);
}

.pix-support-note {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #99928a;
}


/* ========================================
   CAT OF THE DAY — SQUARE PHOTO FRAME
   Keep the featured-cat frame consistent with Home.
   ======================================== */
.cat-of-the-day-page .cat-frame {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
}

.cat-of-the-day-page .cat-image-container {
    width: 100%;
    height: 100%;
}

.cat-of-the-day-page .cat-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ========================================
   ADD YOUR CAT — PIX OPTION
   ======================================== */

.add-cat-page .add-cat-pix-option {
    width: min(100%, 520px);
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid rgba(24, 24, 24, 0.16);
    text-align: center;
}

.add-cat-page .add-cat-pix-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.add-cat-page .add-cat-pix-copy strong {
    font-size: 14px;
    letter-spacing: 0.04em;
}

.add-cat-page .add-cat-pix-copy span,
.add-cat-page .add-cat-pix-option p {
    font-size: 12px;
    line-height: 1.55;
    opacity: 0.72;
}

.add-cat-page .add-cat-pix-button,
.add-cat-page .pix-livepix-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border: 1px solid #1d1d1b;
    background: transparent;
    color: #1d1d1b;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, color .16s ease;
}

.add-cat-page .add-cat-pix-button:hover:not(:disabled),
.add-cat-page .pix-livepix-button:hover {
    background: #1d1d1b;
    color: #f4efe4;
    transform: translateY(-1px);
}

.add-cat-page .add-cat-pix-button:disabled {
    cursor: wait;
    opacity: .55;
}

.add-cat-page .pix-submission-success {
    width: min(100%, 520px);
    margin-top: 22px;
    padding: 22px;
    border: 1px solid rgba(24, 24, 24, .24);
    text-align: center;
}

.add-cat-page .pix-submission-success > strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
}

.add-cat-page .pix-reference {
    display: inline-block;
    margin: 8px 0 12px;
    padding: 9px 14px;
    border: 1px dashed rgba(24, 24, 24, .45);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
}

@media (max-width: 700px) {
    .add-cat-page .add-cat-pix-button,
    .add-cat-page .pix-livepix-button {
        width: 100%;
    }
}


/* ========================================
   ADD YOUR CAT — PAYMENT OPTIONS ALIGNMENT
   ======================================== */
.add-cat-page .add-cat-submit-area {
    width: min(100%, 520px);
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 18px;
}

.add-cat-page .add-cat-payment-choice,
.add-cat-page .add-cat-pix-option {
    width: 100%;
    text-align: center;
}

.add-cat-page .add-cat-payment-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: #68645e;
}

.add-cat-page .add-cat-submit-button,
.add-cat-page .add-cat-pix-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 6px;
}

.add-cat-page .add-cat-payment-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: #8a867f;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .14em;
}

.add-cat-page .add-cat-payment-divider::before,
.add-cat-page .add-cat-payment-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(24, 24, 24, .16);
}

.add-cat-page .add-cat-pix-option {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.add-cat-page .add-cat-pix-copy {
    margin-bottom: 5px;
    gap: 0;
}

.add-cat-page .add-cat-pix-button {
    background-color: #242320;
    color: #f8f6f1;
    border-color: #242320;
}

.add-cat-page .add-cat-pix-button:hover:not(:disabled) {
    background-color: #393733;
    border-color: #393733;
    color: #f8f6f1;
}


/* ========================================
   ADD YOUR CAT — MATCH CARD / PIX LABELS
   ======================================== */
.add-cat-page .add-cat-pix-copy .add-cat-payment-label {
    display: block;
    margin: 0 0 5px;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: normal;
    color: #68645e;
    opacity: 1;
}

.add-cat-page .add-cat-pix-copy {
    margin-bottom: 0;
}


/* Manual PIX donations */
.pix-donation-form,
.pix-donation-ready {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}

.pix-donation-form > label,
.pix-donation-supporter-fields > label {
    display: block;
    margin: 0 0 7px;
    color: #625e58;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}

.pix-donation-amount-field {
    display: flex;
    align-items: center;
    margin-bottom: 17px;
    border: 1px solid #d4cec5;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.pix-donation-amount-field span {
    padding-left: 13px;
    color: #77716a;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

.pix-donation-amount-field input,
.pix-donation-supporter-fields input {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    background: #fff;
    color: #33302c;
    font-family: Georgia, serif;
    font-size: 14px;
}

.pix-donation-amount-field input {
    padding: 12px 13px 12px 7px;
    outline: 0;
}

.pix-donation-supporter-option {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px !important;
    cursor: pointer;
}

.pix-donation-supporter-option input {
    width: auto;
    margin: 0;
}

.pix-donation-supporter-fields {
    margin-bottom: 17px;
}

.pix-donation-supporter-fields[hidden] {
    display: none;
}

.pix-donation-supporter-fields input {
    margin: 0 0 13px;
    padding: 11px 12px;
    border: 1px solid #d4cec5;
    border-radius: 6px;
}

.pix-donation-form .pix-support-button,
.pix-donation-ready .pix-support-button {
    border: 0;
    cursor: pointer;
}

.pix-donation-help {
    margin: 10px auto 0 !important;
    text-align: center;
    font-size: 12px;
}

.pix-donation-ready {
    text-align: center;
}

.pix-donation-ready p {
    margin-bottom: 10px !important;
}

.pix-donation-ready strong {
    display: block;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px dashed #aaa39a;
    border-radius: 6px;
    background: rgba(255,255,255,.55);
    color: #292622;
    font-family: Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
}


/* ========================================
   DONATE — PIX TYPOGRAPHY ALIGNMENT
   Match the Stripe card typography/centering.
   ======================================== */
.pix-donation-form,
.pix-donation-ready {
    text-align: center;
    font-family: Georgia, serif;
}

.pix-donation-form > label,
.pix-donation-supporter-fields > label {
    text-align: center;
    color: #222;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: normal;
}

.pix-donation-supporter-option {
    justify-content: flex-start;
    color: #555;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: normal;
    text-align: left;
}

.pix-donation-amount-field span {
    font-family: Georgia, serif;
    font-size: 15px;
}

.pix-donation-help {
    font-family: Georgia, serif;
}


/* ========================================
   DONATE — FINAL STRIPE / PIX CONSISTENCY
   ======================================== */
/* The amount buttons are self-explanatory; never show the old heading. */
.donate-card > .donate-label {
    display: none !important;
}

/* Keep the Stripe and PIX supporter checkboxes typographically identical. */
.supporter-option label,
.pix-donation-supporter-option {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    color: #555 !important;
    font-family: Georgia, serif !important;
    font-size: 13px !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    text-align: left !important;
    cursor: pointer;
}

.supporter-option label span,
.pix-donation-supporter-option span {
    color: #555 !important;
    font-family: Georgia, serif !important;
    font-size: 13px !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    line-height: normal !important;
}

.supporter-option label input,
.pix-donation-supporter-option input {
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
}


/* ========================================
   DONATE — SINGLE USD AMOUNT FIELD
   Stripe now mirrors the PIX amount layout.
   ======================================== */
.donate-page .donation-options {
    display: none !important;
}

.donate-page .custom-amount-wrapper {
    display: block !important;
    margin-bottom: 24px;
}

.donate-page .custom-amount-wrapper > label {
    display: block;
    margin: 0 0 7px;
    text-align: center;
    color: #222;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: normal;
}

.donate-page .custom-amount-field {
    width: 100%;
    box-sizing: border-box;
}

.donate-page .custom-amount-field > input {
    width: 100%;
    box-sizing: border-box;
    font-family: Georgia, serif;
    font-size: 15px;
    letter-spacing: normal;
}

/* Donate: keep PIX optional suffix identical to Stripe optional suffix */
.pix-donation-supporter-fields > label span {
    color: #999;
    font-weight: normal;
}

/* Cat detail page — keep the portrait/landscape photo inside the same square frame used on Home */
body:has(.cat-page) .cat-page .cat-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

body:has(.cat-page) .cat-page .cat-frame .cat-image-container {
    width: 100%;
    height: 100%;
}

body:has(.cat-page) .cat-page .cat-frame .cat-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================================
   MOBILE POLISH — DRAWER + LANGUAGE SPACING
   2026-09-09
   ======================================== */
@media (max-width: 850px) {
    /* Give the language selector its own breathing room above cat photos. */
    .cat-profile-page .page-content {
        padding-top: 56px !important;
    }

    /*
       Leaflet needs the mobile header above its map panes, but when the
       drawer is open that header must not paint a white strip over it.
       Keep only the close (X) control visible above the drawer.
    */
    .map-page.menu-open .mobile-header {
        background: transparent;
        border-bottom-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: none;
    }

    .map-page.menu-open .mobile-brand {
        opacity: 0;
        visibility: hidden;
    }

    .map-page.menu-open .mobile-menu-button {
        pointer-events: auto;
    }
}

/* ========================================
   MAP DESKTOP — LARGER VIEWPORT FIT
   Uses more of the available page without
   creating vertical scrolling.
   ======================================== */
@media (min-width: 851px) {
    .map-page .map-content {
        height: 100vh;
        min-height: 0;
        padding: 34px 34px 26px 46px;
        overflow: hidden;
    }

    .map-page .map-section {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
    }

    .map-page .map-header {
        flex: 0 0 auto;
        margin-bottom: 20px;
    }

    .map-page #cats-map {
        width: 100%;
        height: calc(100vh - 170px);
        min-height: 0;
        flex: 1 1 auto;
    }
}

/* ========================================
   MAP DESKTOP — STRICT VIEWPORT FIT
   Prevent the map page from ever creating
   document scrolling while using all space.
   ======================================== */
@media (min-width: 851px) {
    html:has(body.map-page),
    body.map-page {
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow: hidden !important;
    }

    body.map-page .map-content {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 240px;

        width: auto;
        height: auto;
        min-height: 0;
        margin-left: 0;

        box-sizing: border-box;
        padding: 34px 34px 24px 40px;
        overflow: hidden !important;
    }

    body.map-page .map-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: none;
        margin: 0;
        overflow: hidden;
    }

    body.map-page .map-header {
        flex: 0 0 auto;
        padding: 0;
        margin: 0 0 18px;
    }

    body.map-page #cats-map {
        flex: 1 1 0;
        width: 100%;
        height: auto !important;
        min-height: 0;
    }
}


/* ========================================
   ADD YOUR CAT — DECEASED STATUS + CHECKBOX ALIGNMENT
   2026-09-10
   ======================================== */
.add-cat-page .confirmation {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    text-align: left !important;
}

.add-cat-page .confirmation span {
    display: block;
    flex: 1 1 auto;
    text-align: left !important;
}

.add-cat-page .deceased-status-group {
    text-align: left;
}

.add-cat-page .deceased-toggle {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid #e1ddd5;
    border-radius: 5px;
    background: #f7f5f1;
    cursor: pointer;
    text-align: left !important;
}

.add-cat-page .deceased-toggle input {
    width: auto !important;
    min-height: 0 !important;
    margin: 0;
    flex: 0 0 auto;
}

.add-cat-page .deceased-toggle span {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #5f5a54;
    text-align: left;
}

.add-cat-page .death-details-group {
    margin-top: 14px;
}

.add-cat-page .death-details-group[hidden] {
    display: none !important;
}

.add-cat-page .death-details-group label {
    display: block;
    margin-bottom: 8px;
}

.add-cat-page .death-details-group input {
    width: 100%;
    box-sizing: border-box;
}

/* ========================================
   CAT PROFILE — SHARE THIS CAT
   ======================================== */

.cat-profile-page .cat-share {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
}

.cat-profile-page .share-cat-button {
    appearance: none;
    border: 1px solid #cfc9c0;
    background: transparent;
    color: #3f3d39;
    min-height: 38px;
    padding: 9px 15px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 12px;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.cat-profile-page .share-cat-button:hover:not(:disabled) {
    background: #22211f;
    border-color: #22211f;
    color: #fff;
    transform: translateY(-1px);
}

.cat-profile-page .share-cat-button:focus-visible {
    outline: 2px solid #22211f;
    outline-offset: 3px;
}

.cat-profile-page .share-cat-button:disabled {
    opacity: .45;
    cursor: default;
}

.cat-profile-page .share-cat-icon {
    font-size: 16px;
    line-height: 1;
}

.cat-profile-page .share-cat-status {
    color: #8a867f;
    font-size: 11px;
    white-space: nowrap;
}

@media (max-width: 850px) {
    .cat-profile-page .cat-share {
        justify-content: center;
        flex-wrap: wrap;
    }
}