/* Custom styles for Index1_Modern_Bootstrap landing page */

:root {
    --primary-color: #1a936f;
    --primary-dark: #147a59;
    --text-dark: #2D3E50;
    --text-light: #6c757d;
    --border-color: #cbd5e0;
    --error-color: #dc3545;
    --success-color: #28a745;
    --bg-light: #f8f9fa;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #ffffff;
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Header Styles */
.modern-header {
   /* background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);*/
    padding: 15px 0;
  /*  box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
}

.modern-header .logo {
    height: 60px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.header-left {
    flex: 0 0 auto;
}

.header-right {
    flex: 0 0 auto;
}

.header-center {
  /*  position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);*/
}

.trust-centered {
    height: 30px;
}

.secure-logo {
    height: 35px;
}
@media (max-width: 768px) {
    .modern-header {
        padding: 8px 0;
    }

        .modern-header .logo {
            height: 48px;
            max-width:fit-content;
        }

    .trust-centered {
        height: 26px;
    }

    .secure-logo {
        height: 26px;
    }

    .trust-badges img {
        height: 22px;
        margin-left: 6px;
    }

    .header-content {
        align-items: center;
        gap: 6px;
        padding: 0 6px;
    }
}


/* Form Card Styles */
.form-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin: 0;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 576px) {
    .form-card {
        padding: 0px 0px;
        margin: 15px 0;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #e9ecef;
    }
}

.form-card h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
    text-align: center;
}

@media (max-width: 576px) {
    .form-card h2 {
        font-size: 22px;
    }
}

.form-card .subtitle {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 25px;
}

/* Modern Buttons */
.btn-modern {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 16px;
    padding: 14px 30px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 147, 111, 0.3);
}

/* Subtle sweeping light effect (faded ray) */
.btn-modern {
    position: relative;
    overflow: hidden;
}
.btn-modern::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-100%);
    opacity: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
    will-change: transform;
    animation: btn-sweep 1.5s linear infinite;
}

@keyframes btn-sweep {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(300%); }
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 147, 111, 0.4);
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    color: white;
}

.option-btn {
    width: 100%;
    padding: 18px;
    margin-bottom: 12px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Loading overlay - professional / authoritative styling */
.loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26,147,111,0.28); /* soft green overlay */
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    z-index: 99999;
    padding: 24px;
}

.loading-overlay .loading-content {
    background: linear-gradient(180deg, rgba(26,147,111,0.98) 0%, rgba(20,120,90,0.96) 100%);
    color: #ffffff;
    padding: 36px 44px;
    border-radius: 12px;
    box-shadow: 0 24px 50px rgba(5, 10, 8, 0.45), inset 0 1px 0 rgba(255,255,255,0.02);
    max-width: 820px;
    width: min(96%, 820px);
    text-align: center;
    border-left: 6px solid var(--primary-color); /* brand accent */
    transform: translateY(6px);
    opacity: 0.98;
}

.loading-overlay .loading-content h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px 0;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.loading-overlay .loading-content p {
    margin: 0;
    color: rgba(255,255,255,0.92);
    font-size: 15px;
    line-height: 1.55;
}

.loading-overlay .spinner-border {
    width: 4.25rem;
    height: 4.25rem;
    border-width: 0.36rem;
    color: #ffffff;
    margin-bottom: 18px;
}

/* subtle ring pulse behind the spinner for presence */
.loading-overlay .spinner-ring {
    position: absolute;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: calc(50% - 135px);
    pointer-events: none;
    box-shadow: 0 0 0 3px rgba(47,143,102,0.06);
    animation: ringPulse 1600ms infinite ease-out;
}

@keyframes ringPulse {
    0% { transform: translateX(-50%) scale(0.92); opacity: 0.36; }
    70% { transform: translateX(-50%) scale(1.06); opacity: 0.02; }
    100% { transform: translateX(-50%) scale(1.12); opacity: 0; }
}

/* slightly lift the card when shown */
.loading-overlay .loading-content {
    transition: transform 220ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms ease, opacity 220ms ease;
}

@media (max-width: 576px) {
    .loading-overlay .loading-content { padding: 20px; border-radius: 10px; }
    .loading-overlay .spinner-ring { top: calc(50% - 118px); width: 5.5rem; height:5.5rem; }
    .loading-overlay .spinner-border { width: 3.25rem; height: 3.25rem; }
}

