/* Only hide footer on interactive floorplan admin pages */
.interactive-floor-plan-individual-settings #wpfooter {
    display: none;
}

/* =============================================================================
   ADMIN INTERFACE STYLING
   ============================================================================= */

/* Main admin container styling */
.interactive-floor-plan-individual-settings {
    background: #f1f1f1;
    padding: 20px;
    margin-right: 20px;
    border-radius: 8px;
}

.interactive-floor-plan-individual-settings h1 {
    color: #23282d;
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #fd6c57;
}

.interactive-floor-plan-individual-settings h2 {
    color: #23282d;
    font-size: 20px;
    margin: 25px 0 15px 0;
    padding-left: 5px;
    border-left: 4px solid #fd6c57;
}

.interactive-floor-plan-individual-settings h3 {
    color: #23282d;
    font-size: 18px;
    margin: 20px 0 15px 0;
    font-weight: 600;
}

/* Form styling */
.interactive-floor-plan-individual-settings #acf-form {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    margin-bottom: 20px;
}

/* ACF Fields wrapper */
.acf-fields-wrapper {
    margin-top: 20px;
}

/* Always hide advanced fields from top-level form - these are managed in preview sections */
.acf-fields-wrapper [data-name="attributes"],
.acf-fields-wrapper [data-name="floor_categories"],
.acf-fields-wrapper [data-name="floor_attributes"] {
    display: none !important;
}

/* Always show basic fields at top level */
.acf-fields-wrapper [data-name="floorplan_type"],
.acf-fields-wrapper [data-name="categories"] {
    display: block !important;
}

/* Ensure floorplan_type field is always visible */
.acf-field[data-name="floorplan_type"] {
    display: block !important;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 5px;
    border-left: 4px solid #007cba;
}

.interactive-floor-plan-individual-settings .acf-fields-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin: 15px 0;
}

/* ACF Field styling */
.interactive-floor-plan-individual-settings .acf-field {
    margin-bottom: 20px !important;
    padding: 15px !important;
    background: #f9f9f9 !important;
    border-radius: 6px !important;
    border: 1px solid #e1e1e1 !important;
    transition: border-color 0.3s ease !important;
}

.interactive-floor-plan-individual-settings .acf-field:hover {
    border-color: #fd6c57 !important;
}

.interactive-floor-plan-individual-settings .acf-field .acf-label {
    font-weight: 600 !important;
    color: #23282d !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

.interactive-floor-plan-individual-settings .acf-field .acf-input {
    margin-top: 8px !important;
}

/* Input field styling */
.interactive-floor-plan-individual-settings .acf-field input[type="text"],
.interactive-floor-plan-individual-settings .acf-field input[type="email"],
.interactive-floor-plan-individual-settings .acf-field input[type="url"],
.interactive-floor-plan-individual-settings .acf-field input[type="number"],
.interactive-floor-plan-individual-settings .acf-field textarea,
.interactive-floor-plan-individual-settings .acf-field select {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    /* transition: border-color 0.3s ease, box-shadow 0.3s ease !important; */
}

.interactive-floor-plan-individual-settings .acf-field input[type="text"]:focus,
.interactive-floor-plan-individual-settings .acf-field input[type="email"]:focus,
.interactive-floor-plan-individual-settings .acf-field input[type="url"]:focus,
.interactive-floor-plan-individual-settings .acf-field input[type="number"]:focus,
.interactive-floor-plan-individual-settings .acf-field textarea:focus,
.interactive-floor-plan-individual-settings .acf-field select:focus {
    border-color: #fd6c57 !important;
    /* box-shadow: 0 0 0 2px rgba(253, 108, 87, 0.1) !important; */
    outline: none !important;
}

/* Repeater field styling */
.interactive-floor-plan-individual-settings .acf-repeater {
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
}

.interactive-floor-plan-individual-settings .acf-repeater .acf-table {
    margin: 0 !important;
}

.interactive-floor-plan-individual-settings .acf-repeater .acf-row {
    background: #fff !important;
    border-bottom: 1px solid #f1f1f1 !important;
}

.interactive-floor-plan-individual-settings .acf-repeater .acf-row:nth-child(even) {
    background: #f9f9f9 !important;
}

.interactive-floor-plan-individual-settings .acf-repeater .acf-row:hover {
    background: #f0f8ff !important;
}

.interactive-floor-plan-individual-settings .acf-repeater .acf-row-handle {
    background: #fd6c57 !important;
    color: white !important;
    border-radius: 3px !important;
    width: 30px !important;
    text-align: center !important;
}

.interactive-floor-plan-individual-settings .acf-repeater .acf-button {
    background: #fd6c57 !important;
    color: white !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.interactive-floor-plan-individual-settings .acf-repeater .acf-button:hover {
    background: #005a87 !important;
}

/* Color picker styling */
.interactive-floor-plan-individual-settings .acf-color-picker .wp-picker-container {
    margin-top: 5px !important;
}

.interactive-floor-plan-individual-settings .acf-color-picker .wp-picker-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Checkbox and Radio styling */
.interactive-floor-plan-individual-settings .acf-field .acf-checkbox-list,
.interactive-floor-plan-individual-settings .acf-field .acf-radio-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.interactive-floor-plan-individual-settings .acf-field .acf-checkbox-list label,
.interactive-floor-plan-individual-settings .acf-field .acf-radio-list label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    padding: 5px !important;
    border-radius: 4px !important;
    transition: background-color 0.3s ease !important;
}

.interactive-floor-plan-individual-settings .acf-field .acf-checkbox-list label:hover,
.interactive-floor-plan-individual-settings .acf-field .acf-radio-list label:hover {
    background: #f0f8ff !important;
}

/* Button styling */
.interactive-floor-plan-individual-settings .button-primary,
.interactive-floor-plan-individual-settings input[type="submit"].button-primary {
    background: #fd6c57 !important;
    border-color: #fd6c57 !important;
    color: #fff !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    /* box-shadow: 0 2px 4px rgba(0, 115, 170, 0.2) !important; */
}

.interactive-floor-plan-individual-settings .button-primary:hover,
.interactive-floor-plan-individual-settings input[type="submit"].button-primary:hover {
    /* background: #005a87 !important;
    border-color: #005a87 !important; */
    /* transform: translateY(-1px) !important; */
    /* box-shadow: 0 4px 8px rgba(0, 115, 170, 0.3) !important; */
}

.interactive-floor-plan-individual-settings .button-secondary {
    background: #f7f7f7 !important;
    border-color: #ccc !important;
    color: #555 !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.interactive-floor-plan-individual-settings .button-secondary:hover {
    background: #e0e0e0 !important;
    border-color: #999 !important;
    color: #333 !important;
}

/* Upload button specific styling - scoped to interactive floorplan */
.interactive-floor-plan-individual-settings #upload_svg_button {
    background: #fd6c57 !important;
    color: white !important;
    border: none !important;
    padding: 15px 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    /* box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important; */
    cursor: pointer !important;
    width: 100%;
}

