/* Define color variables */
:root {
    --primary: #4EEB4C;
    --primaryL1: #6DF36B;
    --primaryL2: #86FF83;
    --primaryD1: #42D240;
    --primaryD2: #3BBF39;
    --primaryD3: #2E9E2D;
    --primaryD4: #227E21;
    --primaryD5: #073906;

    --white: #FFFFFF;
    --black: #000000;

    --midnight: #0F1012;
    --charcoal: #151618;
    --graphite: #191A1C;
    --slate: #1E1F22;
    --pebble: #222327;
    --darkSilver: #38393B;
    --dolphin: #646566;
    --smoke: #A2A2A3;
    --moonlightGlow: #D9D9D9;
    --alabaster: #E9E9EB;
    --polarLight: #F2F3F2;

    --blue1: #2464FA;
    --blue2: #2C73FB;
    --blue3: #3585FD;
    --red1: #FF4D61;
    --red2: #FF6577;
    --yellow1: #E3C32D;
    --yellow2: #EAD137;
    --yellow3: #ECD94A;
    --yellow4: #F0E261;
}

@font-face {
  font-family: "BricolageGrotesque";
  src: url(/assets/BricolageGrotesque-Medium.ttf) format("truetype");
  font-weight:normal;
}
@font-face {
  font-family: "BricolageGrotesque";
  src: url(/assets/BricolageGrotesque-Bold.ttf) format("truetype");
  font-weight:bold;
}

body,
html,
main {
    background-color: var(--midnight);
    color: var(--alabaster);
    font-family: "BricolageGrotesque";
}

:hover {
    transition: .25s;
}

p {
    font-size: 1rem;
    color: var(--smoke);
    line-height: 1.4;
}

h1,
h2,
h3,
h4 {
    font-weight: 900;
    color: var(--white);
}

h2,
.h2 {
    font-size: 1.5rem;
    color: var(--white);
}

h3,
.h3 {
    font-size: 1.25rem;
    color: var(--white);
}

main.center-page {
    display: grid;
    place-items: center;
    /* This centers both horizontally and vertically */
    height: 80vh;
    /* Example height */
    padding-left: .8rem;
    padding-right: .8rem;
}

.brand-title {
    color: var(--white);
    /* Keeping the primary color for brand impact */
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    font-weight: 900;
}

.brand-title-sub {
    margin-bottom: .4rem;
}

.brand-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--smoke);
}

/* Spinner styles */
.spinner {
    border: 12px solid var(--darkSilver);
    border-top: 12px solid var(--primary);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    animation: spin 1.5s linear infinite;
    margin: 0 auto;
}

/* Animation for spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.have-account {
    text-align: center;
    font-size: 1rem;
    color: var(--smoke);
    margin-top: 1.5rem;
}
.have-account a {
    color: var(--smoke);
}

.disclaimer-text {
    text-align: center;
    font-size: .875rem;
    color: var(--smoke);
    margin-top: 1.5rem;
}
.disclaimer-text a {
    color: var(--smoke);
}

input[type="email"],
input[type="password"],
input[type="username"] {
    width: 100%;
    padding: 0.8rem;
    border: 1.8px solid var(--darkSilver);
    /* Slightly lighter border for visibility */
    background-color: var(--graphite);
    /* Darker element bg for contrast */
    color: var(--moonlightGlow);
    /* Light text color */
    font-size: 1rem;
    border-radius: 100px;
    margin-bottom: 4px;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="username"]:focus {
    outline: none;
    border-color: var(--primary);
    /* Highlighted with primary color */
}

/* Style for the submit button */
button {
    width: 100%;
    padding: 0.5rem .75rem;
    background-color: var(--primary);
    /* Primary color for button bg */
    color: var(--charcoal);
    /* Dark text for readability */
    border: none;
    cursor: pointer;
    font-size: .75rem;
    transition: background-color 0.3s ease;
    border-radius: 100px;
    font-weight: bold;
    text-transform: uppercase;
}

button:hover {
    background-color: var(--primaryD2);
    /* Slightly darker on hover */
}

a.button {
    padding: 0.5rem .75rem;
    background-color: var(--primary);
    color: var(--charcoal);
    border: none;
    cursor: pointer;
    font-size: .75rem;
    transition: background-color 0.3s ease;
    border-radius: 100px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
}

a.button:hover {
    background: var(--primaryD2);
}

a.button.ghost {
    border: 1.8px solid var(--pebble);
    background: none;
    color: var(--white);
}

