/* ===============================
   1) TOKENS / VARIABLES
=============================== */
:root {
    --bg-main: #F6EFE7;
    --bg-card: #FFFFFF;
    --text-main: #4A3A2A;
    --text-soft: #7A5C48;
    --accent-green: #8FA998;
    --accent-heart: #C97C5D;
    --border-soft: #E6D8CC;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
    --radius-lg: 32px;
    --radius-md: 20px;
    --radius-sm: 12px;
    --container: 1100px;
}

/* Prevent mobile browsers from forcing dark mode on the site */
html {
    color-scheme: only light !important;
    background: #F6EFE7 !important;
}

html,
body,
main,
header,
footer,
section,
article,
nav,
div,
form,
table,
thead,
tbody,
tr,
th,
td {
    forced-color-adjust: none;
}

/* ===============================
   2) RESET / BASE
=============================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

@media (max-width: 480px) {
    html {
        font-size: 17px;
    }
}

body {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #F6EFE7 !important;
    color-scheme: only light !important;
    color: var(--text-main);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 20% 10%, rgba(201, 124, 93, 0.06), transparent 60%),
        radial-gradient(circle at 80% 0%, rgba(143, 169, 152, 0.08), transparent 60%),
        url("https://www.transparenttextures.com/patterns/asfalt-light.png");
    opacity: 0.25;
    pointer-events: none;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;

    background: radial-gradient(circle at 30% 20%, rgba(201, 124, 93, 0.15), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(143, 169, 152, 0.18), transparent 60%);

    animation: bgMove 12s ease-in-out infinite alternate;
}

body::before,
body::after {
    pointer-events: none;
    z-index: -1;

}

@keyframes bgMove {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-40px, 30px) scale(1.1);
    }
}

main {
    flex: 1;
    padding-top: 36px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    background: transparent;
}

.input:focus,
select:focus,
textarea:focus {
    border-color: #8FA998;
    box-shadow: 0 0 0 3px rgba(143, 169, 152, 0.2);
    background: #fff;
}

@media (max-width: 480px) {
    body {
        font-size: 16px;
    }
}

.cursor-glow {
    position: fixed;
    width: 200px;
    height: 200px;
    pointer-events: none;
    border-radius: 50%;

    background: radial-gradient(circle, rgba(143, 169, 152, 0.25), transparent 70%);
    transform: translate(-50%, -50%);
    z-index: 999;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

.profile-wrapper h1 {
    text-align: left;
    margin-bottom: 30px;
}

.profile-page {
    display: grid;
    grid-template-columns: 1fr 500px 1fr;
    align-items: start;
    gap: 30px;
    max-width: 1200px;
    margin: 20px auto 40px;
}

.profile-title {
    grid-column: 1 / 2;
    align-self: start;
}

.profile-form {
    grid-column: 2 / 3;
    max-width: 500px;
}

@media (max-width: 768px) {
    main {
        padding-top: 5px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .profile-page {
        grid-template-columns: 1fr;
    }

    .profile-title {
        grid-column: auto;
        text-align: center;
    }

    .profile-form {
        grid-column: auto;
    }
}

/* ===============================
   3) TYPOGRAPHY
=============================== */
h1,
h2,
h3 {
    font-family: "Playfair Display", serif;
    color: var(--text-main);
}

h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.4px;
    line-height: 1.2;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #7a5c48;
}

h2 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: var(--text-soft);
    letter-spacing: 0.4px;
    margin-top: 45px;
    margin-bottom: 10px;
    padding-top: 24px;
}

p {
    font-size: 16px;
    line-height: 1.7;
}

/* ===============================
   4) HEADER
=============================== */
header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 26px 24px 30px;
    min-height: 140px;
    background: linear-gradient(135deg, #EADBC8, #F6EFE7) !important;
    box-shadow: var(--shadow-soft);
    border-bottom: 1px solid #e5d8cc;
    position: relative;
    z-index: 10;
}

header nav {
    grid-column: 2;
    grid-row: 2;

    width: 100%;

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

    margin-top: 28px;
    padding-bottom: 16px;

    text-align: center;
}



header nav ul {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 32px;

    margin: 0 auto;
    padding: 0;

    list-style: none;
}

header .menu-right {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    justify-content: flex-end;
}

header .menu-toggle {
    display: none;
}

header h1 {
    margin: 0 0 5px;
    font-size: 2.2rem;
    text-align: center;
    width: 100%;
}

/* ===== HEADER LOGO ===== */
.logo {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo-text {
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #6f5a48;
    text-align: center;
    margin-top: 2px;
}

.logo img {
    height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
    mix-blend-mode: normal;
    opacity: 1;
}

.logo img:hover {
    transform: scale(1.15);
}

/* ===============================
   5) NAV
=============================== */
nav ul li {
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: center;
}

nav a {
    text-decoration: none;
    color: var(--text-soft);
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 25px;
    position: relative;
    transition: color 0.25s ease, background 0.25s ease;

    display: inline-flex;
    height: 36px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    gap: 6px;
}

nav a::before {
    content: "🐾︎";
    opacity: 0.25;
    margin-right: 6px;
    color: #7A5C48;
}

nav a.active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

nav a:hover,
nav a.active {
    background: transparent;
    color: #1b4332;
}

nav a::after {
    content: "";
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    width: 0;

    bottom: -4px;

    height: 3px;

    border-radius: 999px;

    background: linear-gradient(90deg,
            rgba(95, 143, 115, 0),
            #8FA998 20%,
            #d7f3df 50%,
            #8FA998 80%,
            rgba(95, 143, 115, 0));

    box-shadow:
        0 0 6px rgba(143, 169, 152, 0.45),
        0 0 14px rgba(143, 169, 152, 0.25);

    opacity: 0.95;

    transition: width 0.25s ease;
}

nav a:hover::after,
nav a.active::after {
    width: 88%;
}



nav a:hover::before {
    opacity: 0.25;
    transform: translateY(-1px);
}

.paw {
    display: none !important;
}


nav a:hover .paw {
    transform: translateY(-1px);
    opacity: 0.35;
}


/* 🐾 PAW COLOR FIX (MOBILE) */
@media (max-width: 768px) {
    header nav a {
        position: relative;
        gap: 7px;
    }

    header nav a::before {
        content: "🐾︎" !important;
        display: inline-block !important;
        opacity: 0.18;
        margin-right: 0;
        font-size: 13px;
        line-height: 1;
        color: #7A5C48;
        transform: translateY(-1px);
    }

    header nav a::after {
        bottom: -8px !important;
        height: 2px;
        background: linear-gradient(90deg,
                rgba(95, 143, 115, 0),
                #8FA998 20%,
                #d7f3df 50%,
                #8FA998 80%,
                rgba(95, 143, 115, 0));
        box-shadow:
            0 0 6px rgba(143, 169, 152, 0.45),
            0 0 14px rgba(143, 169, 152, 0.25);
        opacity: 0.85;
    }

    header nav a:hover::after,
    header nav a.active::after {
        width: 52%;
    }

    header nav .paw,
    header nav .paw-icon,
    header nav .paw svg,
    header nav .paw-icon svg {
        display: none !important;
    }
}

/* ===============================
   6) CARDS / CONTAINERS
=============================== */
.card {
    background: var(--bg-card);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    padding: 25px;
    margin: 25px auto 10px;
    max-width: 900px;
    border: 1px solid var(--border-soft);
}

.auth-card {
    display: flex;
    flex-direction: column;

    align-items: center;

    padding-top: 20px;
    padding-bottom: 30px;

    min-height: auto;
}

.card:last-child {
    margin-bottom: 0;
}

.auth-title {
    text-align: center;
    margin-bottom: 38px;
    padding-top: 6px;
}

@media (max-width: 480px) {
    .auth-card {
        width: 100%;
        max-width: 100%;
        padding: 20px 16px;
    }
}

.auth-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    padding: 20px 0;
}

@media (max-width: 768px) {
    .auth-wrapper {
        min-height: auto;
        padding: 10px;
        margin-bottom: 20px;
    }
}



/* ===== FORM CARD ===== */
.animal-right form,
.auth-card form,
form {
    position: relative;

    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(22px);

    padding: 42px 40px;
    border-radius: 22px;

    max-width: 500px;
    width: 100%;
    margin: 0 auto;

    border: 1px solid rgba(230, 216, 204, 0.35);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);

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

form {
    background: #ffffff;
    border: 1px solid #e6d8cc;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    margin-top: 0px;
}

.animal-right form::before,
.auth-card form::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg,
            rgba(143, 169, 152, 0.35),
            rgba(201, 124, 93, 0.25),
            transparent);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}



.auth-card form:hover {
    transform: translateY(-4px);
}

/* ===== LABELS ===== */
label {
    font-weight: 600;
    color: #5a4636;
    font-size: 12px;
    letter-spacing: 0.2px;
    margin-bottom: 3px;
    display: block;
    margin-top: 4px;
}

.animal-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

/* ===== INPUTS ===== */
input,
select,
textarea {
    width: 100%;
    height: 42px;
    padding: 6px 12px;

    border-radius: 14px;
    border: 1px solid rgba(230, 216, 204, 0.6);

    font-size: 0.92rem;
    color: var(--text-main);

    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);


    transition: all 0.25s ease;
}

input[type="file"] {
    font-size: 12px;
    padding: 6px 10px;
    height: auto;
}

input[type="file"]::file-selector-button {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 10px;
    border: 1px solid #e6d8cc;
    background: #f5efe8;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
    background: #e9dfd5;
}

textarea {
    height: auto;
    min-height: 50px;
    border-radius: 20px;

    padding-top: 14px;
    text-align: left;
    vertical-align: top;
    line-height: 1.4;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #d2c2b4;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #8FA998;

    box-shadow:
        0 0 0 3px rgba(143, 169, 152, 0.18),
        0 10px 25px rgba(0, 0, 0, 0.06);

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

    transform: scale(1.015);
}

input::placeholder,
textarea::placeholder {
    color: #7f6e60;
}

@media (max-width: 480px) {
    form {
        padding: 20px 16px;
        margin: 0 auto;
        gap: 6px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
        height: 52px;
        padding: 12px 14px;
        margin-top: 4px;
    }

    label {
        font-size: 13px;
        margin-top: 8px;
        margin-bottom: 4px;
        opacity: 0.8;
    }

    select {
        height: 52px;
        font-size: 15px;
    }
}

/* ===== TOGGLE SWITCH ===== */
.inline-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 20px;
    background: #ede7df;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.inline-checkbox input[type="checkbox"]:checked {
    background: #8FA998;
}

.inline-checkbox input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease;
}

.inline-checkbox input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.inline-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-right: 6px;
}

.inline-checkbox span {
    flex: 1;
    font-size: 14px;
    color: var(--text-soft);
}

.inline-checkbox input {
    margin-left: 12px;
}

/* ===== BUTTONS ===== */
button {
    background: linear-gradient(135deg, #8FA998, #7F9486);
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 0.95rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    min-width: 140px;
    position: relative;
    overflow: hidden;
}

button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.10),
        0 6px 14px rgba(0, 0, 0, 0.05);
}

button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

button:focus {
    outline: none;
    box-shadow: none;
}

button.urgent {
    background: var(--accent-heart);
}

form button {
    width: 100%;
    padding: 14px 22px;
    font-size: 15px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1b4332, #0f2e23);
    color: #fff;
    box-shadow:
        0 18px 40px rgba(27, 67, 50, 0.45),
        0 6px 14px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

form button:active {
    transform: scale(0.97);
}

form button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -90%;
    width: 80%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: 0.6s;
}

