.servermsg {
    display:block;
    /* color: rgb(192, 16, 16); */
    font-size: 1.05rem;
    color: rgb(30, 92, 143);
    font-weight: 550;
    margin-bottom: 1rem;
}

.grid-cont {
    display: grid;
    grid-template-columns: 1fr; /* Single column */
    grid-template-rows: auto auto; /* Two rows for the two password fields */
    grid-gap: 0.5rem; /* Maintain gap between rows */
    justify-content: center;
    margin: 0 auto;
}

.flex-cont {
    display: flex;
    flex-direction: column;
    align-items: center;     /* centers items horizontally */
    justify-content: center; /* centers items vertically (if you also set height) */
    /* width: fit-content;      optional: shrink to fit content */
}

.green-border {
    margin: 0 auto 1rem;
    border: 1.7px solid rgb(53, 171, 106); /* Light border */
    border-radius: 1rem; /* Curved corners */
    padding: 1.75rem; /* Inner spacing */
    background-color: #ffffff; /* Optional: light background */
    max-width: 21rem;
}

.error {
    display:block;
    /* font-size: 0.9rem; */
    color: rgb(192, 16, 16);
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.email, .password {
    font-size: 1rem;
    padding: 0.5rem;
    border-radius: 0.7em;
    /* border-width: 0rem; */
    border: none;
    background-color: rgb(244, 243, 243);

}

.email::placeholder, .password::placeholder {
  color: rgb(31, 31, 31); /* Replace with your desired color */
  font-weight: 530;
}

.email:focus,
.password:focus {
    outline: none;
    box-shadow: none;
    background-color: rgb(244, 243, 243) !important;
    border: none;
}

/* remove blue from boxes */
.email:-webkit-autofill,
.email:-webkit-autofill:hover,
.email:-webkit-autofill:focus,
.email:-webkit-autofill:active,
.password:-webkit-autofill,
.password:-webkit-autofill:hover,
.password:-webkit-autofill:focus,
.password:-webkit-autofill:active {
    /* -webkit-box-shadow: 0 0 0 30px rgb(239, 239, 239) inset !important; */
    -webkit-text-fill-color: inherit !important; /* Keeps your text color */
    background-color: rgb(244, 243, 243) !important;
    transition: background-color 5000s ease-in-out 0s; /* Delays any transition effects */
}

.empty {
    margin-left: -1.5rem;
}

.pw-cont {
    position: relative; /* Creates a positioning context for the eye icon */
    display: inline-block; /* Ensures the container wraps tightly around the input */
}

.input-wrapper {
    position: relative;
    display: inline-block;
}

.forgot-pw {
    margin-bottom: 1.6rem;
}

.password {
    padding-right: 2rem; /* Adds space on the right of the input for the eye icon */
}

.eye {
    height: 1.3rem;
    position: absolute; /* Positions the eye relative to the password-container */
    right: 0.5rem; /* Moves the eye 0.5rem away from the right edge */
    top: 50%; /* Centers the eye vertically */
    transform: translateY(-50%); /* Adjusts for the height of the eye to truly center it */
    cursor: pointer;
    z-index: 2;
}

.cblabel {
    margin-right: 1.75rem;
    color: rgb(94, 94, 94);
    font-size: 0.9rem;
    text-align: center;
}

.checkbox, .cblabel {
    vertical-align: middle;
}

.login-button {
    /* display: inline-flex; */
    color: white;
    /* background-image: linear-gradient(rgb(21, 153, 21), green); */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    background-image: linear-gradient(rgb(66, 190, 121), rgb(53, 171, 106));
    
    border-width: 0;
    padding: 0.5rem 1.5rem;
    border-radius: 1.5em;
    /* margin: 0rem 2rem 0rem 2rem; */
    cursor: pointer;
    text-decoration: none;
    align-items: center; /* horizontally */
    text-align: center;
    font-size: 0.95rem;
    font-weight: bold;
    margin-top: 0.3rem;
}

.gray-button {
    /* display: inline-flex; */
    color: rgb(86, 86, 86);
    background-color: rgb(239, 237, 237);
    border-width: 0;
    padding: 0.6rem 1.6rem;
    border-radius: 1.5em;
    /* margin: 0rem 2rem 0rem 2rem; */
    cursor: pointer;
    text-decoration: none;
    align-items: center; /* horizontally */
    text-align: center;
    font-size: 0.95rem;
    font-weight: bold;
    margin-top: 1.5rem;
}

.renew-button {
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
}

form {
    margin-bottom: 1.15rem;
}

#resetpw, #signup, #login {
    margin: 0.4rem auto 0rem;
    font-size: 1.05rem;
}