.interactive-floor-plan-individual-settings #upload_svg_button:hover {
    /* transform: translateY(-2px) !important; */
    /* box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important; */
}

/* SVG image field container */
.svg_image_field {
    background: #fff !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border: 2px dashed #ddd !important;
    text-align: center !important;
    margin: 15px 0 !important;
    transition: border-color 0.3s ease !important;
}

.svg_image_field:hover {
    border-color: #fd6c57 !important;
}

/* Debug and notice styling - scoped to interactive floorplan */
.interactive-floor-plan-individual-settings .notice {
    padding: 15px 20px !important;
    border-left: 4px solid #fd6c57 !important;
    background: #fff !important;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; */
    border-radius: 0 6px 6px 0 !important;
    margin: 15px 0 !important;
}

.interactive-floor-plan-individual-settings .notice-warning {
    border-left-color: #ffb900 !important;
    background: #fff8e5 !important;
}

.interactive-floor-plan-individual-settings .notice-error {
    border-left-color: #dc3232 !important;
    background: #fef7f7 !important;
}

.interactive-floor-plan-individual-settings .notice-info {
    border-left-color: #00a0d2 !important;
    background: #f0f8ff !important;
}

.interactive-floor-plan-individual-settings .notice p {
    margin: 0 !important;
    font-size: 14px !important;
}

.interactive-floor-plan-individual-settings .notice strong {
    color: #23282d !important;
}

.interactive-floor-plan-individual-settings .notice ul {
    margin: 10px 0 0 20px !important;
}

.interactive-floor-plan-individual-settings .notice li {
    margin: 5px 0 !important;
    font-size: 13px !important;
}

/* Clear data button warning styling - scoped to interactive floorplan */
.interactive-floor-plan-individual-settings #clear_floorplan_data {
    background: #f0f0f0 !important;
    color: black !important;
    border: none !important;
    /* box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important; */
}

.interactive-floor-plan-individual-settings #clear_floorplan_data:hover {
    /* background: linear-gradient(135deg, #ff5252 0%, #d63031 100%) !important; */
    /* box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4) !important; */
}

/* Form layout improvements */
.interactive-floor-plan-individual-settings form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* =============================================================================
   PREVIEW SECTION STYLING
   ============================================================================= */

/* Preview container */
.interactive-floor-plan-individual-settings>div:last-child {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    margin-top: 20px;
}

/* SVG Preview styling */
#svg_image_preview {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease;
}

#svg_image_preview:hover {
    border-color: #fd6c57;
}

#svg-object-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#svg-object-container svg {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    background: white;
}

/* Attribute Editor styling */
#attribute-editor {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-left: 20px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

#attribute-editor h2 {
    color: #23282d;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #fd6c57;
    display: flex;
    align-items: center;
    gap: 10px;
}

#attribute-editor h2:before {
    content: "⚙️";
    font-size: 20px;
}

#attribute-table-body {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    max-height: 500px;
    overflow-y: auto;
}

/* Attribute editor buttons - scoped to interactive floorplan */
.interactive-floor-plan-individual-settings #save-attributes {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    /* box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3) !important; */
}

.interactive-floor-plan-individual-settings #save-attributes:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%) !important;
    /* transform: translateY(-1px) !important; */
    /* box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4) !important; */
}

.interactive-floor-plan-individual-settings #clear-element-data {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    /* box-shadow: 0 3px 8px rgba(220, 53, 69, 0.3) !important; */
}

.interactive-floor-plan-individual-settings #clear-element-data:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
    /* transform: translateY(-1px) !important; */
    /* box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4) !important; */
}