form button:hover::before {
    left: 120%;
}

form button:hover {
    transform: translateY(-3px) scale(1.02);
}

.btn-primary {
    background: linear-gradient(135deg, #1b4332, #145a41);
    color: #fff;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    letter-spacing: 0.3px;
    box-shadow: 0 12px 28px rgba(15, 61, 46, 0.25);
    transition: all 0.25s ease;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 18px 38px rgba(15, 61, 46, 0.35);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #8FA998, #7F9486);
    color: #fff;
    border: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.color-btn:focus-visible {
    box-shadow: none;
}

.btn-full {
    width: 100%;
}

.btn-primary::before,
.btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -90%;
    width: 80%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: 0.6s;
    pointer-events: none;
}

.btn-primary:hover::before,
.btn-secondary:hover::before {
    left: 120%;
}

@keyframes shineMove {
    0% {
        left: -90%;
    }

    100% {
        left: 120%;
    }
}

.btn-shine.auto::before {
    animation: shineMove 2.5s infinite;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-state .btn-primary {
    margin-top: 44px;
}

/* ---- User Menu ---- */
.user-menu {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    gap: 6px;
    padding: 0px 10px;
    margin-right: 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff, #f3ede6);
    border: 1px solid rgba(74, 58, 42, 0.08);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    width: auto;
    max-width: 160px;
    height: 32px;
}

.user-menu:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, #ffffff, #e9e1d8);
}

.user-menu:hover .user-name {
    color: #1b4332;
}

.user-menu:hover .user-icon {
    transform: scale(1.08);
    box-shadow: 0 10px 22px rgba(168, 156, 118, 0.45);
}

.user-icon {
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #8FA998, #6f8e7f);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(143, 169, 152, 0.35);
}

.user-name {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4a3a2a;
}

@media (max-width: 480px) {
    .user-name {
        display: none;
    }

    .user-icon {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
}

/* Header fav & cart links */
.header-right,
.menu-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-fav-link,
.header-cart-link {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    transition: 0.2s ease;
    transform: none;
}

.header-fav-link:hover,
.header-cart-link:hover {
    background: rgba(0, 0, 0, 0.08);
}

.header-right {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    position: static;
}

@media (max-width: 768px) {
    .header-right {
        justify-content: flex-end;
        gap: 2px;
    }
}

/* ===============================
   7) PASSWORD / HELP
=============================== */
.help {
    display: none;
    font-size: 11px;
    color: var(--text-soft);
    opacity: 0.9;
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.password-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.password-wrapper input {
    width: 100%;
    height: 48px;
    padding: 0 45px 0 16px;
    border-radius: 16px;
    font-size: 15px;
    background: #fdfbf9;
    border: 1px solid rgba(230, 216, 204, 0.55);
    transition: all 0.2s ease;
}

.password-wrapper:focus-within .help {
    display: block;
}

.toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    z-index: 5;
    opacity: 0.65;
    pointer-events: auto;
    line-height: 1;
}

.toggle-password:hover {
    opacity: 1;
}

/* ===============================
   8) ALERTS / MESSAGES
=============================== */
.error {
    background: #ffe9e9;
    border: 1px solid #ffcaca;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    color: #8a2e2e;
    font-size: 14px;
}

.errors {
    position: relative;

    background: rgba(143, 169, 152, 0.18);
    backdrop-filter: blur(14px);

    border: 1px solid rgba(143, 169, 152, 0.35);
    padding: 18px 22px;
    border-radius: 18px;

    margin: 25px auto;
    max-width: 420px;

    color: #3e2f23;
    font-size: 14px;

    box-shadow:
        0 12px 35px rgba(143, 169, 152, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);

    text-align: left;

    animation: fadeInUp 0.45s ease;
}

.errors::before {
    content: "!";
    position: absolute;
    top: -10px;
    left: 20px;
    background: #8FA998;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.errors:hover {
    transform: translateY(-2px);
}

/* title */
.errors strong {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1b4332;
}

/* list */
.errors ul {
    margin: 0;
    padding-left: 18px;
}

.errors li {
    margin-bottom: 6px;
    position: relative;
}

.success-message {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: calc(100% - 24px);

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(236, 244, 239, 0.85));
    backdrop-filter: blur(14px);

    color: #2f4f3e;

    padding: 14px 22px;
    border-radius: 18px;

    font-weight: 600;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;

    border: 1px solid rgba(143, 169, 152, 0.25);

    box-shadow:
        0 12px 35px rgba(143, 169, 152, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.05);

    opacity: 0;
    transition: all 0.35s ease;

    z-index: 9999;
}



.success-message.show {
    opacity: 1;
    transform: translateX(-50%) translateY(20px);
}

.success-message::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #8FA998;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 20px;
    margin-top: 1px;
}



@media (max-width: 480px) {
    .success-message {
        position: fixed;
        top: 46px;
        left: 50%;
        transform: translateX(-50%);

        display: flex;
        align-items: center;
        gap: 6px;

        width: auto;
        width: fit-content;
        max-width: calc(100vw - 40px);
        font-size: 12px;

        white-space: nowrap;

        padding: 10px 12px;
        border-radius: 18px;

        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(12px);

        font-size: 13px;
        line-height: 1.35;
        font-weight: 500;

        color: #425548;

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

        z-index: 9999;
    }



    .success-message.show {
        transform: translateX(-50%) translateY(10px);

    }

    .success-message::before {
        width: 18px;
        height: 18px;
        font-weight: 600;
        flex: 0 0 18px;
    }
}


/* ===============================
   9) AUTH
=============================== */
.auth-links {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 20px;

}

.auth-links a {
    color: var(--text-soft);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    opacity: 0.9;
}

.auth-links a:hover {
    text-decoration: underline;
    opacity: 0.7;
}

.auth-card:hover {
    transform: translateY(-2px);
}

/* ===============================
   10) PHONE GROUP
=============================== */
.phone-group {
    display: flex;
    height: 48px;
    margin-top: 6px;
    align-items: stretch;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

.phone-group:focus-within {
    border-color: var(--accent-green);
    box-shadow:
        0 0 0 3px rgba(143, 169, 152, 0.18),
        0 8px 18px rgba(0, 0, 0, 0.05);
}

.phone-group select {
    flex: 0 0 92px;
    height: 100%;
    margin: 0;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
    padding: 0 26px 0 12px;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: #9c8a7a;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A5C48' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.phone-group input {
    flex: 1;
    height: 100%;
    margin: 0;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-size: 1rem;
    color: var(--text-main);
}

.phone-group input:focus,
.phone-group select:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

/* ===============================
   11) TABLES
=============================== */
table {
    width: 100%;
    margin: 30px auto;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

th,
td {
    padding: 12px;
    text-align: left;
}

th {
    background: #EADBC8;
    color: var(--text-main);
    font-size: 14px;
}

td:last-child,
th:last-child {
    min-width: 120px;
    white-space: nowrap;
}

td:nth-child(9),
th:nth-child(9) {
    width: 110px;
    text-align: center;
}

tr:nth-child(even) {
    background: #FAF5EF;
}

tr {
    transition: 0.2s ease;
}

tr:hover {
    background: #f9f5f1;
}

td:nth-child(7) {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

td:nth-child(9) img {
    width: 70px;
    height: 70px;
}

table img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    border-radius: 10px;
}

td {
    vertical-align: middle;
}

.actions-cell {
    text-align: center;
    vertical-align: middle;
}

.actions-cell-td {
    text-align: center;
}

.actions-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.actions-vertical a {
    width: auto;
    height: auto;
    padding: 8px 10px;
    margin-bottom: 6px;
    position: relative;
}

.actions-vertical a:hover {
    transform: translateY(-2px);
}

.btn-view:hover {
    transform: scale(1.1);
}

/* ===============================
   12) IMAGE SAFETY
=============================== */
.page-content img {
    border-radius: 14px;
}

.logo img,
.footer-logo img,
.paw-icon img,
.cards img {
    border-radius: 0;
}




/* ===============================
   COOKIE TOGGLES (ADD SWITCHES)
=============================== */
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
}

.toggle-label {
    font-size: 14px;
    font-weight: 500;
}

.toggle-sub {
    font-size: 12px;
    opacity: 0.6;
}

.toggle {
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    cursor: pointer;
    transition: all 0.25s ease;
}

.toggle-thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.25s ease;
}

.toggle.on {
    background: #2d6a4f;
}

.toggle.on .toggle-thumb {
    left: 22px;
}

.toggle.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle:hover {
    transform: scale(1.05);
}

/* ===============================
   COOKIE SYSTEM (ISOLATED)
=============================== */

/* overlay ONLY for cookies */
.cookie-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    display: none !important;
    align-items: center;
    justify-content: center;
    z-index: 99999 !important;
}

.cookie-overlay.active {
    display: flex !important;
}

/* GREEN COOKIE MODAL ONLY */
.cookie-modal {
    background: linear-gradient(135deg, #0f2e23, #1b4332);
    color: #fff;
    padding: 28px 30px;
    border-radius: 18px;
    max-width: 380px;
    width: 92%;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35),
        0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* text inside cookie */
.cookie-modal .toggle-label,
.cookie-modal .toggle-sub {
    color: rgba(255, 255, 255, 0.9);
}

.cookie-modal .toggle-sub {
    opacity: 0.7;
}

/* buttons inside cookie */
.cookie-modal .modal-actions button {
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 600;
}

.cookie-modal .modal-actions .accept {
    background: #fff;
    color: #1b4332;
}

.cookie-modal .modal-actions .settings {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}



.modal.show .modal-content {
    transform: translate(-50%, -50%);
}

.modal-content p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.modal-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 16px;
    width: 100%;
}



.modal-actions a,
.modal-actions button {

    flex: 1;
    height: 48px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;

}


.modal-actions .btn {
    transition: all 0.2s ease;
}

.modal-actions .btn:hover {
    transform: translateY(-2px);
}

.confirmLogout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-width: 0;
    height: 46px;
    background: linear-gradient(135deg, #d89a7e, #c67f5f);
    color: #fff;
    padding: 0;
    box-sizing: border-box;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow:
        0 12px 26px rgba(200, 130, 100, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.06);
    font-size: 15px;
    letter-spacing: 0.3px;
    height: 52px;
    font-size: 16px;
}

.confirmLogout:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 34px rgba(200, 130, 100, 0.32),
        0 6px 14px rgba(0, 0, 0, 0.08);
}

#cancelLogout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #1b4332, #0f2e23);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 12px 28px rgba(27, 67, 50, 0.35);
    font-size: 15px;
    letter-spacing: 0.3px;
    height: 52px;
    font-size: 16px;
}

#cancelLogout:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(143, 169, 152, 0.45);
}

#logoutBtn.active::after {
    width: 75%;
}

/*--- POOPUP ---- */

.modal-actions button,
.modal-actions a {
    flex: 1;
    max-width: none;
}


.premium-modal {
    transform: scale(0.92);
    opacity: 0;
    animation: modalPop 0.35s ease forwards;
}

@keyframes modalPop {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 90vw;
        max-width: 320px;
        max-height: 90vh;
        overflow-y: auto;
        padding: 16px;
        border-radius: 16px;
        align-items: center;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .modal-content p {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .modal-actions {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
    }
}

/* OVERLAY */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
}

