/* RESET & BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS VARIABLES */
:root {
    /* Typography */
    --font-primary: system-ui, Arial, sans-serif;
    --font-base: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
    --font-h6: clamp(1.05rem, 0.9rem + 0.3vw, 1.2rem);
    --font-h5: clamp(1.26rem, 1.1rem + 0.4vw, 1.44rem);
    --font-h4: clamp(1.512rem, 1.3rem + 0.5vw, 1.728rem);
    --font-h3: clamp(1.814rem, 1.6rem + 0.6vw, 2.074rem);
    --font-h2: clamp(2.178rem, 1.9rem + 0.8vw, 2.488rem);
    --font-h1: clamp(2.614rem, 2.2rem + 1vw, 2.986rem);
    --font-small: clamp(0.729rem, 0.7rem + 0.15vw, 0.833rem);
    --font-xsmall: clamp(0.607rem, 0.55rem + 0.1vw, 0.694rem);
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Colors */
    --color-darkest-brown: #231A12; /* Header */
    --button-color: #926D4F; /* Button */
    --button-hover: #B08B6D; /* Button effects */
    --color-rose-light: #F8B5D2; /* Input & Dropdown fields */
    --color-teal: #596667; /* Links */
    --bg-overlay-medium: rgb(from #231A12 r g b / 0.4); /* Background overlay */

    --color-text-base: palegoldenrod;
}

/* TYPOGRAPHY */

html {
    font-family: var(--font-primary);
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    color: var(--color-text-base);
}

h1 {
    font-size: var(--font-h1);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

h2 {
    font-size: var(--font-h2);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

h3 {
    font-size: var(--font-h3);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

h4 {
    font-size: var(--font-h4);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

h5 {
    font-size: var(--font-h5);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

h6 {
    font-size: var(--font-h6);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

p {
    font-size: var(--font-base);
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

a {
    color: var(--color-text-base);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

.small {
    font-size: var(--font-small);
}

.xsmall {
    font-size: var(--font-xsmall);
}

/* LAYOUT */

html, body {
    height: 100%;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    background:
            linear-gradient(
                    to bottom,
                    #231A12 0%,    /* Almost black brown top */
                    #422C22 10%,   /* Dark chocolate chestnut */
                    #61372B 25%,   /* Deep earthy red-brown */
                    #7A503B 40%,   /* Dark muted terracotta */
                    #947160 50%,   /* Smoky beige mid */
                    #596667 60%,   /* Dark teal-grey */
                    #7A563D 75%,   /* Tan warmth, muted */
                    #5C4432 90%,   /* Cocoa brown */
                    #4C382C 100%   /* Footer brown */
            ),
            repeating-linear-gradient(
                    45deg,
                    rgba(255, 255, 255, 0.02) 0px,
                    rgba(255, 255, 255, 0.02) 1px,
                    rgba(0, 0, 0, 0.02) 2px,
                    transparent 4px
            );
    background-blend-mode: overlay;
    background-attachment: fixed;
    color: var(--color-text-base);
}

/* HEADER */

header {
    background: transparent;
    position: relative;
    top: 0;
    width: 100%;
    height: 8vh;
    min-height: 70px;
    z-index: 1000;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 clamp(4rem, 12vw, 12rem);
    gap: 2rem; /* TODO Swap this (and other 'gap') with spacing variable */
}

.header-left {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    height: 100%;
}

header .logo-link {
    display: flex;
    align-items: center;
    height: 80%;
}

header img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.admin-links {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    align-items: center;
}

.nav-link {
    color: var(--color-text-base);
    font-size: var(--font-base);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.header-right {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.user-actions {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
}

.username {
    display: flex;
    align-items: center;
}

/* TODO .icon-link not scaling in footer */
.icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-base);
    font-size: var(--font-small);
}

.icon-link img {
    height: clamp(1.5rem, 2.5vw, 2rem);
    width: auto;
}

/* MAIN CONTENT */

main {
    background: transparent;
    padding: clamp(1rem, 2vh, 4rem) 5vw clamp(1rem, 2vh, 4rem);
    flex: 1;
    display: flex;
    justify-content: center;
}


/*------ USE THIS FOR ALL WINDOW STYLING------*/
.window-styling {
    background: rgb(from #231A12 r g b / 0.4);
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 20px;
}

button:hover {
    cursor: pointer;
}

.index-body {
    width: 50%;
    max-width: 1000px;
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.welcome {
    text-align: center;
    padding-bottom: 0.5rem;
}


/*------ Index Cupcake Creator CSS ------*/
.cupcake-creator form {
    display: flex;
    flex-direction: row;
    gap: clamp(1rem, 2vw, 2rem);
    padding: 1rem clamp(4rem, 6vw, 8rem);
}

.cupcake-creator-select {
    position: relative;
    display: inline-block;
    width: min(250px, 90vw);
}

.cupcake-creator-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    padding: .8rem 3rem .8rem 1rem;
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 5px;
    background:
        /* pil (inline SVG) */
            url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path d='M7 10l5 5 5-5' fill='none' stroke='palegoldenrod' stroke-width='2' stroke-linecap='round'/>\
    </svg>") no-repeat right .9rem center / 1rem,
            rgb(from #231A12 r g b / 0.4);
    color: var(--color-text-base);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.cupcake-creator-select select:hover {
    border-color: var(--button-hover);
}

.cupcake-creator-select select:focus {
    outline: none;
    border-color: rgb(from #231A12 r g b / 0.4);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-darkest-brown) 25%, transparent);
}

.cupcake-creator-select select:required:invalid {
    color: color-mix(in srgb, var(--color-text-base) 60%, white);
}

.cupcake-creator-select select option[disabled][selected] {
    color: color-mix(in srgb, var(--color-text-base) 60%, white);
}

select option {
    background-color: rgb(from #231A12 r g b / 0.4);
}

.cupcake-creator-select select option {
    background-color: rgb(from #231A12 r g b / 0.7);
    color: var(--color-text-base);
}

.cupcake-creator-input {
    width: min(120px, 25vw);
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 5px;
    padding: 0;
    background: rgb(from #231A12 r g b / 0.4);
    color: var(--color-text-base);
    font: inherit;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.cupcake-creator-input:hover {
    border-color: var(--button-hover);
}

.cupcake-creator-input:focus {
    outline: none;
    border-color: var(--button-hover);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-darkest-brown) 25%, transparent);
    background-color: #fff1;
}

.cupcake-creator-input::-webkit-inner-spin-button,
.cupcake-creator-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cupcake-creator button{
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 5px;
    width: min(140px, 90vw);
    background: rgb(from #231A12 r g b / 0.4);
    color: var(--color-text-base);
    font: inherit;
    font-weight: var(--fw-semibold);
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.cupcake-box {
    display: grid;
    place-items: center;
    width: min(320px, 50vw);
    aspect-ratio: 1 / 1;
}

.cupcake-box img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: 4rem;
}

.bottom-img {
    z-index: 1;
    transform: translateY(10%);
}

.topping-img {
    z-index: 2;
    transform: translateY(-30%);
}

.index-basket-button {
    background-color: rgb(from #231A12 r g b / 0.4);
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-weight: bold;
    color: var(--color-text-base);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.index-basket-button:hover {
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.6);
}


.cupcake-creator button:hover {
    border-color: var(--button-hover);
}


/*------ Basket BODY CSS ------*/
.basket-body {
    margin-top: 1vh;
    width: 75%;
}

.basket-body-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.basket-cupcake-body {
    width: 90%;
    max-width: 1000px;
    min-width: 600px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.basket-checkout-card {
    flex: 0 0 30%;
    align-self: flex-start;
    height: auto;
    min-height: unset;
}

.basket-checkout-details-card {
    margin: 4%;
}

.basket-checkout-details-card-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: auto;
    padding-bottom: 5px;
}

.basket-checkout-card button {
    width: 100px;
    border: solid 2px var(--color-darkest-brown);
    border-radius: 5px;
    padding: 5px;
    font-weight: bold;
}

.basket-clear-cart-button {
    background-color: darkred;
    color: var(--color-text-base);
}

.basket-clear-cart-button:hover {
    background-color: firebrick;
}

.basket-checkout-button {
    background-color: green;
    color: var(--color-text-base);
}

.basket-checkout-button:hover {
    background-color: forestgreen;
}

.basket-title-box {
    width: 100%;
    text-align: center;
    padding-bottom: 1rem;
}

.cupcake-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 31%;
    min-height: 360px;
    max-width: 30%;
    margin: 0 0.5% 1% 0.5%;
    overflow: hidden;
    position: relative;
}

.cupcake-box-basket {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.cupcake-box-basket img {
    grid-area: 1 / 1;
    width: 65%;
    height: auto;
    object-fit: contain;
}

.cupcake-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    margin: 0 2%;
    padding: 0 8% 5% 8%;
}

.cupcake-card-info button {
    background: none;
    border: none;
}

.minus-icon, .plus-icon {
}

.delete-icon, .minus-icon, .plus-icon {
    color: var(--color-text-base);
}

.delete-icon:hover, .minus-icon:hover, .plus-icon:hover {
    cursor: pointer;
}

.rowQuantity {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    padding-bottom: 2%;
}

.rowQuantity p {
    margin-bottom: 0.4rem;
}

/*------ Login BODY CSS ------*/
.login-container {
    display: flex;
    width: min(700px, 90%);
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
}

.login-form {
    width: 80%;
    display: grid;
    gap: 1rem;
}

.login-field input,
.login-input, .login-form input {
    width: 100%;
    appearance: none;
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 8px;
    padding: .8rem 1rem;
    background: rgb(from #231A12 r g b / 0.25);
    color: var(--color-text-base);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.login-input::placeholder {
    color: color-mix(in srgb, var(--color-text-base) 65%, white);
}

.login-input:focus {
    outline: none;
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.35);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-darkest-brown) 25%, transparent);
}

.login-container button {
    background-color: rgb(from #231A12 r g b / 0.4);
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text-base);
    transition: transform .06s ease, border-color .15s ease, background-color .15s ease;
}
.login-container button:hover {
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.55);
}
.login-container button:active {
    transform: translateY(1px);
}

.error-succes-label {
    width: auto;
    max-width: 600px;
    margin-inline: auto;
}

.error {
    background: #5f1a1a33;
    border: 1px solid #ffb5b5;
    color: #ffd5d5;
    padding: .6rem .8rem;
    border-radius: 6px;
}

.success {
    background: #1a5f3033;
    border: 1px solid #b5ffb5;
    color: #dcffdc;
    padding: .6rem .8rem;
    border-radius: 6px;
}

.createaccount-link {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    font-size: var(--font-small);
}
.createaccount-link a:hover {
    text-decoration: underline;
}


.tooltip {
    visibility: hidden;
    background: #333;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    position: absolute;
    width: 200px;
    font-size: var(--font-small);
    z-index: 10;
}

.login-field:hover .tooltip {
    visibility: visible;
}

/*------ CUPCAKES.HTML CSS ------*/
.admin-cupcake-body{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.admin-cupcake-body h5{
    margin-bottom: 0.5rem;
}

.admin-cupcake{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 30%;
}

.admin-cupcake form {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50%;
    width: 75%;
    gap: 0.5rem;
}

.admin-cupcake form button{
    align-items: center;
}

.admin-cupcake-body input{
    width: 90%;
    appearance: none;
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 8px;
    padding: .8rem 1rem;
    background: rgb(from #231A12 r g b / 0.25);
    color: var(--color-text-base);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.admin-cupcake-body input::placeholder{
    color: color-mix(in srgb, var(--color-text-base) 65%, white);
}

.admin-cupcake-body input:focus{
    outline: none;
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.35);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-darkest-brown) 25%, transparent);
}

.admin-cupcake-body button{
    background-color: rgb(from #231A12 r g b / 0.4);
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text-base);
    transition: transform .06s ease, border-color .15s ease, background-color .15s ease;
}

.admin-cupcake-body button:hover{
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.55);
}

.admin-cupcake-body button:active{
    transform: translateY(1px);
}

.admin-cupcake-select {
    position: relative;
    display: inline-block;
    width: 90%;
}

.admin-cupcake-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    padding: .8rem 3rem .8rem 1rem;
    border: 2px solid rgb(from #231A12 r g b / 0.4);
    border-radius: 5px;
    background:
        /* pil (inline SVG) */
            url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path d='M7 10l5 5 5-5' fill='none' stroke='palegoldenrod' stroke-width='2' stroke-linecap='round'/>\
    </svg>") no-repeat right .9rem center / 1rem,
            rgb(from #231A12 r g b / 0.4);
    color: var(--color-text-base);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.admin-cupcake-select select:hover {
    border-color: var(--button-hover);
}

.admin-cupcake-select select:focus {
    outline: none;
    border-color: rgb(from #231A12 r g b / 0.4);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-darkest-brown) 25%, transparent);
}

.admin-cupcake-select select:required:invalid {
    color: color-mix(in srgb, var(--color-text-base) 60%, white);
}

.admin-cupcake-select select option[disabled][selected] {
    color: color-mix(in srgb, var(--color-text-base) 60%, white);
}

select option {
    background-color: rgb(from #231A12 r g b / 0.4);
}

.admin-cupcake-select select option {
    background-color: rgb(from #231A12 r g b / 0.7);
    color: var(--color-text-base);
}


/*------ ABOUT.HTML CSS ------*/
.about-body {
    width: 65%;
    display: flex;
    flex-direction: column;

}

.text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 3rem;
}

.text-box-img{
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 3rem;
}

.text-box-img img {
    border-radius: 5px;
}

.text-box-img-text {
    display: flex;
    flex-direction: column;
    margin: 2rem 0;
    justify-content: center;
    width: 60%;
}

.text-box-title {
    margin-bottom: 1rem;
}

.hero {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
}

.hero img{
    border: 1px solid var(--bg-overlay-medium);
    border-radius: 5px;
    margin-bottom: .5rem;
}

.about-body img {
    text-align: center;
    max-width: 1000px;
    max-height: 600px;
    object-fit: contain;
}



/* FOOTER */

footer {
    background: transparent;
    min-height: 150px;
    height: auto;
    width: 100%;
    padding: clamp(1rem, 2vh, 2rem) clamp(1rem, 3vw, 3rem);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
}

address,
.footer-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    width: 15%;
    min-width: 200px;
    font-style: normal;
    font-size: var(--font-small);
}

address p,
.footer-contact p {
    margin-bottom: 0.25rem;
}

.footer-hours {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 20%;
    min-width: 200px;
    font-size: var(--font-small);
}

.footer-title {
    font-weight: var(--fw-bold);
    text-align: center;
    margin-bottom: 0.5rem;
    width: 100%;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 2rem;
}

.hours-row span:last-child {
    font-weight: var(--fw-semibold);
}

.footer-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 15%;
    min-width: 120px;
}


/* UTILITY CLASSES */

.title {
    text-align: center;
}

.row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* LEGACY */
/* TODO Review with team */

.account-info {
    display: flex;
    gap: 2vw;
    align-items: center;
}


.about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 15%;
    min-width: 120px;
}



.opening-hours {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    width: 20%;
    min-width: 200px;
    font-size: var(--font-small);
}

.opening-hours .title {
    font-weight: var(--fw-bold);
    margin-bottom: 0.5rem;
}

/* RESPONSIVE */
/* TODO Refactor this to implement burger menu on mobile */

@media (max-width: 768px) {
    header nav {
        padding: 0 1rem;
        gap: 1rem;
    }

    .header-left {
        gap: 1rem;
    }

    .admin-links {
        flex-direction: column;
        gap: 0.5rem;
    }

    footer {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1rem;
    }

    address,
    .footer-hours,
    .footer-about {
        width: 100%;
        min-width: unset;
    }
}

/*------ CHECKOUT PAGES CSS ------*/

.checkout-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.checkout-container h1 {
    margin-bottom: 1rem;
}

.step-info {
    text-align: center;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 1200px;
}

.step-info h2 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.checkout-step {
    font-size: var(--font-small);
    opacity: 0.8;
    margin-bottom: 0;
}

.checkout-container {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    max-width: 1200px;
    width: 100%;
}

.checkout-container section {
    flex: 1 1 65%;
    min-width: 0;
}

.checkout-container .delivery,
.checkout-container .delivery-info,
.checkout-container .customer-info,
.checkout-container .payment {
    background: var(--bg-overlay-medium);
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 20px;
    padding: 2rem;
    margin-top: 1rem;
}

.checkout-container .checkout-summary {
    flex: 0 0 320px;
    background: var(--bg-overlay-medium);
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 20px;
    padding: 1.5rem;
    position: sticky;
    top: 2rem;
    margin-top: 1rem;
}

.checkout-container .checkout-summary > p,
.checkout-summary .summary-total p {
    margin-bottom: 0;
    text-align: right;
}

.checkout-container .total-price {
    text-align: center;
    margin-bottom: 0;
}

.checkout-container .order-card,
.checkout-summary .order-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.checkout-container .cupcake-summary,
.checkout-summary .cupcake-summary {
    position: relative;
    width: 70px;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.checkout-container .cupcake-summary img,
.checkout-summary .cupcake-summary img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.checkout-container .bottom-img-small,
.checkout-summary .bottom-img-small {
    z-index: 1;
    transform: translateY(8%);
}

.checkout-container .topping-img-small,
.checkout-summary .topping-img-small {
    z-index: 2;
    transform: translateY(-30%);
}

.checkout-container .order-card-info,
.checkout-summary .order-card-info {
    flex: 1;
    min-width: 0;
}

.checkout-container .order-card-info p,
.checkout-summary .order-card-info p {
    margin: 0.3rem 0;
    font-size: 0.85rem;
    line-height: 1.3;
}

.checkout-container .checkout-summary > p {
    border-top: 1px solid rgba(227, 216, 224, 0.3);
    padding-top: 1rem;
    margin-top: 1rem;
    font-weight: bold;
    text-align: right;
}

.delivery-method h3 {
    margin-bottom: 1.5rem;
}

.delivery-datetime h3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.delivery-option.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.delivery-option.disabled input,
.delivery-option.disabled label {
    cursor: not-allowed;
}

.disabled-text {
    font-size: var(--font-small);
    font-style: italic;
    opacity: 0.7;
}

.required-badge {
    display: inline-block;
    background: var(--bg-overlay-medium);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: var(--font-small);
    margin-top: 0.5rem;
}

.delivery-date-picker{
    display: flex;
    flex-direction: column;
}

.delivery-date-picker input[type="date"]{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 5px;
    width: 20%;

}

.delivery-date-picker input[type="date"]:focus {
    outline: none;
    border-color: var(--bg-overlay-medium);
}

.delivery-date-picker {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.delivery-time {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.delivery-time-picker select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 20%;
    padding: .5rem .5rem .5rem .5rem;
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 5px;
    background: /* pil (inline SVG) */ url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path d='M7 10l5 5 5-5' fill='none' stroke='palegoldenrod' stroke-width='2' stroke-linecap='round'/>\
    </svg>") no-repeat right .9rem center / 1rem,
    rgb(from #231A12 r g b / 0.4);
    color: var(--color-text-base);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.delivery-date-picker-field {
    height: 35px;
    background: var(--bg-overlay-medium);
    border-color: var(--bg-overlay-medium);
    color: var(--color-text-base);
    padding: 2px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(88%) sepia(16%) saturate(439%) hue-rotate(13deg) brightness(90%);
}

.group-title{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}

.group-body{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}

.group-body-element{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

.edit-checkout {
    background-color: var(--bg-overlay-medium);
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-weight: bold;
    color: var(--color-text-base);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.input-group {
    display: flex;
    flex-direction: column;
    width: 40%;
}

.input-group label {
    margin-top: 0.5rem;
}

.button-group{
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.checkout-button {
    background-color: var(--bg-overlay-medium);
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-weight: bold;
    color: var(--color-text-base);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkout-button:hover {
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.6);
}

.delivery-time-picker select:hover {
    border-color: var(--button-hover);
}

.delivery-time-picker select:focus {
    outline: none;
    border-color: var(--bg-overlay-medium);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-darkest-brown) 25%, transparent);
}

.delivery-time-picker select:required:invalid {
    color: color-mix(in srgb, var(--color-text-base) 60%, white);
}

.delivery-time-picker select option[disabled][selected] {
    color: color-mix(in srgb, var(--color-text-base) 60%, white);
}

select option {
    background-color: rgb(from #231A12 r g b / 0.4);
}

.delivery-time-picker select option {
    background-color: rgb(from #231A12 r g b / 0.7); /* darker translucent brown */
    color: var(--color-text-base);
}

.customer-info-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group input {
    width: 100%;
    appearance: none;
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 8px;
    padding: .8rem 1rem;
    background: rgb(from #231A12 r g b / 0.25);
    color: var(--color-text-base);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.input-group input::placeholder {
    color: color-mix(in srgb, var(--color-text-base) 65%, white);
}

.input-group input:focus {
    outline: none;
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.35);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-darkest-brown) 25%, transparent);
}

.payment-description {
    font-size: var(--font-small);
    margin-top: 0.5rem;
    opacity: 0.8;
}

.checkout-confirmed-body {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.order-complete {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}

.checkout-container #error-message{
    margin-top: 1rem;
}

.back-home {
    display: flex;
    justify-content: center;
}

/*------ ADMIN / CUSTOMER VIEWS CSS (Orders & Customers) ------*/

.orders-view,
.customer-info-tables,
.customer-view {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.orders-view h1,
.customer-info-tables h1,
.customer-view h1 {
    text-align: center;
    margin-bottom: 2rem;
}

.orders-view h2,
.customer-info-tables h2,
.customer-view h2 {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.order-search,
.customer-search {
    background: var(--bg-overlay-medium);
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.order-search h2,
.customer-search h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.search-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.search-form select,
.search-form input[type="text"] {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 8px;
    padding: .8rem 1rem;
    background: rgb(from #231A12 r g b / 0.25);
    color: var(--color-text-base);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.search-form select {
    min-width: 200px;
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path d='M7 10l5 5 5-5' fill='none' stroke='palegoldenrod' stroke-width='2' stroke-linecap='round'/>\
    </svg>");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 1rem;
    padding-right: 3rem;
}

.search-form input[type="text"] {
    flex: 1;
    min-width: 250px;
}

.search-form input[type="text"]::placeholder {
    color: color-mix(in srgb, var(--color-text-base) 65%, white);
}

.search-form select:hover,
.search-form input[type="text"]:hover {
    border-color: var(--button-hover);
}

.search-form select:focus,
.search-form input[type="text"]:focus {
    outline: none;
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.35);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-darkest-brown) 25%, transparent);
}

.search-button,
.reset-button {
    background-color: var(--bg-overlay-medium);
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 8px;
    padding: 0.8rem 1.5rem;
    font-weight: var(--fw-semibold);
    color: var(--color-text-base);
    text-decoration: none;
    transition: transform .06s ease, border-color .15s ease, background-color .15s ease;
    cursor: pointer;
    display: inline-block;
    font: inherit;
}

.search-button:hover,
.reset-button:hover {
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.55);
}

.search-button:active,
.reset-button:active {
    transform: translateY(1px);
}

.success-message,
.error-message {
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.success-message {
    background: #1a5f3033;
    border: 1px solid #b5ffb5;
    color: #dcffdc;
}

.error-message {
    background: #5f1a1a33;
    border: 1px solid #ffb5b5;
    color: #ffd5d5;
}

.success-message p,
.error-message p {
    margin: 0;
}


.orders-table,
.customer-details {
    background: var(--bg-overlay-medium);
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    overflow-x: auto;
}

.customer-details h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.orders-table table,
.customer-details table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-small);
}

.orders-table th,
.customer-details th {
    background: rgb(from #231A12 r g b / 0.3);
    padding: 1rem;
    text-align: left;
    font-weight: var(--fw-semibold);
    border-bottom: 2px solid var(--bg-overlay-medium);
    white-space: nowrap;
}

.orders-table td,
.customer-details td {
    padding: 1rem;
    border-bottom: 1px solid rgb(from #231A12 r g b / 0.2);
    vertical-align: middle;
}

.customer-details td:last-child {
    text-align: center;
}


.customer-details th:last-child {
    text-align: center;
}


.orders-table tbody tr:hover,
.customer-details tbody tr:hover {
    background: rgb(from #231A12 r g b / 0.2);
}

.status-unpaid,
.status-paid {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 1rem;
    font-size: var(--font-xsmall);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.status-unpaid {
    background: #5f1a1a66;
    border: 1px solid #ffb5b5;
    color: #ffd5d5;
}

.status-paid {
    background: #1a5f3066;
    border: 1px solid #b5ffb5;
    color: #dcffdc;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.action-buttons form {
    margin: 0;
}

.action-btn,
.icon-button {
    background: var(--bg-overlay-medium);
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .06s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-btn img,
.icon-button img {
    width: 20px;
    height: 20px;
    display: block;
}

.action-btn:hover,
.icon-button:hover {
    border-color: var(--button-hover);
    background-color: rgb(from #231A12 r g b / 0.55);
}

.action-btn:active,
.icon-button:active {
    transform: translateY(1px);
}

.delete-btn:hover {
    border-color: #ff6b6b;
    background-color: #5f1a1a66;
}

.paid-btn:hover {
    border-color: #6bff6b;
    background-color: #1a5f3066;
}

/*------ EDIT CUSTOMER ------*/

.edit-customer-view{
    display: flex;
    flex-direction: column;
}

.edit-customer-view h1, h2{
    margin-bottom: 2rem;
}

.customer-info nh:last-child{
    margin-top: 2rem;
}

.edit-form input[type="number"] {
    border: 2px solid var(--bg-overlay-medium);
    border-radius: 8px;
    padding: .8rem 1rem;
    background: rgb(from #231A12 r g b / 0.25);
    color: var(--color-text-base);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.edit-form input[type="number"] {
    flex: 1;
    min-width: 80px;
}

.edit-form input[type="number"]::placeholder {
    color: color-mix(in srgb, var(--color-text-base) 65%, white);
}

/*------ ORDER DETAILS CSS ------*/

.order-detail-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    margin-bottom: 1rem;
}
.orders-table h3 {
    margin-bottom: 2rem;
}

.order-detail-cupcake {
    position: relative;
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.order-detail-cupcake img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.order-detail-bottom {
    z-index: 1;
    transform: translateY(10%);
}

.order-detail-topping {
    z-index: 2;
    transform: translateY(-30%);
}

.order-detail-info {
    flex: 1;
    display: flex;
    min-width: 0;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.order-detail-info p {
    margin: 0;
    font-size: var(--font-base);
}

.order-detail-info p:first-child {
    margin-top: 0;
}

.order-detail-info p:last-child {
    margin-bottom: 0;
}



/*------ MEDIA CSS ------*/

@media (prefers-contrast: more) {
    .select select {
        border-width: 3px;
    }

    checkout-container {
        flex-direction: column;
    }

    .checkout-container .checkout-summary {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
}

/* Lille variant (hvis du vil bruge på mobile) */
.select.select--sm select {
    padding: .6rem 2.4rem .6rem .8rem;
    border-radius: .6rem;
    font-size: 0.95em;
}

@media (max-width: 450px) {
    /* General body padding */
    body {
        padding: 0 1rem;
    }

    h1 {
        font-size: 24px;
        margin-bottom: 5px;
    }

    h2 {
        font-size: 18px;
    }

    /* Header adjustments */
    header nav {
        align-items: flex-start;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }

    .header-left,
    .header-right {
        align-items: flex-start;
        gap: 0.5rem;
    }


    .icon-link span {
        visibility: hidden;
    }

    .admin-links {
        flex-direction: column;
        gap: 0.5rem;
    }

    .username {
        position: absolute;
        top: 35px;
        right: 20px;
        z-index: 20;
    }

    /* Main content adjustments */
    main {
        padding: 1rem 0.5rem;
        flex-direction: column;
        align-items: center;
        align-content: center;
    }

    .index-body {
        width: 90%;
        margin-top: 2vh;
    }

    .cupcake-box {
        width: unset;
        margin-top: unset;
    }


    .cupcake-creator form {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0.5rem;
    }

    .cupcake-creator-select,
    .cupcake-creator-input,
    .cupcake-creator button {
        width: 100%;
    }

    .cupcake-box {
        width: 80%;
        margin-top: 2rem;
    }

    /* Basket adjustments */
    .basket-body {
        width: 95%;
    }

    .basket-cupcake-body{
        min-width: 90%;
        max-width: 90%;

    }

    .basket-body-row {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }

    .basket-checkout-card {
        flex: 0 0 100%;
        width: 90%;
        align-self: center;
        padding: 0 7px 0 7px;
    }

    .basket-checkout-details-card {
        margin: 2% 0;
    }

    .cupcake-card {
        flex: 0 0 100%;
        max-width: 100%;
        min-height: unset;
        margin: 0 0 1rem 0;
    }


    /*Checkout adjustments*/

    .checkout-container {
        display: unset;
    }

    .checkout-container .checkout-summary {
        position: absolute;
        visibility: hidden;
    }

    .input-group {
        width: unset;
    }

    .delivery-time-picker select {
        width: 80%;
    }

    .delivery-date-picker input[type="date"] {
        width: 80%;
    }

    /* Footer adjustments */
    footer {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 2rem 1rem;
    }

    address,
    .footer-hours,
    .footer-about {
        width: 100%;
        min-width: unset;
    }

    .hours-row {
        width: 65%
    }

    .footer-contact {
        text-align: left;
    }

    /* Login form adjustments */
    .login-container {
        width: 95%;
        padding: 1rem;
    }

    .login-form {
        width: 100%;
    }

    /* Admin cupcake page */
    .admin-cupcake-body {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .admin-cupcake {
        width: 100%;
    }

    .admin-cupcake form {
        width: 100%;
    }

    /* About.HTML */
    .about-body img {
        visibility: hidden;
        position: absolute;
    }

    .text-box-title {
        width: 100%;
        text-align: center;
    }

    .hero {
        margin-bottom: 1rem;
    }

    .text-box-img {
        margin-bottom: 1rem;
    }

    .text-box {
        margin-bottom: 1rem;
    }

    .text-box-img-text {
        width: unset;
    }
}