* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

body {

    font-family: Arial, sans-serif;

    background-color: #F4FAF6;

    color: #2F6B48;

    min-height: 100vh;

}

/* Login Container */

.login-container {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px;

}

/* Login Card */

.login-card {

    width: 100%;

    max-width: 520px;

    background-color: #FFFFFF;

    padding: 55px 50px;

    border-radius: 24px;

    box-shadow: 0 8px 30px rgba(47, 107, 72, 0.12);

}

/* Title */

.login-card h1 {

    text-align: center;

    font-size: 36px;

    margin-bottom: 15px;

    color: #2F6B48;

}

/* Subtitle */

.login-subtitle {

    text-align: center;

    font-size: 18px;

    color: #6B7280;

    margin-bottom: 40px;

    line-height: 1.5;

}

/* Input Group */

.input-group {

    margin-bottom: 25px;

}

/* Labels */

.input-group label {

    display: block;

    font-size: 17px;

    font-weight: bold;

    margin-bottom: 10px;

    color: #2F6B48;

}

/* Inputs */

.input-group input {

    width: 100%;

    padding: 16px 18px;

    border: 2px solid #DFF3E7;

    border-radius: 12px;

    background-color: #FAFDFC;

    font-size: 17px;

    outline: none;

    transition: 0.2s;

}

/* Input Focus */

.input-group input:focus {

    border-color: #6BBF8A;

    background-color: #FFFFFF;

}

/* Sign In Button */

.login-btn {

    width: 100%;

    padding: 16px;

    margin-top: 10px;

    border: none;

    border-radius: 12px;

    background-color: #6BBF8A;

    color: white;

    font-size: 18px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;

}

.login-btn:hover {

    background-color: #5EAE7D;

}

/* Mobile */

@media (max-width: 600px) {

    .login-container {

        padding: 20px;

    }

    .login-card {

        padding: 35px 25px;

    }

    .login-card h1 {

        font-size: 30px;

    }

    .login-subtitle {

        font-size: 16px;

    }

}
.login-message {
    text-align: center;
    margin-top: 15px;
    font-size: 15px;
    color: #C0392B;
    min-height: 20px;
}


