.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;
}

.responsive-button {
    background-color: var(--orange);
    color: white;
    font-size: 1.25rem; /* Responsive text size */
    padding: 0.8em 2em; /* Relative padding */
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: auto;
    max-width: 90%; /* Makes sure it fits on small screens */
    white-space: nowrap;
}

    .responsive-button:hover {
        background-color: var(--green-hover);
    }

.custom-input {
    border: 2px solid #a1b4ff;
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 1rem;
}

    .custom-input::placeholder {
        color: #000;
        opacity: 1;
    }

.next-btn {
    background-color: #ffb800;
    color: white;
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

    .next-btn:hover {
        background-color: #4e6e5d;
    }


.nav-link {
    color: #555;
    font-weight: 500;
}

    .nav-link.active {
        color: #000;
        font-weight: 700;
    }

.navbar-brand img {
    max-height: 60px;
}

@media (max-width: 576px) {
    .language-switcher {
        margin-top: 0.5rem;
    }
}


/* Scale down cards */
.card {
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-height: 100%;
    transition: transform 0.2s;
    padding: 0.5rem; /* smaller padding */
}

property-configuration-card {
    background-color: #f0923c
}

/* Reduce header font size & padding */
.card-header {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
}

.card-body .row {
    margin-top: 0.5rem;
}

.card-body .col-6 {
    padding-bottom: 0.3rem;
}


/* Radio Button Label smaller */
.form-check-label {
    font-size: 0.80rem;
}

/* Smaller space between radios */
.form-check {
    margin-bottom: 0.2rem;
    padding-left: 0.6em
}

/* Reduce space between cards */
.row.g-3 > [class*='col'] {
    margin-bottom: 0.5rem;
}

/* Smaller textarea */
textarea.form-control {
    font-size: 0.85rem;
    padding: 0.4rem;
}

/* Smaller Button */
button[type=\"submit\"] {
    font-size: 1rem;
    padding: 0.4rem 1.5rem;
    border-radius: 0.6rem;
}


/* <style >
/* General font (Inter, fallback) */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Container */
.date-time-selection {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Arrow controls */
.week-arrow {
    font-size: 1.5rem;
    color: #2563EB;
    cursor: pointer;
    padding: 0 0.75rem;
    user-select: none;
}

/* Heading */
#selected-date-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    text-align: center;
}

/* Weekdays row */
#week-days-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 1.5rem 0;
    gap: 0.5rem;
}

    #week-days-row button {
        flex: 1 1 calc(100% / 7 - 0.5rem);
        aspect-ratio: 1 / 1;
        border: none;
        border-radius: 0.75rem;
        background-color: #f3f3f3;
        color: #6B7280;
        font-size: 0.9rem;
        font-weight: 500;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        max-width: 4rem;
        color: black;
    }

        #week-days-row button.btn-primary {
            background-color: #2563EB;
            color: #FFFFFF;
            font-weight: 600;
        }

/* Section headers */
.date-time-selection h6 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    margin: 1rem 0 0.5rem;
}

.time-slot {
    flex: 0 0 auto; /* Don't grow/shrink, keep intrinsic width */
    width: auto;
    min-width: 4.5rem;
    padding: 0.5rem 1rem;
    margin: 0.4rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.75rem;
    background-color: #FFFFFF;
    color: #374151;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    background-color: #f3f3f3;
}

    .time-slot.active {
        border-color: #2563EB;
        background-color: #EFF6FF;
    }

/* Time grid */
#morning-slots, #afternoon-slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 0.5rem;
}

/* Style validation messages */
.field-validation-error {
    color: #dc3545; /* Bootstrap danger */
    font-size: 0.875rem; /* smaller */
    margin-top: 0.25rem;
    padding-left: 0.25rem;
}

/* Red border for invalid cards */
.card.has-error {
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 0.5rem rgba(220, 53, 69, 0.3);
}