.modal.active {
    display: flex;
}

/* OVERLAY */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
}

.modal.show {
    display: flex;
}

/* CARD */
.modal-content {
    background: linear-gradient(180deg, #ffffff, #f9f6f2);
    padding: 32px 34px;
    border-radius: 18px;
    max-width: 420px;
    width: 92%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.25),
        0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.25s ease;
}

.modal.show .modal-content {
    opacity: 1;
    transform: scale(1);
}

.modal.active .modal-content {
    opacity: 1;
    transform: scale(1);
}


.banner-wrap {
    position: fixed;

    left: 50%;
    bottom: 24px;

    transform: translateX(-50%);
    backdrop-filter: blur(18px);

    width: calc(100% - 40px);
    max-width: 640px;

    z-index: 99999;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.10),
        0 4px 14px rgba(0, 0, 0, 0.06);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.banner-wrap.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;

    transform: translateX(-50%) translateY(0);
}

/* ===============================
   14) FOOTER
=============================== */
.site-footer {
    background: linear-gradient(180deg, #e9dccb, #d8c5af);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.04);
    padding: 14px 10px;
    margin-top: 0px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.footer-container {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.footer-logo {
    padding: 4px 0;
}

.footer-logo img {
    max-width: 100px;
    opacity: 0.95;
    transition: transform 0.3s ease;
}

.footer-logo img:hover {
    transform: scale(1.05);
}

.footer-brand {
    font-size: 13px;
    font-weight: 600;
    color: #4a3a2a;
    margin-top: 2px;
    margin-bottom: 0;
}

.footer-slogan {
    font-size: 12px;
    color: #7a5c48;
    margin-top: -2px;
    line-height: 1.2;
}

.footer-divider {
    width: 40px;
    height: 2px;
    background: #cbb8a5;
    border-radius: 2px;
    margin: 2px 0;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #5a4636;
    margin-top: 2px;
}


.footer-contact a {

    position: relative;
    text-decoration: none;
    color: inherit;
}

/* գիծը (սկզբում թաքնված) */
.footer-contact a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: #8fa998;
    transition: width 0.3s ease;
}

/* hover-ի ժամանակ բացվումա */
.footer-contact a:hover::after {
    width: 100%;
}

.legal-page {
    max-width: 820px;
    margin: 40px auto;
    padding: 40px 30px;

    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(18px);

    border-radius: 28px;
    border: 1px solid rgba(230, 216, 204, 0.5);

    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);

    line-height: 1.65;
}

@media (max-width: 480px) {
    .legal-page {
        padding: 22px 14px;
        margin: 20px 10px;
        border-radius: 18px;
    }

    .legal-page h1 {
        font-size: 22px;
    }

    .legal-page h2 {
        font-size: 18px;
    }

    .legal-page p {
        font-size: 14px;
    }
}

.legal-page h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    letter-spacing: 0.5px;
}

.legal-page h2 {
    margin-top: 28px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #6f5a48;
    position: relative;
}

.legal-page h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin-top: 6px;
    background: linear-gradient(90deg, #c97c5d, #8FA998);
    border-radius: 2px;
}

.legal-page p {
    margin-bottom: 10px;
    font-size: 15px;
    color: #5c4a3a;
}

.legal-page section {
    margin-bottom: 22px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.footer-legal {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
}

/* LINKS */
.footer-legal a {
    text-decoration: none;
    color: rgba(74, 58, 42, 0.65);
    position: relative;
    font-weight: 500;
    transition: color 0.25s ease;
    white-space: nowrap;
}

/* elegant underline (centered premium) */
.footer-legal a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, #c97c5d, #8FA998);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.footer-legal a:hover {
    color: #1b4332;
    letter-spacing: 0.3px;
}

.footer-legal a:hover::after {
    width: 100%;
}