/* Loading states */
.acf-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.acf-loading:after {
    content: "Loading...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 6px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
    font-weight: 600;
    color: #fd6c57;
}

/* Tooltip styling for better UX */
.acf-field[data-tooltip] {
    position: relative;
}

.acf-field[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #23282d;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0.9;
}

/* Enhanced table styling for main settings */
.interactive-floor-plan-main-settings .wp-list-table {
    border-radius: 8px;
    overflow: hidden;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.interactive-floor-plan-main-settings .wp-list-table thead th {
    background: #fd6c57 0%;
    color: white;
    font-weight: 600;
    padding: 15px;
}

.interactive-floor-plan-main-settings .wp-list-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.interactive-floor-plan-main-settings .wp-list-table tbody tr:hover {
    background: #e3f2fd;
}

.interactive-floor-plan-main-settings .wp-list-table td {
    padding: 12px 15px;
    vertical-align: middle;
}

/* Responsive adjustments - scoped to interactive floorplan */
@media (max-width: 768px) {
    .interactive-floor-plan-individual-settings {
        padding: 15px;
        margin-right: 10px;
    }

    .interactive-floor-plan-individual-settings #acf-form {
        padding: 20px;
    }

    .interactive-floor-plan-individual-settings .acf-fields-wrapper {
        padding: 15px;
    }

    .interactive-floor-plan-individual-settings .button-primary,
    .interactive-floor-plan-individual-settings .button-secondary,
    .interactive-floor-plan-individual-settings #upload_svg_button {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    .interactive-floor-plan-individual-settings>div:last-child {
        flex-direction: column;
    }

    .interactive-floor-plan-individual-settings #attribute-editor {
        margin-left: 0;
        margin-top: 20px;
    }

    .interactive-floor-plan-individual-settings #svg_image_preview {
        min-height: 250px;
    }
}

/* =============================================================================
   NOTIFICATION SYSTEM - scoped to interactive floorplan
   ============================================================================= */
.admin-notification.interactive-floorplan-notification {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        /* transform: translateX(100%); */
        opacity: 0;
    }

    to {
        /* transform: translateX(0); */
        opacity: 1;
    }
}

.admin-notification.interactive-floorplan-notification.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.admin-notification.interactive-floorplan-notification.error {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

.admin-notification.interactive-floorplan-notification.info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
}

/* Loading button states - scoped to interactive floorplan */
.interactive-floor-plan-individual-settings .button.loading,
.interactive-floorplan-container .button.loading {
    opacity: 0.7;
    cursor: not-allowed !important;
    position: relative;
}

.interactive-floor-plan-individual-settings .button.loading:after,
.interactive-floorplan-container .button.loading:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    right: 10px;
    top: 50%;
    /* transform: translateY(-50%); */
}

@keyframes spin {
    0% {
        /* transform: translateY(-50%) rotate(0deg); */
    }

    100% {
        /* transform: translateY(-50%) rotate(360deg); */
    }
}

/* Enhanced hover effects - scoped to interactive floorplan */
.interactive-floor-plan-individual-settings .acf-field:hover {
    /* transform: translateY(-1px); */
    /* box-shadow: 0 4px 12px rgba(0, 115, 170, 0.1) !important; */
}

.interactive-floor-plan-individual-settings .button:not(.loading):hover,
.interactive-floorplan-container .button:not(.loading):hover {
    /* transform: translateY(-1px); */
}

/* Smooth transitions - scoped to interactive floorplan */
.interactive-floor-plan-individual-settings *,
.interactive-floorplan-container *,
.interactive-floor-plan-main-settings * {
    transition: all 0.3s ease;
}

/* Focus indicators for accessibility - scoped to interactive floorplan */
.interactive-floor-plan-individual-settings .acf-field input:focus,
.interactive-floor-plan-individual-settings .acf-field textarea:focus,
.interactive-floor-plan-individual-settings .acf-field select:focus {
    /* transform: translateY(-1px); */
}

/* Success states - scoped to interactive floorplan */
.interactive-floor-plan-individual-settings .acf-field.success {
    border-color: #28a745 !important;
    background: #f8fff9 !important;
}

.interactive-floor-plan-individual-settings .acf-field.success:after {
    content: "✓";
    position: absolute;
    right: 15px;
    top: 15px;
    color: #28a745;
    font-weight: bold;
    font-size: 16px;
}

.interactive-floor-plan-individual-settings svg polygon,
.interactive-floor-plan-individual-settings svg path {
    cursor: pointer;
}

.interactive-floor-plan-individual-settings svg polygon:hover,
.interactive-floor-plan-individual-settings svg path:hover {
    fill: red;
}

.interactive-floor-plan-individual-settings svg polygon.selected,
.interactive-floor-plan-individual-settings svg path.selected {
    fill: red;
}

.interactive-floor-plan-individual-settings #svg-object svg polygon {
    cursor: pointer;
}

.interactive-floor-plan-individual-settings #svg-object-container svg {
    width: 100%;
    height: 100%;
}

.interactive-floorplan-container .floorplan-svg {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 500px;
    max-height: 500px;
    width: 100%;
    flex: 0 0 auto;
}

.interactive-floorplan-container .floorplan-svg svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

d .interactive-floorplan-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.interactive-floorplan-container .interactive-floorplan-main>div {
    flex: 1 1 auto;
}

.interactive-floorplan-container .floorplan-details {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-width: 300px;
}