/* File-search animation inside loading overlay */
.loading-content .file-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.loading-content .file-search .files {
    position: relative;
    width: 160px;
    height: 36px;
    overflow: visible;
}
.loading-content .file-search .file {
    position: absolute;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transform-origin: center center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.loading-content .file-search .file.f1 { left: 0; animation: file-move 1.6s ease-in-out infinite; }
.loading-content .file-search .file.f2 { left: 36px; animation: file-move 1.6s ease-in-out 0.15s infinite; }
.loading-content .file-search .file.f3 { left: 72px; animation: file-move 1.6s ease-in-out 0.30s infinite; }
.loading-content .file-search .file.f4 { left: 108px; animation: file-move 1.6s ease-in-out 0.45s infinite; }

@keyframes file-move {
    0% { transform: translateY(0) scale(1); opacity: 0.0; }
    20% { transform: translateY(-8px) scale(1.03); opacity: 1; }
    50% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(8px) scale(0.98); opacity: 0; }
}

.loading-content .file-search .search-path {
    display:flex;
    gap:8px;
    align-items:center;
}
.loading-content .file-search .dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background: rgba(255,255,255,0.18);
    animation: dot-pulse 1s infinite ease-in-out;
}
.loading-content .file-search .dot:nth-child(2) { animation-delay: 0.12s; }
.loading-content .file-search .dot:nth-child(3) { animation-delay: 0.24s; }

@keyframes dot-pulse {
    0% { transform: scale(0.9); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.5; }
}

/* Keep the default close icon but remove the focus ring/outline only */
#no-finance-alert .btn-close {
    box-shadow: none !important;
    outline: none !important;
}
#no-finance-alert .btn-close:focus,
#no-finance-alert .btn-close:active {
    box-shadow: none !important;
    outline: none !important;
}

.option-btn:hover {
    border-color: var(--primary-color);
    background: rgba(26, 147, 111, 0.05);
    transform: translateY(-2px);
}

/* Modern Form Inputs */
.form-floating > .form-control {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    height: calc(3.5rem + 2px);
}

.form-floating > .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(26, 147, 111, 0.15);
}

.form-floating > label {
    padding: 1rem 1rem;
    color: var(--text-light);
}

.form-select {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
}

.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(26, 147, 111, 0.15);
}

/* Progress Bar */
.progress-section {
    background: white;
    padding: 0px 0px 27px 0px;
    border-radius: 12px;
    margin: 0px auto;
    max-width: 600px;
}

@media (max-width: 576px) {
    .progress-section {
        border-radius: 0;
        margin: 0;
        box-shadow: none;
        padding: 15px;
        border-bottom: 1px solid #e9ecef;
    }
}

.progress {
    height: 8px;
    border-radius: 10px;
    background-color: #e9ecef;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 10px;
}

/* Info Boxes */
.info-box {
    background: #e8f5f1;
    border-left: 4px solid var(--primary-color);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.info-box i {
    color: var(--primary-color);
    margin-right: 10px;
}

/* FAQ Section */
.faq-section {
    background: transparent;
    border-radius: 0;
    padding: 20px 0;
    margin: 24px 0 36px;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 576px) {
    .faq-section {
        padding: 20px 15px;
        margin: 15px 0;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #e9ecef;
    }
}

.faq-item {
    border-bottom: 1px solid #e9ecef;
    padding: 18px 0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 16px;
    transition: color 0.3s;
    user-select: none;
}

.faq-question:hover {
    color: var(--primary-dark);
}

.faq-question i {
    transition: transform 0.3s;
    color: var(--primary-color);
}

.faq-question.active i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    color: var(--text-dark);
    font-size: 15px;
    line-height: 1.6;
}

.faq-answer.active {
    max-height: 1000px;
    padding-top: 15px;
}

.accordion-button {
    font-weight: 600;
    color: var(--text-dark);
    background-color: white;
}

.accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: #e8f5f1;
    box-shadow: none;
}

.accordion-button:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(26, 147, 111, 0.15);
}

/* Error Styles */
.error-message {
    color: var(--error-color);
    font-size: 14px;
    display: none;
    position: static;
    margin: 8px 0 0 0;
}

.error-message i {
    margin-right: 5px;
}

.form-control.is-invalid {
    border-color: var(--error-color);
}

