/* ===========================================
   Aprila.Www Custom Styles
   =========================================== */

/* ===========================================
   Utility Classes
   =========================================== */

.bg-light-soft {
    color: #F9F8F6 !important;
}

.text-muted-warm {
    color: #5f5b56;
}


/* ===========================================
   2.6 Hero Link Styling
   =========================================== */

/* Hero heading link - looks like normal heading text, not a link */
h1 .hero-link,
h1 .hero-link:hover,
h1 .hero-link:visited,
h1 .hero-link:active {
    color: inherit;
    text-decoration: none;
}

h1 .hero-link:hover {
    opacity: 0.8;
}

/* ===========================================
   2.7 Input Box Contrast Enhancement
   =========================================== */

/* Enhanced input field contrast - scoped to Apply Widget */
.alert.bg-light.soft .form-control,
.alert.bg-light.soft .form-control.bg-white,
.alert.bg-light.soft input.form-control,
.alert.bg-light.soft input.form-control.bg-white,
.alert.bg-light.soft input[type="text"].form-control,
.alert.bg-light.soft input[type="email"].form-control {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #adb5bd !important;
    border-radius: 0.375rem !important;
    color: #1a1d20 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Allow text-primary to keep its color */
.alert.bg-light.soft input.form-control.text-primary {
    color: inherit;
}

.alert.bg-light.soft .form-control::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

.alert.bg-light.soft .form-control:hover:not(:disabled):not(:focus),
.alert.bg-light.soft input.form-control:hover:not(:disabled):not(:focus) {
    border: 1px solid #6c757d !important;
}

.alert.bg-light.soft .form-control:focus,
.alert.bg-light.soft input.form-control:focus {
    border: 1px solid #cf6833 !important;
    box-shadow: 0 0 0 0.15rem rgba(207, 104, 51, 0.2) !important;
    outline: 0;
    background-color: #ffffff !important;
}

.alert.bg-light.soft .form-control:disabled,
.alert.bg-light.soft .form-control[readonly] {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error state */
.alert.bg-light.soft .form-control.is-invalid,
.alert.bg-light.soft .form-control:invalid {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
}

/* Autofill styling */
.alert.bg-light.soft .form-control:-webkit-autofill,
.alert.bg-light.soft .form-control:-webkit-autofill:hover,
.alert.bg-light.soft .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #1a1d20 !important;
    border: 1px solid #adb5bd !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Range slider styling */
input[type=range],
input[type=range]:focus,
input[type=range]:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

input[type=range]::-webkit-slider-thumb,
input[type=range]:focus::-webkit-slider-thumb,
input[type=range]:active::-webkit-slider-thumb {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

input[type=range]::-moz-range-thumb,
input[type=range]:focus::-moz-range-thumb,
input[type=range]:active::-moz-range-thumb {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .form-control,
    .hero-link {
        transition: none !important;
    }
}

/* ===========================================
   Hero Coin Positioning
   =========================================== */

.hero-coin-stack {
    right: 12%;
    top: 49%;
}

.hero-coin-single {
    right: 8%;
    top: 29%;
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-coin-stack {
        right: 8%;
        top: 49%;
    }
    .hero-coin-single {
        right: 1%;
        top: 29%;
    }
}

/* Small desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-coin-stack {
        right: 16%;
        top: 44%;
    }
    .hero-coin-single {
        right: 12%;
        top: 24%;
    }
}

/* Medium desktop (1200px - 1499px) */
@media (min-width: 1200px) and (max-width: 1499px) {
    .hero-coin-stack {
        right: 17%;
        top: 44%;
    }
    .hero-coin-single {
        right: 13%;
        top: 24%;
    }
}

/* Large desktop (1500px - 1999px) */
@media (min-width: 1500px) and (max-width: 1999px) {
    .hero-coin-stack {
        right: 25%;
        top: 44%;
    }
    .hero-coin-single {
        right: 21%;
        top: 24%;
    }
}

/* Extra large desktop (2000px - 2299px) */
@media (min-width: 2000px) and (max-width: 2299px) {
    .hero-coin-stack {
        right: 29%;
        top: 44%;
    }
    .hero-coin-single {
        right: 25%;
        top: 24%;
    }
}

/* Ultra wide desktop (2300px+) */
@media (min-width: 2300px) {
    .hero-coin-stack {
        right: 32%;
        top: 44%;
    }
    .hero-coin-single {
        right: 28%;
        top: 24%;
    }
}