@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --bg-color: hsl(0, 0%, 100%);
    --body-text-color: hsl(0, 0%, 40%);
    --h2-color: hsl(0, 0%, 0%);
    --primary-color: hsl(122, 25%, 48%);
    --nav-link-color: hsl(0, 0%, 40%);
    --nav-link-hover-color: hsl(0, 0%, 20%);
    --menu-link-color: hsl(12, 40%, 40%);
    --primary-color-bg: hsl(122, 23%, 92%);
    --secondary-color: hsl(12, 40%, 40%);
    --minor-line-details: hsl(0, 0%, 80%);
    --red-color: hsl(5, 40%, 67%);
    --vermillion-color: hsl(18, 40%, 67%);
    --orange-color: hsl(36, 40%, 67%);
    --amber-color: hsl(45, 40%, 67%);
    --yellow-color: hsl(60, 40%, 67%);
    --chartreuse-color: hsl(68, 40%, 67%);
    --green-color: hsl(96, 40%, 67%);
    --teal-color: hsl(197, 40%, 67%);
    --blue-color: hsl(224, 40%, 67%);
    --violet-color: hsl(262, 40%, 67%);
    --purple-color: hsl(286, 40%, 67%);
    --magenta-color: hsl(339, 40%, 67%);
    --desaturated-color: hsl(339, 0%, 67%);
    --logo-url: url('../img/dfeui01.webp');
    --qr-android: url('https://storage.googleapis.com/perkypeople-bucket/cdn/img/icon/android.png');
    --qr-ios: url('https://storage.googleapis.com/perkypeople-bucket/cdn/img/icon/apple.png');
}

[data-theme="dark"] {
    --bg-color: hsl(0, 0%, 0%);
    --body-text-color: hsl(0, 0%, 60%);
    --h2-color: hsl(0, 0%, 100%);
    --primary-color: hsl(122, 25%, 52%);
    --primary-color-bg: hsl(122, 23%, 8%);
    --secondary-color: hsl(12, 40%, 60%);
    --minor-line-details: hsl(0, 0%, 40%);
    --red-color: hsl(5, 40%, 33%);
    --vermillion-color: hsl(18, 40%, 33%);
    --orange-color: hsl(36, 40%, 33%);
    --amber-color: hsl(45, 40%, 33%);
    --yellow-color: hsl(60, 40%, 33%);
    --chartreuse-color: hsl(68, 40%, 33%);
    --green-color: hsl(96, 40%, 33%);
    --teal-color: hsl(197, 40%, 33%);
    --blue-color: hsl(224, 40%, 33%);
    --violet-color: hsl(262, 40%, 33%);
    --purple-color: hsl(286, 40%, 33%);
    --magenta-color: hsl(339, 40%, 33%);
    --desaturated-color: hsl(339, 0%, 33%);
}

.logo {
    background-image: var(--logo-url);
}

.vermillion-bg {
    background-color: var(--vermillion-color);
}

.orange-bg {
    background-color: var(--orange-color);
}

.amber-bg {
    background-color: var(--amber-color);
}

.yellow-bg {
    background-color: var(--yellow-color);
}

.chartreuse-bg {
    background-color: var(--chartreuse-color);
}

.green-bg {
    background-color: var(--green-color);
}

.teal-bg {
    background-color: var(--teal-color);
}

.blue-bg {
    background-color: var(--blue-color);
}

.violet-bg {
    background-color: var(--violet-color);
}

.purple-bg {
    background-color: var(--purple-color);
}

.magenta-bg {
    background-color: var(--magenta-color);
}

.desaturated-bg {
    background-color: var(--desaturated-color);
}

a {
    color: var(--primary-color);
    cursor: pointer;
}

a:hover {
    color: color-mix(in srgb, var(--primary-color) 80%, black);
}

html {
    font-size: 16px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--body-text-color);
}

h2 {
    font-weight: 300;
    text-transform: uppercase;
    color: var(--secondary-color);
    font-size: 36px;
    line-height: 4rem;
    margin-bottom: 10px;
}

h3,
h4,
h5 {
    color: var(--h2-color);
}


.savings {
    background-color: color-mix(in srgb, var(--minor-line-details) 25%, transparent);
}

.btn {
    font-size: 12px !important;
    padding: 4px 12px !important;
    text-transform: uppercase;
    font-weight: 800;
    border-radius: 0;
    border-width: 2px !important;
    border-style: solid !important;
}

.btn.btn-primary {
    color: white;
    background-color: color-mix(in srgb, var(--primary-color) 70%, black);
    border-color: color-mix(in srgb, var(--primary-color) 70%, black);
}

.btn.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn.btn-outline-danger {
    color: var(--red-color);
    background-color: transparent;
    border-color: var(--red-color);
}

.btn.btn-outline-danger:hover {
    color: white;
    background-color: var(--red-color);
    border-color: var(--red-color);
}

.form-control::placeholder {
    color: var(--minor-line-details);
}

.login-with-google-btn {
    transition: background-color 0.3s, box-shadow 0.3s;
    padding: 12px 16px 12px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
    color: #757575;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    background-position: 12px 11px;
}

.login-with-google-btn:hover {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.login-with-google-btn:active {
    background-color: #eeeeee;
}

.login-with-google-btn:focus {
    outline: none;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}

.login-with-apple-btn {
    transition: background-color 0.3s, box-shadow 0.3s;
    padding: 12px 16px 12px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='%23ffffff' d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E");
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: 12px 11px;
}

.login-with-apple-btn:hover {
    background-color: #222222;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.login-with-apple-btn:active {
    background-color: #444444;
}

.login-with-apple-btn:focus {
    outline: none;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}

.card {
    border-radius: 10px;
    border: solid 1px var(--minor-line-details);
    border-top: 6px solid var(--primary-color) !important;
    background-color: var(--bg-color);
}

.card-body h3 {
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.card-img-bottom {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    aspect-ratio: 8;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.login-card a {
    color: var(--h2-color);
}

.login-card .card-img-bottom {
    aspect-ratio: 4;
}

.modal-content {
    background-color: var(--bg-color) !important;
    color: var(--body-text-color) !important;
    border: none;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: var(--bg-color);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

/* Smooth Theme Transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#back-to-top {
    bottom: 0;
    z-index: 100;
}