/* When a field has an error, keep the label centered and allow the error text to push content */
.animated-field.has-error .animated-label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    left: 16px;
    padding-bottom: 6px;
}
.animated-field.has-error .error-message {
    display: block;
    position: static; /* make the error in-flow so it pushes following content */
    margin: 8px 0 0 12px;
    color: var(--error-color);
    font-size: 14px;
    white-space: normal;
}

/* When a field has an error but receives focus or has a value, allow the label to move up */
.animated-field.has-error .animated-input:focus + .animated-label,
.animated-field.has-error .animated-input:not(:placeholder-shown) + .animated-label,
.animated-field.has-error select.animated-input:not([value=""]) + .animated-label {
    top: -10px;
    transform: translateY(0);
    left: 12px;
    font-size: 12px;
    color: var(--primary-color);
    background: #fff;
    padding: 0 4px;
}

.form-control.is-valid {
    border-color: var(--success-color);
}

/* Loading Overlay */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.spinner {
    border: 4px solid rgba(255,255,255,0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Testimonials */
.testimonial-section {
    background: white;
    padding: 60px 0;
}

/* Hero / Lead box */
.hero-area {
    background: transparent;
    padding: 20px 0 8px;
}

.hero-area .hero-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 6px;
    color: #0b0b0b;
}

.hero-area .hero-sub {
    font-size: 18px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .hero-area {
        padding: 15px 0 6px;
    }

    .hero-area .hero-title {
        font-size: 36px;
    }

    .hero-area .hero-sub {
        font-size: 15px;
        margin-bottom: 10px;
    }
}

.lead-box {
    background: #ffffff;
    padding: 18px 24px;
    border-radius: 12px;
    margin: 8px 0 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    border: 4px solid #109379;
}

.owl-carousel .item {
    position: relative;
    cursor: pointer;
}

.owl-carousel .item a {
    display: block;
    position: relative;
}

.owl-carousel .item img {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.owl-theme .owl-controls .owl-nav [class*=owl-] {
    background: var(--primary-color);
    color: white;
    font-size: 20px;
    padding: 10px 15px;
    border-radius: 50%;
}

.owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
    background: var(--primary-dark);
}

.owl-theme .owl-dots .owl-dot span {
    background: var(--border-color);
}

.owl-theme .owl-dots .owl-dot.active span {
    background: var(--primary-color);
}

/* Footer */
.modern-footer {
    background: #000;
    color: #ccc;
    padding: 50px 0 30px;
}

.modern-footer a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.modern-footer a:hover {
    color: white;
}

/* Featured In Scroller */
.scroller-wrapper {
    overflow: hidden;
    position: relative;
}

#scroller {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: scroll 20s linear infinite;
}

#scroller li {
    flex: 0 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scroller img {
    max-height: 60px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

#scroller img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 576px) {
    #scroller li {
        padding: 0 20px;
    }
    
    #scroller img {
        max-height: 45px;
    }
}

/* Container sizing — follow Bootstrap defaults
   Keep a lightweight wrapper that mirrors container spacing
   so the layout matches the original site widths. */
.mobile-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* keep a small gap from the top of the viewport so bordered containers
   don't sit flush against the browser chrome */
.mobile-wrapper.bg-white {
    margin-top: 25px;
}

@media (max-width: 576px) {
    .mobile-wrapper {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        max-width: 100%;
    }
    .lead-box {
        padding: 15px !important;
    }
}

/* Animated field styles for placeholders */
.animated-field {
    position: relative;
    margin-bottom: calc(1.25rem + 10px); /* add 10px extra gap beneath each field */
    min-height: 52px; /* ensure fixed height so label centering isn't affected */
}

.animated-input {
    height: 56px !important;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  transition: border-color 0.2s;
  padding: 16px;
  width: 100%;
}

/* Icon inside animated-field: move to the left with space for placeholder */
.animated-field .input-icon {
    position: absolute;
    left: 16px;
    top: 28px;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 18px;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
}

.animated-field .animated-input {
    /* leave room on the left for icon + 15px gap so placeholder/label sits to the right */
    padding-left: 50px;
}

/* When Bootstrap places the validation background icon (check/cross)
   it can overlap our calendar icon. Move the calendar left when
   the input has a validation state. */
.animated-field .animated-input.is-valid + .input-icon,
.animated-field .animated-input.is-invalid + .input-icon {
    /* keep the left icon aligned consistently when state changes */
    left: 16px;
}

