/*****/
/*ALL*/
/*****/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --primary-color: #F7B9B9;
    --secondary-color: #A3D9A5;
    --accent-color: #5B405F;
    --background-color: #FDECEC;
    --secondary-shade-color: #C6E3BE;
    --hover-color: #8f628f;
}

[data-theme="dark"] {
    --primary-color: #F2A77E;          /* warm coral-peach, not too saturated */
    --secondary-color: #8DCB90;        /* calm mint green */
    --accent-color: #C7A4CC;           /* lavender accent */
    --background-color: #2D2428;       /* medium warm dark */
    --secondary-shade-color: #3B3136;  /* surface/card background */
    --hover-color: #D39BD3;            /* soft purple-pink hover tone */
    --text-color: #F8F5F6;             /* soft white */
    --muted-text-color: #CFC7CA;       /* muted gray-pink for secondary text */
    --border-color: #4C4045;
}


/***************/
/*HTML AND BODY*/
/***************/
html, body {
    height: 100%;
    background: var(--background-color);
    color: var(--accent-color);
    font-family: 'Inter', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/****************/
/*NAVIGATION BAR*/
/****************/
.nav_container {
    width: 100%;
    height: 52px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
}

nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    gap: 32px;
}

nav a {
    text-decoration: none;
    color: var(--accent-color);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.7s ease;
}

nav a:hover {
    transition: 0.5s ease;
    color: var(--hover-color);
}

li.list_of_nav {
    display: flex;
    justify-content: center;
    align-items: center;
}
.cupcake_logo {
    height: 48px;
    display: block;
    position: absolute;
    top: 6px;
    left: 70px;
    object-fit: contain;
    border: none;
    outline: none;
    cursor: pointer;
}

a svg:hover {
    cursor: pointer;
    transition: 0.5s ease;
    transform: scale(1.1);
}

/*********/
/*CONTENT*/
/*********/
.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 25rem 2rem 25rem;
    gap: 2rem;
    flex-wrap: wrap;
}

.hero_text h2 {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.hero_image {
    width: 277px;
    height: 264px;
    background-color: var(--primary-color);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: inset -2px -4px 10px rgba(0, 0, 0, 0.3)
}

.about_image {
    width: 277px;
    height: 264px;
    background-color: var(--primary-color);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: inset -2.5px -4px 8px rgba(0, 0, 0, 0.3);
}

/**************/
/*MAIN CONTENT*/
/**************/
.content {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 40px 400px;
}

.content:nth-child(odd) {
    flex-direction: row-reverse;
}

.product_content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 48px 80px;
    flex-direction: row-reverse;
}

.green_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 161px;
    height: 127px;
    background: var(--secondary-color);
    border-radius: 10px;
    flex-shrink: 0;
    transition: 2s;
    cursor: pointer;
}

.green_box:hover {
    transform: scale(1.3);
}

.green_box_about{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 161px;
    height: 127px;
    background: var(--secondary-color);
    border-radius: 10px;
    flex-shrink: 0;
}

input#counter_number {
    text-align: center;
}

.green_box_counter{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 55px;
    background: var(--secondary-color);
    border-radius: 10px;
    flex-shrink: 0;
    margin: 15% auto;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

p {
    font-size: 12px;
    line-height: 1.6;
    max-width: 500px;
}

.dropdown_menu {
    width: 210px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
    color: var(--accent-color);
    background: var(--secondary-shade-color) url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'> <path d='M12 14.975C11.8667 14.975 11.7417 14.9543 11.625 14.913C11.5083 14.8717 11.4 14.8007 11.3 14.7L6.69999 10.1C6.51665 9.91665 6.42499 9.68332 6.42499 9.39999C6.42499 9.11665 6.51665 8.88332 6.69999 8.69999C6.88332 8.51665 7.11665 8.42499 7.39999 8.42499C7.68332 8.42499 7.91665 8.51665 8.09999 8.69999L12 12.6L15.9 8.69999C16.0833 8.51665 16.3167 8.42499 16.6 8.42499C16.8833 8.42499 17.1167 8.51665 17.3 8.69999C17.4833 8.88332 17.575 9.11665 17.575 9.39999C17.575 9.68332 17.4833 9.91665 17.3 10.1L12.7 14.7C12.6 14.8 12.4917 14.871 12.375 14.913C12.2583 14.955 12.1333 14.9757 12 14.975Z' fill='black'/></svg>") no-repeat right 10px;
    padding-right: 25px;
    padding-left: 10px;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    font-size: 18px;
    box-shadow: inset 0 2px 4px rgba(0,0,0, 0.5);
    transition: all 0.3s ease;
}

.dropdown_menu:focus {
    outline: 2px solid var(--accent-color);
}

footer {
    background: var(--primary-color);
    padding: 16px 80px;
    color: var(--accent-color);
    font-size: 8px;
    justify-content: center;
    align-items: center;
}

/*******************************/
/*INPUT SECTION/PAGE/CONTAINERS*/
/*******************************/
#title {
    text-align: center;
    margin-top: 50px;
    font-size: 36px;
    font-weight: 700;
}

.input_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 32px 16px;
    gap: 16px;
}