/* separator */
.footer-separator {
    opacity: 0.4;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 12px 12px;
    }

    .footer-container {
        gap: 6px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .footer-logo img {
        max-width: 95px;
    }

    .footer-brand {
        font-size: 12px;
    }

    .footer-slogan {
        font-size: 11px;
    }

    .footer-contact {
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    .site-footer {
        padding: 10px 10px;
    }

    .footer-container {
        padding-top: 6px;
        padding-bottom: 6px;
        gap: 4px;
    }

    .footer-logo img {
        max-width: 85px;
    }

    .footer-brand {
        font-size: 11px;
    }

    .footer-slogan {
        font-size: 10px;
    }

    .footer-contact {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding: 8px 8px;
    }

    .footer-container {
        gap: 3px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .footer-logo img {
        max-width: 75px;
    }

    .footer-brand {
        font-size: 10px;
    }

    .footer-slogan {
        font-size: 9px;
    }

    .footer-contact {
        font-size: 9px;
    }

    .footer-legal {
        gap: 6px;
        font-size: 9px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .footer-separator {
        opacity: 0.25;
    }
}

/* ===============================
   15) AJAX POPUP
=============================== */
.cart-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: #fff;
    padding: 30px;
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.popup-content a {
    margin: 10px;
    display: inline-block;
}

/* ===============================
   16) ANIMAL VIEW
=============================== */
main.animal-view {
    max-width: 880px;
    margin: 70px auto;
    padding: 70px 60px;
    background: #fff;
    border-radius: 40px;
    border: 1px solid #f0e3d9;
    box-shadow:
        0 40px 100px rgba(201, 124, 93, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.05);
}

/* ===== MOBILE FIX ANIMAL VIEW ===== */
@media (max-width: 480px) {

    main.animal-view {
        width: calc(100% - 14px) !important;

        margin: 8px auto 18px !important;

        padding: 14px 10px 18px !important;

        border-radius: 18px !important;
    }

    .emergency-box {
        padding: 12px !important;
        border-radius: 16px !important;
        margin-bottom: 18px !important;
    }

    .animal-header h1 {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    .photos img {
        width: 170px !important;
        height: 170px !important;
    }

    .animal-info-card {
        padding: 18px 14px !important;
        border-radius: 18px !important;
    }

    textarea {
        width: 100% !important;
        font-size: 15px !important;
    }

    .animal-view .actions {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 12px !important;
    }

    .animal-view .actions .action-btn {
        margin-top: 8px !important;
        height: 56px !important;
        padding: 14px 18px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 999px !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
    }

    .animal-view .actions .action-btn:active {
        transform: scale(0.97);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }



    /* FIRST MAIN BUTTON (CALL OWNER) */
    .animal-view .emergency-box .action-btn:first-child {
        width: 100% !important;
        height: auto !important;
        padding: 12px 28px !important;
        margin-top: 12px;
        font-size: 14px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        white-space: normal !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }





    /* SECOND BUTTON (lighter style) */
    .animal-view .emergency-box .action-btn:nth-child(2) {
        width: 100% !important;
        height: 42px !important;
        font-size: 13px !important;
        opacity: 0.9;
    }
}

.animal-view .action-group {
    display: flex;
    gap: 16px;
}

@media (max-width: 768px) {
    .animal-view .action-group {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .animal-view .action-group .action-btn {
        width: 100% !important;
        height: 52px !important;
        font-size: 14px !important;
        white-space: normal !important;
        text-align: center;
    }

    .animal-view .bottom-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

.animal-view .action-group .action-btn {
    flex: 1;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    line-height: 1.3;
    border-radius: 999px;
    box-sizing: border-box;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    text-decoration: none;
    margin: 0;
    margin-bottom: 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
}



.animal-view button.action-btn,
.animal-view a.action-btn {
    padding: 0;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.animal-view .bottom-actions {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.animal-view .bottom-actions .action-btn {
    flex: 1;
}

.animal-view .actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    align-items: stretch;
}

.animal-view .actions .action-btn {
    flex: 1;
    height: 52px;
    font-size: 14px;
    border-radius: 999px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}



.animal-view .actions .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.action-btn.green,
.action-btn.sage {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.action-btn.green {
    background: linear-gradient(135deg, #1b4332, #0f2e23);
    color: #fff;
    box-shadow: 0 15px 40px rgba(27, 67, 50, 0.35);
}

.action-btn.sage {
    background: linear-gradient(135deg, #8fa998, #6f8e7f);
    color: #fff;
    box-shadow: 0 15px 35px rgba(143, 169, 152, 0.4);
}

.action-btn:hover {
    transform: translateY(-3px);
}

.action-group {
    display: flex;
    gap: 16px;
}

.action-group>* {
    flex: 1;
    align-items: center;
}

@media (max-width: 768px) {
    .action-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ===============================
   17) TOAST
=============================== */
.toast-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 9999;
}

.toast-overlay.show {
    opacity: 1;
}

.toast-box {
    background: white;
    padding: 20px 28px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transform: translateY(20px) scale(0.95);
    transition: 0.3s ease;
}

.toast-box.success {
    border-left: 5px solid #1b4332;
}

.toast-box.error {
    border-left: 5px solid #c97c5d;
}

.toast-overlay.show .toast-box {
    transform: translateY(0) scale(1);
}

.toast-icon {
    font-size: 22px;
}

.toast-box.success .toast-icon {
    color: #1b4332;
}

.toast-box.error .toast-icon {
    color: #c97c5d;
}

.toast-text {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    white-space: pre-line;
}

.toast-success {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: linear-gradient(135deg, #1b4332, #0f2e23);
    color: #fff;
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 15px 40px rgba(27, 67, 50, 0.35);
    opacity: 0;
    transition: all 0.35s ease;
    z-index: 9999;
}

.toast-success.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#cart-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    background: rgba(30, 20, 10, 0.9);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
    z-index: 9999;
}

#cart-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.top-alert {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(255, 255, 255, 0.95);
    color: #5a3c12;
    padding: 10px 20px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: all 0.35s ease;
    z-index: 9999;
}

.top-alert.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===============================
   18) ANIMAL PAGES
=============================== */
.animal-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.animal-container {
    display: flex;
    gap: 60px;
    align-items: center;
    background: white;
    padding: 40px 50px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    max-width: 900px;
    width: 100%;
}

.animal-container:hover {
    transform: translateY(-5px);
}

.animal-info {
    flex: 1;
}

.animal-info h1 {
    font-size: 32px;
    margin-bottom: 20px;
}

.animal-info p {
    margin: 8px 0;
    color: #5c4a3a;
}

.animal-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.animal-photo {
    width: 260px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.animal-photo:hover {
    transform: scale(1.05);
}

.current-photo {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.animal-preview {
    width: 100%;
    max-width: 260px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.25s ease;
}

.animal-preview:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    .animal-wrapper {
        margin-top: 60px;
        padding: 0 25px;
    }

    .animal-container {
        flex-direction: column;
        text-align: center;
        padding: 25px;
        gap: 25px;
    }

    .animal-image {
        justify-content: center;
    }

    .animal-photo {
        width: 200px;
    }

    .animal-info h1 {
        font-size: 26px;
    }
}

@media (max-width: 1024px) {
    .animal-container {
        gap: 30px;
        padding: 30px;
    }

    .animal-photo {
        width: 220px;
    }
}

.animal-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.animal-page h1 {
    margin-top: 10px;
    margin-bottom: 18px;
    font-size: 24px;
    color: #6f5a48;
    text-align: center;
    font-weight: 600;
    position: relative;
}

.animal-page h1::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, #c97c5d, #a95c3f);
    border-radius: 3px;
}

.animal-left {
    display: flex;
    justify-content: center;
    width: 100%;
}

.animal-right form {
    margin: 0 auto;
    max-width: 100%;
    background: linear-gradient(160deg, #fbf7f2, #f2ebe3);
    border-radius: 28px;
    padding: 40px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid #efe3d8;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.animal-right form:hover {
    transform: none;
    box-shadow: none;
}

.animal-page form {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .animal-page {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 16px;
    }

    .animal-left {
        justify-content: center;
        text-align: center;
    }
}

.emergency-box {
    margin-bottom: 50px;
    padding: 35px;
    border-radius: 28px;
    background: linear-gradient(135deg, #fff7f1, #fbe8dc);
    border: 1px solid #f3d5c4;
    box-shadow: 0 15px 40px rgba(201, 124, 93, 0.15);
}

.animal-header h1 {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.3px;
}

.photos {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.photos img {
    width: 230px;
    height: 230px;
    object-fit: cover;
    border-radius: 26px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease;
}

.photos img:hover {
    transform: translateY(-6px) scale(1.02);
}

.animal-info-card {
    margin-bottom: 50px;
    padding: 40px;
    border-radius: 24px;
    background: linear-gradient(160deg, #fbf7f2, #f2ebe3);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
}

.animal-info-card p {
    margin: 12px 0;
    font-size: 16px;
}

.btn-edit,
.btn-delete {
    font-size: 16px;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.btn-edit:hover,
.btn-delete:hover {
    transform: translateY(-3px) scale(1.15);
}

.upload-hint {
    font-size: 12px;
    color: #8a7463;
    margin-top: 2px;
    font-style: italic;
}

/* ===============================
   19) QR PHOTOS CELL
=============================== */
.photos-cell {
    display: flex;
    align-items: center;
    /* center horizontally */
    justify-content: center;
    gap: 6px;
    text-align: center;
    flex-direction: column;
}

.photos-cell img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin: 0 auto 4px;
    transform: translateX(28px);
    /* slight move to the right */
}

.photos-cell span,
.photos-cell small,
.photos-cell p {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #7A5C48;
    text-align: center;
}

/* ===============================
   PHOTOS CELL: MOBILE OVERRIDE
=============================== */
@media (max-width: 768px) {
    .photos-cell {
        align-items: flex-start;
        text-align: left;
    }

    .photos-cell img {
        transform: none;
        margin: 0 0 4px 0;
    }
}

/* ===============================
   20) FLASH / MISC
=============================== */
.flash-success {
    animation: fadeIn 0.5s ease;
    padding: 12px 20px;
    margin: 10px auto 20px;
    max-width: 600px;
    color: #8FA998;
    border-radius: 12px;
    font-weight: 600;
}

hr {
    width: 200px;
    margin: 40px auto;
    border: none;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right, transparent, #d6c3b2, transparent);
}

/* ===============================
   21) LIVRAISON
=============================== */
.livraison-page {
    background-color: #f5efe8;
    min-height: 100vh;
    width: 100%;
}

.livraison-page main {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 16px 0;
}

.livraison-page .form-group {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 12px !important;
}

.delivery-form .form-row {
    display: flex;
    gap: 14px;
}

.delivery-form .form-row .form-group {
    padding: 0;
}

.delivery-form .form-row .form-group:first-child {
    flex: 2;
}

.delivery-form .form-row .form-group:last-child {
    flex: 2.5;
}

.delivery-form select[name="civilite"] {
    max-width: 140px;
}

.form-group label {
    margin-bottom: 4px;
    margin-top: 2px;
    margin-left: 12px;
}

.delivery-container {
    position: relative;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.95),
            rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px);
    padding: 20px 32px 40px;
    border-radius: 30px;
    box-shadow:
        0 60px 120px rgba(0, 0, 0, 0.12),
        0 20px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(230, 216, 204, 0.4);
    transition: all 0.35s ease;
}

.delivery-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg,
            rgba(143, 169, 152, 0.35),
            rgba(201, 124, 93, 0.25),
            transparent);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

.delivery-form {
    padding: 0 12px;
}

.delivery-container h2 {
    margin-top: 0;
    margin-bottom: 25px;
}

.delivery-form input[name="code_postal"] {
    max-width: 160px;
}

.delivery-form input[name="appartement"] {
    max-width: 220px;
}

.delivery-form input[name="ville"] {
    max-width: 320px;
}

.delivery-form input[name="phone"] {
    max-width: 260px;
}

.delivery-form [name="pays"] {
    max-width: 260px;
}

.delivery-form input,
.delivery-form select {
    width: calc(100% - 24px);
    margin: 0 12px;
    margin-top: 2px;
    height: 52px;
    font-size: 16px;
    padding: 8px 12px;
    background: #faf8f6;
}

.delivery-form .livraison-options {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

.delivery-form button {
    width: calc(100% - 24px);
    margin: 25px 14px 14px 12px;
    background: var(--accent-green);
}

.livraison-page form {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.livraison-options {
    margin-top: 35px;
    margin-left: 12px;
    margin-right: 12px;
}

.livraison-options label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 17px;
    background: linear-gradient(180deg, #f8f4ef, #f1eae2);
    border: 1px solid #e4d8cd;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.livraison-options label:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

.livraison-options label:has(input:checked) {
    background: #ffffff;
    border-color: rgba(143, 169, 152, 0.6);
    box-shadow:
        0 16px 36px rgba(143, 169, 152, 0.18),
        0 6px 16px rgba(0, 0, 0, 0.05);
    transform: scale(1.01);
}

.livraison-options .form-group {
    position: relative;
}

.livraison-text {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    gap: 2px;
}

.livraison-price {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-soft);
    opacity: 0.8;
}

.livraison-options input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    border: 2px solid #cbbfb5;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.25s ease;
}

.livraison-options input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    transform: scale(0);
    transition: transform 0.2s ease;
}

.livraison-options input[type="radio"]:checked {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(143, 169, 152, 0.12);
}

.livraison-options input[type="radio"]:checked::before {
    transform: scale(1);
}

.livraison-options label:has(input[type="radio"]:checked) {
    background: #ffffff;
    border-color: rgba(143, 169, 152, 0.55);
    box-shadow: 0 10px 24px rgba(143, 169, 152, 0.15);
}

@media (max-width: 480px) {
    .livraison-page {
        padding-top: 0px;
    }





    .delivery-container {
        padding: 22px 16px;
        border-radius: 18px;
    }

    .delivery-container h2 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .form-group label {
        font-size: 13px;
    }

    .delivery-form button {
        height: 44px;
        font-size: 14px;
    }
}

/* ===============================
   22) PAYMENT
=============================== */
.payment-container {
    text-align: center;
    min-height: 65vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    gap: 14px;


    padding-top: 25px;

    padding-bottom: 20px;

}

.payment-subtitle {
    font-size: 14px;
    color: #8a8a8a;
    margin-bottom: 6px;
}

.payment-form {
    width: 90%;
    max-width: 600px;
    margin: 20px auto;
    padding: 24px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    margin-top: 12px;
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row input {
    height: 46px;
    font-size: 15px;
}

.payment-recap {
    background: #f8f5f2;
    border-radius: 18px;
    padding: 20px;
    margin: 24px auto 16px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-soft);
}

.recap-line {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
}

.recap-line.total {
    border-top: 1px solid #eee6df;
    padding-top: 12px;
    font-weight: 700;
}

.payment-container .btn-primary {
    width: 100%;
    max-width: 530px;
    margin: 10px auto;
    display: block;
}

.payment-success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    min-height: calc(100vh - 160px);
    animation: fadeInUp 0.6s ease;
}

.order-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 140px);
    padding: 20px;
    gap: 14px;
    animation: fadeInUp 0.6s ease;
}

.order-confirmation h2 {
    padding-top: 0 !important;
    margin-top: 0 !important;
    font-size: 26px;
    font-weight: 700;
    color: #6f5a48;
}

.order-confirmation p {
    font-size: 15px;
    color: #7a5c48;
}

.order-confirmation .btn-primary {
    margin-top: 22px;
    padding: 14px 30px;
    font-size: 15px;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(15, 61, 46, 0.35);
}

.success-title {
    font-size: 26px;
    font-weight: 700;
    color: #6f5a48;
}

.success-text {
    font-size: 14px;
    color: #7a5c48;
    margin-top: 6px;
}

.success-note {
    font-size: 13px;
    color: #9a8574;
    margin-top: 8px;
}

.success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #8FA998, #6f8e7f);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    margin-right: 8px;
    box-shadow: 0 6px 14px rgba(143, 169, 152, 0.35);
}

.payment-success-container .btn-primary {
    margin-top: 22px;
    padding: 14px 30px;
    font-size: 15px;
    box-shadow: 0 12px 30px rgba(15, 61, 46, 0.35);
}


@media (max-width: 480px) {
    .payment-success-container .btn-primary {
        width: 100%;
        max-width: 280px;
        height: 56px;
        font-size: 18px;
        border-radius: 999px;
        box-shadow: 0 16px 40px rgba(15, 61, 46, 0.45);
    }

    main.order-confirmation {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: calc(100vh - 140px);
        padding: 20px;
        gap: 14px;
        width: 100% !important;
        max-width: 420px;
        margin: 0 auto;
        animation: fadeInUp 0.6s ease;
    }

    .success-title,
    .order-confirmation h2 {
        font-size: 24px;
    }

    .success-text,
    .order-confirmation p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .payment-form {
        width: 92%;
        padding: 18px;
    }

    .recap-line {
        font-size: 13px;
        align-items: flex-start;
        gap: 10px;
    }

    .recap-line span:first-child {
        text-align: left;
        display: block;
        max-width: 70%;
        line-height: 1.4;
    }

    .payment-recap {
        width: 92%;
        padding: 18px;
        border-radius: 16px;
    }
}

.success-toast {

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

    margin: 0 auto 22px;

    padding: 0;

    text-align: center;

    background: transparent;
    border: none;
    box-shadow: none;

    color: #6f8e7f;

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

@media (max-width: 480px) {

    .success-toast {

        max-width: 100%;
        margin: 0 auto 18px;
        padding: 12px 14px;
        font-size: 13px;
        line-height: 1.4;
        border-radius: 14px;
        text-align: center;
    }

}

/* ===============================
   23) PRODUCT PAGE
=============================== */
.info-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 30px;
    position: sticky;
    top: 100px;
    align-self: start;
}

@media (max-width: 768px) {
    .info-box {
        position: static;
        padding-left: 0;
    }
}

.info-message {
    font-size: 13px;
    color: #7A5C48;
    background: #F6EFE7;
    padding: 10px 12px;
    border-radius: 12px;
    margin-top: 8px;
    border: 1px solid #E6D8CC;
    line-height: 1.4;
    max-width: 340px;
}

.info-message .icon {
    margin-right: 6px;
}

.info-box h1,
.info-box h2,
.info-box p,
.info-box span,
.info-box div {
    text-align: left;
}

.info-box h1 {
    font-size: 44px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.info-box p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-soft);
    margin-top: 5px;
}

.color-options {
    justify-content: flex-start;
    margin-top: 12px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.info-box ul {
    margin: 20px 0 0 20px;
}

.info-box li {
    text-align: left;
}

.product-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
}

.product-actions button {
    flex: 1;
    min-width: 140px;
}

.product-actions button:first-child {
    background: linear-gradient(135deg, #8FA998, #7F9486);
}

.product-actions button:last-child {
    background: linear-gradient(135deg, #1b4332, #0f2e23);
}

.product-actions .btn-full {
    width: 100%;
}

.product-title {
    min-height: 60px;
}

.swipe-indicator {
    font-size: 13px;
    color: #777;
    margin-top: 5px;
}

.produit-page main {
    padding: 40px 28px;
}

.produit-page .img-box {
    max-width: 900px;
    padding: 0;
}

.main-image {
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}

.main-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.thumbnails {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    width: 80%;
    max-width: 600px;
    margin: 14px auto 0;
    padding-bottom: 6px;
    justify-content: flex-start;
}

.thumbnails img {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    object-fit: cover;
    background: #fff;
    padding: 4px;
    border-radius: 10px;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thumbnails img:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.thumbnails img.active {
    opacity: 1;
    border: 2px solid #d4af37;
}

.color-btn {
    padding: 8px 22px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    font-family: "Playfair Display", serif;
    text-transform: uppercase;
    font-size: 12px;
    min-width: 140px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-btn[data-color="gold"] {
    background: linear-gradient(145deg, #fbe7b9 0%, #e2b85c 50%, #c89f3d 50%, #f5d892 100%);
    color: #5a3e10;
    letter-spacing: 0.5px;
    border: 2px solid #ba8c22;
}

.color-btn[data-color="silver"] {
    background: linear-gradient(145deg, #f7f7f7, #d6d6d6);
    color: #676666;
    letter-spacing: 0.5px;
    border: 2px solid #5f6368;
}

.color-btn.selected {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.color-btn:hover {
    transform: translateY(-2px);
}

.size-choice {
    margin-top: 20px;
}

.size-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.size-btn {
    padding: 10px 0;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #8FA998, #6f8e7f);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 140px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: 0.85;
}

.size-btn.active.gold {
    background: linear-gradient(145deg, #fbe7b9, #c89f3d);
    color: #5a3e10;
    opacity: 1;
    box-shadow: 0 10px 26px rgba(201, 162, 77, 0.45);
}

.size-btn.active.silver {
    background: linear-gradient(135deg, #d9d9d9, #bfc3c7);
    color: #4a4a4a;
    opacity: 1;
    box-shadow: 0 10px 24px rgba(180, 180, 180, 0.4);
}

.size-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.image-block {
    margin: 40px 0;
}

.image-block img {
    width: 100%;
    max-width: 700px;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .produit {
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
        overflow-x: hidden;

        max-width: 100%;
        padding: 10px 0;

        margin-top: 0;
    }

    .produit-page main {
        padding-left: 10px;
        padding-right: 10px;
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }


    .img-box {
        width: 100%;
        margin-top: 0;
    }

    .main-image {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 15px;
        margin-top: 0;
    }

    .main-image img {
        border-radius: 20px;
    }

    .thumbnails {
        display: flex;
        gap: 5px;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        justify-content: center;
    }

    .thumbnails img {
        width: 50px;
        height: 50px;
        flex: 0 0 auto;
    }

    .info-box {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
    }

    .product-actions {
        width: 100%;
        align-items: center;
        margin-top: 22px;
        margin-bottom: 10px;
    }

    .product-actions button {
        width: 100%;
        max-width: 300px;
        height: 46px;
    }
}

/* ===============================
   24) PANIER
=============================== */
.cart-container .lv-qty form {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    display: inline-flex !important;
}

.cart-container .lv-qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e6d8cc;
    border-radius: 10px;
    padding: 3px 8px;
}

.cart-container .qty-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin-top: 6px;
}

.cart-container .lv-qty .delete-form {
    padding-right: 6px;
}

.cart-container .lv-qty .qty-form {
    padding-left: 6px;
    border-left: 1px solid #efe3d8;
}

.cart-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    background: #fff;
}

.cart-container .qty-btn,
.cart-container .delete-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    min-width: 0 !important;
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    border-radius: 6px;
    cursor: pointer;
    color: #4a3a2a;
    font-size: 14px;
    box-shadow: none !important;
}

.cart-container .qty-btn:hover,
.cart-container .delete-btn:hover {
    background: #fbf7f2 !important;
}

.qty-btn:focus,
.delete-btn:focus {
    outline: none;
    box-shadow: none;
}

.cart-container .qty-input {
    width: 30px !important;
    height: 16px;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #4a3a2a !important;
    outline: none;
}

.cart-container .lv-qty .qty-form .qty-btn:first-of-type {
    border-right: 1px solid #efe3d8;
}

.cart-container .lv-qty .qty-form .qty-btn:last-of-type {
    border-left: 1px solid #efe3d8;
}

.cart-container .lv-qty .qty-form .qty-btn {
    border-radius: 6px !important;
}

.cart-container .delete-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
    pointer-events: none;
    opacity: .85;
}



.cart-container .qty-input::-webkit-outer-spin-button,
.cart-container .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-container .qty-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.cart-actions form {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    backdrop-filter: none;
}

.cart-actions .btn-secondary,
.cart-actions .btn-primary {
    margin-top: 0;
    min-width: 0;
}

.cart-actions {
    align-items: center;
}

.cart-container .total {
    text-align: left !important;
    margin-left: 20px !important;
    font-size: 16px;
    font-weight: 600;
    color: #6f5a48;
    margin-top: 20px;
}

.cart-container .cart-actions form {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.cart-container .cart-actions form::before {
    display: none !important;
}

.cart-container .cart-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 14px !important;
    flex-wrap: nowrap !important;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cart-container .cart-actions .btn-primary {
    margin: 0 !important;
    width: 48% !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.cart-container .cart-actions .btn-secondary {
    margin: 0 !important;
    width: 70% !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}


.cart-container {
    max-width: 1200px;
    width: 95%;
    margin: 28px auto;
}

.cart-container h1 {
    font-size: 17px !important;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #6f5a48;
    text-align: left !important;
    margin-left: 12px !important;
    margin-top: 10px !important;
}

.cart-container table {
    border-spacing: 0 10px;
    width: 100%;
    margin: 0 auto;
    table-layout: fixed;
}

.cart-container td {
    padding: 18px 10px;
    text-align: center;
    vertical-align: middle;
}

.cart-container img {
    display: block !important;
    width: 120px !important;
    height: 120px !important;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 auto 6px;
    transform: translateX(10px);
}

.cart-summary {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: #8a7768;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-summary strong {
    font-weight: 600;
}

.cart-container thead th {
    background: #EADBC8;
    color: var(--text-main);
    text-align: center;
    padding: 14px 10px;
}

.cart-container tbody td {
    background: #ffffff;
    border-top: 1px solid #efe3d8;
    border-bottom: 1px solid #efe3d8;
}

.cart-container td:nth-child(3),
.cart-container td:nth-child(5) {
    white-space: nowrap;
    font-weight: 600;
}

.cart-container tr td:first-child,
.cart-container tr td:last-child {
    background: #ffffff;
}

.cart-container td,
.cart-container .cart-summary {
    color: var(--text-soft);
}

.cart-container td strong {
    color: var(--text-main);
}

/* Align first column (product info) to left */
.cart-container td:first-child,
.cart-container thead th:first-child {
    text-align: left;
    padding-left: 20px;
}

/* Add consistent column widths */
.cart-container thead th:nth-child(1) {
    width: 30%;
}

.cart-container thead th:nth-child(2) {
    width: 20%;
}

/* Fine tune image column alignment */
.cart-container td:nth-child(2) {
    text-align: center;
}

.cart-container thead th:nth-child(3) {
    width: 15%;
}

.cart-container thead th:nth-child(4) {
    width: 20%;
}

.cart-container thead th:nth-child(5) {
    width: 15%;
}

.cart-container td:nth-child(2) a {
    display: inline-block;
    margin-top: 8px;
}

@media (max-width: 768px) {

    .cart-container .cart-actions .btn-secondary,
    .cart-container .cart-actions .btn-primary {
        flex: 1 !important;
        width: 100% !important;

        max-width: 300px;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap;
        font-size: 12px;
        margin-top: 20px !important;
        margin-bottom: 20px;
    }

    .cart-container .cart-actions {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;

    }

    .cart-container .cart-actions .btn-primary,

    .cart-container .cart-actions .btn-secondary {

        width: 100% !important;

        max-width: 300px;

    }

    .cart-container table,
    .cart-container thead,
    .cart-container tbody,
    .cart-container th,
    .cart-container td,
    .cart-container tr {
        display: block;
        width: 100%;
    }

    .cart-container {
        padding: 0 14px;
        margin-top: 10px;
    }

    .cart-container thead {
        display: none;
    }

    .cart-container table {
        background: transparent;
        box-shadow: none;
        border: none;
        border-radius: 18px;
        overflow: hidden;
        width: calc(100% - 16px);
    }

    .cart-container tr {
        background: #ffffff;
        border-radius: 16px;
        padding: 18px 16px;
        margin-bottom: 18px;
        border: 1px solid #efe3d8;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    }

    .cart-container td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
        border: none !important;
        gap: 6px;
    }

    .cart-container td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        color: #8a7768;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .cart-container img {
        width: 100px !important;
        height: 100px !important;
        border-radius: 14px;
        margin-bottom: 8px;
    }

    .cart-container .lv-qty {
        margin-top: 8px;
    }

    .cart-container td strong {
        font-size: 15px;
    }


    .cart-container img {
        margin: 0 0 6px 0 !important;
        align-self: flex-start;

    }
}


/* MOBILE IMAGE FULLSCREEN FIX */
@media (max-width: 768px) {

    .main-image,
    .main-image img {
        overflow: visible !important;
    }

    img.zoomable,
    #mainProductImage {
        max-width: 100% !important;
        height: auto !important;
    }

    body:has(.fullscreen.active),
    body:has(.zoom-overlay.active) {
        overflow: hidden !important;
    }

    .fullscreen,
    .zoom-overlay {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

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

        background: rgba(0, 0, 0, .78) !important;

        z-index: 999999 !important;
    }
}

/* =======================================================
   MOBILE FORCED DARK MODE FIX
   Some Android/Samsung browsers invert pages automatically.
   This keeps the public pages warm/light on mobile.
======================================================= */
@media (max-width: 768px) {

    html,
    body {
        color-scheme: light !important;
        background-color: #F6EFE7 !important;
        background: #F6EFE7 !important;
    }

    body::before,
    body::after {
        opacity: 0.25 !important;
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    header {
        background: linear-gradient(135deg, #EADBC8, #F6EFE7) !important;
        background-color: #F6EFE7 !important;
        color: #6f5a48 !important;
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    main,
    .produit-page,
    .cart-container,
    .story-section,
    .story-card,
    .card,
    .delivery-container,
    .payment-container,
    .payment-form,
    .payment-recap,
    .animal-container,
    .animal-info-card,
    .legal-page {
        color-scheme: light !important;
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    .produit-page main,
    .cart-container,
    .story-section,
    .animal-page,
    .livraison-page,
    .payment-container {
        background-color: transparent !important;
    }

    h1,
    h2,
    h3,
    p,
    span,
    a,
    li,
    label,
    strong {
        filter: none !important;
        mix-blend-mode: normal !important;
    }
}

/* ===============================
   25) NAV EXTRAS
=============================== */
.retour-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.retour-nav a {
    text-decoration: none;
    font-weight: 500;
    color: #7A5C48;
}

.nav-cart {
    position: relative;
}

.nav-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 25px;
}

.nav-cart-icon {
    font-size: 18px;
    line-height: 1;
}

.nav-cart-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-heart);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    transform: translate(35%, -35%);
}

.header-cart-icon {
    font-size: 18px;
}

.header-fav-link i,
.header-cart-icon {
    font-size: 18px;
}


.header-fav-badge,
.header-cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    color: #fff;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 10;
}

.header-fav-badge {
    background: #c44536;
    padding: 2px 5px;
}

.header-cart-badge {
    background: #daba7c;
    padding: 2px 5px;
}

@keyframes cartBounce {
    0% {
        transform: translate(35%, -35%) scale(1);
    }

    30% {
        transform: translate(35%, -35%) scale(1.4);
    }

    60% {
        transform: translate(35%, -35%) scale(0.9);
    }

    100% {
        transform: translate(35%, -35%) scale(1);
    }
}

.header-cart-badge.bump,
.nav-cart-badge.bump {
    animation: cartBounce 0.35s ease;
}

/* ===============================
   26) HAMBURGER / MOBILE NAV
=============================== */
.menu-toggle {
    position: relative;
    z-index: 10000;
    width: 24px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 3px;
    background: #4A3A2A;
    border-radius: 2px;
    transition: 0.3s ease;
}

.menu-toggle span {
    top: 50%;
    transform: translateY(-50%);
}

.menu-toggle::before {
    top: 0;
}

.menu-toggle::after {
    bottom: 0;
}

.menu-toggle:hover span,
.menu-toggle:hover::before,
.menu-toggle:hover::after {
    background: #1b4332;
}

.menu-toggle.open::before {
    transform: translateY(11px) rotate(45deg);
}

.menu-toggle.open span {
    opacity: 0;
}

.menu-toggle.open::after {
    transform: translateY(-10px) rotate(-45deg);
}

body.menu-open::before {
    content: none !important;
    display: none !important;
}

/* ===============================
   NAVIGATION LINK FLEX STYLES (Desktop & General)
=============================== */
header nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

@media (max-width: 768px) {
    body.menu-open {
        overflow: hidden;
    }

    header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        padding: 26px 12px;
        min-height: 130px;
    }

    header h1 {
        font-size: 18px;
        margin: 0;
    }

    header .menu-toggle {
        display: flex;
        position: absolute;
        left: 2px;
        top: 75%;
        transform: translateY(-50%);
        margin: 0;

        -webkit-tap-highlight-color: transparent;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
    }

    .logo {
        grid-column: 1 / -1;
        grid-row: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        height: 100%;
    }

    .logo img {
        height: 56px;
        margin-top: -8px;
    }

    header .menu-right {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-content: flex-end;
        position: absolute;
        right: 12px;
        top: 75%;
        transform: translateY(-50%);
        font-size: 14px;
    }

    header nav {
        position: fixed;
        top: 0;
        left: 0;

        width: 85%;
        max-width: 300px;
        height: 100vh;

        background:
            linear-gradient(180deg,
                rgba(255, 252, 248, 0.92),
                rgba(245, 237, 228, 0.94));

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        padding: 90px 22px 28px;

        display: flex;
        flex-direction: column;
        gap: 18px;

        transform: translateX(-100%);

        transition:
            transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1),
            opacity 0.3s ease;

        border-radius: 0 30px 30px 0;

        border-right:
            1px solid rgba(255, 255, 255, 0.55);

        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.10),
            0 6px 20px rgba(0, 0, 0, 0.04);

        overflow: hidden;

        z-index: 9999;
    }

    header nav.show {
        transform: translateX(0);
    }

    header nav ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
        opacity: 0;
        transform: translateX(-10px);
        transition: 0.3s ease;
        color: #4A3A2A;
    }

    header nav ul li {
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.3s ease;
    }

    body.menu-open header nav ul {
        opacity: 1;
        transform: translateX(0);
    }

    body.menu-open header nav ul li {
        opacity: 1;
        transform: translateX(0);
    }

    header nav ul li:nth-child(1) {
        transition-delay: 0.05s;
    }

    header nav ul li:nth-child(2) {
        transition-delay: 0.1s;
    }

    header nav ul li:nth-child(3) {
        transition-delay: 0.15s;
    }

    header nav ul li:nth-child(4) {
        transition-delay: 0.2s;
    }

    header nav.show ul {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(255, 248, 238, 0.35) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        opacity: 0;
        pointer-events: none;

        transition: opacity 0.3s ease;

        z-index: 1500;
    }

    .nav-overlay.show {
        opacity: 1 !important;
        pointer-events: auto;
    }


    header nav a {
        pointer-events: auto;
        position: relative;
        z-index: 3100;

        display: flex;
        align-items: center;

        padding: 14px 18px;

        border-radius: 18px;

        color: #5f4a39;

        font-weight: 600;
        font-size: 17px;
        letter-spacing: 0.2px;

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

    header nav a:hover {
        color: #1b4332;
        transform: translateX(4px);
    }

    header nav a::after {
        content: "";
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: #1b4332;
        border-radius: 999px;
        transition: width 0.25s ease;
    }

    header nav a:hover::after,
    header nav a.active::after {
        width: 60%;
    }


    .nav-overlay.show {
        opacity: 0 !important;
        pointer-events: auto;
        background: transparent !important;
    }

    .header-fav-link,
    .header-cart-link,
    .user-menu {
        position: relative;
        transform: none;
    }

    .header-fav-link,
    .header-cart-link,
    .user-menu {
        transform: scale(0.9);
    }

    .menu-close {
        position: fixed;
        top: 18px;
        left: 18px;
        z-index: 10000;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0%;
        background: transparent;
        color: #4A3A2A;
        font-size: 22px;
        box-shadow: none !important;
        backdrop-filter: none !important;
        background: transparent !important;
        cursor: pointer;
    }

    .menu-close::before,
    .menu-close::after {
        content: "";
        position: absolute;
        width: 18px;
        height: 2px;
        background: #4A3A2A;
        border-radius: 2px;
    }
}



/* ===============================
   27) SHOP PAGE
=============================== */
.shop-page {
    background: transparent;
    padding: 80px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.shop-page .page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 60px;
    text-align: center;
}

.page-subtitle {
    max-width: 420px;
    margin: 6px auto 30px;
    text-align: center;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
    font-size: 15px;
}

@media (min-width: 768px) {
    .page-subtitle {
        max-width: 460px;
    }
}

.shop-page h1 {
    text-align: center;
    font-size: 42px;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.shop-page h2 {
    margin-bottom: clamp(30px, 4vw, 60px);
}

.shop-page .btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px -6px rgba(27, 67, 50, 0.35);
}

.animals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.animal-card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-height: 420px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.animal-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}

.animal-card:hover .product-thumb {
    transform: scale(1.06);
}

.animal-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 12px 0 8px;
    min-height: 48px;
}

.animal-card .price {
    font-size: 20px;
    font-weight: 800;
    color: #1b4332;
    letter-spacing: 0.3px;
}

.animal-card:hover .product-image-wrapper::after {
    opacity: 1;
}

.animal-card .btn-secondary {
    margin-top: auto;
}

.product-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    z-index: 0;
}

.product-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent 40%,
            rgba(255, 255, 255, 0.35),
            transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 2;
}

