/* =========================================================
   NAMTRACK SERVE
   KAINAN SOUTH SIPOCOT
   LOGIN PAGE
   GRILLING AND SIZZLING THEME
========================================================= */


/* =========================================================
   COLOR PALETTE
========================================================= */

:root {

    --peach: #ffd4b9;

    --light-orange: #ff9a5b;

    --sizzling-orange: #fe6d13;

    --grilled-orange: #aa4100;

    --dark-brown: #2d1100;

    --dark-brown-light: #451b08;

    --cream: #fff5e9;

    --white: #ffffff;

    --gray: #777777;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    height: 100%;

}


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

}


/* =========================================================
   MAIN LOGIN PAGE
========================================================= */

.login-page {

    min-height: 100vh;

    background:
        var(--dark-brown);

    overflow: hidden;

}


.login-wrapper {

    min-height: 100vh;

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

}


/* =========================================================
   LEFT LOGIN PANEL
========================================================= */

.login-panel {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 50px 70px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(254, 109, 19, 0.18),
            transparent 25%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(170, 65, 0, 0.35),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #2d1100,
            #451b08,
            #2d1100
        );

}


/* =========================================================
   SUBTLE GRILL TEXTURE
========================================================= */

.login-panel::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.08;

    background:

        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 18px,
            #ffd4b9 19px,
            transparent 21px
        );

    pointer-events: none;

}


/* =========================================================
   LOGIN CONTENT
========================================================= */

.login-content {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 580px;

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    margin-bottom: 45px;

}


.brand-name {

    color: var(--white);

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

    font-size: 75px;

    font-weight: 900;

    font-style: italic;

    text-align: center;

    line-height: 0.9;

    letter-spacing: -3px;

}


.brand {

    display: flex;

    flex-direction: column;

    align-items: center;
}

.brand-subtitle {

    display: inline-block;

    margin-top: 10px;

    padding: 7px 22px;

    background: var(--sizzling-orange);

    color: var(--dark-brown);

    font-size: 25px;

    font-weight: 900;

    letter-spacing: 2px;

    transform: rotate(-1deg);

    box-shadow: 6px 6px 0 var(--grilled-orange);
}


.brand-tagline {

    margin-top: 20px;

    color: var(--peach);

    font-size: 13px;

    text-align: center;

    font-weight: 700;

    letter-spacing: 4px;

}


/* =========================================================
   WELCOME SECTION
========================================================= */

.welcome-section {

    margin-bottom: 30px;

}


.welcome-section h1 {

    color: var(--white);

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

    font-size: 40px;

    font-style: italic;

    text-transform: uppercase;

    line-height: 1;

    margin-bottom: 10px;

}


.welcome-section p {

    color: var(--light-orange);

    font-size: 25px;

    font-weight: 700;

    margin-bottom: 4px;

}


.welcome-section span {

    color: var(--peach);

    font-size: 16px;

}


/* =========================================================
   ERROR MESSAGE
========================================================= */

.login-error {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-bottom: 25px;

    padding: 14px 18px;

    border-left: 4px solid var(--sizzling-orange);

    border-radius: 8px;

    background:
        rgba(254, 109, 19, 0.12);

    color: var(--peach);

}


.login-error strong {

    color: var(--sizzling-orange);

    font-size: 14px;

}


.login-error span {

    font-size: 14px;

}


/* =========================================================
   LOGIN FORM
========================================================= */

.login-form {

    width: 100%;

}


.input-group {

    margin-bottom: 24px;

}


.input-group label {

    display: block;

    margin-bottom: 9px;

    color: var(--white);

    font-size: 16px;

    font-weight: 700;

}


.input-wrapper {

    position: relative;

    width: 100%;

}


.input-wrapper input {

    width: 100%;

    height: 64px;

    padding:
        0 65px 0 58px;

    border:
        2px solid
        rgba(255, 154, 91, 0.45);

    border-radius: 14px;

    outline: none;

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

    color: var(--white);

    font-size: 16px;

    transition:
        0.25s ease;

}


.input-wrapper input::placeholder {

    color:
        rgba(255, 212, 185, 0.55);

}


.input-wrapper input:focus {

    border-color:
        var(--sizzling-orange);

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

    box-shadow:
        0 0 0 4px
        rgba(254, 109, 19, 0.12);

}


/* =========================================================
   INPUT ICONS
========================================================= */