.signup-title {
    font-size: 1.2rem;
    color: rgb(31, 149, 84);
    background-color: white;
    /* background-image: linear-gradient(rgb(66, 185, 120), rgb(57, 174, 110));
    color: white; */
    /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); */
    border-radius: 1.25rem;
    padding: 0.5rem 1.5rem;
    margin: 0.8rem auto;
    max-width: 35rem;
}

.subscribe-title {
    /* color: rgb(30, 92, 143); */
    font-size: 1.3rem;
}

/* account page */

.account-grid {
    display: grid;
    grid-template-columns: auto auto; /* Two columns: field names and values */
    gap: 0.5rem; 
    margin: 0rem auto 1.7rem; /* Center container and add top/bottom margin */
    max-width: 27rem;
}

.account-grid > span {
    /* display: flex;  */
    align-items: center;
    padding: 0.2rem 0.6rem;
    overflow-wrap: anywhere; /* Avoids breaking words */
    white-space: normal; /* Ensures natural text wrapping */
    border-radius: 1rem;
}

.field {
    text-align: right; 
    color: rgb(37, 155, 90);
    font-weight: 650;
}

.user-val {
    color: rgb(30, 92, 143);
    /* color: rgb(37, 155, 90); */
    font-weight: 600;
    text-align: left;
}

@media (max-width: 650px) {
    .account-grid {
        max-width: 90vw;
    }
    .account-grid  > span {
        grid-column: 1;
    }
    .field {
        text-align: left;
        margin-left: 1rem; 
    }
    .user-val {
        text-align: left;
        margin-left: 1rem;  
    }
}

/* subscribe page */

.subscribe-container {
    width: 95%;
    overflow: hidden;
    margin: 0 auto;  
}

@media (min-width: 800px) {
    .subscribe-container {
        max-width: 70%; /* ADAPT */
    }
}
@media (min-width: 1200px) {
    .subscribe-container {
        max-width: 60%;
    }
}

.product {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the text */
    align-items: center;      /* Horizontally centers the text */
    
    padding: 2rem;
    border-radius: 1.25rem;

    background: url('/static/img/hero2-v1.webp') center/cover no-repeat;
    max-width: 100%;
    overflow: hidden;
    margin: 1rem auto;

    min-height: 50vh; /* Takes up significant vertical space on all screens */
    text-align: center; /* Optional: center the paragraph text */
    
}

.product-item {
    font-size: 1.5rem;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
    margin: 0.8rem auto;
    /* text-align: left; */
    max-width: fit-content;
    color: white;
    font-weight: 600;
    opacity: 1;
    /* animation: slideDownSubscribe 1s .2s forwards; */
}

@media (max-width: 600px) {
    .product-item {
        font-size: 1.275rem;
    }
}
@media (min-width: 1000px) {
    .product {
        min-height: 60vh;
    }
}

@keyframes slideDownSubscribe {
  from { transform: translateY(-50%); opacity:0; }
  to   { transform: translateY(0);     opacity:1; }
}

.mascot-container img {
    /* height: 6rem;
    width: auto; */
    border-color: white;
    border-width: 0.2rem;
    border-style: solid; /* Added to make the border visible */
}

.price {
    /* color: rgb(30, 92, 143); */
    color: rgb(27, 140, 78);
    font-size: 1.2rem;
    font-weight: 645;
    margin: 0rem auto 0.7rem;
}

.fineprint {
    font-size: 0.95rem;
    color:rgb(93, 93, 93);
    margin: 0.8rem auto 3rem;
}

.pattern {
    font-size: 1.05rem;
    color: rgb(30, 92, 143);
    font-weight: 550;
}

.terms {
    /* font-size: 1rem; */
    color: rgb(30, 92, 143);
    font-weight: 550;
}

.buy-button {
    margin: 0.3rem auto;
    padding: 1rem 2.4rem;
    font-size: 1.1rem;
    background-image: linear-gradient(rgb(66, 190, 121), rgb(53, 171, 106));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* @media (max-width: 600px) {
    .buy-button {
        padding: 1rem 2.3rem;
    }
} */

.lower {
    margin-top: 1.4rem;
    font-size: 0.95rem;
    color:rgb(93, 93, 93);
}

.captcha {
    justify-self: center;   /* <-- this is the key */
    display: flex;
    justify-content: center;
    transform: scale(0.875);
    transform-origin: 0 0;
    transform-origin: center; /* avoid left pull when scaling */
    margin: 0 auto;
}