.product-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    position: relative;
    z-index: 1;
}

.product-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: 0.4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    animation: badgeFloat 2s ease-in-out infinite;
    overflow: hidden;
    z-index: 5;
}

.badge-best {
    background: linear-gradient(135deg, #c97a5a, #b55a3c);
}

.product-badge:not(.badge-best) {
    background: linear-gradient(135deg, #3f6f5a, #2d5a47);
}

.animal-card:hover .product-badge {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.product-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent);
    transform: skewX(-20deg);
    animation: badgeShine 3s infinite;
}

.choose-animal-page {
    padding-top: 20px;
}

.choose-animal-page h1 {
    margin-bottom: 14px;
}

.page-subtitle {
    margin-top: 10px;
}

@media (min-width: 768px) and (max-width: 1100px) {
    .produit-page main {
        padding-top: 40px !important;
    }

    h1 {
        font-size: 28px;
    }

    .main-image {
        max-width: 700px;
    }

    .thumbnails {
        max-width: 600px;
    }

    .animal-card {
        min-height: auto;
    }

    .animals-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .animals-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 0 16px;
    }

    h1 {
        font-size: 24px;
    }

    .main-image {
        max-width: 100%;
    }

    .animal-card {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .animals-grid>*:not(:last-child) {
        margin-bottom: 10px;
    }

    .shop-page {
        padding: 40px 20px 50px;
    }

    .animals-grid {
        margin: 30px auto;
    }
}

/* ===============================
   28) TABLE WRAPPER
=============================== */
.table-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 20px;
}