a.button.ghost:hover {
    background: var(--pebble);
}

.primary-button {
    padding: 0.75rem 1rem;
    background-color: var(--primary);
    font-size: .875rem;
}

.primary-button-red {
    padding: 0.75rem 1rem;
    background-color: var(--red1);
}


/* Login Options Container */
.login-options,
.login-container {
    background-color: var(--graphite);
    padding: 2.2rem;
    max-width: 520px;
    width: 100%;
    margin: 0 auto 2rem;
    border-radius: 24px;
    border: 1px solid var(--slate);
    border-top: 1.5px solid var(--pebble);
}

/* General button styles */
.login-options>button {
    width: 100%;
    padding: 0.5rem .75rem;
    margin-top: 0.25rem;
    /* Add margin to separate buttons */
    margin-bottom: 0.25rem;
    /* Add margin to separate buttons */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: .875rem;
    transition: background-color 0.3s ease;
    font-weight: bold;
    border-radius: 100px;
}

#login,
#signup {
    color: var(--white);
    background: none;
    border: 1px solid var(--white);
}

#manage-subscription-stripe,
#manage-subscription-apple,
#manage-subscription-google,
#contact-us {
    background-color: var(--darkSilver);
    color: var(--white);
}

#logout {
    background-color: var(--red1);
    color: var(--black);
}

/* Hover effects */
.login-options button:hover {
    opacity: 0.9;
    /* Slightly lower opacity on hover */
}

/* Google and Apple button styles */
.button-google, .button-apple {
    background-color: #FFFFFF;
    border: 1px solid #DADCE0;
    font-weight: bold;
    position: relative;
    /* Allows absolute positioning of the Google logo inside */
}

/* Google and Apple logo styles */
.google-logo, .apple-logo {
    height: 20px;
    /* You can adjust size as needed */
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Adjust padding to make room for the logo */
.button-google .btn-text, .button-apple .btn-text {
    padding-left: 16px;
    /* Adjust according to logo size */
}

.label-input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin-bottom: 15px;
    /* Add spacing between input fields */
}

.optimal-color {
    color: var(--primary);
}

.login-label {
    color: var(--white);
    margin-bottom: 4px;
}


.centered {
    text-align: center;
}

/* Container resembling HStack behavior */
.hstack {
    display: flex;
    /* Align children horizontally */
    align-items: center;
    /* Center items vertically */
    gap: 20px;
    /* Space between children */
}

/* Container resembling VStack behavior */
.vstack {
    display: flex;
    flex-direction: column;
    /* Stack children vertically */
    gap: 10px;
    /* Space between children */
}

.vstack-center {
    display: flex;
    flex-direction: column;
    /* Stack children vertically */
    gap: 10px;
    /* Space between children */
    justify-content: center;
    /* Center children vertically */
    align-items: center;
    /* Center children horizontally */
    height: 100%;
    /* Ensure the .vstack takes up full container height */
}

span#footerspan hr {
    border-top: 1px solid var(--slate);
    opacity: 1;
}


/* Represents a Spacer in the layout */
.spacer {
    flex-grow: 1;
    /* Take up all available space */
}

.testimonial-container {
    display: flex; /* Aligns children in a row */
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap; /* Keeps the blocks in a single line */
    padding: 20px; /* Optional padding for better spacing */
    width: 100%;
}

.testimonial-block {
    flex: 0 0 auto; /* Blocks will not grow or shrink and will not wrap */
    margin-right: 12px; /* Adds space between individual blocks */
    white-space: normal; /* Overrides the nowrap of container for text wrapping in the block */

    border-radius: 24px;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    max-width: 320px;
    border: 1.8px solid var(--pebble);
}
.testimonial-block p {
    font-size: .875rem;
    color:var(--moonlightGlow);
}

.testimonial-block img {
    width: 100px; /* Adjusts the width of the star image */
    height: auto; /* Maintains the aspect ratio of the image */
    display: block; /* Ensures the image does not align inline with text */
    margin-top: 10px; /* Space between image and testimonial text */
    margin-bottom: 10px; /* Space between image and testimonial text */
}

@media screen and (max-width: 512px) {
    a.button.ghost {
        font-size: .7rem;
        padding: 0.5rem 0.75rem 0.5rem 0.75rem;
    }

    a.button {
        padding: 0.5rem 0.75rem 0.5rem 0.75rem;
        font-size: .7rem;
    }
    h2, .h2 {
    font-size: 1.25rem;
}

h3, .h3 {
    font-size: 1.1rem;
}
    

}