.input-icon {

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

}


.input-icon svg {

    width: 22px;

    height: 22px;

    fill: none;

    stroke: var(--light-orange);

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.user-icon svg {

    stroke: var(--light-orange);

}


.lock-icon svg {

    stroke: var(--sizzling-orange);

}


/* =========================================================
   LOCATION
========================================================= */

.location {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    color: var(--grilled-orange);

    font-size: 15px;

    font-weight: 700;

}


.location-symbol {

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}


.location-symbol svg {

    width: 23px;

    height: 23px;

    fill: black;

    stroke: var(--sizzling-orange);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   PASSWORD EYE ICON
========================================================= */

.password-toggle {

    position: absolute;

    right: 12px;

    top: 50%;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: none;

    outline: none;

    background: transparent;

    color: var(--light-orange);

    transform: translateY(-50%);

    cursor: pointer;

    z-index: 20;

    pointer-events: auto;

}


.password-toggle:hover {

    color: var(--sizzling-orange);

}


.password-toggle:focus {

    outline: none;

}


.password-toggle:active {

    transform: translateY(-50%);

}


.password-toggle svg {

    width: 21px;

    height: 21px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    pointer-events: none;

}


/* Hidden password = slashed eye */

.password-toggle .eye-closed {

    display: block;

}


/* Visible password = normal eye */

.password-toggle .eye-open {

    display: none;

}


/* =========================================================
   REMEMBER ME
========================================================= */

.login-options {

    margin:
        5px 0 28px;

}


.remember-label {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--peach);

    font-size: 15px;

    cursor: pointer;

}


.remember-label input {

    position: absolute;

    opacity: 0;

}


.custom-checkbox {

    width: 22px;

    height: 22px;

    border:
        2px solid
        var(--light-orange);

    border-radius: 4px;

    position: relative;

}


.remember-label input:checked + .custom-checkbox {

    background:
        var(--sizzling-orange);

    border-color:
        var(--sizzling-orange);

}


.remember-label input:checked + .custom-checkbox::after {

    content: "✓";

    position: absolute;

    left: 4px;

    top: -2px;

    color:
        var(--dark-brown);

    font-weight: 900;

    font-size: 17px;

}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-button {

    width: 100%;

    height: 64px;

    border: none;

    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            var(--light-orange),
            var(--sizzling-orange)
        );

    color:
        var(--dark-brown);

    font-size: 19px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(254, 109, 19, 0.25);

    transition:
        0.25s ease;

}


.login-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(254, 109, 19, 0.35);

}


.login-button:active {

    transform:
        translateY(0);

}


.button-icon {

    display: inline-flex;

    margin-right: 10px;

    font-size: 23px;

}


/* =========================================================
   ACCOUNT FOOTER
========================================================= */

.account-footer {

    margin-top: 25px;

    text-align: center;

    color:
        var(--peach);

    font-size: 15px;

}


.create-account {

    margin-left: 5px;

    color:
        var(--light-orange);

    font-weight: 800;

    cursor: pointer;

    text-decoration: none !important;

}


.create-account:link,
.create-account:visited,
.create-account:hover,
.create-account:active,
.create-account:focus {

    color:
        var(--light-orange);

    text-decoration: none !important;

}


.create-account:hover {

    color:
        var(--sizzling-orange);

}
/* =========================================================
   RIGHT RESTAURANT PANEL
========================================================= */

.restaurant-panel {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--cream);

}


/* =========================================================
   FOOD PATTERN
========================================================= */

.food-pattern {

    position: absolute;

    inset: 0;

    opacity: 0.05;

    transform: rotate(-8deg);

}


.food-item {

    position: absolute;

    color:
        var(--grilled-orange);

    font-family:
        Georgia,
        serif;

    font-weight: 900;

    letter-spacing: 5px;

}


.food-one {

    top: 8%;

    left: 8%;

    font-size: 50px;

}


.food-two {

    top: 18%;

    right: 5%;

    font-size: 50px;

}


.food-three {

    top: 42%;

    left: 3%;

    font-size: 50px;

}


.food-four {

    bottom: 23%;

    right: 12%;

    font-size: 50px;

}


.food-five {

    bottom: 8%;

    left: 12%;

    font-size: 50px;

}


.food-six {

    top: 65%;

    left: 30%;

    font-size: 50px;

}


/* =========================================================
   RESTAURANT CONTENT
========================================================= */