/* When we render our own validation tick element, position it at the right
   edge of the input. It's absolutely positioned inside the field so it sits
   where Bootstrap would normally draw its background tick. */
.animated-field .validation-tick {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success-color);
    font-size: 18px;
    display: none;
    z-index: 6;
    pointer-events: none;
    align-items: center;
    justify-content: center;
}

/* Show tick when input is valid. The tick sits before the input icon in
   the DOM so the input icon can be shifted left (see selector below). */
.animated-field .animated-input.is-valid + .validation-tick {
    display: flex;
}

/* If both a validation tick and our input-icon exist, don't move the left icon
    — validation tick now sits on the right so there's no overlap. */
/* (previous positioning removed to keep left icon stable) */

/* Smooth transition for the icon moving */
.animated-field .input-icon {
    transition: left 150ms ease-in-out;
}

/* Color the icon according to validation state for clearer feedback */
.animated-field .animated-input.is-valid + .input-icon i {
    color: var(--success-color);
}
.animated-field .animated-input.is-invalid + .input-icon i {
    color: var(--error-color);
}

/* Postcode icon should always keep its default color (map marker stays gray) */
.animated-field .input-icon.postcode-icon i {
    color: var(--text-light) !important;
}

/* Also support wrapper state classes so JS can mark icons without
   changing the underlying <i> glyph — this preserves the original
   icon while allowing tinting via CSS. */
.animated-field .input-icon.icon-valid i {
    color: var(--success-color);
}
.animated-field .input-icon.icon-invalid i {
    color: var(--error-color);
}

/* Stronger specificity for cases where adjacent tick or other rules
   might override the color. Ensure validated wrappers display green. */
.animated-field .input-icon.icon-valid i,
.animated-field .animated-input.is-valid + .validation-tick + .input-icon.icon-valid i {
    color: var(--success-color) !important;
    opacity: 1 !important;
}
.animated-field .input-icon.icon-invalid i {
    color: var(--error-color) !important;
}

/* Remove the native Bootstrap/background validation tick for our text inputs
   because we render a consistent validation tick element across fields.
   Keep native behaviour for selects (we don't add ticks for dropdowns). */
input.animated-input.is-valid,
input.animated-input.is-invalid {
    background-image: none !important;
    background-position: unset !important;
    padding-left: 50px; /* keep our spacing so icons/ticks align on the left */
}

@media (max-width: 576px) {
    .animated-field .input-icon { left: 20px; font-size:16px; }
    .animated-field .animated-input { padding-left:40px; }
}

/* Title/select icon: place on the left, with room for the native dropdown arrow moved left */
.animated-field .title-icon {
    left: 16px;
}
.animated-field select.animated-input {
    /* leave room on the left for the icon; dropdown arrow on the right */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    /* top right bottom left — leave room on left for icon and on right for arrow */
    padding: 12px 40px 12px 50px;
    color: #333;
}

@media (max-width: 576px) {
    .animated-field .title-icon { left: 20px; }
    .animated-field select.animated-input { padding: 12px 40px 12px 50px; }
}

@media (max-width: 576px) {
    .animated-field .animated-input.is-valid + .input-icon,
    .animated-field .animated-input.is-invalid + .input-icon {
        left: 20px;
    }
}

/* Input inside input-group */
.input-group .animated-input {
  border-radius: 8px 0 0 8px;
  flex: 1;
}

/* Postcode search button sizing to match input height and have visible label */
.postcode-search-btn {
    height: 56px !important;
    min-width: 105px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    font-weight: 600;
    border-radius: 0 8px 8px 0 !important;
}
.postcode-search-btn .postcode-btn-text {
    display: inline-block;
    font-size: 15px;
}

/* Ensure postcode icon stays visible in all states */
.input-group .input-icon.postcode-icon {
    z-index: 15;
    opacity: 1;
    visibility: visible;
}

.input-group .animated-label {
  z-index: 10;
}

.animated-input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: none;
}

.animated-label {
    position: absolute;
    /* place the label/placeholder to the right of the left icon (15px gap from icon) */
    left: 48px;
    top: 32px;
    transform: translateY(-50%);
    background: transparent;
    color: #999;
    font-size: 16px;
    font-weight: 400;
    pointer-events: none;
    transition: all 0.2s ease;
        padding: 0 0 4px 0; /* small bottom padding so placeholder sits slightly lower */
    z-index: 2;
}