form.login_form {
    display: contents;
}

/*****************************************/
/*SAME AS INPUT-CONTAINER (FOR EDIT PAGE)*/
/*****************************************/
.edit_container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 32px 16px;
    gap: 16px;
}

.edit_container_text {
    position: absolute;
    top: -0.1%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    padding: 0 8px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 7px 7px 0 0;
    box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.6);
}

.save_cupcake_form {
    justify-content: center;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 0 40% 2rem;
}

input {
    height: 40px;
    border: none;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 14px;
    background-color: var(--secondary-shade-color);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

input:focus {
    outline: 2px solid var(--accent-color);
}

button {
    width: 6rem;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: var(--accent-color);
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.7s ease;
    align-self: center;
}

button:hover {
    background-color: var(--accent-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.counter_button {
    width: 2rem;
    height: 30px;
    border: none;
    border-radius: 20px;
    background: var(--accent-color);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.7s ease;
    margin: 0 auto;
}

.product_page_button {
    width: 6rem;
    min-width: 6rem;
}

.product_page_cart {
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 20px;
}

.product_page_actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.order_confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 32px 16px;
    gap: 50px;
    font-weight: 800;
}

.pay_form {
    display: grid;
    gap: 20px;
}

.pay_button {
    margin-left: 36px;
}

/**************/
/*CART SECTION*/
/**************/
.cart_container {
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
    padding: 32px 32px;
    gap: 24px;
    margin-top: 20px;
}

.discount_form {
    margin-bottom: 20px;
    margin-left: 16px;
}

.cart_item_name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
}

.cart_item_price {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
}

.cart_amount_quantity {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
}

.cart_item {
    margin-top: 20px;
    display: inline-grid;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-color);
    font-size: 18px;
    margin-bottom: 1px;
    padding: 20px 28px;
    border-radius: 12px;
    transition: all 1s;
}

.cart_item:hover {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
    transition: 1s ease;
    transform: scale(1.02);
}

.cart_item span {
    font-size: 16px;
    display: flex;
    justify-content: center;
}

.cart_container_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 2rem;
    padding: 16px;
}

#cart_title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    font-size: 36px;
    font-weight: 700;
    padding: 1px 5px;
}

/********************************/
/*BUTTONS SPECIFIC FOR cart.html*/
/********************************/
.update_info_button {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    text-align: center;
    text-decoration: none;
    align-content: center;
    width: 5rem;
    height: 30px;
    border: none;
    border-radius: 10px;
    background: var(--accent-color);
    font-weight: normal;
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.7s ease;
    margin-top: 12px;
    margin-bottom: 12px;
}