/* Details Flex Direction Support - Controls main category layout */
.interactive-floorplan-container.details-row .floorplan-details {
    flex-direction: row;
    /* flex-wrap: wrap; */
    align-items: flex-start;
    gap: 2px;
}

/* Row layout: Each category group (category + its floors) takes up equal space */
.interactive-floorplan-container.details-row .category-group {
    flex: 1 1 calc(50% - 7.5px);
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

.interactive-floorplan-container.details-row .category-group .floorplan-category {
    width: 100%;
    margin-bottom: 0;
}

.interactive-floorplan-container.details-row .category-group .category-floors {
    width: 100%;
    margin-top: 0;
}

/* Column layout: Categories stack vertically (default behavior) */
.interactive-floorplan-container.details-column .floorplan-details {
    flex-direction: column;
    align-items: center;
}

.interactive-floorplan-container.details-column .category-group {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.interactive-floorplan-container.details-column .category-group .floorplan-category {
    width: 100%;
}

.interactive-floorplan-container.details-column .category-group .category-floors {
    width: 100%;
}

/* Mobile responsive for row layout */
@media (max-width: 768px) {
    .interactive-floorplan-container.details-row .floorplan-details {
        flex-direction: column;
        align-items: center;
    }

    .interactive-floorplan-container.details-row .category-group {
        flex: none;
        width: 100%;
    }
}

/* =============================================================================
   DRAG AND DROP FLOOR SORTING STYLES
   ============================================================================= */

/* Sortable floor rows */
.floor-row.ui-sortable-helper {
    background: #f0f8ff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #007cba !important;
}

.floor-row .drag-handle {
    cursor: move;
    user-select: none;
    position: relative;
}

.floor-row .drag-handle span {
    color: #666;
    font-weight: bold;
    margin-right: 8px;
    display: inline-block;
    transform: rotate(90deg);
    font-size: 14px;
}

.floor-row:hover .drag-handle span {
    color: #007cba;
}

.ui-state-highlight {
    height: 50px;
    background: #e3f2fd !important;
    border: 2px dashed #007cba !important;
}

.ui-state-highlight td {
    background: transparent !important;
}

/* Sortable placeholder */
#floors-table-body .ui-sortable-placeholder {
    background: #e3f2fd !important;
    border: 2px dashed #007cba !important;
    height: 50px;
    visibility: visible !important;
}

#floors-table-body .ui-sortable-placeholder td {
    background: transparent !important;
}

/* Disable text selection during sorting */
.ui-sortable-helper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* =============================================================================
   FLOOR EDIT MODAL STYLES
   ============================================================================= */

/* Modal overlay */
.floor-modal {
    display: none;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal content container */
.floor-modal-content {
    background-color: #ffffff;
    margin: 2% auto;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideInDown 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal header */
.floor-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid #e1e5e9;
    background: #fd6c57;
    color: white;
    border-radius: 12px 12px 0 0;
}

.floor-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
}

/* Modal close button */
.floor-modal-close {
    color: rgba(255, 255, 255, 0.8);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 5px 10px;
    border-radius: 6px;
    line-height: 1;
}

.floor-modal-close:hover {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Modal body */
.floor-modal-body {
    padding: 30px;
    overflow-y: auto;
    flex-grow: 1;
    max-height: calc(90vh - 200px);
}

.floor-modal-body .acf-field {
    margin-bottom: 25px !important;
    padding: 20px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.3s ease !important;
}

.floor-modal-body .acf-field:hover {
    border-color: #667eea !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1) !important;
}

.floor-modal-body .acf-field .acf-label {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
}

.floor-modal-body .acf-field input[type="text"],
.floor-modal-body .acf-field textarea,
.floor-modal-body .acf-field select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    transition: border-color 0.3s ease !important;
}

.floor-modal-body .acf-field input[type="text"]:focus,
.floor-modal-body .acf-field textarea:focus,
.floor-modal-body .acf-field select:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

/* Modal footer */
.floor-modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #e1e5e9;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.floor-modal-footer .button {
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.floor-modal-footer .button-primary {
    background: #fd6c57 !important;
    color: white !important;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3) !important;
}

.floor-modal-footer .button-primary:hover {
    /* transform: translateY(-1px) !important;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4) !important; */
}

.floor-modal-footer .button-secondary {
    background: #6c757d !important;
    color: white !important;
}

/* ── Floor modal tabs ─────────────────────────────────────────────────── */
.ifp-ftabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e8eaed;
    margin-bottom: 24px;
}

.ifp-ftab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.ifp-ftab:hover {
    color: #fd6c57;
}

.ifp-ftab.active {
    color: #fd6c57;
    border-bottom-color: #fd6c57;
    font-weight: 600;
}

.ifp-ftab svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.ifp-ftab.active svg {
    opacity: 1;
}

/* ── Reference cards ──────────────────────────────────────────────────── */
.ifp-floor-ref-card {
    display: flex;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, #f8f9fc 0%, #eef1f7 100%);
    border: 1px solid #dde2ee;
    border-left: 4px solid #fd6c57;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.ifp-floor-ref-diagram {
    flex-shrink: 0;
    width: 160px;
}

.ifp-floor-ref-diagram svg {
    width: 100%;
    height: auto;
    display: block;
}

.ifp-floor-ref-legend {
    flex: 1;
    font-size: 12.5px;
    color: #444;
    line-height: 1.55;
}