.restaurant-content {

    position: relative;

    z-index: 5;

    width: 90%;

    max-width: 650px;

    text-align: center;

}


/* =========================================================
   LOGO
========================================================= */

.restaurant-logo {

    display: flex;

    justify-content: center;

    margin-bottom: 32px;

}


.logo-ring {

    width: 390px;

    height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        20px solid
        var(--dark-brown);

    border-radius: 50%;

    background:
        var(--white);

    box-shadow:
        0 18px 40px
        rgba(45, 17, 0, 0.18);

}


.logo-inner {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

}


.logo-inner img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


/* =========================================================
   RESTAURANT NAME
========================================================= */

.restaurant-content h2 {

    color:
        var(--dark-brown);

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

    font-size: 31px;

    font-weight: 900;

    letter-spacing: 2px;

    margin-bottom: 14px;

}


/* =========================================================
   LOCATION
========================================================= */

.location {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    color:
        var(--grilled-orange);

    font-size: 15px;

    font-weight: 700;

}


.location-symbol {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--sizzling-orange);

    color:
        var(--dark-brown);

    font-size: 12px;

    font-weight: 900;

}


/* =========================================================
   DIVIDER
========================================================= */

.orange-divider {

    width: 180px;

    height: 4px;

    margin:
        22px auto;

    background:
        var(--sizzling-orange);

    border-radius: 20px;

}


/* =========================================================
   RESTAURANT MESSAGE
========================================================= */

.restaurant-message {

    color:
        var(--dark-brown);

}


.restaurant-message p {

    font-family:
        Georgia,
        serif;

    font-size: 27px;

    font-style: italic;

    font-weight: 700;

    line-height: 1.25;

}


.restaurant-message strong {

    display: block;

    margin-top: 12px;

    color:
        var(--grilled-orange);

    font-family:
        Georgia,
        serif;

    font-size: 18px;

    font-style: italic;

}


/* =========================================================
   GRILL VISUAL
========================================================= */

.grill-visual {

    width: 210px;

    height: 90px;

    margin:
        30px auto 0;

    position: relative;

}


.grill-visual::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 20px;

    height: 12px;

    border-radius: 50%;

    background:
        var(--dark-brown);

}


.grill-lines {

    position: absolute;

    top: 5px;

    left: 15px;

    right: 15px;

    display: flex;

    justify-content: space-between;

}


.grill-lines span {

    width: 6px;

    height: 50px;

    border-radius: 10px;

    background:
        var(--grilled-orange);

    transform:
        rotate(25deg);

}


/* =========================================================
   FLAMES
========================================================= */

.flame {

    position: absolute;

    width: 90px;

    height: 120px;

    background:
        var(--sizzling-orange);

    opacity: 0.8;

    filter:
        blur(0.5px);

    border-radius:
        60% 40% 60% 40%;

    transform:
        rotate(25deg);

}


.flame-one {

    top: -55px;

    left: -25px;

}


.flame-two {

    bottom: -65px;

    right: -30px;

    transform:
        rotate(205deg);

}


/* =========================================================
   GRILL DECORATIONS
========================================================= */

.grill-decoration {

    position: absolute;

    z-index: 2;

    width: 180px;

    height: 100px;

    opacity: 0.12;

    transform: rotate(-12deg);

}


.grill-top {

    top: 25px;

    right: 30px;

}


.grill-bottom {

    bottom: 25px;

    left: 30px;

    transform:
        rotate(12deg);

}


.grill-decoration span {

    display: block;

    width: 150px;

    height: 7px;

    margin: 15px;

    border-radius: 10px;

    background:
        var(--peach);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .login-wrapper {

        grid-template-columns: 1fr;

    }


    .restaurant-panel {

        display: none;

    }


    .login-panel {

        padding:
            45px 30px;

    }


    .login-content {

        max-width: 600px;

    }

}


@media (max-width: 600px) {

    .login-panel {

        padding:
            35px 20px;

    }


    .brand-name {

        font-size: 48px;

    }


    .brand-subtitle {

        font-size: 19px;

    }


    .brand-tagline {

        font-size: 10px;

        letter-spacing: 2px;

    }


    .welcome-section h1 {

        font-size: 40px;

    }


    .welcome-section p {

        font-size: 20px;

    }


    .input-wrapper input {

        height: 58px;

    }


    .login-button {

        height: 58px;

    }

}