.table-wrapper table {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
}

.table-wrapper th,
.table-wrapper td {
    text-align: center;
    vertical-align: middle;
}

.table-wrapper table td,
.table-wrapper table th {
    padding: 12px 14px;
}

.medaillon-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.add-animal {
    text-align: center;
    margin-bottom: 30px;
}

.medaillon-cell .add-animal {
    margin: 0;
}

.btn-add-animal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8FA998, #6f8e7f);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(143, 169, 152, 0.35);
    transition: transform .2s ease, box-shadow .2s ease;
    font-size: 13px;
}

.btn-add-animal::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 55%);
    opacity: .9;
    pointer-events: none;
}

.btn-add-animal:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(143, 169, 152, 0.45);
}

.btn-medaillon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8FA998, #6f8e7f);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(143, 169, 152, 0.35);
    transition: transform .2s ease, box-shadow .2s ease;
    opacity: .9;
    min-width: 145px;
    font-size: 11px;
}

.btn-medaillon:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 16px 32px rgba(143, 169, 152, 0.5);
}

.btn-medaillon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 55%);
    opacity: .9;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .table-wrapper table {
        width: 100%;
        min-width: 0;
    }

    table img {
        width: 60px;
        height: 60px;
    }

    .photos-cell {
        min-width: 120px;
        grid-template-columns: repeat(2, 56px);
    }

    .photos-cell img {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 768px) {
    .table-wrapper {
        padding: 0 8px;
        width: 100%;
        max-width: 100%;
        margin: 20px auto;
    }

    .table-wrapper tr:nth-child(even) {
        background: #FBF7F2;
    }

    .table-wrapper table,
    .table-wrapper thead,
    .table-wrapper tbody,
    .table-wrapper th,
    .table-wrapper td,
    .table-wrapper tr {
        display: block;
    }

    .table-wrapper table {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    .table-wrapper thead {
        display: none;
    }

    .table-wrapper tbody {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .table-wrapper tr {
        background: #FBF7F2;
        border-radius: 20px;
        padding: 18px 16px;
        margin-bottom: 0;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
        border: 1px solid #efe3d8;
    }

    .table-wrapper td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 0;
        gap: 4px;
        border-bottom: 1px solid #f3ebe4;
    }

    .table-wrapper td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        color: #8a7768;
        text-transform: uppercase;
        opacity: 0.75;
    }

    .photos-cell {
        display: flex;
        gap: 6px;
        order: -1;
        margin-bottom: 6px;
    }

    .photos-cell img {
        width: 64px;
        height: 64px;
        object-fit: cover;
    }

    .table-wrapper td:last-child {
        border-bottom: none;
    }

    .table-wrapper img {
        margin-top: 4px;
        border-radius: 12px;
    }

    .actions-vertical {
        flex-direction: row;
        gap: 10px;
        margin-top: 6px;
    }
}

/* ===============================
   29) TOOLTIP
=============================== */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.tooltip:hover::after {
    opacity: 1;
}