.ifp-floor-ref-legend p {
    margin: 0 0 8px;
}

.ifp-floor-ref-legend p:last-child {
    margin-bottom: 0;
}

.ifp-floor-ref-legend strong {
    color: #222;
}

/* ── Floor name field ─────────────────────────────────────────────────── */
.ifp-floor-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e8eaed;
}

.ifp-floor-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.ifp-floor-field-group input.large-text {
    width: 100%;
    max-width: 420px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

.ifp-floor-field-group input.large-text:focus {
    border-color: #fd6c57;
    outline: none;
    box-shadow: 0 0 0 2px rgba(253, 108, 87, 0.15);
}

.floor-modal-footer .button-secondary:hover {
    background: #5a6268 !important;
    transform: translateY(-1px) !important;
}

/* Loading state for modal */
.floor-modal-body .spinner {
    visibility: visible;
    margin: 0 5px;
}

/* Responsive modal */
@media (max-width: 768px) {
    .floor-modal-content {
        width: 95%;
        margin: 5% auto;
        max-height: 85vh;
    }

    .floor-modal-header,
    .floor-modal-body,
    .floor-modal-footer {
        padding: 20px;
    }

    .floor-modal-footer {
        flex-direction: column;
    }

    .floor-modal-footer .button {
        width: 100%;
    }
}

.interactive-floorplan-container .floorplan-subcategories {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.interactive-floorplan-container .subcategory svg,
.interactive-floorplan-container .subcategory svg path {
    stroke: black;

}

.interactive-floorplan-container .subcategory {
    display: flex;
    height: 32px;
    padding: 0px 22px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
    border-bottom: 1px solid var(--300NLS_DarkBlue, #212B37);
    background: rgba(190, 208, 226, 0.40);
    box-sizing: border-box;

    font-size: 12px;
    font-style: normal;
    font-weight: 350;
    line-height: normal;
    color: white;
}

.interactive-floorplan-container .floorplan-category {
    display: flex;
    padding: 22px;
    align-items: center;
    /* gap: 295px; */
    align-self: stretch;
    /* border: 1px solid #FFF; */
    justify-content: space-between;
    color: white;
    font-size: 18px;
    font-style: normal;
    font-weight: 350;
}

.interactive-floorplan-container .category-floors {
    width: 100%;
}

.interactive-floorplan-container .floor-details-cta {
    color: #000;
    text-align: left;
    font-family: Montserrat;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.interactive-floorplan-container .category-floors .floor {
    background-color: white;
    display: flex;
    height: 32px;
    padding: 0px 22px;
    align-items: center;
    gap: 28px;
    flex-shrink: 0;
    align-self: stretch;
    border-bottom: 1px solid #212B37;
    background: #FFF;
    justify-content: space-between;
}

.interactive-floorplan-container .category-floors .floor-col {
    flex: 1;
}

/* Simple (accordion) rows only — the interactive-mode renderer emits 3-column
   rows into .category-floors as well, and must keep the flex layout above.
   These four columns come from one shared template, so they line up down the
   whole table and across collections however long a floor name is. Flexbox
   could not do that: each row sized its own columns independently, so one long
   name pushed that row's later columns out of line with its neighbours. */
.interactive-floorplan-container .category-floors .floor[data-floor-type="simple"] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    height: auto;
    min-height: 32px;
}

/* min-width:0 lets a cell shrink below its content instead of widening its
   track — without it the track blows out exactly as the flex item used to. */
.interactive-floorplan-container .category-floors .floor[data-floor-type="simple"] .floor-col {
    min-width: 0;
}

/* The floor name is the one column long enough to overrun its track, so let it
   wrap. The others stay nowrap, keeping figures like "11,444 RSF" on one line. */
.interactive-floorplan-container .category-floors .floor[data-floor-type="simple"] .ifp-floor-name {
    white-space: normal;
}

/* Rows with a "View Details" link are clickable across their full width. */
.interactive-floorplan-container .category-floors .floor.is-row-clickable {
    cursor: pointer;
}

.interactive-floorplan-container .category-floors .floor-col,
.interactive-floorplan-container .category-floors .floor {
    color: #000;
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    white-space: nowrap;
}

.interactive-floorplan-container .interactive-floorplan-overlay {
    display: none;
    position: relative;
    padding: 50px 0 0 0;
    flex-direction: column;
}

.overlay-availability-navigation-prev,
.overlay-availability-navigation-next {
    cursor: pointer;
    user-select: none;
}

.interactive-floorplan-container .interactive-floorplan-overlay .overlay-availability-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4rem;

    color: #000;
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.24px;
    text-transform: uppercase;
}

/* Default Interactive Mode Layout (Horizontal) */
.interactive-floorplan-container.interactive-mode.horizontal-layout .interactive-floorplan-main {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    min-height: 400px;
    max-height: none;
}

/* Interactive Mode Vertical Layout */
.interactive-floorplan-container.interactive-mode.vertical-layout .interactive-floorplan-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: stretch;
    min-height: 400px;
    max-height: none;
}

/* Backward compatibility - if no specific layout class is present, use horizontal */
.interactive-floorplan-container .interactive-floorplan-main:not(.horizontal-layout):not(.vertical-layout) {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    min-height: 400px;
    max-height: none;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {

    .interactive-floorplan-container.interactive-mode.horizontal-layout .interactive-floorplan-main,
    .interactive-floorplan-container.interactive-mode.vertical-layout .interactive-floorplan-main {
        flex-direction: column;
        gap: 20px;
    }

    /* Backward compatibility */
    .interactive-floorplan-container .interactive-floorplan-main:not(.horizontal-layout):not(.vertical-layout) {
        flex-direction: column;
        gap: 20px;
    }

    .interactive-floorplan-container .floorplan-svg {
        max-width: 100%;
        max-height: 300px;
    }

    .interactive-floorplan-container {
        padding: 10px;
    }
}

.interactive-floorplan-container .interactive-floorplan-main>div {
    flex: 1;
}

.interactive-floorplan-container .interactive-floorplan-overlay .overlay-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.interactive-floorplan-overlay .overlay-content {
    display: flex;
    width: 100%;
    flex-direction: row;
    box-sizing: border-box;
    gap: 117px;
}

.interactive-floorplan-overlay .overlay-content-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    /* gap: 101px; */
}

.interactive-floorplan-overlay .overlay-content-slider {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.interactive-floorplan-overlay section.splide {
    flex-grow: 1;
}

.interactive-floorplan-overlay .overlay-title {
    font-size: 48px;
    font-style: normal;
    font-weight: 325;
    line-height: normal;
}

.interactive-floorplan-overlay .overlay-subtitle {
    color: #60C6C7;
    font-family: Montserrat;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.9px;
}

.interactive-floorplan-overlay .overlay-description ul,
.interactive-floorplan-overlay .overlay-description ol {
    padding-left: 1.5em !important;
    margin: 0.75em 0 !important;
}
.interactive-floorplan-overlay .overlay-description ul {
    list-style-type: disc !important;
}
.interactive-floorplan-overlay .overlay-description ol {
    list-style-type: decimal !important;
}
.interactive-floorplan-overlay .overlay-description li {
    display: list-item !important;
    list-style: inherit !important;
    margin-bottom: 0.3em !important;
}
.interactive-floorplan-overlay .overlay-description p {
    margin: 0 0 0.75em !important;
}
.interactive-floorplan-overlay .overlay-description p:last-child {
    margin-bottom: 0 !important;
}

.interactive-floorplan-overlay .overlay-description strong {
    font-weight: bold !important;
}

.interactive-floorplan-overlay .overlay-description {
    font-size: 16px;
    font-style: normal;
    font-weight: 325;
    line-height: 25px;
}

.interactive-floorplan-overlay .interactive-floorplan-slider-label {
    padding-top: 10px;
    color: #000;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.interactive-floorplan-overlay .overlay-ctas {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.interactive-floorplan-overlay .overlay-cta-button {
    display: flex;
    /* width: 216px; */
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border: 1px solid #212B37;
    width: min-content;
    white-space: nowrap;
}

.interactive-floorplan-overlay .splide__slide__container {
    height: 100%;
}

.interactive-floorplan-overlay .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interactive-floorplan-overlay .interactive-floorplan-splide-prev:hover,
.interactive-floorplan-overlay .interactive-floorplan-splide-next:hover {
    cursor: pointer;

}

.interactive-floorplan-overlay .interactive-floorplan-splide-prev svg,
.interactive-floorplan-overlay .interactive-floorplan-splide-next svg {
    height: 30px;
    width: 30px;
    top: 0;
    /* border: 2px solid black; */
    border-radius: 50%;
    /* padding: 9px; */
}

.interactive-floorplan-overlay .interactive-floorplan-splide-prev svg {
    position: absolute;
    left: 0;
    top: 28px;
}

.interactive-floorplan-overlay .interactive-floorplan-splide-next svg {
    position: absolute;
    right: 0;
    top: 28px;
}

.interactive-floorplan-overlay .interactive-floorplan-slide-navigation {
    position: relative;
    padding: 23px 68px;
}

.interactive-floorplan-overlay .splide__pagination {
    display: none;
}

.interactive-floorplan-overlay .single-image-container {
    display: none;
}

.interactive-floorplan-overlay .single-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================================================
   OVERLAY MOBILE RESPONSIVE STYLES
   ============================================================================= */

/* Mobile Styles for Interactive Floorplan Overlay */
@media (max-width: 768px) {
    .interactive-floorplan-container .interactive-floorplan-overlay {
        padding: 20px 0 0 0;
    }

    .interactive-floorplan-overlay .overlay-content {
        flex-direction: column;
        gap: 30px;
        padding: 0 15px;
    }

    .interactive-floorplan-overlay .overlay-content-sidebar {
        order: 1;
        flex: none;
    }

    .interactive-floorplan-overlay .overlay-content-slider {
        order: 2;
        flex: none;
        min-height: 300px;
    }

    .interactive-floorplan-overlay .overlay-title {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .interactive-floorplan-overlay .overlay-subtitle {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .interactive-floorplan-overlay .overlay-description {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 20px;
    }

    .interactive-floorplan-overlay .overlay-ctas {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .interactive-floorplan-overlay .overlay-cta-button {
        padding: 10px 16px;
        font-size: 14px;
        flex: 1;
        min-width: 120px;
    }

    .interactive-floorplan-overlay .interactive-floorplan-slider-label {
        font-size: 16px;
        text-align: center;
        padding-top: 10px;
    }

    .interactive-floorplan-overlay .interactive-floorplan-slide-navigation {
        padding: 15px 40px;
    }

    .interactive-floorplan-overlay .interactive-floorplan-splide-prev svg,
    .interactive-floorplan-overlay .interactive-floorplan-splide-next svg {
        height: 25px;
        width: 25px;
    }

    .interactive-floorplan-overlay .interactive-floorplan-splide-prev svg {
        top: 22px;
        left: 10px;
    }

    .interactive-floorplan-overlay .interactive-floorplan-splide-next svg {
        top: 22px;
        right: 10px;
    }

    .interactive-floorplan-container .interactive-floorplan-overlay .overlay-availability-navigation {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 2rem 15px;
    }

    .overlay-availability-navigation-prev,
    .overlay-availability-navigation-next {
        font-size: 11px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        width: 100%;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 8px 15px;
    }

    .interactive-floorplan-container .interactive-floorplan-overlay .overlay-close {
        top: 10px;
        right: 10px;
        padding: 5px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .interactive-floorplan-overlay .overlay-close svg {
        width: 20px;
        height: 20px;
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
    .interactive-floorplan-container .interactive-floorplan-overlay {
        padding: 15px 0 0 0;
    }

    .interactive-floorplan-overlay .overlay-content {
        gap: 20px;
        padding: 0 10px;
    }

    .interactive-floorplan-overlay .overlay-title {
        font-size: 26px;
        line-height: 1.1;
    }

    .interactive-floorplan-overlay .overlay-subtitle {
        font-size: 18px;
        line-height: 1.2;
    }

    .interactive-floorplan-overlay .overlay-description {
        font-size: 13px;
        line-height: 20px;
    }

    .interactive-floorplan-overlay .overlay-ctas {
        flex-direction: column;
    }

    .interactive-floorplan-overlay .overlay-cta-button {
        width: 100%;
        text-align: center;
        padding: 12px 20px;
    }

    .interactive-floorplan-overlay .overlay-content-slider {
        min-height: 250px;
    }

    .interactive-floorplan-overlay .interactive-floorplan-slide-navigation {
        padding: 10px 35px;
    }

    .interactive-floorplan-overlay .interactive-floorplan-slider-label {
        font-size: 14px;
    }

    .interactive-floorplan-container .interactive-floorplan-overlay .overlay-availability-navigation {
        padding-top: 1.5rem;
    }

    .overlay-availability-navigation-prev,
    .overlay-availability-navigation-next {
        font-size: 10px;
        padding: 6px 10px;
    }
}

/* Large Mobile/Small Tablet - Portrait */
@media (max-width: 1024px) and (min-width: 769px) {
    .interactive-floorplan-overlay .overlay-content {
        gap: 80px;
    }

    .interactive-floorplan-overlay .overlay-title {
        font-size: 42px;
    }

    .interactive-floorplan-overlay .overlay-subtitle {
        font-size: 26px;
    }

    .interactive-floorplan-overlay .interactive-floorplan-slide-navigation {
        padding: 20px 50px;
    }
}

/* =============================================================================
   SIMPLE FLOORPLAN MODE STYLING
   ============================================================================= */

/* Floorplan Type Toggle Styles */
.acf-field[data-name="floorplan_type"] {
    background: #f9f9f9;
    padding: 15px;
    border-left: 4px solid #0073aa;
    margin-bottom: 20px;
}

.acf-field[data-name="floorplan_type"] .acf-label {
    font-weight: bold;
    color: #0073aa;
}

/* Category Photo Field - Hidden by default */
.acf-field[data-name="category_photo"] {
    display: none !important;
}

/* Simple mode specific styling */
.simple-floorplan-container {
    padding: 20px;
    background: #f9f9f9;
}

.simple-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.simple-category-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid #cccccc;
}

.simple-category-item:hover {
    /* transform: translateY(-2px); */
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
}

.category-photo {
    margin-bottom: 15px;
    text-align: center;
}

.category-photo img {
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
}

.category-info h4 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #333;
}

.view-details-btn {
    background: #0073aa;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.view-details-btn:hover {
    background: #005a87;
}

/* Admin interface conditional display */
.floorplan-type-interactive #simple-preview-section {
    display: none !important;
}

.floorplan-type-simple #interactive-preview-section {
    display: none !important;
}

.floorplan-type-simple .acf-field[data-name="category_photo"] {
    display: block !important;
}

/* Modal styling for simple mode */
.simple-modal {
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.simple-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.3); */
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        /* transform: translateY(-50px); */
    }

    to {
        opacity: 1;
        /* transform: translateY(0); */
    }
}

.simple-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.3s;
}

