:root {
    --darkBlack: #000000;
    --black: #2A2A2A;
    --darkShadow: #3e3e3e;
    --boulder: #686868;
    --alto: #D0D0D0;
    --athens: #f6f6f6;
    --white: #FFFFFF;
    --red: #F55D7B;
    --blue: #0ad3ff;
    --iceBlue: #cef6ff;
    --petrol: #056a80;
    --blueShadow: #022a33;
    --green: #5de380;
    --gold: #f6ae2d;
}

body {
    display: flex;
    align-items: center;
    background-color: var(--athens);
    min-height: 100vh;
}

.container {
    background-color: var(--white);
}

.antForm {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
    text-align: center;
}

.antForm-L {
    width: 100%;
    max-width: 550px;
    padding: 15px;
    margin: auto;
    text-align: center;
}

.antForm .form-floating:focus-within {
    z-index: 2;
}
.antFormNext {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.antFormNext:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}
.antNextSpinner {
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
}

.status-icon {
    position: absolute;
    right: 10px;
    top: 75%;
    transform: translateY(-50%);
    font-size: 18px;
    display: none;
}
.loading::after {
    content: '\2686'; /*\25F3*/
    animation: spin 1s linear infinite;
    display: inline-block;
}  
.success::after {
    content: '\2714'; /* Checkmark */
    color: var(--green);
}
.warning::after {
    content: '\2714'; /* Checkmark */
    color: var(--gold);
}
.error::after {
    content: '\2716'; /* Cross mark */
    color: var(--red);
}

/* Spinner Animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.form-check {
    text-align: left;
    margin-top: 10px;
}

.form-check-input:focus {
    border-color: var(--alto)!important;
    box-shadow: 0 0 0 0.25rem var(--athens);
}

.antFormInputWrapper {
    position: relative;
}
.antFloatingInput {
    position: relative;
}

.form-floating:first-child>input,
.form-floating:first-child>select {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-floating:last-child>input,
.form-floating:last-child>select {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.form-floating:only-child>input {
    border-radius: 0.25rem;
}

.form-floating:not(.form-floating:first-child, .form-floating:last-child, .form-floating:only-child)>input {
    border-radius: 0;
}

.invalid-feedback {
    color: var(--red);
}

.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
    color: var(--red);
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: var(--red);
}

.custom-select.is-invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.was-validated .form-control:invalid {
    border-color: var(--red);
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: var(--boulder);
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
    background-color: var(--boulder);
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='black'/%3e%3c/svg%3e")!important;
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: var(--boulder);
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--boulder);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='grey' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

.antFormFooter {
    display: flex;
    font-size: 80%;
    margin-top: 15px;
    flex-direction: column;
}

.antFormFooter a {
    color: var(--boulder);
    margin-top: 12px;
}

#antFormLogo {
    height: 54px;
    width: 54px;
    display: inline-block;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--boulder);
    opacity: 1;
    color: var(--athens)
}
.welcome-hidden{
    display: none!important;
}

/* SHOP*/
.preview-container{
    background-color: var(--athens);
}
.card-footer{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.qty-input{
    width: 33%;
    text-align: center;
}
.card-footer .btn {
    border-radius: 50%;
    height: 24px;
    width: 24px;
    padding: 0px;
    background-color: var(--black);
    border: none;
}
.card-footer .btn:hover {
    background-color: var(--blueShadow);
}
.period-switch-container {
    padding-left: 0px;
    display: flex;
    width: 190px;
    justify-content: space-between;
    position: fixed;
    right: 36vw;
}
#periodSwitch{
    margin-left: 0px;
}
.compare-link{
    left: 30px;
    position: relative;
}
#preview-bill{
    margin-top: 2vh;
}
#preview-footer {
    display: flex;
    flex-direction: column;
}
p.text-end.billing-explanation {
    font-size: 80%;
    font-weight: bold;
    margin-right: 18px;
    margin-top: 6px;
}
@media (prefers-color-scheme: dark) {
    .form-control {
        background-color: var(--black);
        color: var(--athens);
    }
    .form-control:focus {
        background-color: var(--athens);
        color: var(--black);
    }
    .form-select {
        background-color: var(--black);
        color: var(--athens);
    }
    .form-floating>.form-control:-webkit-autofill~label {
        color: var(--black);
    }
    .container {
        background-color: var(--darkBlack);
    }
    .list-group-item {
        background-color: var(--black);
        color: var(--athens);
        border: 1px solid var(--darkBlack);
    }
    .btn-check+.btn:hover{
        background-color: var(--athens);
    }
    .btn-check:checked+.btn {
        background-color: var(--athens);
        color: var(--black);
    }
    .form-select{
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
    .form-select:focus{
        box-shadow: none;
        border-color: var(--alto);
    }
    .form-control:focus{
        box-shadow: none;
        border-color: var(--alto);
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        box-shadow: 0 0 0px 1000px var(--black) inset;
        -webkit-text-fill-color: var(--athens);
        border: 1px solid;
    }
    .form-floating  > input,
    .form-floating  > input:active, 
    .form-floating  > input:focus {
        background-color: var(--black);
    }
    .card-footer {
        background-color: var(--darkBlack);
    }
    
    /* SHOP DARK MODE*/
    #pricingMainContainer {
        background-color: var(--darkBlack);
    }
    .preview-container, 
    .cart-container {
        background-color: var(--black);
    }
    div .card-text,
    div .card-price {
        color: var(--athens);
    }
    .cart-container {
    border: 1px solid var(--darkBlack);
    }
}