/* When we want the label to sit on top (used for error state) */
.animated-field.label-top .animated-label,
.animated-field.has-error.label-top .animated-label,
/* Also handle when error state is active with icon */
.animated-field.has-error .animated-input:focus + .input-icon + .animated-label,
.animated-field.has-error .animated-input:not(:placeholder-shown) + .input-icon + .animated-label,
/* With validation tick */
.animated-field.has-error .animated-input:focus + .validation-tick + .input-icon + .animated-label,
.animated-field.has-error .animated-input:not(:placeholder-shown) + .validation-tick + .input-icon + .animated-label {
    top: -10px;
    left: 48px;
    transform: translateY(0);
    font-size: 12px;
    color: var(--primary-color);
    background: #fff;
    padding: 0 4px;
    font-weight: 500;
}


/* When input is focused or has value - move label to top */
.animated-input:focus + .animated-label,
.animated-input:not(:placeholder-shown) + .animated-label,
.animated-field.has-value .animated-label,
select.animated-input:not([value=""]):valid + .animated-label,
/* Also account for icon being between input and label */
.animated-input:focus + .input-icon + .animated-label,
.animated-input:not(:placeholder-shown) + .input-icon + .animated-label,
/* And when validation tick is also present */
.animated-input:focus + .validation-tick + .input-icon + .animated-label,
.animated-input:not(:placeholder-shown) + .validation-tick + .input-icon + .animated-label,
/* For selects with icons */
select.animated-input:not([value=""]):valid + .input-icon + .animated-label {
  top: -10px;
  left: 48px;
  transform: translateY(0);
  font-size: 12px;
  color: var(--primary-color);
  background: #fff;
  padding: 0 4px;
  font-weight: 500;
}

/* Date inputs always show label on top since they always have a value visually */
input[type="date"].animated-input + .animated-label,
input[type="date"].animated-input + .validation-tick + .input-icon + .animated-label,
input[type="date"].animated-input + .input-icon + .animated-label {
    top: -10px;
    left: 48px;
    transform: translateY(0);
    font-size: 12px;
    background: #fff;
    padding: 0 4px;
    font-weight: 500;
}

input[type="date"].animated-input:focus + .animated-label,
input[type="date"].animated-input:focus + .validation-tick + .input-icon + .animated-label,
input[type="date"].animated-input:focus + .input-icon + .animated-label {
  color: var(--primary-color);
}

/* Select dropdown specific */
select.animated-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding: 12px 40px 12px 16px;
  color: #333;
}

select.animated-input option[value=""][disabled] {
  display: none;
}

/* Empty select shows placeholder label inside */
select.animated-input[value=""] + .animated-label,
select.animated-input:invalid + .animated-label,
/* Also account for icon between select and label */
select.animated-input[value=""] + .input-icon + .animated-label,
select.animated-input:invalid + .input-icon + .animated-label {
  top: 31px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  background: transparent;
  padding: 0;
  font-weight: 400;
}

/* Error states */
.animated-input.is-invalid {
  border-color: var(--error-color);
}

/* When field is invalid, always move label to top */
.animated-input.is-invalid + .animated-label,
.animated-input.is-invalid + .input-icon + .animated-label,
.animated-input.is-invalid + .validation-tick + .input-icon + .animated-label,
.animated-input.is-invalid:focus + .animated-label,
.animated-input.is-invalid:not(:placeholder-shown) + .animated-label,
.animated-input.is-invalid:focus + .input-icon + .animated-label,
.animated-input.is-invalid:not(:placeholder-shown) + .input-icon + .animated-label,
.animated-input.is-invalid:focus + .validation-tick + .input-icon + .animated-label,
.animated-input.is-invalid:not(:placeholder-shown) + .validation-tick + .input-icon + .animated-label,
select.animated-input.is-invalid + .input-icon + .animated-label {
  color: #999; /* Keep label gray even on error */
  top: -10px;
  left: 48px;
  transform: translateY(0);
  font-size: 12px;
  background: #fff;
  padding: 0 4px;
}

.animated-input.is-valid {
  border-color: var(--success-color);
}

.animated-input.is-valid + .animated-label,
.animated-input.is-valid + .validation-tick + .input-icon + .animated-label {
  color: var(--success-color);
}

/* Back link styling */
.back-link {
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.back-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}