.actions-vertical a::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.actions-vertical a:hover::after {
    opacity: 1;
}

/* ===============================
   30) FAV BUTTON
=============================== */
.fav-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 20;
    pointer-events: auto;

    width: 36px;
    height: 36px;

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

    background: none;
    border: none;
    padding: 0;

    cursor: pointer;
    font-size: 23px;
    color: #6a6969;

    box-shadow: none;
    transition: all .25s ease;
}

.product-image-wrapper {
    position: relative;
    z-index: 1;
}

.product-image-wrapper,
.product-thumb,
.product-image-wrapper::after {
    pointer-events: none;
}

.fav-btn:hover {
    transform: translateY(-2px);
    color: #444444;
}

.fav-btn.active i {
    animation: heartPop 0.3s ease;
    color: #c44536;
    text-shadow: 0 0 8px rgba(196, 69, 54, 0.5);
    transform: scale(1.2);
    transition: transform 0.2s;
    font-weight: 900;
}

.fav-btn.loading {
    opacity: 0.5;
    pointer-events: none;
}

@media (max-width: 768px) {
    .fav-btn {
        top: 10px;
        right: -20px;
        z-index: 9999;
        width: 36px;
        height: 36px;
    }

    .fav-btn i {
        font-size: 16px;
    }
}

@media (max-width: 1024px) {
    .fav-btn {
        width: 40px;
        height: 40px;
    }
}

/* ===============================
   31) PRODUIT GRID
=============================== */
.produit {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .produit {
        grid-template-columns: 1fr 350px;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .produit {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
}

.preview-section {
    display: grid;
    gap: 12px;
}

@media (min-width: 900px) {
    .preview-section {
        grid-template-columns: 1fr !important;
    }
}

.medallion-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
}

.medal-label {
    position: static;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: #8a6f5a;
    margin-bottom: 6px;
}

#medalCanvas {
    width: 80%;
    max-width: 420px;
    height: auto;
    display: block;
    border-radius: 12px;
    margin: 0 auto;
    object-fit: contain;
}

.qr-overlay-wrapper {
    position: absolute;
    top: 50%;
    left: 58%;
    transform: translate(-50%, -50%);
}

.qr-img {
    width: 50%;
    height: auto;
    background: transparent;
    mix-blend-mode: multiply;
    image-rendering: crisp-edges;
}

.verso-phone {
    position: absolute;
    bottom: 35%;
    left: 52%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 800;
}

/* ===============================
   32) PERSONNALISER BUTTON
=============================== */
#personnaliserBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.25s ease;
}

.btn-paw {
    width: 16px;
    height: 16px;
    filter: invert(1);
    opacity: 0.85;
}

#personnaliserBtn:hover .btn-paw {
    transform: rotate(-10deg) scale(1.1);
}

.product-actions #personnaliserBtn {
    width: 100%;
    max-width: 300px;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1b4332, #0f2e23);
    color: #fff;
    box-shadow:
        0 14px 35px rgba(27, 67, 50, 0.4),
        0 6px 14px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .product-actions #personnaliserBtn {
        width: 100%;
        max-width: 300px;
        padding: 16px 0;
        font-size: 18px;
        font-weight: 700;
        border-radius: 999px;
        letter-spacing: 0.5px;
        box-shadow:
            0 18px 40px rgba(27, 67, 50, 0.45),
            0 6px 14px rgba(0, 0, 0, 0.08);
        transition: all 0.25s ease;
    }

    .product-actions #personnaliserBtn:active {
        transform: scale(0.97);
        box-shadow: 0 10px 25px rgba(27, 67, 50, 0.35);
    }

    .product-actions #personnaliserBtn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.25), transparent 60%);
        pointer-events: none;
    }
}

@media (max-width: 480px) {
    .product-actions #personnaliserBtn {
        max-width: 260px;
        padding: 14px 0;
        font-size: 16px;
        letter-spacing: 0.3px;
        box-shadow:
            0 12px 28px rgba(27, 67, 50, 0.35),
            0 4px 10px rgba(0, 0, 0, 0.06);
    }
}

/* ===============================
   33) INDEX / HERO
=============================== */
.hero {
    position: relative;
    max-width: 1300px;
    margin: 40px auto 0;
    border-radius: 30px;
    min-height: clamp(420px, 70vh, 720px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(transparent, #efe6dc);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.15) 40%,
            rgba(0, 0, 0, 0.35) 100%);
    z-index: 1;
}

.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transform: scale(1.05);
    filter: brightness(0.85);
    animation: heroZoom 18s ease-in-out infinite alternate;
}

.hero-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    max-width: 540px;
    padding: 60px 40px;
    border-radius: 30px;
    margin-top: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.4));
    backdrop-filter: blur(3px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-overlay h1 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
    text-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
    color: #f5e6d3;
}

.hero h2::after,
.story h2::after,
.trust h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 3px;
    margin: 16px auto;
    background: linear-gradient(90deg, #c97c5d, #a95c3f);
    border-radius: 3px;
}

.hero-subtitle {
    font-size: 18px;
    color: #f3e5d3;
    opacity: 1;
    margin-bottom: 32px;
    line-height: 1.7;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

.presentation-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    padding: 80px 60px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.10);
    transition: 0.35s;
}

.presentation-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}

.presentation-card img {
    width: 220px;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 60px auto;
    padding: 0 20px;
}

.story {
    text-align: center;
    max-width: 820px;
    margin: 10px auto;
    padding: 10px 0;
}

.story h2 {
    font-size: 30px;
    margin-bottom: 10px;
}

.story p {
    margin-bottom: 48px;
    font-size: 17px;
    line-height: 1.8;
    text-align: center;
}

.story p strong {
    position: relative;
    top: -1px;
}

.story p:first-of-type {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 90px;
    margin-top: 80px;
}

.step {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: 70px;
    background: linear-gradient(180deg, #ffffff, #faf7f4);
    padding: 20px;
    margin: 30px 0;
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.10);
    transition: transform .35s ease, box-shadow .35s ease;
}


.step:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.12);
}

.step.reverse {
    grid-template-columns: 1fr 260px;
    
}

.step.reverse .step-image {
    order: 2;
    transform: translateX(40px);
    
}

.step.reverse .step-text {
    order: 1;
    margin-left: 5px;
       
}


.step-image {
    width: 220px;
    height: 260px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
    transform: translateY(0);
    transition: transform .4s ease, box-shadow .4s ease;
}

.step-image:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.25);
}

.step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.step-image:hover img {
    transform: scale(1.06);
}

.step-text {
    max-width: 520px;
}

.step-text h3 {
    margin-bottom: 14px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

.step-text p {
    font-size: 17px;
    color: var(--text-soft);
    line-height: 1.8;
}

.trust {
    text-align: center;
    padding: 80px 20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(201, 124, 93, 0.08), transparent 60%),
        radial-gradient(circle at 80% 30%, rgba(143, 169, 152, 0.08), transparent 60%);
}

.trust h2 {
    font-size: 30px;
}

.trust-text {
    max-width: 760px;
    margin: 38px auto 0;
    font-size: 17px;
    line-height: 1.7;
}

.trust-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 600px;
    margin: 60px auto;
}

.trust-grid img {
    width: 320px;
    min-width: 50%;
    height: 420px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.trust-grid img:nth-child(odd) {
    align-self: flex-start;
    transform: translateX(-40px) translateY(-8px);
}

.trust-grid img:nth-child(even) {
    align-self: flex-end;
    transform: translateX(40px) translateY(-8px);
}

.trust-grid img:hover {
    transform: translateY(-8px);
    box-shadow: 0 45px 120px rgba(0, 0, 0, 0.28);
}

.cta-button {
    display: inline-block;
    margin: 15px auto 0;
    padding: 15px 40px;
    font-size: 18px;
    background: linear-gradient(135deg, #c8a97e, #b89363);
    color: white;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.6px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    transition: transform .3s ease, box-shadow .3s ease;
}

.cta-button:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
    .cta-button {
        width: 100%;
        max-width: 260px;
        padding: 16px 0;
        font-size: 17px;
        font-weight: 700;
        border-radius: 999px;
        box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.25),
            0 6px 14px rgba(0, 0, 0, 0.08);
    }
}

@media (max-width: 480px) {


    main {
        padding: 12px 14px 0;
    }

    .hero {
        padding: 0 14px;
    }

    .story {
        padding: 0 14px;
    }

    .cta-button {
        max-width: 220px;
        padding: 14px 0;
        font-size: 15px;
    }
}

@media (max-width: 1024px) {
    .step-image {
        width: 220px;
        height: 220px;
        
    }

     @media (max-width: 768px) {

    .step.reverse .step-image {
        transform: none !important;
        margin: 0 auto;
    }

    .step.reverse .step-text {
        margin-left: 0 !important;
    }
}

    

    .step-text p {
        max-width: 100%;
    }

    .trust-grid {
        align-items: center;
        gap: 40px;
    }

    .trust-grid img {
        width: 90%;
        height: 420px;
        border-radius: 24px;
    }
}