.home-header { background-color: #FFFFFF;
padding: 35px 50px;

border-bottom: 1px solid #DFF3E7;
}
.welcome-text { font-size: 18px;
color: #6B7280;

margin-bottom: 6px;
}
.home-header h1 { font-size: 34px;
color: #2F6B48;
}
/* Main */
.home-container { max-width: 1100px;
margin: 0 auto;

padding: 40px 50px 120px;
}
.section-title { font-size: 26px;
color: #2F6B48;

margin-bottom: 25px;
}
/* Dashboard Cards */
.dashboard-card { background-color: #FFFFFF;
border: 1px solid #DFF3E7;

border-radius: 18px;

padding: 25px;

margin-bottom: 20px;

box-shadow: 0 5px 18px rgba(47, 107, 72, 0.08);
}
.dashboard-card h3 { font-size: 20px;
color: #2F6B48;

margin-bottom: 15px;
}
.dashboard-card p { font-size: 16px;
color: #6B7280;

margin-bottom: 8px;

line-height: 1.5;
}
/* Notice */
.notice-card { background-color: #F0FAF3; }
/* Health Tip */
.health-tip { background-color: #E8F7ED; }
/* Bottom Navigation */
.bottom-nav { position: fixed;
bottom: 0;
left: 0;

width: 100%;

height: 80px;

background-color: #FFFFFF;

border-top: 1px solid #DFF3E7;

display: flex;

justify-content: center;

align-items: center;

gap: 80px;

box-shadow: 0 -4px 15px rgba(47, 107, 72, 0.08);
}
.bottom-nav button { border: none;
background: none;

color: #6B7280;

cursor: pointer;

display: flex;

flex-direction: column;

align-items: center;

gap: 5px;

font-size: 13px;
}
.bottom-nav button:first-child { color: #2F6B48; }
.bottom-nav button:hover { color: #2F6B48; }
.bottom-nav button span { font-size: 13px; }
/* Mobile */
@media (max-width: 600px) {
.home-header {
    padding: 25px 20px;
}

.home-header h1 {
    font-size: 28px;
}

.home-container {
    padding: 30px 20px 110px;
}

.section-title {
    font-size: 22px;
}

.bottom-nav {
    gap: 0;

    justify-content: space-around;
}

.dashboard-card {
    padding: 20px;
}
}


.profile-header { background-color: #FFFFFF;
text-align: center;

padding: 40px 20px 30px;

border-bottom: 1px solid #DFF3E7;
}
.profile-icon { width: 75px; height: 75px;
margin: 0 auto 15px;

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

background-color: #DFF3E7;

border-radius: 50%;

font-size: 32px;
}
.profile-header h1 { font-size: 32px;
color: #2F6B48;

margin-bottom: 8px;
}
.profile-header p { font-size: 16px;
color: #6B7280;
}
/* Profile Container */
.profile-container { max-width: 700px;
margin: 0 auto;

padding: 45px 30px 120px;
}
/* Profile Card */
.profile-card { background-color: #FFFFFF;
border: 1px solid #DFF3E7;

border-radius: 20px;

padding: 30px;

box-shadow: 0 5px 18px rgba(47, 107, 72, 0.08);
}
.profile-card h2 { color: #2F6B48;
font-size: 22px;

margin-bottom: 25px;
}
/* Information Rows */
.info-row { display: flex;
justify-content: space-between;
align-items: center;

padding: 18px 0;

border-bottom: 1px solid #E8F3EC;
}
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 16px;
font-weight: bold;

color: #6B7280;
}
.info-value { font-size: 17px;
font-weight: bold;

color: #2F6B48;
}
/* Logout */
.logout-btn { width: 100%;
margin-top: 25px;

padding: 15px;

border: none;

border-radius: 12px;

background-color: #DFF3E7;

color: #2F6B48;

font-size: 17px;

font-weight: bold;

cursor: pointer;

transition: 0.2s;
}
.logout-btn:hover { background-color: #CBEBD8; }
/* Mobile */
@media (max-width: 600px) {
.profile-header {
    padding: 30px 20px 25px;
}

.profile-header h1 {
    font-size: 28px;
}

.profile-container {
    padding: 30px 20px 110px;
}

.profile-card {
    padding: 22px;
}

.info-row {
    align-items: flex-start;
    gap: 15px;
}

.info-value {
    text-align: right;
}
}




/* ========================================= APPOINTMENTS PAGE White & Soft Green Theme ========================================= */
/* Main page */
.appointments-app { min-height: 100vh; padding-bottom: 100px; background-color: #F4FAF6; color: #2F6B48; font-family: Arial, Helvetica, sans-serif; line-height: 1.6; }
.appointments-app * { box-sizing: border-box; }
/* Header */
.appointments-app .topbar { width: 100%; min-height: 78px; padding: 18px 6%; display: flex; justify-content: space-between; align-items: center; gap: 15px; background-color: #FFFFFF; border-bottom: 1px solid #DFF3E7; }
.appointments-app .topbar h2 { margin: 0; color: #2F6B48; font-size: 24px; font-weight: 700; }
.appointments-app .welcome { display: flex; align-items: center; gap: 10px; color: #6B7280; font-size: 15px; }
.appointments-app .profile-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #DFF3E7; color: #2F6B48; }
/* Main content */
.appointments-app .appointments-main { width: 100%; max-width: 1000px; margin: 0 auto; padding: 40px 30px; }
.appointments-app .appointment-screen { width: 100%; animation: appointmentFadeIn 0.2s ease; }
.appointments-app .appointment-screen[hidden] { display: none !important; }
@keyframes appointmentFadeIn { from { opacity: 0; transform: translateY(5px); }
to {
    opacity: 1;
    transform: translateY(0);
}
}
/* Headings */
.appointments-app .appointment-screen h1 { margin: 0 0 10px; color: #2F6B48; font-size: 32px; line-height: 1.3; }
.appointments-app .appointments-subtitle { margin: 0 0 26px; color: #6B7280; font-size: 16px; line-height: 1.7; }
/* Main buttons */
.appointments-app .appointment-primary-button { min-height: 50px; padding: 13px 22px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: none; border-radius: 12px; background-color: #6BBF8A; color: #FFFFFF; font-size: 15px; font-weight: 700; text-align: center; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }
.appointments-app .appointment-primary-button:hover { background-color: #5EAE7D; }
.appointments-app .appointment-primary-button:active { transform: scale(0.98); }
.appointments-app .appointment-primary-button:focus-visible, .appointments-app .appointment-back-button:focus-visible { outline: 3px solid #A7DDBA; outline-offset: 3px; }
.appointments-app #open-booking { width: 100%; max-width: 420px; margin-bottom: 26px; }
/* Appointment card */
.appointments-app .appointment-card { width: 100%; max-width: 700px; margin: 0; padding: 25px; display: flex; align-items: flex-start; gap: 18px; background-color: #FFFFFF; border: 1px solid #DFF3E7; border-radius: 18px; box-shadow: 0 5px 20px rgba(47, 107, 72, 0.07); }
.appointments-app .appointment-icon { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 15px; background-color: #DFF3E7; font-size: 25px; }
.appointments-app .appointment-details { flex: 1; min-width: 0; }
.appointments-app .appointment-details h2 { margin: 4px 0 12px; color: #2F6B48; font-size: 22px; line-height: 1.4; }
.appointments-app .appointment-label { margin: 0; color: #6B7280; font-size: 14px; font-weight: 600; }
.appointments-app .appointment-details p:not(.appointment-label) { margin: 6px 0 0; color: #6B7280; font-size: 15px; overflow-wrap: anywhere; }
/* Back button */
.appointments-app .appointment-back-button { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 8px 0; border: none; background: transparent; color: #2F6B48; font-size: 15px; font-weight: 700; cursor: pointer; }
.appointments-app .appointment-back-button:hover { color: #5EAE7D; }
/* Booking form */
.appointments-app .appointment-form { width: 100%; max-width: 560px; margin: 0; padding: 28px; display: flex; flex-direction: column; gap: 10px; background-color: #FFFFFF; border: 1px solid #DFF3E7; border-radius: 18px; box-shadow: 0 5px 20px rgba(47, 107, 72, 0.07); }

.appointments-app .appointment-form label {
    margin-top: 8px;
    color: #2F6B48;
    font-size: 15px;
    font-weight: 700;
}

.appointments-app .appointment-form input, .appointments-app .appointment-form select { width: 100%; min-height: 49px; padding: 12px 14px; border: 1px solid #D5E7DA; border-radius: 10px; background-color: #FAFDFC; color: #2F6B48; font-size: 15px; }
.appointments-app .appointment-form input:focus, .appointments-app .appointment-form select:focus { border-color: #6BBF8A; outline: 3px solid rgba(107, 191, 138, 0.15); }
.appointments-app .appointment-form .appointment-primary-button { width: 100%; margin-top: 15px; }
/* Confirmation screen */
.appointments-app .appointment-success-icon { width: 76px; height: 76px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #C6E8D2; background-color: #DFF3E7; color: #347A50; font-size: 34px; font-weight: 700; }
.appointments-app #confirmation-screen { max-width: 700px; margin: 10px auto 0; text-align: center; }
.appointments-app #confirmation-screen .appointment-card { margin: 24px auto; text-align: left; }
.appointments-app #go-to-appointments { width: 100%; max-width: 350px; }
/* Bottom navigation */
.appointments-app .bottom-nav { position: fixed; z-index: 100; right: 0; bottom: 0; left: 0; width: 100%; min-height: 76px; margin: 0; padding: 8px 16px; display: flex; align-items: center; justify-content: space-around; gap: 8px; border-top: 1px solid #DFF3E7; background-color: #FFFFFF; box-shadow: 0 -4px 15px rgba(47, 107, 72, 0.06); }
.appointments-app .bottom-nav .nav-item { flex: 1; min-width: 0; min-height: 52px; padding: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 10px; background: transparent; color: #6B7280; font-size: 12px; font-weight: 600; text-align: center; text-decoration: none; }
.appointments-app .bottom-nav .nav-item span:first-child { font-size: 19px; }
.appointments-app .bottom-nav .nav-item:hover { background-color: #F0FAF3; color: #2F6B48; }
.appointments-app .bottom-nav .nav-item.active { color: #2F6B48; }
/* Tablet */
@media (max-width: 768px) { .appointments-app .topbar { padding: 16px 22px; }
.appointments-app .topbar h2 {
    font-size: 20px;
}

.appointments-app .welcome {
    font-size: 13px;
}

.appointments-app .appointments-main {
    padding: 32px 22px;
}

.appointments-app .appointment-screen h1 {
    font-size: 28px;
}

.appointments-app .appointment-card {
    padding: 21px;
}
}
/* Mobile */
@media (max-width: 480px) { .appointments-app { padding-bottom: 90px; }
.appointments-app .topbar {
    padding: 13px 15px;
    gap: 8px;
}

.appointments-app .topbar h2 {
    font-size: 17px;
}

.appointments-app .welcome {
    gap: 7px;
    font-size: 12px;
}

.appointments-app .profile-icon {
    width: 32px;
    height: 32px;
}

.appointments-app .appointments-main {
    padding: 25px 16px 30px;
}

.appointments-app .appointment-screen h1 {
    font-size: 25px;
}

.appointments-app .appointments-subtitle {
    font-size: 14px;
}

.appointments-app .appointment-primary-button {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
}

.appointments-app .appointment-card {
    gap: 13px;
    padding: 17px;
}

.appointments-app .appointment-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
    border-radius: 12px;
}

.appointments-app .appointment-details h2 {
    font-size: 18px;
}

.appointments-app .appointment-details p:not(.appointment-label) {
    font-size: 13px;
}

.appointments-app .appointment-form {
    padding: 20px 16px;
}

.appointments-app .appointment-form label {
    font-size: 14px;
}

.appointments-app .appointment-form input,
.appointments-app .appointment-form select {
    font-size: 14px;
}

.appointments-app .bottom-nav {
    min-height: 70px;
    padding: 6px 4px;
    gap: 2px;
}

.appointments-app .bottom-nav .nav-item {
    padding: 4px 2px;
    font-size: 10px;
}

.appointments-app .bottom-nav .nav-item span:first-child {
    font-size: 17px;
}
}
/* Accessibility */

@media (prefers-reduced-motion: reduce) { .appointments-app .appointment-screen { animation: none; } }


.brand-text {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    z-index: 10;
}

.brand-text h1 {
    color: #2F6B48;
    font-size: 46px;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.brand-text p {
    color: #6B7280;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.page-brand {
    text-align: left;
    padding: 18px 30px;
    margin: 0;
}

.page-brand h1 {
    color: #2F6B48;
    font-size: 26px;
    font-weight: bold;
    margin: 0 0 5px;
}

.page-brand p {
    color: #6B7280;
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
}