.simple-modal-close:hover {
    color: #333;
    background: #f0f0f0;
}

/* Category display content styling */
.simple-category-display {
    padding: 20px;
    line-height: 1.6;
}

.simple-category-display h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
}

.simple-category-display .subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 20px;
    font-style: italic;
}

.simple-category-display .description {
    margin-bottom: 20px;
}

.cta-buttons {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    background: #0073aa;
    color: white !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s;
}

.cta-button:hover {
    background: #005a87;
    color: white !important;
    /* transform: translateY(-1px); */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.2); */
}

.detail-gallery {
    margin-top: 30px;
}

.detail-gallery h5 {
    margin-bottom: 15px;
    color: #333;
    font-size: 1.1em;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Frontend Simple Mode Styling */
.interactive-floorplan-container.simple-mode {
    max-width: 1200px;
    margin: 0 auto;
    padding: 130px 20px 20px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ── Section title ─────────────────────────────────────────────────────── */
.ifp-section-title {
    width: 100%;
    font-family: var(--ifp-title-font, inherit);
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 2.5rem;
}

.ifp-section-title--left  { text-align: left; }
.ifp-section-title--right { text-align: right; }

/* ── Floor table borders ───────────────────────────────────────────────── */
.has-floor-borders .category-floors .floor {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.has-floor-borders .category-floors .floor:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ── Simple-mode main grid ─────────────────────────────────────────────── */
.interactive-floorplan-container.simple-mode .interactive-floorplan-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.floorplan-media-container {
    position: sticky;
    top: 20px;
}

/* Flip columns: media on right, details on left */
.interactive-floorplan-container.simple-mode.horizontal-layout.media-right .floorplan-media-container {
    order: 2;
}

.interactive-floorplan-container.simple-mode.horizontal-layout.media-right .floorplan-details {
    order: 1;
}

/* Table vertical alignment (horizontal layout only) */
.interactive-floorplan-container.simple-mode.horizontal-layout.valign-center .interactive-floorplan-main {
    align-items: center;
}

.interactive-floorplan-container.simple-mode.horizontal-layout.valign-end .interactive-floorplan-main {
    align-items: end;
}

.base-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    /* box-shadow: 0 8px 24px rgba(0,0,0,0.15); */
    background: transparent;
    max-height: 80vh;
}

.base-image-container img {
    width: 100%;
    height: 100%;
    max-height: 80vh;
    object-fit: contain;
    object-position: top;
    display: block;
    transition: opacity 0.3s ease;
}

.no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #6c757d;
    font-size: 1.1em;
    text-align: center;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

/* ── Category row borders (always visible — matches Figma) ───────────────── */
.floorplan-details {
    border-top: 1px solid var(--ifp-border-color, rgba(0, 0, 0, 0.14));
}

.floorplan-details .category-group {
    border-bottom: 1px solid var(--ifp-border-color, rgba(0, 0, 0, 0.14));
}

/* Category accordion rows */
.floorplan-details .floorplan-category,
.floorplan-details .subcategory {
    cursor: pointer;
    transition: opacity 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    /* color set inline by PHP (luminance-based) */
    font-family: var(--ifp-cat-font, inherit);
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.floorplan-details .floorplan-category:hover,
.floorplan-details .subcategory:hover {
    opacity: 0.75;
}

/* Floor items in simple mode */
.floorplan-details .category-floors {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.floorplan-details .category-floors.active {
    max-height: 800px;
    min-height: 20px;
}

.floorplan-details .category-floors:empty::after,
.floorplan-details .category-floors.active:not(:has(.floor))::after {
    content: 'No floors assigned to this category yet.';
    display: block;
    padding: 12px 20px;
    color: #999;
    font-size: 12px;
    font-style: italic;
}

.floorplan-details .floor[data-floor-type="simple"] {
    padding: 12px 20px;
    margin: 0;
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.floorplan-details .floor[data-floor-type="simple"]:hover {
    background: rgba(255, 255, 255, 0.95);
    /* transform: translateX(5px); */
}

.floorplan-details .floor[data-floor-type="simple"]:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

/* Simple mode overlay adjustments */
.interactive-floorplan-container.simple-mode .interactive-floorplan-overlay {
    backdrop-filter: blur(4px);
}

.interactive-floorplan-container.simple-mode .overlay-content {
    animation: overlaySlideIn 0.4s ease-out;
}

@keyframes overlaySlideIn {
    from {
        opacity: 0;
        /* transform: scale(0.95) translateY(20px); */
    }

    to {
        opacity: 1;
        /* transform: scale(1) translateY(0); */
    }
}

/* Responsive design for simple mode */
@media (max-width: 768px) {
    .simple-categories-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .simple-modal-content {
        width: 95%;
        margin: 2% auto;
        padding: 20px;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .interactive-floorplan-container.simple-mode {
        padding: 40px 15px 20px;
    }

    .interactive-floorplan-container.simple-mode .interactive-floorplan-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .floorplan-media-container {
        position: relative;
        top: auto;
        order: -1;
        max-width: 100%;
    }

    /* Override media-right ordering — always show image first on mobile */
    .interactive-floorplan-container.simple-mode.horizontal-layout.media-right .floorplan-media-container {
        order: -1;
    }
    .interactive-floorplan-container.simple-mode.horizontal-layout.media-right .floorplan-details {
        order: 0;
    }

    .base-image-container {
        height: 40vh;
        overflow: hidden;
    }

    .base-image-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: top center;
    }

    .floorplan-details .floorplan-category,
    .floorplan-details .subcategory {
        font-size: 13px !important;
        padding: 14px 0;
    }

    .category-text {
        white-space: normal;
        font-size: 13px;
        line-height: 1.3;
        word-break: break-word;
    }

    .category-subtitle {
        white-space: normal;
        font-size: 10px;
        word-break: break-word;
    }

    .floorplan-details .floorplan-category:hover,
    .floorplan-details .subcategory:hover,
    .floorplan-details .floorplan-category.active,
    .floorplan-details .subcategory.active {
        transform: none;
    }
}