.update_info_button:hover {
    background-color: var(--hover-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.registerInfo_form {
    display: flex;
    width:40%;
    min-width:300px;
    max-width: 600px;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: var(--primary-color);
    border-radius: 10px;
}

.checkout_button {
    text-decoration: none;
    align-content: center;
    text-align: center;
    width: 8rem;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: var(--accent-color);
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.7s ease;
    align-self: center;
    margin-top: 2rem;
}

.checkout_button:hover {
    background-color: var(--accent-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/************/
/*ADMIN PAGE*/
/************/
.admin_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 0;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.admin_container {
    width: 401px;
    height: 211px;
    background: var(--primary-color);
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0 , 0.3);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dashboard_numbers_admin {
    font-weight: 800;
    font-size: 2.5rem;
}

/****************/
/*DASHBOARD GRID*/
/****************/
.dashboard_grid {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    max-width: 100%;
}

.dashboard_row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.dashboard_row1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;

}

/*************/
/*CARD STYLES*/
/*************/
.sales_today {
    background: var(--secondary-shade-color);
    border: 3px solid var(--accent-color);
    border-radius: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    height: 28vh;
    width: 30%;
}

.upcoming_orders{
    background: var(--secondary-shade-color);
    border: 3px solid var(--accent-color);
    border-radius: 0 10px 0 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    height: 28vh;
    width:100%;

}

.top_customers {
    background: var(--secondary-shade-color);
    border: 3px solid var(--accent-color);
    border-radius: 0 0 0 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    height: 28vh;
    width: 100%;
}

.sales_period {
    background: var(--secondary-shade-color);
    border: 3px solid var(--accent-color);
    border-radius: 0 0 10px 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    height: 28vh;
    width: 30%;
}

.dashboard_card p {
    font-weight: 700;
    font-size: 12px;
    text-align: center;

}

.card_header {
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 8px;
}

.card_list {
    list-style: none;
    width: 100%;
    padding-left: 0;
    height: 100%;
    max-height: 80%;
    overflow-y: auto;
    overflow-x: hidden;

}

.card_list li {
    background: var(--primary-color);
    margin: 4px 0;
    padding: 1px 8px;
    border-radius: 8px;
}

.dashboard_buttons {
    display: flex;
    gap: 24px;
    margin-top: 24px;
    justify-content: center;
}

.dashboard_buttons button {
    background:var(--primary-color);
    color: var(--accent-color);
    font-weight: 600;
    width: 8rem;
    cursor: pointer;
}

.gift_card {
    background: var(--secondary-color);
    border: 3px solid var(--accent-color);
    border-radius: 10px;
    padding: 16px;
    margin-top: 32px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 50%;
}

form.gift_card_container {
    display: flex;
    flex-direction: column;
    width: 50%;
}

input#amount, input#email_gift_card {
    background-color: var(--primary-color);
    margin-bottom: 12px;
}

.gift_card p {
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

.gift_inputs {
    display: flex;
    gap: 12px;
}

.gift_inputs input {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: none;
    background: var(--primary-color);
    font-size: 14px;
}

.send_gift {
    background: var(--primary-color);
    color: var(--accent-color);
    font-weight: 600;
    width: 150px;
    cursor: pointer;
}

.send_gift:hover {
    background-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/***************/
/*CUSTOMER PAGE*/
/***************/
#title_admin_page {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
}

.view_list {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    width: 100%;
    max-width: 600px;
    height: 538px;
    background-color: var(--secondary-shade-color);
    border-radius: 10px;
}

.page_body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    gap: 2%;
    padding: 20px;
}

.header_box {
    width: 100%;
    max-width: 600px;
    background-color: var(--primary-color);
    border-radius: 10px;
}

.card_list, .list_rows li {
    padding: 2%;
    max-height: 100%;
    justify-content: center;
    max-width: 90%;
}

.search_input, .customer_search input {
    padding: 8px;
    border-radius: 8px;
    border: none;
    background: var(--primary-color);
    font-size: 14px;
    width: 100%;
    max-width: 300px;
}

.see_order_button {
    width: 120%;
    max-width: 200px;
    margin-bottom: 4%;
    background-color: var(--primary-color);
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
}

.see_order_button:hover {
    background-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.close-btn {
    background: transparent;
    border: none;
    color: #c00;
    font-size: 16px;
    cursor: pointer;
    margin-left: 8px;
}

.close-btn:hover {
    color: #800;
}

/**************/
/*PROFILE PAGE*/
/**************/
.profile_container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: calc(100vh - 52px);
    padding: 40px 30px 30px;
    box-sizing: border-box;
    gap: 18px;
}

.profile_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    width: 300px;
    height: 200px;
    border-radius: 40%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.profile_content p {
    margin: 6px 0;
    text-align: center;
}

.profile_page_content {
    text-align: center;
    width: 100%;
    max-width: 220px;
}

.hello_admin {
    color: var(--accent-color);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.image_cupcake_container {
    position: relative;
    display: inline-block;
}

.buy_cupcakes {
    display: block;
    width: 50%;
    cursor: pointer;
}

.link_to_shop {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.overlay_buy_cupcake {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.image_cupcake_container:hover .overlay_buy_cupcake {
    filter: brightness(70%);
    transition: 1s ease;
}

/**************/
/*INDEX IMAGES*/
/**************/
.index_green_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.green_box img {
    display: flex;
    flex: 100%;
    max-width: 65%;
    max-height: 100%;
    object-fit: contain;
}

.search_input_form {
    display: flex;
    flex-direction: column;
    gap:20px;
}

.profile_information {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-color);
    }

/*****************/
/*DARKMODE BUTTON*/
/*****************/
.darkmode-btn {
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, box-shadow 0.3s, transform 0.15s;
    outline: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 20;
}

.darkmode-btn:active {
    transform: scale(0.92);
}

.darkmode-btn .moon {
    color: var(--accent-color, #231821);
    transition: color 0.3s;
}

/*****************/
/*PREVIEW CUPCAKE*/
/*****************/
.product_form {
    flex: 1;
}

.product_preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
}

.cupcake_preview {
    position: relative;
    width: 200px;
    height: 200px;
}

.cupcake_preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

img#preview_bottom {
    top: 20%;
    filter: drop-shadow(5px 2px 1px black);
}

/***************/
/*MEDIA QUERIES*/
/***************/
@media (max-width: 430px) {
    .content {
        padding: 40px 16px;
    }
    .hero {
    justify-content: center;
    }
    .hero_image {
        margin-left: unset;
    }
    .content:nth-child(odd) {
        flex-direction: row-reverse;
    }

    .nav_container {
        padding: 0;
    }

    .product_content {
        flex-direction: column;
    }

    .save_cupcake_form {
        padding: 0;
    }

    .product_preview {
        margin-bottom: 5%;
    }
}

@media (max-width: 1500px) {
    .content {
        padding: 40px 100px;
    }
    .content:nth-child(odd) {
        flex-direction: row-reverse;
    }
}

@media (max-width: 650px) {
    .content {
        padding: 40px 16px;
    }
    .content:nth-child(odd) {
        flex-direction: row-reverse;
    }
    nav ul {
        gap: 11px;
    }

    nav a {
        font-size: 10px;
    }
}

@media (max-width: 450px) {
    .content {
        padding: 40px 16px;
        flex-direction: column;
    }
    .content:nth-child(odd) {
        flex-direction: column;
    }
    @media (max-width: 500px) {
    }
}

@media (max-width: 1000px) {
    .hero {
        padding: 2rem;
    }
}

@media (max-width: 900px) {
    .dashboard_grid {

    }
}