/* ========================================
   Property Alerts - Notifications
   ======================================== */

/* Toggle Switch Component */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    display: block;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    background-color: #ccc;
    transition: background-color 0.4s ease;
}

.switch .slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    border-radius: 100%;
    background-color: white;
    transition: transform 0.4s ease;
}

.switch input:checked+.slider {
    background-color: var(--wp--preset--color--button-bg, #000);
}

.switch input:checked+.slider::before {
    transform: translateX(15px);
}

.switch input:focus+.slider {
    box-shadow: 0 0 0 0.25rem rgb(from var(--wp--preset--color--button-bg, #000) r g b / 0.15);
}

/* Notification Form */
form.notif ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

form.notif ul li {
    display: flex;
    padding: 5px 0;
}

form.notif ul li.button-submit input[type="submit"] {
    cursor: pointer;
    background-color: var(--wp--preset--color--button-bg, #000);
    color: var(--wp--preset--color--button-text, #fff);
    border-radius: 8px;
    border: 0;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    line-height: inherit;
    padding: 0.75rem 1.5rem;
    margin-top: var(--wp--preset--spacing--20);
    text-decoration: none;
    width: 100%;
    transition: opacity 0.2s ease;
}

form.notif ul li.button-submit input[type="submit"]:hover {
    opacity: 0.9;
}

form.notif ul li label.col {
    width: 100%;
    display: inline-block;
}

form.notif ul li:first-child {
    text-align: center;
    font-size: 18px;
}

/* ========================================
   Property Alerts - Requirements Accordion
   ======================================== */

.ab-accordion-requirement {
    margin-top: var(--wp--preset--spacing--30);
}

/* Accordion Header */
.ab-accordion-requirement>h3 {
    position: relative;
    margin: 0;
    padding: 0;
    background-color: var(--wp--preset--color--base-primary, #f9f9f9);
    border: 1px solid color-mix(in srgb, currentColor, transparent 85%);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ab-accordion-requirement>h3:hover {
    background-color: color-mix(in srgb, currentColor, transparent 93%);
}

.ab-accordion-requirement>h3.saved-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ab-accordion-header {
    display: flex;
    align-items: center;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    user-select: none;
    flex: 1;
}

/* Accordion Actions */
.ab-accordion-requirement .action {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}

.ab-accordion-requirement .action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--wp--preset--color--text-primary, #151515);
    transition: background-color 0.2s ease;
    text-decoration: none;
}

.ab-accordion-requirement .action a:hover {
    background-color: color-mix(in srgb, currentColor, transparent 90%);
}

/* Accordion Content Container */
.ab-accordion-requirement>div {
    display: none;
    border: 1px solid color-mix(in srgb, currentColor, transparent 85%);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
    padding: var(--wp--preset--spacing--30);
    background-color: var(--wp--preset--color--base-primary, #f9f9f9);
    height: auto !important;
}

.ab-accordion-requirement>div:not(.d-none) {
    display: block;
}

/* Add New Requirement Form Container */
.form-add-requirement {
    padding: var(--wp--preset--spacing--30);
}

/* Saved Requirement Info */
.saved-requirement-info .list-info {
    padding: 0.5rem 0;
    font-size: 15px;
    line-height: 1.6;
}

.saved-requirement-info .list-info .title {
    font-weight: 600;
    color: color-mix(in srgb, currentColor, transparent 25%);
    margin-right: 0.5rem;
}

.saved-requirement-info .list-info i {
    margin-right: 0.25rem;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* Saved Requirement Form (Edit Mode) */
.saved-requirement-form {
    padding: var(--wp--preset--spacing--30);
}

.saved-requirement-form.d-none {
    display: none;
}

/* ========================================
   Form Styling
   ======================================== */

/* Common Form Styles */
form.add-requirement ul,
form.edit-requirement ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
}

form.add-requirement ul>li,
form.edit-requirement ul>li {
    grid-column: span 12;
}

/* Field Styling */
form.add-requirement ul>li.field,
form.edit-requirement ul>li.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: flex-end;
}

form.add-requirement ul>li.field label,
form.edit-requirement ul>li.field label {
    color: color-mix(in srgb, currentColor, transparent 25%);
    font-size: 15px;
    font-weight: 500;
    min-height: 14px;
}

form.add-requirement ul>li.field label.center,
form.edit-requirement ul>li.field label.center {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding-top: 25px;
}

/* Input Fields */
form.add-requirement input[type="text"],
form.add-requirement input[type="number"],
form.edit-requirement input[type="text"],
form.edit-requirement input[type="number"] {
    display: block;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    padding: var(--wp--preset--spacing--20);
    border: 1px solid #ccc;
    font-size: 16px;
    font-family: inherit;
    appearance: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

form.add-requirement input[type="text"]:focus,
form.add-requirement input[type="number"]:focus,
form.edit-requirement input[type="text"]:focus,
form.edit-requirement input[type="number"]:focus {
    outline: none;
    border-color: var(--wp--preset--color--button-bg, #000);
    box-shadow: 0 0 0 0.25rem rgb(from var(--wp--preset--color--button-bg, #000) r g b / 0.15);
}

/* Select Elements */
form.add-requirement select.form-control,
form.edit-requirement select.form-control {
    display: block;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    padding: 0 var(--wp--preset--spacing--20);
    border: 1px solid #ccc;
    font-size: 16px;
    font-family: inherit;
    appearance: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

form.add-requirement select.form-control:focus,
form.edit-requirement select.form-control:focus {
    outline: none;
    border-color: var(--wp--preset--color--button-bg, #000);
    box-shadow: 0 0 0 0.25rem rgb(from var(--wp--preset--color--button-bg, #000) r g b / 0.15);
}

/* Select2 Container Styling */
form.add-requirement .select2-container,
form.edit-requirement .select2-container {
    width: 100% !important;
}

form.add-requirement .select2-container .select2-selection,
form.edit-requirement .select2-container .select2-selection {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    padding: 0 var(--wp--preset--spacing--20);
    border: 1px solid #ccc;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

form.add-requirement .select2-container .select2-selection--single .select2-selection__rendered,
form.edit-requirement .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 0;
}

form.add-requirement .select2-container .select2-selection--single .select2-selection__arrow,
form.edit-requirement .select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

form.add-requirement .select2-container .select2-selection--multiple,
form.edit-requirement .select2-container .select2-selection--multiple {
    min-height: 44px;
    height: auto;
    padding: 0.25rem var(--wp--preset--spacing--20);
}

form.add-requirement .select2-container--default.select2-container--focus .select2-selection,
form.edit-requirement .select2-container--default.select2-container--focus .select2-selection {
    border-color: var(--wp--preset--color--button-bg, #000);
    box-shadow: 0 0 0 0.25rem rgb(from var(--wp--preset--color--button-bg, #000) r g b / 0.15);
}

/* Select2 Required Field Indication */
form.add-requirement .select2-container.select2-container--focus:not(.select2-container--open) .select2-selection,
form.edit-requirement .select2-container.select2-container--focus:not(.select2-container--open) .select2-selection {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15);
}

form.add-requirement .select2-container.select2-container--focus.select2-container--open .select2-selection,
form.edit-requirement .select2-container.select2-container--focus.select2-container--open .select2-selection {
    border-color: var(--wp--preset--color--button-bg, #000);
    box-shadow: 0 0 0 0.25rem rgb(from var(--wp--preset--color--button-bg, #000) r g b / 0.15);
}

/* Checkbox Styling */
form.add-requirement .form-check,
form.edit-requirement .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
}

form.add-requirement .form-check-input,
form.edit-requirement .form-check-input {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none;
    background-color: #fff;
    position: relative;
    flex-shrink: 0;
}

form.add-requirement .form-check-input:checked,
form.edit-requirement .form-check-input:checked {
    background-color: var(--wp--preset--color--button-bg, #000);
    border-color: var(--wp--preset--color--button-bg, #000);
}

form.add-requirement .form-check-input:checked::after,
form.edit-requirement .form-check-input:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

form.add-requirement .form-check-input:focus,
form.edit-requirement .form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgb(from var(--wp--preset--color--button-bg, #000) r g b / 0.15);
}

form.add-requirement .form-check-label,
form.edit-requirement .form-check-label {
    cursor: pointer;
    user-select: none;
}

/* Buttons */
form.add-requirement .btn,
form.add-requirement input[type="submit"],
form.edit-requirement .btn,
form.edit-requirement button[type="submit"] {
    cursor: pointer;
    background-color: var(--wp--preset--color--button-bg, #000);
    color: var(--wp--preset--color--button-text, #fff);
    border-radius: 8px;
    border: 0;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    line-height: inherit;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
    appearance: none;
}

form.add-requirement .btn:hover,
form.add-requirement input[type="submit"]:hover,
form.edit-requirement .btn:hover,
form.edit-requirement button[type="submit"]:hover {
    opacity: 0.9;
}

form.edit-requirement .btn-default {
    background-color: transparent;
    color: var(--wp--preset--color--text-primary, #151515);
    border: 1px solid color-mix(in srgb, currentColor, transparent 70%);
    margin-left: 0.5rem;
}

form.edit-requirement .btn-default:hover {
    background-color: color-mix(in srgb, currentColor, transparent 95%);
    opacity: 1;
}

/* ========================================
   Responsive Grid Columns
   ======================================== */

/* 12-column grid for medium screens and up */
@media (min-width: 768px) {

    form.add-requirement ul>li.col-md-6,
    form.edit-requirement ul>li.col-md-6 {
        grid-column: span 6;
    }

    form.add-requirement ul>li.col-md-5,
    form.edit-requirement ul>li.col-md-5 {
        grid-column: span 5;
    }

    form.add-requirement ul>li.col-md-4,
    form.edit-requirement ul>li.col-md-4 {
        grid-column: span 4;
    }

    form.add-requirement ul>li.col-md-2,
    form.edit-requirement ul>li.col-md-2 {
        grid-column: span 2;
    }
}

/* Button row alignment */
form.add-requirement ul>li.no-gutters,
form.add-requirement ul>li.row,
form.edit-requirement ul>li.row {
    display: flex;
    gap: 0.5rem;
}

form.add-requirement ul>li.justify-content-end,
form.edit-requirement ul>li.justify-content-end {
    justify-content: flex-end;
}

form.add-requirement ul>li .btn.col-sm-4,
form.edit-requirement ul>li .btn.col-sm-4 {
    width: auto;
    min-width: 150px;
}

@media (max-width: 575.98px) {

    form.add-requirement ul>li .btn.col-12,
    form.edit-requirement ul>li .btn.col-12 {
        width: 100%;
    }
}

/* ========================================
   Alert Messages
   ======================================== */

/* Account Page Alerts */
.ap-page-less-ap_account .alert,
.ap-page-less-ap_change_password .alert {
    position: relative;
    padding: 1rem 1.25rem;
    margin-bottom: var(--wp--preset--spacing--30);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
}

.ap-page-less-ap_account .alert ul,
.ap-page-less-ap_change_password .alert ul {
    margin: 0;
    padding-left: 1.25rem;
}

.ap-page-less-ap_account .alert ul.list-unstyled,
.ap-page-less-ap_change_password .alert ul.list-unstyled {
    padding-left: 0;
}

.ap-page-less-ap_account .alert ul li,
.ap-page-less-ap_change_password .alert ul li {
    margin-bottom: 0.25rem;
}

.ap-page-less-ap_account .alert ul li:last-child,
.ap-page-less-ap_change_password .alert ul li:last-child {
    margin-bottom: 0;
}

/* Alert Danger (Error Messages) */
.ap-page-less-ap_account .alert-danger,
.ap-page-less-ap_change_password .alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.ap-page-less-ap_account .alert-danger ul,
.ap-page-less-ap_change_password .alert-danger ul {
    color: #842029;
}

/* Alert Success */
.ap-page-less-ap_account .alert-success,
.ap-page-less-ap_account .alert-block.alert-success,
.ap-page-less-ap_change_password .alert-success,
.ap-page-less-ap_change_password .alert-block.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.ap-page-less-ap_account .alert-success .message,
.ap-page-less-ap_account .alert-block.alert-success .message,
.ap-page-less-ap_change_password .alert-success .message,
.ap-page-less-ap_change_password .alert-block.alert-success .message {
    color: #0f5132;
}

/* Alert Message Container */
.ap-page-less-ap_account .alert-message-container,
.ap-page-less-ap_change_password .alert-message-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ap-page-less-ap_account .alert-message-container .message,
.ap-page-less-ap_change_password .alert-message-container .message {
    flex: 1;
}

/* ========================================
   Icon Replacements (Line Awesome SVG)
   ======================================== */

.ab-accordion-requirement .action a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    vertical-align: middle;
}

.ab-accordion-requirement .action a i.la-trash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

.ab-accordion-requirement .action a i.la-edit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}

.saved-requirement-info .list-info i.la-bed {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M4 4a1 1 0 00-2 0v16a1 1 0 102 0v-2h16v2a1 1 0 102 0v-5a1 1 0 00-1-1H4V4zm6 7a2 2 0 11-4 0 2 2 0 014 0zm2-2h6a4 4 0 014 4H12V9z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.saved-requirement-info .list-info i.la-bath {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M20.571 14.143v2.143c0 1.257-.476 2.321-1.428 3.192v2.165c0 .104-.034.19-.1.257a.348.348 0 01-.257.1h-.715a.348.348 0 01-.256-.1.348.348 0 01-.1-.257v-1.317a4.305 4.305 0 01-1.43.245h-8.57c-.484 0-.96-.081-1.43-.245v1.228a.483.483 0 01-.105.318.317.317 0 01-.251.128h-.715a.317.317 0 01-.25-.128.483.483 0 01-.107-.318v-2.076c-.952-.87-1.428-1.935-1.428-3.192v-2.143H20.57zM22 12.357v.714a.35.35 0 01-.1.257.348.348 0 01-.257.1H2.357a.348.348 0 01-.257-.1.347.347 0 01-.1-.257v-.714c0-.104.033-.19.1-.257a.348.348 0 01.257-.1H3.43V4.857c0-.789.279-1.462.837-2.02A2.753 2.753 0 016.286 2c.803 0 1.488.29 2.053.87a2.086 2.086 0 011.094-.133c.387.052.733.197 1.038.435l.245-.246c.082-.082.164-.082.246 0l.469.47c.082.08.082.163 0 .245L7.926 7.145c-.082.082-.163.082-.245 0l-.469-.469c-.082-.082-.082-.163 0-.245l.246-.246a2.11 2.11 0 01-.452-1.16 2.084 2.084 0 01.262-1.206 1.38 1.38 0 00-.982-.39c-.395 0-.731.14-1.01.418a1.376 1.376 0 00-.419 1.01V12h16.786c.104 0 .19.034.257.1.067.067.1.153.1.257z'/%3E%3C/svg%3E");
}

.saved-requirement-info .list-info i.la-car {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M3.124 20h.997c.625 0 1.115-.492 1.115-1.13v-1.449c1.876.121 4.588.207 6.76.207 2.18 0 4.892-.086 6.768-.207v1.45c0 .637.482 1.129 1.115 1.129h.997A1.11 1.11 0 0 0 22 18.87v-4.977c0-1.449-.287-2.268-1.073-3.303l-.71-.94c-.312-1.553-.87-3.183-1.166-3.821-.448-.975-1.326-1.553-2.45-1.708C16.035 4.05 14.184 4 11.996 4c-2.18 0-4.03.06-4.597.12-1.124.139-2.002.734-2.45 1.708-.296.639-.854 2.27-1.166 3.821l-.71.94C2.287 11.626 2 12.445 2 13.894v4.977c0 .638.49 1.13 1.124 1.13ZM5.49 8.934c.202-.95.608-2.183.887-2.683.228-.405.473-.578.93-.638.641-.095 2.078-.147 4.689-.147 2.62 0 4.056.035 4.698.147.448.069.693.233.93.638.287.492.667 1.734.886 2.683.077.319-.05.44-.38.414-1.402-.086-3.075-.181-6.134-.181-3.05 0-4.723.095-6.126.18-.33.026-.448-.094-.38-.413m.346 6.46c-.803 0-1.403-.621-1.403-1.432 0-.82.6-1.431 1.403-1.431.802 0 1.402.612 1.402 1.431 0 .811-.6 1.432-1.402 1.432m12.328 0c-.803 0-1.402-.621-1.402-1.432 0-.82.6-1.432 1.402-1.432.794 0 1.402.612 1.402 1.432 0 .81-.608 1.432-1.402 1.432Zm-8.407-.397c-.592 0-1.006-.431-1.006-1.036 0-.612.414-1.034 1.006-1.034h4.486c.592 0 1.006.422 1.006 1.034 0 .604-.414 1.036-1.006 1.036H9.757Z' fill='currentColor'/%3E%3C/svg%3E");
}