@media (max-width: 768px) {
    .hero-overlay {
        padding: 18px 10px;
        margin: 12px 14px;
    }

    .hero-overlay h1 {
        font-size: 34px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .container {
        margin: 2Opx auto;
    }

    .story h2,
    .trust h2 {
        font-size: 24px;
    }

    .step-image {
        width: 220px;
        height: 220px;
        
    }

    .step,
    .step.reverse {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        gap: 24px;
    }

    .step.reverse .step-image {
    order: 1;
}

    .step.reverse .step-text {
    order: 2;
}

    .trust-grid img {
        transform: none !important;
        align-self: center !important;
    }

    h2 {
        font-size: 22px;
    }

    .auth-card {
        width: 92%;
        padding: 25px;
        margin-left: auto;
        margin-right: auto;
    }

    form {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 380px) {

    .menu-open .header-fav-link,
    .menu-open .header-cart-link {
        visibility: hidden;
    }

}

/* ===============================
   34) PAGE HELPERS
=============================== */
.page-shelter {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(201, 124, 93, 0.10), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(143, 169, 152, 0.12), transparent 60%),
        var(--bg-main);
}

/* ===============================
   35) KEYFRAMES
=============================== */
@keyframes successFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authCardEnter {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes badgeFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes badgeShine {
    0% {
        left: -60%;
    }

    100% {
        left: 120%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroZoom {
    from {
        transform: scale(1.05);
    }

    to {
        transform: scale(1.12);
    }
}

@keyframes heartPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

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

@media (max-width: 640px) {
    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 22px;
    }

    .auth-card {
        width: 92%;
        padding: 24px;
    }

    form {
        margin: 18px auto;
    }
}


.btn-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.btn-loading::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* ===============================
   27)  FINISH
=============================== */

/* subtle page glow */
body {

    background: #F6EFE7;

}

body::before,
body::after {
    display: none !important;
}

/* smoother typography */
p {
    letter-spacing: 0.2px;
    color: #5a4636;
}

/* elegant section spacing */
.legal-page section {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.legal-page section:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* refined headings */
.legal-page h2 {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* premium divider */
.legal-page hr {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c97c5d, transparent);
    margin: 30px auto;
    border-radius: 2px;
}

/* ===============================
   COOKIE BANNER — FINAL PRO
=============================== */


/* Wrapper (FIX POSITION) */
.banner-wrap {
    position: fixed;
    bottom: 20px;
    left: 50%;
    justify-content: center;
    transform: translateX(-50%);
    transition: all 0.4s ease;
    width: calc(100% - 16px);

    max-width: 830px;
    padding: 6px 12px;

    min-height: 44px;
    z-index: 11000;
    pointer-events: auto;
}

.banner-wrap.show {

    opacity: 1;

    transform: translateX(-50%) translateY(0);

}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Banner */
.cookie-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 16px 18px;

    background: rgba(143, 169, 152, 0.22);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

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

    border-radius: 24px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    overflow: hidden;
}

.cookie-banner.hide {
    transform: translateY(120%);
}

.cookie-banner.show {
    transform: translateY(0);
}

/* Text */
.cookie-text-block {
    flex: 1;
    max-width: 800px;
}

.cookie-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.cookie-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

/* Actions */
.cookie-actions {
    display: flex;
    justify-content: flex-end;

    gap: 8px;
    margin-top: 0;

    padding-left: 0;
}

.cookie-banner .btn {
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;


    backdrop-filter: blur(10px);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.cookie-icon {
    display: flex;
    align-items: flex-start;
    margin-top: -2px;

    transform: translateY(-5px);

    font-size: 13px;

    opacity: 0.8;
}

/* Buttons */
.btn {
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;

    backdrop-filter: blur(10px);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent);
    transition: 0.6s;
    pointer-events: none;
}

.btn:hover::before {
    left: 120%;
}

/* Accept */
.btn-accept {
    background: rgba(255, 255, 255, 0.9);
    color: #1b4332;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-accept:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.2);
}



.btn-settings {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-settings:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Reject */
.btn-reject {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
}

.btn-reject:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* ---------------- MOBILE (Apple style) ---------------- */
@media (max-width: 480px) {
    .cookie-banner {
        padding: 10px 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-desc {
        display: block;
        font-size: 10px;
        line-height: 1.3;
        opacity: 0.7;
    }

    .cookie-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }



    .cookie-text-block {

        max-width: 60%;

    }

    .cookie-title {
        font-size: 11px;
        line-height: 1.2;

    }


    .btn {
        flex: 1;
        min-width: 0;
        padding: 8px 10px;
        font-size: 11px;
    }

    .btn-settings {
        display: none;
    }

    .btn-accept {
        padding: 7px 12px;
        font-size: 11px;
    }

    .btn-reject {
        font-size: 10px;
    }
}

/* ---------------- MODAL FIX ---------------- */

body.modal-open .banner-wrap {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

body.modal-open .banner-wrap {
    opacity: 0;
    pointer-events: none;
}

body.modal-open .modal-overlay {
    display: flex;
}

.modal-overlay.active {
    display: flex;
    pointer-events: auto;

}

/* ANIMATION */
.modal-overlay.active .modal {
    transform: scale(1);
    opacity: 1;
}

/* ---------------- TOAST FIX ---------------- */
.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    z-index: 1000;
}

.cookie-settings-content {
    background: rgba(20, 50, 35, 0.85);
    /* ավելի թեթև */
    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    padding: 20px 18px;
    /* փոքրացրինք */
    width: 92%;
    max-width: 340px;

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);

    transform: scale(0.9) translateY(16px);
    transition: all 0.3s ease;
}

.cookie-settings-actions .cookie-btn {
    height: 36px;
    font-size: 12px;
    padding: 0 12px;
}

.cs-row {
    padding: 10px 0;
    /* ավելի կոմպակտ */
}

.cs-label {
    font-size: 13px;
    line-height: 1.3;
}

.cs-sub {
    font-size: 11px;
    opacity: 0.5;
}

.cs-toggle {
    width: 38px;
    height: 20px;
}

.cs-thumb {
    width: 14px;
    height: 14px;
}

.cs-toggle.on .cs-thumb {
    left: 18px;
}

/* ----- POLITIQUE - RETOUR ----- */

.return-list {
    margin-top: 18px;
    padding-left: 20px;
}

.return-list li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #444;
}

.legal-page h1 {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    color: #7a5a44;
    margin-bottom: 55px;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.legal-page h2 {
    font-size: 22px;
    font-weight: 550;
    color: #7a5a44;
    margin-bottom: 22px;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.legal-page p {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.9;
    color: #5f5147;
    font-weight: 400;
}

@media (max-width: 768px) {
    .legal-page h1 {
        font-size: 24px;
        margin-bottom: 38px;
    }

    .legal-page h2 {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .legal-page p,
    .return-list li {
        font-size: 14px;
        line-height: 1.75;
    }
}

.legal-mail {
    color: #7a5a44;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.legal-mail:hover {
    opacity: 0.7;
}






/* ===============================
   DELETE ACCOUNT BUTTON 
=============================== */

#deleteAccountBtn {
    width: 100%;
    max-width: 420px;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 16px 24px;

    border-radius: 999px;
    border: none;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;

    color: #fff;

    background: linear-gradient(135deg, #c97c5d, #a95c3f);

    box-shadow:
        0 16px 40px rgba(201, 124, 93, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.08);

    cursor: pointer;

    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* shine effect */
#deleteAccountBtn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -90%;
    width: 80%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: 0.6s;
}

#deleteAccountBtn:hover::before {
    left: 120%;
}

/* hover */
#deleteAccountBtn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 22px 50px rgba(201, 124, 93, 0.45),
        0 10px 20px rgba(0, 0, 0, 0.12);
}

/* active */
#deleteAccountBtn:active {
    transform: scale(0.96);
}

/* mobile */
@media (max-width: 480px) {
    #deleteAccountBtn {
        height: 52px;
        font-size: 14px;
    }
}

/* ===== LOGOUT MODAL FIX (CLEAN WHITE CENTERED) ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}


.modal-overlay.active {
    display: flex;
}

/* ===============================
   LOGOUT OVERLAY (AFTER COOKIE STYLES)
=============================== */
.logout-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: none;
}

.logout-overlay.active {
    pointer-events: auto;
}

.logout-overlay .modal-content {
    margin: auto;
}

/* =======================================================
   A PROPOS — NOTRE HISTOIRE
======================================================= */

.story-section {
    padding: 70px 20px;
    background:
        radial-gradient(circle at top,
            rgba(216, 155, 0, 0.06),
            transparent 45%),
        linear-gradient(to bottom,
            #fffdf9 0%,
            #fdf7ef 100%);
}

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

.story-card {
    max-width: 980px;
    margin: 0 auto;

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

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-radius: 38px;
    overflow: hidden;

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

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.08),
        0 10px 30px rgba(0, 0, 0, 0.04);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.story-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.12),
        0 18px 40px rgba(0, 0, 0, 0.06);
}

.story-card h2 {
    font-family: "Playfair Display", serif;

    font-size: 36px;
    font-weight: 500;

    letter-spacing: -1.8px;
    line-height: 1.05;

    color: #6f4e37;

    text-align: center;

    margin-bottom: 18px;
}

/* ----- IMAGE ----- */

.story-image-wrapper {
    position: relative;

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

    padding: 50px 20px 30px;

    background:
        linear-gradient(180deg,
            #ebe2d7 0%,
            #f8f4ee 100%);
}

.story-image-wrapper::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.06) 100%);

    pointer-events: none;
}

.story-image-wrapper img {


    width: 100%;

    max-width: 560px;

    height: auto;

    border-radius: 28px;

    object-fit: cover;

    box-shadow:

        0 25px 60px rgba(0, 0, 0, 0.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.story-image-wrapper img:hover {
    transform: scale(1.02);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.22);
}

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

.story-content {
    padding: 60px 60px 65px;

    text-align: center;

    background:
        rgba(255, 255, 255, 0.84);
}

/* ----- TITLE ----- */

.story-content h2 {
    font-size: 44px;

    font-family: "Playfair Display", serif;
    font-weight: 600;

    color: #6f4e37;

    line-height: 1.08;

    letter-spacing: -0.8px;

    margin-bottom: 34px;

    position: relative;

    text-align: center;

    display: inline-block;
}

.story-content h1::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -18px;

    transform: translateX(-50%);

    width: 90px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(to right,
            transparent,
            #d89b00,
            transparent);
}

/* ----- TEXT ----- */

.story-content p {

    max-width: 720px;

    margin: 0 auto 24px;

    font-size: 17px;

    line-height: 2;

    color: #7a5a42;

    font-weight: 400;

    letter-spacing: 0.1px;
}

/* FIRST TEXT */

.story-content p:first-of-type {
    font-size: 22px;

    font-weight: 500;

    color: #5f4634;

    margin-bottom: 34px;
}

/* LAST TEXT */

.story-content p:last-child {
    margin-top: 40px;

    font-size: 20px;

    font-weight: 500;

    color: #5f4634;
}

.paw-title {
    font-size: 28px;


    opacity: 0.82;

    margin-left: 8px;

    vertical-align: top;

    display: inline-block;

    transform: rotate(-8deg);
}

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

@media (max-width: 768px) {

    .story-section {
        padding: 50px 14px;
    }

    .story-card {
        border-radius: 28px;
    }

    .story-image-wrapper {
        padding: 38px 18px 18px;
    }

    .story-image-wrapper img {
        max-width: 100%;
        border-radius: 22px;
    }

    .story-content {
        padding: 42px 24px 50px;
    }

    .story-content h2 {
        font-size: 30px;
        margin-bottom: 28px;
    }

    .story-content p {
        font-size: 16px;
        line-height: 1.9;
    }

    .story-content p:first-of-type {
        font-size: 19px;
    }

    .story-content p:last-child {
        font-size: 17px;
    }
}

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

@media (max-width: 480px) {

    .story-image-wrapper {
        padding: 28px 14px 14px;
    }

    .story-image-wrapper img {
        max-width: 220px;
        border-radius: 24px;
    }

    .story-content {
        padding: 34px 18px 42px;
    }

    .story-content h2 {
        font-size: 30px;
        letter-spacing: -0.8px;
    }

    .story-content p {
        font-size: 15.5px;
        line-height: 1.85;
    }

    .story-content p:first-of-type {
        font-size: 18px;
    }
}

/* ===============================
   NOTRE HISTOIRE RESPONSIVE
=============================== */

.story-section {
    display: flex;
    justify-content: center;
    padding: 40px 20px 20px;
}

.story-card {
    width: 100%;
    max-width: 1200px;
    padding: 40px;
    border-radius: 42px;
    background: linear-gradient(180deg,
            rgba(245, 238, 230, 0.82),
            rgba(236, 227, 216, 0.78));
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}

.story-card img {
    width: 100%;
    max-width: 1200px;
    display: block;
    margin: 0 auto;
    border-radius: 28px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.08);
}

.story-quote {
    margin-top: 22px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.7;
    color: #9d7a57;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    letter-spacing: 0.5px;
    text-align: center;
}

/* ===============================
   STORY PAGE MOBILE FIX
=============================== */
@media (max-width: 768px) {

    .story-section {
        padding-left: 8px;
        padding-right: 8px;
        overflow: visible !important;
    }

    .story-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px;
        border-radius: 24px;
        background: #ebe1d4;
        overflow: visible !important;
    }

    .story-card img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 18px;
    }

    .story-main-image {
        width: 100%;
        max-width: 100%;
        cursor: pointer;
        transition: transform 0.35s ease;
        transform-origin: center center;
        display: block;
    }

    .story-main-image.zoomed {
        transform: scale(1.15);
        position: relative;
        z-index: 999;
    }

    .story-content {
        flex: 1;
    }

    .story-image-wrapper {
        overflow: visible !important;
    }


}