html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background: rgb(229, 231, 235);
    font-family: "Assistant", sans-serif;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* TEXT */
.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.h2, h2 {
    color: #194792;
    font-family: Assistant, sans-serif;
    font-size: 28px;
    font-weight: 800;
}

/* Alerts */
.alert-warning {
    --bs-alert-border-color: #664d03;
}




/* Custom styles */

.card {
    border: none;
}

.form-label {
    margin-bottom: 0.5rem;
    font-size: 1.0rem;
    font-weight: 700;
}
.form-input {
    border: 1px solid #686e67;
    border-radius: 3px;
}

.text-danger {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.card-header {
    border-bottom: none;
}

.card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid rgba(0,0,0,.125);
}

/* Responsive improvements */
@media (max-width: 576px) {
    .card {
        margin: 0 10px;
    }

    .container {
        padding: 0 15px;
    }
}







/* CARDS */
/* Payment Cards */
.payment-card {
    border-radius: 25px;
}
.payment-card-header {
    background-color: #194792;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-top-left-radius: 25px !important;
    border-top-right-radius: 25px !important;
}
    .payment-card-header .card-title {
        margin-left: 10px;
        margin-top: 10px;
    }
.payment-card-body {
    background-color: rgb(235, 235, 235);
}
.payment-card-footer {
    border-bottom-left-radius: 25px !important;
    border-bottom-right-radius: 25px !important;
}

/* Zone Cards */
/* Base Card Style */
.zone-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    border: 3px solid #dee2e6;
    border-radius: 12px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #495057;
}

.zone-title {
    font-weight: 800;
    font-size: 1.8rem;
    margin-bottom: 5px;
}

/* Hover Effect */
.zone-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.zone-form-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 3px solid #fff;
    border-radius: 12px;
    padding: 5px 20px 5px;

}
    .zone-form-card-label {
        font-size: 1.0rem;
        font-weight: 700;
    }
    .zone-form-card-Eastern {
        background-color: #ED3229;
        color: #fff;
    }
    .zone-form-card-Central {
        background-color: #FFCF00;
        color: #000;
    }
    .zone-form-card-Western {
        background-color: #194792;
        color: #fff;
    }
    .zone-form-card-LG {
        background-color: #2C7338;
        color: #fff;
    }
.btn-wrong-zone {
    background-color: #fff;
    border: 2px solid #fff;
}
    .btn-wrong-zone:hover {
        border: 2px solid #fff;
    }

.btn-check + .zone-eastern:hover {
    border-color: #ED3229; /*#FF4747;*/
    /*background-color: #FFDEDE;*/
}
.btn-check + .zone-central:hover {
    border-color: #FFCF00;
    /*background-color: #FFFAB3;*/
}
.btn-check + .zone-western:hover {
    border-color: #194792;
    /*background-color: #C9F1FF;*/
}
.btn-check + .zone-labrador:hover {
    border-color: #2C7338;
    /*background-color: #BDD9BD;*/
}

/* Selected State - Using NL Health Zone Colors */
.btn-check:checked + .zone-eastern {
    border-color: #fff;
    background-color: #ED3229; /*#FF4747;*/
    color: #fff;
}
.btn-check:checked + .zone-central {
    border-color: #fff;
    background-color: #FFCF00;
    color: #000;
}
.btn-check:checked + .zone-western {
    border-color: #fff;
    background-color: #194792;
    color: #fff;
}
.btn-check:checked + .zone-labrador {
    border-color: #fff;
    background-color: #2C7338;
    color: #fff;
}

/* Icon color adjustments when selected */
.btn-check:checked + .zone-card i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}
/* If there is an error, give the wrapper a subtle background so the text pops */
.validation-wrapper:has(.field-validation-error) {
    background-color: #fff5f5;
    border: 1px solid #feb2b2;
    display: inline-block;
    padding: 10px 20px !important;
}

/* Add a little shake animation to catch the eye */
.field-validation-error {
    animation: shake 0.5s ease-in-out;
}

/* When the form is submitted and invalid, highlight the cards */
#zoneForm.was-validated .zone-card {
    border-color: #dc3545; /* Bootstrap Red */
}

/* Remove highlight once a card is checked */
.btn-check:checked + .zone-card {
    border-width: 3px;
    /* This will override the red border when selected */
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* INSTRUCTIONS */
#instructions {

}


/* BUTTONS */
.btn-cutout-blue {
    margin-top: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 2vw, 14px) clamp(20px, 3vw, 30px);
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    color: white !important;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 50px;
    transition: all 0.3s ease;
    width: clamp(7rem, 20vw, 18rem);
    height: clamp(2rem, 4vw, 3.8rem);
    background: #194792 0% 0% no-repeat padding-box;
    border: 1px solid #194792;
    border-radius: 50px;
    letter-spacing: 2.5px;
    min-width: fit-content;
}

.btn-cutout-blue-block {
    margin-top: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 2vw, 14px) clamp(20px, 3vw, 30px);
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    color: white !important;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 50px;
    transition: all 0.3s ease;
    height: clamp(2rem, 4vw, 3.8rem);
    background: #194792 0% 0% no-repeat padding-box;
    border: 1px solid #194792;
    border-radius: 50px;
    letter-spacing: 2.5px;
    min-width: fit-content;
}
    .btn-cutout-blue-block:hover,
    .btn-cutout-blue:hover {
        background-color: #2563eb;
    }
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    font-size: clamp(1rem, 1.8vw, 1.09rem);
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color: #FFF;
    width: auto !important;
    height: clamp(3.2rem, 6vw, 3.9rem) !important;
    min-width: unset !important;
    letter-spacing: 2.5px;
    background-color: #ffffff;
    color: #194792 !important;
    border: 2px solid #194792;
}
    .btn-outline:hover {
        border: 2px solid #2563eb;
        color: #2563eb !important;
    }
.btn-outline-sm {
    display: inline-flex;
    justify-content: center;
    font-size: clamp(1rem, 1.8vw, 1.09rem) !important;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color: #FFF;
    width: auto !important;
    min-width: unset !important;
    letter-spacing: 2.5px;
    background-color: #ffffff;
    color: #194792 !important;
    border: 2px solid #194792;
}
    .btn-outline-sm:hover {
        border: 2px solid #194792;
        background-color: #194792;
        color: #fff !important;
    }
.btn-outline-xs {
    display: inline-flex;
    justify-content: center;
    font-size: clamp(0.8rem, 1.2vw, 1.0rem) !important;
    font-weight: normal;
    text-decoration: none !important;
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color: #FFF;
    width: auto !important;
    min-width: unset !important;
    letter-spacing: 2.5px;
    background-color: #ffffff;
    color: #194792 !important;
    border: 1px solid #194792;
}
    .btn-outline-xs:hover {
        border: 1px solid #194792;
        background-color: #194792;
        color: #fff !important;
    }

.payment-summary {
    border: 2px solid rgb(222, 226, 230);
}
.payment-summary-left {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 1px solid rgb(222, 226, 230);
}
.payment-summary-right {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid rgb(222, 226, 230);
}


.bottom-10 {
    bottom: 10px !important;
}
.bottom-20 {
    bottom: 20px !important;
}