.elementor-kit-6{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#000000;--e-global-color-text:#2A2A2A;--e-global-color-accent:#EA4004;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Lato";--e-global-typography-accent-font-weight:500;font-family:"Lato", Sans-serif;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{font-family:"Lato", Sans-serif;}.elementor-kit-6 h1{font-family:"Lato", Sans-serif;}.elementor-kit-6 h2{font-family:"Lato", Sans-serif;}.elementor-kit-6 h3{font-family:"Lato", Sans-serif;}.elementor-kit-6 h4{font-family:"Lato", Sans-serif;}.elementor-kit-6 h5{font-family:"Lato", Sans-serif;}.elementor-kit-6 h6{font-family:"Lato", Sans-serif;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:"Lato", Sans-serif;font-size:15px;border-radius:30px 30px 30px 30px;padding:7px 15px 7px 15px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{border-radius:30px 30px 30px 30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Form container */
.perigee_plugin_list,
.perigee_plugin_form_wrapper {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Apply the same responsive widths to both containers */
@media (min-width: 576px) {

    .perigee_plugin_list,
    .perigee_plugin_form_wrapper {
        max-width: 540px;
    }
}

@media (min-width: 768px) {

    .perigee_plugin_list,
    .perigee_plugin_form_wrapper {
        max-width: 720px;
    }
}

@media (min-width: 992px) {

    .perigee_plugin_list,
    .perigee_plugin_form_wrapper {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {

    .perigee_plugin_list,
    .perigee_plugin_form_wrapper {
        max-width: 1140px;
    }
}

/* Form styles - full width within constrained container */
.perigee_plugin_form {
    width: 100%;
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Responsive padding */
@media (min-width: 576px) {

    .perigee_plugin_form,
    .perigee_plugin_form_wrapper {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (min-width: 768px) {

    .perigee_plugin_form,
    .perigee_plugin_form_wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Field wrapper */
.form-field-wrapper {
    margin-bottom: 20px;
    position: relative;
}

/* Labels */
.form-field-label {
    display: block;
    margin-bottom: 8px;
    /*font-weight: 600;*/
    color: #333;
}

.form-field-label.required:after {
    content: " *";
    color: #dc3232;
}

.ms-choice {
    padding: 24px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

/* Common input styles */
.form-field-wrapper input[type="text"],
.form-field-wrapper input[type="password"],
.form-field-wrapper input[type="email"],
.form-field-wrapper input[type="url"],
.form-field-wrapper input[type="number"],
.form-field-wrapper select,
.form-field-wrapper textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

/* Focus states */
.form-field-wrapper input[type="text"]:focus,
.form-field-wrapper input[type="password"]:focus,
.form-field-wrapper input[type="email"]:focus,
.form-field-wrapper input[type="url"]:focus,
.form-field-wrapper input[type="number"]:focus,
.form-field-wrapper select:focus,
.form-field-wrapper textarea:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 1px #0073aa;
}

/* Textarea specific */
.form-field-wrapper-textarea textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select dropdown */
.form-field-wrapper-select select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%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='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 30px;
}

/* Checkbox styling with container div */
.form-field-wrapper-checkbox {
    display: block;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkbox-container input[type="checkbox"] {
    flex-shrink: 0;
    /* Prevent checkbox from shrinking */
    min-width: 1.5rem;
    width: auto;
    margin: 0;
    align-self: center;
    /* This centers it vertically with the label */
}

.checkbox-container .checkbox-label {
    flex: 1;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    line-height: 1.4;
}

/* Description styling */
.form-field-description-checkbox {
    display: block;
    margin-left: 30px;
    /* Checkbox width (20px) + gap (10px) */
    margin-top: 4px;
    font-size: 0.9em;
    color: #666;
}


/* Submit button */
.form-field-wrapper-submit {
    margin-top: 30px;
}

.form-field-wrapper-submit input[type="submit"],
.form-submit input[type="submit"] {
    background-color: #2271b1;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-field-wrapper-submit input[type="submit"]:hover,
.form-submit input[type="submit"]:hover {
    background-color: #135e96;
}

/* Button container */
.form-submit {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Hidden fields */
.form-field-wrapper-hidden,
.form-field-label-hidden,
.form-field-description-hidden {
    display: none !important;
}

/* Field descriptions */
.form-field-description {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

/* Error states (you'll need to add error classes in your PHP) */
.form-field-wrapper.has-error input,
.form-field-wrapper.has-error select,
.form-field-wrapper.has-error textarea {
    border-color: #dc3232;
}

.form-field-wrapper.has-error .form-field-description {
    color: #dc3232;
    font-style: normal;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .perigee_plugin_form {
        padding: 15px;
    }

    .form-field-wrapper {
        margin-bottom: 15px;
    }
}

/* Response wrapper container */
.form-response-wrapper {
    /*max-width: 600px;*/
    margin: 20px auto;
    padding: 0;
    font-size: 16px;
}

/* Status placeholder base styles */
.form-status-placeholder {
    padding: 15px 20px;
    margin: 0;
    border-radius: 4px;
    border-left: 4px solid transparent;
    background-color: #f5f5f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Success message styling */
.form-status-placeholder.success {
    background-color: #f0f9eb;
    border-left-color: #67c23a;
    color: #67c23a;
}

/* Error message styling */
.form-status-placeholder.error {
    background-color: #fef0f0;
    border-left-color: #f56c6c;
    color: #f56c6c;
}

/* Warning message styling */
.form-status-placeholder.warning {
    background-color: #fdf6ec;
    border-left-color: #e6a23c;
    color: #e6a23c;
}

/* Info message styling */
.form-status-placeholder.info {
    background-color: #f4f4f5;
    border-left-color: #909399;
    color: #909399;
}

/* Loading/processing state */
.form-status-placeholder.loading {
    background-color: #ecf5ff;
    border-left-color: #409eff;
    color: #409eff;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    /* Add this - prevents extra line-height spacing */
}

/* Loading animation */
.form-status-placeholder.loading:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(64, 158, 255, 0.3);
    border-top-color: #409eff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
    /* Add this - prevents spinner from shrinking */
    /*margin-top: 1em;*/
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Message content styling */
.form-status-placeholder .message-title {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

.form-status-placeholder .message-content {
    margin: 0;
    line-height: 1.5;
}

/* Dismissible messages */
.form-status-placeholder.dismissible {
    position: relative;
    padding-right: 40px;
}

.form-status-placeholder .dismiss-button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.form-status-placeholder .dismiss-button:hover {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .form-response-wrapper {
        margin: 15px auto;
    }

    .form-status-placeholder {
        padding: 12px 15px;
    }
}

/* Table styles - also full width within constrained container */
.table-renderer {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    box-sizing: border-box;
}

.table-renderer th {
    background-color: #f8f9fa;
    padding: 0.5rem 0.25rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    position: relative;
    vertical-align: top;
    /* Align header text to top */
    min-height: 48px;
    /* Minimum height for consistency */
}

.table-renderer td {
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid #dee2e6;
    vertical-align: top;
}

/* Header container for proper alignment */
.table-renderer th .header-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 24px;
    /* Ensure consistent height */
    vertical-align: top;
    display: inline;
}

/* Header text styling */
.table-renderer th .header-text {
    margin-bottom: 4px;
    line-height: 1.2;
}

/* Filter input styling */
.table-filter-input {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    transition: border-color 0.15s ease-in-out;
}

.table-filter-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.table-filter-input::placeholder {
    color: #6c757d;
    opacity: 0.7;
}

/* Sortable headers */
.table-renderer th.sortable {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.table-renderer th.sortable:hover {
    background-color: #e9ecef;
}

.table-renderer th.sortable .header-text {
    padding-right: 16px;
    /* Space for sort indicator */
    position: relative;
}

/* Sort indicators */
.table-renderer th.sort-asc .header-text::after,
.table-renderer th.sort-desc .header-text::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.table-renderer th.sort-asc .header-text::after {
    border-bottom: 6px solid #495057;
    margin-top: -2px;
}

.table-renderer th.sort-desc .header-text::after {
    border-top: 6px solid #495057;
    margin-top: 2px;
}

/* Headers without filters */
.table-renderer th:not([data-filterable="true"]) {
    vertical-align: top;
    /* Top align when no filter */
}

.table-renderer th:not([data-filterable="true"]) .header-text {
    margin-bottom: 0;
    /* No bottom margin when no filter */
}

/* Headers with filters */
.table-renderer th[data-filterable="true"] {
    vertical-align: bottom;
    /* Align to bottom when filter present */
    padding-bottom: 8px;
    /* Less padding at bottom for filter */
}

/* Search container */
.table-search-container {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.table-search-input {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    width: 300px;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out;
}

.table-search-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Pagination */
.table-pagination {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.table-pagination button {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.15s ease-in-out;
}

.table-pagination button:hover:not(:disabled) {
    background-color: #f8f9fa;
    border-color: #007bff;
}

.table-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info {
    font-weight: 600;
    color: #495057;
}

/* Row hover effect */
.table-renderer tr:hover td {
    background-color: #f8f9fa;
}

/* Responsive design */
@media (max-width: 768px) {
    .table-renderer {
        font-size: 14px;
    }

    .table-renderer th,
    .table-renderer td {
        padding: 8px 6px;
    }

    .table-filter-input {
        padding: 4px 6px;
        font-size: 11px;
    }

    .table-search-input {
        width: 100%;
        max-width: 250px;
    }

    .table-pagination {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .table-pagination button {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* Column alignment utilities */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

/* No data message */
.table-renderer td[colspan] {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 2rem;
}

/* Status indicator styles with pastel shades */
.status-active,
.status-inactive,
.status-unknown {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-align: center;
    min-width: 70px;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

/* Active status - Soft green pastel */
.status-active {
    background-color: #e8f5e8;
    color: #2e7d32;
    border-color: #c8e6c9;
}

.status-active:hover {
    background-color: #d5edd5;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.1);
}

/* Inactive status - Soft coral pastel */
.status-inactive {
    background-color: #ffebee;
    color: #c62828;
    border-color: #ffcdd2;
}

.status-inactive:hover {
    background-color: #f9d7da;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(198, 40, 40, 0.1);
}

/* Unknown status - Soft lavender pastel */
.status-unknown {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border-color: #e1bee7;
}

.status-unknown:hover {
    background-color: #e8d4ec;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(123, 31, 162, 0.1);
}

/* Pill style variation */
.status-pill {
    border-radius: 50px;
    padding: 4px 16px;
}

/* Outline style variation */
.status-outline {
    background-color: transparent;
}

.status-outline.status-active {
    color: #2e7d32;
    border-color: #2e7d32;
}

.status-outline.status-inactive {
    color: #c62828;
    border-color: #c62828;
}

.status-outline.status-unknown {
    color: #7b1fa2;
    border-color: #7b1fa2;
}

/* Small size variation */
.status-sm {
    padding: 2px 8px;
    min-width: 60px;
}

/* Large size variation */
.status-lg {
    padding: 6px 16px;
    min-width: 80px;
}

/* With icons */
.status-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-with-icon::before {
    line-height: 1;
}

.status-active.status-with-icon::before {
    content: "✓";
    /* Checkmark */
}

.status-inactive.status-with-icon::before {
    content: "✗";
    /* Cross */
}

.status-unknown.status-with-icon::before {
    content: "?";
    /* Question mark */
}

/* Animation for status changes */
@keyframes statusPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.status-changing {
    animation: statusPulse 0.6s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .status-active,
    .status-inactive,
    .status-unknown {
        padding: 3px 10px;
        min-width: 60px;
    }

    .status-sm {
        padding: 1px 6px;
        min-width: 50px;
    }

    .status-lg {
        padding: 4px 12px;
        min-width: 70px;
    }
}

.bg-5 {
  background-color: #eee;
}

.rad-05 {
  border-radius: 0.5em;
}

/* Utility classes for custom pastel colors */
.status-custom {
    background-color: var(--status-bg, #f3e5f5);
    color: var(--status-color, #7b1fa2);
    border-color: var(--status-border, #e1bee7);
}

.status-custom.status-outline {
    background-color: transparent;
    color: var(--status-color, #7b1fa2);
    border-color: var(--status-border, #7b1fa2);
}

/* Additional pastel color variations */
.status-info {
    background-color: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.status-warning {
    background-color: #fff8e1;
    color: #f57f17;
    border-color: #fff59d;
}

.status-success {
    background-color: #e8f5e8;
    color: #2e7d32;
    border-color: #c8e6c9;
}

.status-error {
    background-color: #ffebee;
    color: #c62828;
    border-color: #ffcdd2;
}

.status-neutral {
    background-color: #f5f5f5;
    color: #616161;
    border-color: #e0e0e0;
}

.detail-table-viewport {
    height: 30vh;
    overflow-y: scroll;
    /* Changed from auto to scroll to always show */
    border: 1px solid #ddd;
    padding: 1rem;
    /*width: 99%;*/
    margin: 0 auto;
    background: #fff;
    border-radius: 6px;

    /* Custom scrollbar for WebKit browsers */
    scrollbar-width: auto;
    /* For Firefox */
    scrollbar-color: #a0a0a0 #f0f0f0;
    /* For Firefox */
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari) */
.detail-table-viewport::-webkit-scrollbar {
    width: 14px;
}

.detail-table-viewport::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 0 4px 4px 0;
}

.detail-table-viewport::-webkit-scrollbar-thumb {
    background: #a0a0a0;
    border-radius: 8px;
    border: 3px solid #f0f0f0;
}

.detail-table-viewport::-webkit-scrollbar-thumb:hover {
    background: #808080;
}

/* Delete confirmation modal START */
.perigee-delete-confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.perigee-delete-confirmation-modal {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.perigee-delete-title {
    margin-top: 0;
    color: #d63638;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.perigee-delete-message {
    margin: 15px 0;
    line-height: 1.5;
    font-size: 14px;
    color: #333;
}

.perigee-delete-warning {
    color: #666;
    font-size: 14px;
    margin: 15px 0;
    font-style: italic;
}

.perigee-delete-buttons {
    margin-top: 20px;
    text-align: right;
}

.perigee-cancel-btn {
    padding: 8px 16px;
    margin-right: 10px;
    background: #f6f7f7;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    transition: all 0.2s ease;
}

.perigee-cancel-btn:hover {
    background: #e8e8e8;
    border-color: #999;
}

.perigee-confirm-btn {
    padding: 8px 16px;
    background: #d63638;
    color: white;
    border: 1px solid #d63638;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.2s ease;
}

.perigee-confirm-btn:hover {
    background: #c02222;
    border-color: #c02222;
}

/* Responsive Design */
@media (max-width: 480px) {
    .perigee-delete-confirmation-modal {
        padding: 15px;
        margin: 20px;
        width: calc(100% - 40px);
    }

    .perigee-delete-buttons {
        text-align: center;
    }

    .perigee-cancel-btn,
    .perigee-confirm-btn {
        display: block;
        width: 100%;
        margin: 5px 0;
    }

    .perigee-cancel-btn {
        margin-right: 0;
    }
}

/* WordPress Admin Bar Compatibility */
@media (min-width: 783px) {
    .admin-bar .perigee-delete-confirmation-overlay {
        top: 32px;
        height: calc(100% - 32px);
    }
}

@media (max-width: 782px) {
    .admin-bar .perigee-delete-confirmation-overlay {
        top: 46px;
        height: calc(100% - 46px);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .perigee-delete-confirmation-modal {
        border: 2px solid #000;
    }

    .perigee-cancel-btn {
        border: 2px solid #000;
    }

    .perigee-confirm-btn {
        border: 2px solid #000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .perigee-cancel-btn,
    .perigee-confirm-btn {
        transition: none;
    }
}

/* Delete confirmation modal END */


/* Micromodal.js START */
/* ============================================
   MICROMODAL - COMPLETE STYLES
   ============================================ */

/* ========== BASE MODAL STYLES ========== */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
        helvetica neue, helvetica, ubuntu, roboto, noto,
        segoe ui, arial, sans-serif;
}

.modal.is-open {
    display: block;
    /* Show when open */
}

/* ========== OVERLAY ========== */
.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    padding: 20px;
    /* Add padding for small screens */
}

/* ========== DEFAULT MODAL CONTAINER (500px) ========== */
.modal__container {
    background-color: #fff;
    padding: 1rem;
    max-width: 500px;
    /* DEFAULT WIDTH */
    width: 100%;
    /* Responsive base */
    max-height: 90vh;
    border-radius: 4px;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1002;
    position: relative;
}

/* ========== MODAL COMPONENTS ========== */
/* Header */
.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

/* Close button */
.modal__close {
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    line-height: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__close:hover {
    color: #333;
}

.modal__close:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Content */
.modal__content {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
}

/* Footer */
.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 0;
    border-top: 1px solid #eee;
}

/* Buttons */
.modal__btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.modal__btn-primary {
    background-color: #007bff;
    color: white;
}

.modal__btn-primary:hover {
    background-color: #0056b3;
}

.modal__btn:not(.modal__btn-primary) {
    background-color: #6c757d;
    color: white;
}

.modal__btn:not(.modal__btn-primary):hover {
    background-color: #5a6268;
}

/* ========== WIDTH CONTROLS - MOST IMPORTANT PART ========== */

/* SMALL MODAL (400px) */
.modal__container.modal-small,
.modal.modal-small .modal__container {
    max-width: 400px !important;
}

/* DEFAULT MODAL (500px) - Already set above */

/* MEDIUM MODAL (600px) */
.modal__container.modal-medium,
.modal.modal-medium .modal__container {
    max-width: 600px !important;
}

/* WIDE MODAL (800px) */
.modal__container.modal-wide,
.modal.modal-wide .modal__container {
    max-width: 800px !important;
    width: 90%;
}

/* EXTRA WIDE MODAL (1000px) */
.modal__container.modal-extra-wide,
.modal.modal-extra-wide .modal__container {
    max-width: 1000px !important;
    width: 95%;
}

/* FULL WIDTH MODAL */
.modal__container.modal-full,
.modal.modal-full .modal__container {
    max-width: 95% !important;
    width: 95%;
    margin: 0 auto;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Mobile first - All modals full width on small screens */
@media (max-width: 767.98px) {
    .modal__overlay {
        padding: 10px;
        align-items: flex-start;
        /* Top align on mobile */
        padding-top: 20px;
    }

    .modal__container {
        max-width: 95% !important;
        /* Force all modals to be mobile-friendly */
        width: 95% !important;
        padding: 20px;
        max-height: 85vh;
        margin-top: 20px;
    }

    /* Even wide modals become normal width on mobile */
    .modal__container.modal-wide,
    .modal.modal-wide .modal__container,
    .modal__container.modal-extra-wide,
    .modal.modal-extra-wide .modal__container {
        max-width: 95% !important;
        width: 95% !important;
    }
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .modal__container {
        width: auto;
        /* Auto width for larger screens */
    }

    /* Medium modal on tablet */
    .modal__container.modal-medium,
    .modal.modal-medium .modal__container {
        max-width: 500px !important;
        width: 100% !important;
        /* Added - ensures container fills up to max-width */
    }

    .modal__container.modal-wide,
    .modal.modal-wide .modal__container {
        max-width: 700px !important;
        width: 100% !important;
        /* Added */
    }

    .modal__container.modal-extra-wide,
    .modal.modal-extra-wide .modal__container {
        max-width: 900px !important;
        width: 100% !important;
        /* Added */
    }
}

/* Desktop (992px and up) */
@media (min-width: 992px) {

    /* Medium modal on desktop */
    .modal__container.modal-medium,
    .modal.modal-medium .modal__container {
        max-width: 500px !important;
        width: 100% !important;
        /* Added */
    }

    .modal__container.modal-wide,
    .modal.modal-wide .modal__container {
        max-width: 800px !important;
        width: 100% !important;
        /* Added */
    }

    .modal__container.modal-extra-wide,
    .modal.modal-extra-wide .modal__container {
        max-width: 1000px !important;
        width: 100% !important;
        /* Added */
    }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {

    /* Medium modal on large desktop */
    .modal__container.modal-medium,
    .modal.modal-medium .modal__container {
        max-width: 500px !important;
        width: 100% !important;
        /* Added */
    }

    .modal__container.modal-wide,
    .modal.modal-wide .modal__container {
        max-width: 900px !important;
        width: 100% !important;
        /* Added */
    }

    .modal__container.modal-extra-wide,
    .modal.modal-extra-wide .modal__container {
        max-width: 1100px !important;
        width: 100% !important;
        /* Added */
    }
}

/* Extra Large Desktop (1400px and up) */
@media (min-width: 1400px) {

    /* Medium modal on extra large desktop */
    .modal__container.modal-medium,
    .modal.modal-medium .modal__container {
        max-width: 500px !important;
        width: 100% !important;
        /* Added */
    }

    .modal__container.modal-wide,
    .modal.modal-wide .modal__container {
        max-width: 1000px !important;
        width: 100% !important;
        /* Added */
    }

    .modal__container.modal-extra-wide,
    .modal.modal-extra-wide .modal__container {
        max-width: 1200px !important;
        width: 100% !important;
        /* Added */
    }
}

/* ========== ANIMATIONS ========== */
/* Slide animation (micromodal-slide class) */
.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* Fade animation (micromodal-fade class) */
.micromodal-fade {
    display: none;
}

.micromodal-fade.is-open {
    display: block;
}

.micromodal-fade[aria-hidden="false"] .modal__overlay,
.micromodal-fade[aria-hidden="false"] .modal__container {
    animation: mmfadeIn 0.3s ease;
}

.micromodal-fade[aria-hidden="true"] .modal__overlay,
.micromodal-fade[aria-hidden="true"] .modal__container {
    animation: mmfadeOut 0.3s ease;
}

/* Zoom animation (micromodal-zoom class) */
.micromodal-zoom {
    display: none;
}

.micromodal-zoom.is-open {
    display: block;
}

.micromodal-zoom[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn 0.3s ease;
}

.micromodal-zoom[aria-hidden="false"] .modal__container {
    animation: mmzoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.micromodal-zoom[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut 0.3s ease;
}

.micromodal-zoom[aria-hidden="true"] .modal__container {
    animation: mmzoomOut 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/* ========== ANIMATION KEYFRAMES ========== */
@keyframes mmfadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(15%);
        opacity: 0;
    }

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

@keyframes mmslideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-15%);
        opacity: 0;
    }
}

@keyframes mmzoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

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

@keyframes mmzoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.9);
        opacity: 0;
    }
}

/* ========== ACCESSIBILITY ========== */
/* Hide modal from screen readers when hidden */
.modal[aria-hidden="true"] {
    visibility: hidden;
}

.modal[aria-hidden="false"] {
    visibility: visible;
}

/* Focus styles for accessibility */
.modal__container:focus {
    outline: none;
}

/* ========== UTILITY CLASSES ========== */
/* No padding */
.modal__container.no-padding {
    padding: 0 !important;
}

.modal__container.no-padding .modal__header,
.modal__container.no-padding .modal__content,
.modal__container.no-padding .modal__footer {
    padding: 20px;
}

/* No footer */
.modal__container.no-footer .modal__footer {
    display: none;
}

/* Center align title */
.modal__container.title-center .modal__header {
    justify-content: center;
}

.modal__container.modal-danger .modal__btn-primary {
    background-color: #dc3545;
}

.modal__container.modal-danger .modal__btn-primary:hover {
    background-color: #c82333;
}

.modal__container.modal-success .modal__btn-primary {
    background-color: #28a745;
}

.modal__container.modal-success .modal__btn-primary:hover {
    background-color: #218838;
}

/* ========== PRINT STYLES ========== */
@media print {
    .modal__overlay {
        position: static;
        background: transparent;
        display: block;
        padding: 0;
    }

    .modal__container {
        max-width: 100% !important;
        width: 100% !important;
        max-height: none;
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    .modal__close {
        display: none;
    }
}

/* Micromodal.js END */


/* Messages START */
.perigee-messages {
    margin: 20px 0;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid;
}

.perigee-messages-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.perigee-messages-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.perigee-messages-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.perigee-messages-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.perigee-messages-list {
    margin: 0;
    padding-left: 20px;
}

.perigee-messages-list li {
    margin-bottom: 5px;
}

.perigee-admin-messages {
    margin: 15px 0;
    padding: 12px;
    border-left: 4px solid;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.perigee-admin-messages-success {
    border-color: #46b450;
}

.perigee-admin-messages-error {
    border-color: #dc3232;
}

.perigee-admin-messages-warning {
    border-color: #ffb900;
}

.perigee-admin-messages-info {
    border-color: #00a0d2;
}

.perigee-admin-messages ul {
    margin: 5px 0 0 0;
    padding-left: 20px;
}

/* Messages END */

/* Form sections START */

/* Default form row styling */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

/* Default single column layout */
.form-row .form-field-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Column layouts based on form class */
.perigee_plugin_form.form-columns-1 .form-field-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
}

.perigee_plugin_form.form-columns-2 .form-field-wrapper {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
}

.perigee_plugin_form.form-columns-3 .form-field-wrapper {
    flex: 0 0 calc(33.333% - 24px);
    max-width: calc(33.333% - 24px);
}

/* Section-based column layouts override the form defaults */
.form-section-columns-1 .form-field-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.form-section-columns-2 .form-field-wrapper {
    flex: 0 0 calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
}

.form-section-columns-3 .form-field-wrapper {
    flex: 0 0 calc(33.333% - 24px) !important;
    max-width: calc(33.333% - 24px) !important;
}

/* Checkboxes should always be full width in sections */
.form-section .form-field-wrapper-checkbox {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Inline checkboxes in 1-column layouts - full width */
.form-section .form-row.form-section-columns-1 .form-field-wrapper-checkbox.form-field-layout-inline {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Inline checkboxes in multi-column layouts */
.form-section .form-row.form-section-columns-2 .form-field-wrapper-checkbox.form-field-layout-inline {
    flex: 0 0 50% !important;
    max-width: calc(50% - 20px) !important;
}

.form-section .form-row.form-section-columns-3 .form-field-wrapper-checkbox.form-field-layout-inline {
    flex: 0 0 33.333% !important;
    max-width: calc(33.333% - 20px) !important;
}

.form-section .form-row.form-section-columns-4 .form-field-wrapper-checkbox.form-field-layout-inline {
    flex: 0 0 25% !important;
    max-width: calc(25% - 20px) !important;
}

/* For 2-column forms */
.perigee_plugin_form.form-columns-2 .form-field-wrapper.form-field-fullwidth {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* For 3-column forms */
.perigee_plugin_form.form-columns-3 .form-field-wrapper.form-field-fullwidth {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* For 4-column forms */
.perigee_plugin_form.form-columns-4 .form-field-wrapper.form-field-fullwidth {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Generic fallback for any column count */
.perigee_plugin_form .form-field-wrapper.form-field-fullwidth {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Form sections styling */
.form-section {
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.form-section-compact {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0;
}

.form-section:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.form-section:first-child {
    margin-top: 0;
}

/* Current/active section highlight */
.form-section-active {
    border-left: 4px solid #4361ee;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

/* Completed section */
.form-section-completed {
    opacity: 0.9;
    background: #f8f9fa;
}

/* Modern Section Headings */
/* Target h1-h6 tags that have the form-section-heading class */
h1.form-section-heading,
h2.form-section-heading,
h3.form-section-heading,
h4.form-section-heading,
h5.form-section-heading,
h6.form-section-heading {
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
    color: #2d3748;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
    position: relative;
}

/* Individual heading sizes */
h1.form-section-heading {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
}

h2.form-section-heading {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
}

h3.form-section-heading {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 600;
}

h4.form-section-heading {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 600;
    color: #4a5568;
}

h5.form-section-heading {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 600;
    color: #4a5568;
}

h6.form-section-heading {
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Underline effect */
h1.form-section-heading::after,
h2.form-section-heading::after,
h3.form-section-heading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #4361ee, #3a0ca3);
    border-radius: 2px;
}

h1.form-section-heading::after {
    bottom: -2px;
    height: 3px;
}

h4.form-section-heading::after,
h5.form-section-heading::after,
h6.form-section-heading::after {
    display: none;
    /* Only show underline for h1-h3 */
}

.form-section-description {
    margin: -0.5rem 0 1.5rem 0;
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border-left: 3px solid #4299e1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .form-section-heading {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .form-section-description {
        margin: -0.25rem 0 1rem 0;
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    /* Mobile-specific improvements */
    .form-section {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
}

/* Focus states for keyboard navigation */
.form-section:focus-within {
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
    outline: none;
}

/* Section transition animations */
.form-section-enter {
    opacity: 0;
    transform: translateY(10px);
}

.form-section-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s;
}

/* Form sections END */

/* Multi Client Selector Styles START */
.multi-client-.elementor-kit-6 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    /* Increased to 10000 */
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    width: auto;
    transition: all 0.2s ease;
}

.multi-client-.elementor-kit-6:hover {
    border-color: #007cba;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}

.multi-client-.elementor-kit-6:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.25);
}

/* Status Message Styles - Moved ABOVE the .elementor-kit-6 */
.multi-client-status {
    position: fixed;
    bottom: 60px;
    /* Positioned above the .elementor-kit-6 (20px + 40px gap) */
    right: 20px;
    z-index: 10001;
    /* Higher than the .elementor-kit-6 */
    padding: 8px 12px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
    max-width: 200px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    /* Prevents blocking clicks on the .elementor-kit-6 */
}

.multi-client-status-success {
    opacity: 1;
    transform: translateY(0);
    color: #0a5c0a;
    border-color: #46b450;
    background-color: #f0f9f0;
    box-shadow: 0 1px 3px rgba(70, 180, 80, 0.2);
    /* Subtle shadow matching color */
    pointer-events: auto;
}

.multi-client-status-error {
    opacity: 1;
    transform: translateY(0);
    color: #8a1f11;
    border-color: #dc3232;
    background-color: #fdf2f2;
    box-shadow: 0 1px 3px rgba(220, 50, 50, 0.2);
    /* Subtle shadow matching color */
    pointer-events: auto;
}

.multi-client-status-loading {
    opacity: 1;
    transform: translateY(0);
    color: #005a87;
    border-color: #0073aa;
    background-color: #f0f6fc;
    box-shadow: 0 1px 3px rgba(0, 115, 170, 0.2);
    /* Subtle shadow matching color */
    pointer-events: auto;
}

/* Responsive styles */
@media (max-width: 768px) {
    .multi-client-.elementor-kit-6 {
        bottom: 10px;
        right: 10px;
        font-size: 13px;
        padding: 8px 12px;
        min-width: 110px;
    }

    .multi-client-status {
        bottom: 50px;
        /* Adjusted for mobile */
        right: 10px;
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* Admin bar adjustment */
.admin-bar .multi-client-.elementor-kit-6 {
    bottom: 32px;
    /* Adjust for WordPress admin bar on front-end */
}

.admin-bar .multi-client-status {
    bottom: 72px;
    /* 32px (.elementor-kit-6 position) + 40px gap */
}

@media (max-width: 782px) {
    .admin-bar .multi-client-.elementor-kit-6 {
        bottom: 46px;
        /* Adjust for mobile admin bar */
    }

    .admin-bar .multi-client-status {
        bottom: 86px;
        /* 46px (.elementor-kit-6 position) + 40px gap */
    }
}

/* Multi Client Selector Styles END */


/* Form field buttons START */
/* ===== BUTTON CONTAINERS BELOW ELEMENTS ===== */
.field-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
}

/* Form field with buttons layout - buttons below */
.form-field-wrapper:has(.field-buttons) {
    display: block;
    width: 100%;
}

.form-field-wrapper:has(.field-buttons) .form-field-label {
    margin-top: 0;
    min-width: auto;
    display: block;
    width: 100%;
}

.form-field-wrapper:has(.field-buttons) input:not(.ms-parent *),
.form-field-wrapper:has(.field-buttons) select:not(.ms-parent *),
.form-field-wrapper:has(.field-buttons) textarea:not(.ms-parent *) {
    min-width: auto;
    width: 100%;
    display: block;
}


.form-field-wrapper:has(.field-buttons) .field-buttons {
    margin-top: 8px;
    margin-left: 0;
    justify-content: flex-start;
}

/* ===== BASE BUTTON STYLES ===== */
.field-buttons button {
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.4;
    height: auto;
    min-height: 32px;
    cursor: pointer;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.field-buttons button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.field-buttons button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.field-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== BUTTON TYPE SPECIFIC STYLES ===== */

/* Clear Button */
.field-button-clear {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
    border-color: #f5c6cb;
}

.field-button-clear:hover {
    background: linear-gradient(135deg, #f5c6cb, #f1b0b7);
    border-color: #ed969e;
    color: #721c24;
}

/* Toggle Button States */
.field-button-toggle {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    color: #0c5460;
    border-color: #bee5eb;
}

.field-button-toggle:hover {
    background: linear-gradient(135deg, #bee5eb, #abdde5);
    border-color: #87d0db;
    color: #0c5460;
}

.field-button-toggle[data-current-state="hidden"] {
    background: linear-gradient(135deg, #d1ecf1, #abdde5);
    color: #0c5460;
}

.field-button-toggle[data-current-state="visible"] {
    background: linear-gradient(135deg, #0c5460, #0a3d4c);
    color: #fff;
    border-color: #0a3d4c;
}

.field-button-toggle[data-current-state="visible"]:hover {
    background: linear-gradient(135deg, #0a3d4c, #08303c);
    border-color: #08303c;
}

/* Refresh Button */
.field-button-refresh {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    border-color: #c3e6cb;
}

.field-button-refresh:hover {
    background: linear-gradient(135deg, #c3e6cb, #b1dfbb);
    border-color: #8fd19e;
    color: #155724;
}

/* Add Button */
.field-button-add {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    color: #856404;
    border-color: #ffeeba;
}

.field-button-add:hover {
    background: linear-gradient(135deg, #ffeeba, #ffeaa7);
    border-color: #ffdf7e;
    color: #856404;
}

/* Copy Button */
.field-button-copy {
    background: linear-gradient(135deg, #e2e3e5, #d6d8db);
    color: #383d41;
    border-color: #d6d8db;
}

.field-button-copy:hover {
    background: linear-gradient(135deg, #d6d8db, #c8cbcf);
    border-color: #b9bbbe;
    color: #383d41;
}

/* Generate Button */
.field-button-generate {
    background: linear-gradient(135deg, #cce5ff, #b3d9ff);
    color: #004085;
    border-color: #b3d9ff;
}

.field-button-generate:hover {
    background: linear-gradient(135deg, #b3d9ff, #99ccff);
    border-color: #66b0ff;
    color: #004085;
}

/* Reset Button */
.field-button-reset {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: #495057;
    border-color: #e9ecef;
}

.field-button-reset:hover {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
    border-color: #ced4da;
    color: #495057;
}

/* ===== BUTTON ICONS ===== */
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
}

/* ===== BUTTON ANIMATIONS ===== */
.field-buttons button {
    position: relative;
    overflow: hidden;
}

.field-buttons button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.field-buttons button:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Success animation for actions */
.field-button-clear.cleared,
.field-button-copy.copied,
.field-button-reset.completed {
    animation: successPulse 0.5s ease;
}

@keyframes successPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* Loading animation for async buttons */
.field-button-refresh.loading,
.field-button-add.loading {
    position: relative;
    color: transparent !important;
}

.field-button-refresh.loading::before,
.field-button-add.loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== TOGGLE BUTTON STATE INDICATORS ===== */
.field-button-toggle.toggled-on {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.field-button-toggle.toggled-off {
    opacity: 0.8;
}

/* Border indicators for different toggle types */
.field-button-toggle[data-toggle-type="password"] {
    border-left: 3px solid #3498db;
}

.field-button-toggle[data-toggle-type="visibility"] {
    border-left: 3px solid #2ecc71;
}

.field-button-toggle[data-toggle-type="value"] {
    border-left: 3px solid #9b59b6;
}

.field-button-toggle[data-toggle-type="select_options"] {
    border-left: 3px solid #e74c3c;
}

/* ===== BUTTON SIZES ===== */
.field-button-sm {
    padding: 2px 6px !important;
    font-size: 10px !important;
    min-height: 22px !important;
}

.field-button-lg {
    padding: 6px 14px !important;
    font-size: 13px !important;
    min-height: 34px !important;
}

/* ===== BUTTON GROUPS ===== */
.field-buttons.button-group {
    border: 1px solid #ddd;
    padding: 2px;
    background: #f8f9fa;
}

.field-buttons.button-group button {
    border-radius: 2px;
    border: none;
    margin: 0;
}

.field-buttons.button-group button:not(:last-child) {
    border-right: 1px solid #ddd;
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .field-button-clear {
        background: linear-gradient(135deg, #5c1d24, #4a171c);
        color: #f8d7da;
        border-color: #4a171c;
    }

    .field-button-toggle {
        background: linear-gradient(135deg, #0c5460, #0a3d4c);
        color: #d1ecf1;
        border-color: #0a3d4c;
    }

    .field-button-copy {
        background: linear-gradient(135deg, #383d41, #2c3033);
        color: #e2e3e5;
        border-color: #2c3033;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .form-field-wrapper:has(.field-buttons) {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .field-buttons {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .field-buttons button {
        flex: 1;
        min-width: 100px;
        max-width: 150px;
    }
}

/* Compact layout for inline fields */
.form-field-wrapper.form-field-inline:has(.field-buttons) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.form-field-wrapper.form-field-inline:has(.field-buttons) .form-field-label {
    flex: 0 0 auto;
    margin-bottom: 0;
    min-width: 120px;
}

.form-field-wrapper.form-field-inline:has(.field-buttons) input,
.form-field-wrapper.form-field-inline:has(.field-buttons) select,
.form-field-wrapper.form-field-inline:has(.field-buttons) textarea {
    flex: 1;
    min-width: 200px;
}

.form-field-wrapper.form-field-inline:has(.field-buttons) .field-buttons {
    flex: 0 0 100%;
    margin-top: 8px;
    margin-left: 0;
}

/* Field element wrapper */
.field-element-wrapper {
    display: block;
    width: 100%;
}

.field-element-wrapper input:not(.ms-parent *),
.field-element-wrapper select:not(.ms-parent *),
.field-element-wrapper textarea:not(.ms-parent *) {
    width: 100% !important;
    box-sizing: border-box;
}

/* Multi-select height */
.field-element-wrapper select[multiple] {
    min-height: 120px;
}

/* Textarea specific */
.field-element-wrapper textarea {
    min-height: 100px;
    resize: vertical;
}

/* Checkbox special handling */
.form-field-wrapper-checkbox .field-element-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-field-wrapper-checkbox .checkbox-container {
    order: -1;
}

.form-field-wrapper-checkbox .field-buttons {
    margin-left: 28px;
    /* Align with checkbox input */
}

/* For inline layout option */
.form-field-wrapper.form-field-inline .field-element-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.form-field-wrapper.form-field-inline .field-element-wrapper input,
.form-field-wrapper.form-field-inline .field-element-wrapper select,
.form-field-wrapper.form-field-inline .field-element-wrapper textarea {
    flex: 1;
    min-width: 200px;
}

.form-field-wrapper.form-field-inline .field-element-wrapper .field-buttons {
    flex: 0 0 100%;
    margin-top: 8px;
}

/* Form field buttons END */


.ms-drop input[type=radio],
.ms-drop input[type=checkbox] {
    margin-top: 0.6rem !important;
}


/* Notifications START */
.perigee-notification {
    margin: 20px 0;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid;
}

.perigee-notification-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.perigee-notification-error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.perigee-notification-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

.perigee-notification-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.perigee-notification-list {
    margin: 0;
    padding-left: 0;
}

.perigee-notification-list li {
    margin-bottom: 5px;
    list-style-type: none;
}

/* Notifications END */


/* Style for hidden options in select dropdowns */
select option[hidden] {
    display: none;
}

/* Style for toggle status button START */
.field-button-toggle_status {
    margin-left: 8px;
    vertical-align: middle;
}

.field-button-toggle_status.active-only {
    background-color: #4CAF50;
    color: white;
}

.field-button-toggle_status.show-all {
    background-color: #2196F3;
    color: white;
}

/* Optional icon for the button */
.field-button-toggle_status .button-icon {
    margin-right: 4px;
}

/* Style for select with toggle button */
.field-element-wrapper select {
    flex-grow: 1;
}

.field-buttons {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

/* Style for toggle status button END */

/* audit log START */
.log-entry {
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
}

.log-header,
.log-user-info,
.log-data {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    margin-bottom: 0.5rem;
}

.log-data:last-child {
    margin-bottom: 0;
}
/* audit log END */

/* Buttons START */
.perigee-btn-primary {
    background-color: #2271b1;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.perigee-btn-primary:hover {
    background-color: #135e96;
}

.perigee-btn-primary:active {
    background-color: #0a4b78;
}

.perigee-btn-secondary {
    background-color: #7eb9e6;
    color: #102330;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.perigee-btn-secondary:hover {
    background-color: #4a9fd8;
}

.perigee-btn-success {
    background-color: #00a32a;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.perigee-btn-success:hover {
    background-color: #008a20;
}

.perigee-btn-info {
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.perigee-btn-danger {
    background-color: #d63638;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.perigee-btn-danger:hover {
    background-color: #b32d2e;
}

.perigee-btn-warning {
    background-color: #f0ad4e;
    color: #4e3108;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.perigee-btn-warning:hover {
    background-color: #ec971f;
}

.perigee-btn-outline {
    background-color: transparent;
    color: #2271b1;
    border: 2px solid #2271b1;
    padding: 10px 22px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.perigee-btn-outline:hover {
    background-color: #2271b1;
    color: white;
}

.perigee-btn-sm {
    background-color: #2271b1;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.perigee-btn-sm:hover {
    background-color: #135e96;
}

.perigee-btn-lg {
    background-color: #2271b1;
    color: white;
    border: none;
    padding: 16px 32px;
    font-size: 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.perigee-btn-lg:hover {
    background-color: #135e96;
}

.perigee-btn-disabled {
    background-color: #f0f0f1;
    color: #8c8f94;
    border: 1px solid #dcdcde;
    padding: 11px 23px;
    font-size: 16px;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Submit button style for forms */
.perigee-submit-btn {
    background-color: #2271b1;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.perigee-submit-btn:hover {
    background-color: #135e96;
}

/* Button with icon */
.perigee-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Full width button */
.perigee-btn-full {
    width: 100%;
    text-align: center;
}

/* Buttons END */

.m-xs {
    margin: 0.25rem;
}

.p-xs {
    padding: 0.25rem;
}

.px-sm {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.py-sm {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.mx-xs {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

/* All sides */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 1rem;
}

.m-4 {
    margin: 1.5rem;
}

.m-5 {
    margin: 3rem;
}

/* Margin Top */
.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mt-5 {
    margin-top: 3rem;
}

/* Margin Right */
.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 1rem;
}

/* Margin Bottom */
.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

/* Margin Left */
.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 1rem;
}

/* Horizontal (left & right) */
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

/* Vertical (top & bottom) */
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}


/* All sides */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 1rem;
}

/* Padding Top */
.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

/* Padding Right */
.pr-0 {
    padding-right: 0;
}

.pr-1 {
    padding-right: 0.25rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

/* Padding Bottom */
.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

/* Padding Left */
.pl-0 {
    padding-left: 0;
}

.pl-1 {
    padding-left: 0.25rem;
}

.pl-2 {
    padding-left: 0.5rem;
}

/* Horizontal (left & right) */
.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Vertical (top & bottom) */
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}


/* Base Button */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    vertical-align: middle;
}

/* Primary Button */
.btn-primary {
    background-color: #2271b1;
    color: white;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #135e96;
}

/* Secondary Button */
.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #5a6268;
}

/* Outline Button */
.btn-outline {
    background-color: transparent;
    color: #2271b1;
    border: 2px solid #2271b1;
}

.btn-outline:hover,
.btn-outline:focus {
    background-color: #2271b1;
    color: white;
}

/* Ghost Button */
.btn-ghost {
    background-color: transparent;
    color: #2271b1;
}

.btn-ghost:hover,
.btn-ghost:focus {
    background-color: rgba(34, 113, 177, 0.1);
}

/* Danger Button */
.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #c82333;
}

/* Sizes */
.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 18px;
}

/* Disabled State */
.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* Block Button */
.btn-block {
    display: block;
    width: 100%;
}


/* Form Section Expand/Collapse Styles START */

/* Global controls container */
.section-global-controls {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem;
    background: #f8f9ff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Global control buttons */
.global-control-btn {
    padding: 0.625rem 1.25rem;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.global-control-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.global-control-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.global-control-btn:focus {
    outline: 2px solid #4361ee;
    outline-offset: 2px;
}

/* Specific button colors */
.collapse-all-btn {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
}

.expand-all-btn {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
}

/* Status indicator */
.section-status {
    margin-left: auto;
    padding: 0.5rem;
    font-size: 0.875rem;
    color: #4a5568;
    font-weight: 500;
}

/* Toggle button styling */
.form-section-heading {
    cursor: pointer;
    padding-right: 2.5rem !important;
    position: relative;
    transition: color 0.2s ease;
}

.form-section-heading:hover {
    color: #4361ee;
}

.section-toggle-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 0.875rem;
    cursor: pointer;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    color: #718096;
    background: rgba(66, 153, 225, 0.1);
}

.section-toggle-btn:hover {
    background: rgba(66, 153, 225, 0.2);
    color: #4361ee;
}

.section-toggle-btn:focus {
    outline: 2px solid #4361ee;
    outline-offset: 2px;
    background: rgba(66, 153, 225, 0.3);
}

/* Toggle icon animation */
.toggle-icon {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.75rem;
}

.section-toggle-btn[aria-expanded="false"] .toggle-icon {
    transform: rotate(-90deg);
}

/* Collapsed state styling */
.form-section.collapsed {
    background: #f8f9fa;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    opacity: 0.9;
}

.form-section.collapsed:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-section.collapsed .form-section-heading {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.75rem;
    margin-bottom: 0;
}

/* Content wrapper for animation */
.form-section-content {
    /* Remove overflow: hidden from here */
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
}

.form-section.collapsed .form-section-content {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    /* Keep here only for collapsed state */
}

.form-section:not(.collapsed) .form-section-content {
    opacity: 1;
    max-height: none;
    margin-top: 1rem;
    overflow: visible;
    /* Add this */
}

/* Remove underline effect for collapsed sections */
.form-section.collapsed h1.form-section-heading::after,
.form-section.collapsed h2.form-section-heading::after,
.form-section.collapsed h3.form-section-heading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #a0aec0, #cbd5e0);
    border-radius: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Print styles - hide controls */
@media print {

    .section-global-controls,
    .section-toggle-btn {
        display: none !important;
    }

    .form-section-heading {
        padding-right: 0 !important;
        cursor: default !important;
    }

    .form-section-content {
        display: block !important;
        opacity: 1 !important;
        max-height: none !important;
    }

    .form-section {
        break-inside: avoid;
        box-shadow: none !important;
        background: white !important;
        border: 1px solid #ccc !important;
    }

    .form-section.collapsed {
        background: white !important;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .section-global-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
        margin-bottom: 1rem;
    }

    .section-status {
        margin-left: 0;
        text-align: center;
        order: 3;
        padding: 0.5rem 0;
    }

    .form-section-heading {
        padding-right: 2rem !important;
        font-size: 1.25rem;
    }

    .section-toggle-btn {
        right: 0.5rem;
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }

    .global-control-btn {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1rem;
    }
}

/* Form Section Expand/Collapse Styles END */


/* Polling and Export Result Styles START */
.export-result-holder {
    margin-top: 0.5rem;
    margin-bottom: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.export-result-message {
    padding: 10px;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.export-result-message.export-processing {
    background-color: #e8f4fd;
    border: 1px solid #b6d7fd;
    color: #004085;
}

.export-result-message.export-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.export-result-message.export-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.export-result-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #333;
}

.export-result-content {
    background: white;
    max-height: 500px;
    overflow-y: auto;
}

.polling-status {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.polling-status .spinner {
    float: none;
    margin: 0;
}

/* Polling and Export Result Styles END */

/* Simple secondary button for anchors */
a.button-secondary {
    background-color: #f0f0f1;
    color: #2271b1;
    border: 1px solid #8c8f94;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-weight: normal;
    text-align: center;
}

a.button-secondary:hover {
    background-color: #e0e0e1;
    border-color: #787c82;
    color: #135e96;
    text-decoration: none;
}

/* Grid START */

/* Base grid container */
.container {
    width: 100%;
    padding-right: 1rem;
    /* 15px */
    padding-left: 1rem;
    /* 15px */
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

/* Responsive container widths */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Fluid container (full width) */
.container-fluid {
    width: 100%;
    padding-right: 1rem;
    /* 15px */
    padding-left: 1rem;
    /* 15px */
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

/* Grid row */
.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 2rem;
    margin: 0;
}

/* Column base styles */
[class*="col-"] {
    min-height: 1px;
    padding: 0;
    box-sizing: border-box;
}

/* Column spans - from 1 to 12 */
.col-1 {
    grid-column: span 1;
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}

.col-5 {
    grid-column: span 5;
}

.col-6 {
    grid-column: span 6;
}

.col-7 {
    grid-column: span 7;
}

.col-8 {
    grid-column: span 8;
}

.col-9 {
    grid-column: span 9;
}

.col-10 {
    grid-column: span 10;
}

.col-11 {
    grid-column: span 11;
}

.col-12 {
    grid-column: span 12;
}

/* Responsive breakpoints */
@media (min-width: 576px) {
    .col-sm-1 {
        grid-column: span 1;
    }

    .col-sm-2 {
        grid-column: span 2;
    }

    .col-sm-3 {
        grid-column: span 3;
    }

    .col-sm-4 {
        grid-column: span 4;
    }

    .col-sm-5 {
        grid-column: span 5;
    }

    .col-sm-6 {
        grid-column: span 6;
    }

    .col-sm-7 {
        grid-column: span 7;
    }

    .col-sm-8 {
        grid-column: span 8;
    }

    .col-sm-9 {
        grid-column: span 9;
    }

    .col-sm-10 {
        grid-column: span 10;
    }

    .col-sm-11 {
        grid-column: span 11;
    }

    .col-sm-12 {
        grid-column: span 12;
    }
}

@media (min-width: 768px) {
    .col-md-1 {
        grid-column: span 1;
    }

    .col-md-2 {
        grid-column: span 2;
    }

    .col-md-3 {
        grid-column: span 3;
    }

    .col-md-4 {
        grid-column: span 4;
    }

    .col-md-5 {
        grid-column: span 5;
    }

    .col-md-6 {
        grid-column: span 6;
    }

    .col-md-7 {
        grid-column: span 7;
    }

    .col-md-8 {
        grid-column: span 8;
    }

    .col-md-9 {
        grid-column: span 9;
    }

    .col-md-10 {
        grid-column: span 10;
    }

    .col-md-11 {
        grid-column: span 11;
    }

    .col-md-12 {
        grid-column: span 12;
    }
}

@media (min-width: 992px) {
    .col-lg-1 {
        grid-column: span 1;
    }

    .col-lg-2 {
        grid-column: span 2;
    }

    .col-lg-3 {
        grid-column: span 3;
    }

    .col-lg-4 {
        grid-column: span 4;
    }

    .col-lg-5 {
        grid-column: span 5;
    }

    .col-lg-6 {
        grid-column: span 6;
    }

    .col-lg-7 {
        grid-column: span 7;
    }

    .col-lg-8 {
        grid-column: span 8;
    }

    .col-lg-9 {
        grid-column: span 9;
    }

    .col-lg-10 {
        grid-column: span 10;
    }

    .col-lg-11 {
        grid-column: span 11;
    }

    .col-lg-12 {
        grid-column: span 12;
    }
}

@media (min-width: 1200px) {
    .col-xl-1 {
        grid-column: span 1;
    }

    .col-xl-2 {
        grid-column: span 2;
    }

    .col-xl-3 {
        grid-column: span 3;
    }

    .col-xl-4 {
        grid-column: span 4;
    }

    .col-xl-5 {
        grid-column: span 5;
    }

    .col-xl-6 {
        grid-column: span 6;
    }

    .col-xl-7 {
        grid-column: span 7;
    }

    .col-xl-8 {
        grid-column: span 8;
    }

    .col-xl-9 {
        grid-column: span 9;
    }

    .col-xl-10 {
        grid-column: span 10;
    }

    .col-xl-11 {
        grid-column: span 11;
    }

    .col-xl-12 {
        grid-column: span 12;
    }
}

/* Optional: Column offsets */
.offset-1 {
    grid-column-start: 2;
}

.offset-2 {
    grid-column-start: 3;
}

.offset-3 {
    grid-column-start: 4;
}

.offset-4 {
    grid-column-start: 5;
}

.offset-5 {
    grid-column-start: 6;
}

.offset-6 {
    grid-column-start: 7;
}

.offset-7 {
    grid-column-start: 8;
}

.offset-8 {
    grid-column-start: 9;
}

.offset-9 {
    grid-column-start: 10;
}

.offset-10 {
    grid-column-start: 11;
}

.offset-11 {
    grid-column-start: 12;
}

/* Optional: Remove gutters */
.row.no-gutters {
    gap: 0;
}

/* Optional: Column ordering */
.order-first {
    order: -1;
}

.order-last {
    order: 13;
}

.order-0 {
    order: 0;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-6 {
    order: 6;
}

.order-7 {
    order: 7;
}

.order-8 {
    order: 8;
}

.order-9 {
    order: 9;
}

.order-10 {
    order: 10;
}

.order-11 {
    order: 11;
}

.order-12 {
    order: 12;
}

/* Grid END */


/* Base class for visually disabled elements START */
.visually-disabled {
    opacity: 0.6;
    background-color: #f5f5f5;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

/* Alternative class that allows text selection but prevents interaction */
.visually-disabled-soft {
    opacity: 0.7;
    background-color: #f9f9f9;
    cursor: default;
    pointer-events: none;
}

/* Class specifically for select elements */
select.visually-disabled,
select.visually-disabled-soft {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #666;
    border-color: #d9d9d9;
}

/* Class for input elements */
input.visually-disabled,
input.visually-disabled-soft {
    color: #666;
    border-color: #d9d9d9;
}

/* Class for button elements */
button.visually-disabled,
button.visually-disabled-soft {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Class for textarea elements */
textarea.visually-disabled,
textarea.visually-disabled-soft {
    color: #666;
    border-color: #d9d9d9;
    resize: none;
}

/* Optional: Add a subtle pattern or texture */
.visually-disabled-pattern {
    opacity: 0.6;
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(0, 0, 0, 0.02) 10px,
            rgba(0, 0, 0, 0.02) 20px);
    cursor: not-allowed;
    pointer-events: none;
}

/* Focus states - remove focus ring when disabled-looking */
.visually-disabled:focus,
.visually-disabled-soft:focus {
    outline: none;
    box-shadow: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .visually-disabled {
        background-color: #2a2a2a;
        color: #999;
    }

    .visually-disabled-soft {
        background-color: #2a2a2a;
        color: #999;
    }
}

/* Base class for visually disabled elements END */

.hidden {
    display: none !important;
}

/* GALLERY START */
/* Modern Gallery Grid CSS - Using Class for Reusability */
.gallery-grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 1.5rem !important;
    padding: 1rem !important;
    background-color: #f8fafc;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure each gallery item takes full width of its grid cell */
.gallery_image_holder {
    background: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    box-sizing: border-box !important;
}

.gallery_image_holder:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

/* Target the image container by class */
.gallery_image_holder .image-container {
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eef2ff;
    min-height: 200px;
}

.gallery_image_holder .image-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
}

.gallery_image {
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.gallery_image_holder .note {
    text-align: center;
    padding: 0.5rem 1rem;
    margin: 0.5rem 1rem;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    color: #92400e;
    word-wrap: break-word;
}

/* Status Bar */
.border-t-2 {
    border-top: 2px solid #eef2ff;
    background-color: #fafcff;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    border-bottom: 1px solid #eef2ff;
}

.status-gallery-item-active {
    background-color: #10b981;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.status-gallery-item-active::before {
    content: "●";
    font-size: 0.55rem;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.status-gallery-item-inactive {
    background-color: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.status-gallery-item-inactive::before {
    content: "●";
    font-size: 0.55rem;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.status-gallery-item-pending {
    background-color: #f59e0b;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.status-gallery-item-pending::before {
    content: "●";
    font-size: 0.55rem;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.delete-media-link,
.edit-media {
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    cursor: pointer;
}

.delete-media-link {
    color: #ef4444;
    background-color: #fef2f2;
    border: 1px solid #fee2e2;
}

.delete-media-link:hover {
    background-color: #fee2e2;
    color: #dc2626;
    transform: scale(0.98);
}

.edit-media {
    color: #3b82f6;
    background-color: #eff6ff;
    border: 1px solid #dbeafe;
}

.edit-media:hover {
    background-color: #dbeafe;
    color: #2563eb;
}

/* Filename Link */
.gallery_image_holder>div:nth-child(3) {
    padding: 0.75rem 1rem 0.25rem;
}

.gallery_image_holder>div:nth-child(3) a {
    font-size: 0.85rem;
    color: #4b5563;
    text-decoration: none;
    word-break: break-all;
    background: #f9fafb;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.2s;
}

.gallery_image_holder>div:nth-child(3) a:hover {
    background: #eef2ff;
    color: #1f2937;
    text-decoration: underline;
}

/* Alt & Description */
.sub-heading-1 {
    font-weight: 600;
    color: #0f172a;
    font-size: 1rem;
    background: #f1f5f9;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    display: inline-block;
}

.gallery_image_holder>div:nth-child(4) {
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #334155;
}

/* Custom Tags (Cartoon Candy, African Group, etc) */
.label-info,
.label-info-1 {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    background: #eef2ff;
    color: #1e40af;
    letter-spacing: -0.01em;
    transition: all 0.2s;
    margin: 0.125rem 0;
}

.label-info {
    background: #e0e7ff;
    color: #3730a3;
    border-left: 2px solid #818cf8;
}

.label-info-1 {
    background: #f3e8ff;
    color: #7e22ce;
    border-left: 2px solid #c084fc;
}

/* Last container (bottom border) */
.border-b-2 {
    border-top: 1px solid #f0f2f5;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fefefe;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* Empty divs - hide them */
.gallery_image_holder>div:empty {
    display: none;
}

/* Filter Header Styles */
.filter_header {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2ff;
}

.filter_header_item {
    padding: 0.375rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.mdc-bg-red-A100 {
    background-color: #fee2e2;
    color: #991b1b;
}

.mdc-bg-orange-A100 {
    background-color: #ffedd5;
    color: #9a3412;
}

.mdc-bg-yellow-A100 {
    background-color: #fef9c3;
    color: #854d0e;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery-grid-container {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0.75rem !important;
    }

    .gallery_image {
        aspect-ratio: 16 / 9;
    }

    .filter_header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .filter_header_item {
        display: inline-block;
        width: fit-content;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .gallery-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    }
}

@media (min-width: 1025px) {
    .gallery-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    }
}

.status-clickable {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.status-clickable:hover {
    opacity: 0.7;
}

/* Rotation buttons container - positioned above lightbox */
.glightbox-rotate-buttons {
    position: fixed;
    bottom: 90px;
    /* Increased from 30px to move above captions */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999999 !important;
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    border-radius: 50px;
    backdrop-filter: blur(8px);
}

/* Individual rotation buttons */
.glightbox-rotate-btn {
    background: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    /* Ensure button clicks register */
}

.glightbox-rotate-btn:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.glightbox-rotate-btn:active {
    transform: scale(0.95);
}

/* Rotation angle indicator */
.rotation-angle {
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    min-width: 45px;
    text-align: center;
    font-family: monospace;
}

/* Gallery END */


/* Loading indicator for multiple-select search input */
.ms-search.loading-indicator {
    position: relative;
}

.ms-search.loading-indicator::after {
    content: '⟳';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: bold;
    color: #0073aa;
    animation: spin 1s linear infinite;
    pointer-events: none;
    z-index: 10;
}

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

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Add padding to input so text doesn't overlap the spinner */
.ms-search input {
    padding-right: 35px !important;
}

.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.spinner-text {
    margin-top: 1em;
    color: #3498db;
}

/* tempus dominus START */
/* Make the arrow icons visible and interactive */
.tempus-dominus-widget [data-action="incrementHours"] i.fa-arrow-up,
.tempus-dominus-widget [data-action="incrementMinutes"] i.fa-arrow-up,
.tempus-dominus-widget [data-action="decrementHours"] i.fa-arrow-down,
.tempus-dominus-widget [data-action="decrementMinutes"] i.fa-arrow-down {
    font-family: monospace;
    font-style: normal;
    font-size: 1.2em;
    /* Slightly larger */
    font-weight: bold;
    display: inline-block;
    width: 100%;
    text-align: center;
    color: currentColor;
    /* Inherit text colour from parent */
    opacity: 0.8;
    /* Slight visibility, but not overwhelming */
}

/* For hover / interactivity – improve contrast */
.tempus-dominus-widget [data-action="incrementHours"]:hover i.fa-arrow-up,
.tempus-dominus-widget [data-action="incrementMinutes"]:hover i.fa-arrow-up,
.tempus-dominus-widget [data-action="decrementHours"]:hover i.fa-arrow-down,
.tempus-dominus-widget [data-action="decrementMinutes"]:hover i.fa-arrow-down {
    opacity: 1;
    color: var(--td-active-bg, #0d6efd);
    /* Theme colour on hover */
}

/* For dark theme separately (if needed) */
.tempus-dominus-widget.dark [data-action="incrementHours"] i.fa-arrow-up::before,
.tempus-dominus-widget.dark [data-action="incrementMinutes"] i.fa-arrow-up::before,
.tempus-dominus-widget.dark [data-action="decrementHours"] i.fa-arrow-down::before,
.tempus-dominus-widget.dark [data-action="decrementMinutes"] i.fa-arrow-down::before {
    color: var(--td-dark-font-color, #e3e3e3);
    /* Light colour on dark bg */
}

/* The actual triangle characters */
.tempus-dominus-widget [data-action="incrementHours"] i.fa-arrow-up::before,
.tempus-dominus-widget [data-action="incrementMinutes"] i.fa-arrow-up::before {
    content: "▲";
}

.tempus-dominus-widget [data-action="decrementHours"] i.fa-arrow-down::before,
.tempus-dominus-widget [data-action="decrementMinutes"] i.fa-arrow-down::before {
    content: "▼";
}

/* tempus dominus END */

/* Actions cell styling for task table */
.task-table-actions-cell {
    padding: 0 !important;
}

/* ============================================
   Task Header & Response Styles (Replaces Bootstrap + Inline Styles) START
   ============================================ */

/* Task header table - matches response-panel exactly */
.task-header-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Remove default table borders */
.task-header-table td {
    border: none;
}

/* Title row - matches response-panel-heading */
.task-header-title-row td {
    padding: 15px 15px 12px 15px;
    color: #333333;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    text-align: left;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

/* First row - ensure top corners are rounded */
.task-header-title-row:first-child td:first-child {
    border-top-left-radius: 4px;
}

.task-header-title-row:first-child td:last-child {
    border-top-right-radius: 4px;
}

/* Item rows - matches response-panel-body */
.task-header-item-row td {
    color: #555555;
    font-size: 16px;
    line-height: 1.5;
    font-weight: normal;
    text-align: left;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
}

/* Last item row - remove border and round bottom corners */
.task-header-item-row:last-child td {
    border-bottom: none;
    padding-bottom: 15px;
}

.task-header-item-row:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

.task-header-item-row:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

/* Label styling within item rows - matches .color-p */
.task-header-item-row td strong,
.task-header-item-row td .task-label {
    color: #df532c;
    font-weight: 600;
    margin-right: 8px;
    min-width: 180px;
    display: inline-block;
}

/* Value styling */
.task-header-item-row td .task-value {
    color: #555555;
    font-weight: normal;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .task-header-title-row td {
        padding: 12px 12px 10px 12px;
        font-size: 18px;
    }

    .task-header-item-row td {
        padding: 10px 12px;
        font-size: 14px;
    }

    .task-header-item-row:last-child td {
        padding-bottom: 12px;
    }

    .task-header-item-row td strong,
    .task-header-item-row td .task-label {
        min-width: 130px;
    }
}

/* Response Panel (replaces Bootstrap panel) */
.response-panel {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.response-panel-heading {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.response-panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.response-panel-body {
    padding: 15px;
}

/* Response content styles */
.response-status,
.response-response,
.response-platform {
    margin-bottom: 10px;
}

.color-p {
    color: #df532c;
    font-weight: 600;
}

/* Notes container */
.response-notes-container {
    width: 99%;
    overflow-y: auto;
    height: 100px;
    background: #e1e1e1;
    padding: 1rem;
    margin-top: 8px;
    box-sizing: border-box;
}

/* Images container */
.response-images-container {
    margin-top: 8px;
}

.response-image {
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
    display: block;
}

/* ============================================
   Task Header & Response Styles (Replaces Bootstrap + Inline Styles) END
   ============================================ */

/* ============================================
Generic Dropdown System - No Bootstrap - START
============================================ */

/* Base dropdown container (for JS version) */
.dropdown {
    position: relative;
    display: inline-block;
}

/* For details-based dropdown (native HTML) */
details.dropdown {
    display: inline-block;
    position: relative;
}

/* Hide the default triangle marker in all browsers */
details.dropdown summary {
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

details.dropdown summary::-webkit-details-marker {
    display: none;
}

/* The toggle button style (can be overridden) */
.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

/* Caret (down arrow) - generic, reusable */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* Dropdown menu - hidden by default */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    list-style: none;
    text-align: left;
}

/* Show menu when JS adds .open class */
.dropdown.open .dropdown-menu {
    display: block;
}

/* Show menu when <details> is open */
details.dropdown[open] .dropdown-menu {
    display: block;
}

/* Menu items */
.dropdown-menu li {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background-color: #f5f5f5;
}

/* Divider */
.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

/* Optional: right-aligned dropdown */
.dropdown-menu-right {
    left: auto;
    right: 0;
}

/* Responsive: on small screens, make dropdown full width */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
    }

    .dropdown.open .dropdown-menu,
    details.dropdown[open] .dropdown-menu {
        display: block;
    }
}

/* ============================================
Generic Dropdown System - No Bootstrap - END
============================================ */


/* Simple notes styling using your existing utility classes - START */
.note {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.note:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

.note .row:first-child {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.note p {
    margin: 0;
    font-size: 0.875rem;
    color: #6c757d;
}

.highlight-text {
    font-weight: 600;
    color: #2271b1;
    background: #f0f7ff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.title-text {
    font-weight: 600;
    color: #2271b1;
    background: #f0f7ff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.note .col-12:last-child {
    color: #495057;
    font-size: 0.875rem;
    padding: 0.25rem 0;
}

#form_notes_holder {
    margin-top: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

/* Simple notes styling using your existing utility classes - END */

/* TASKS: PENDING, UNATTENDED, COULD NOT COMPLETE, COMPLETED, SUCCESSFUL, EXPIRED */
.response-text-pending {
    color: #856404;
}

.response-text-unattended {
    color: #383d41;
}

.response-text-could-not-complete {
    color: #721c24;
}

.response-text-completed {
    color: #155724;
}

.response-text-successful {
    color: #155724;
}

.response-text-expired {
    color: #721c24;
}

/* FORMS: APPROVED, DECLINED, DUPLICATE, REAPPROVE */
.response-text-approved {
    color: #155724;
}

.response-text-declined {
    color: #721c24;
}

.response-text-duplicate {
    color: #856404;
}

.response-text-reapprove {
    color: #004085;
}

/* Edit form response START */
.rmso-element-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rmso-list-item {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.rmso-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rmso-item-text {
    flex: 1;
}

.rmso-item-value {
    color: #666;
    font-size: 0.9em;
}

.btn-remove-option {
    color: #dc3545;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 0 5px;
}

.btn-remove-option:hover {
    color: #c82333;
}

.remove-icon {
    font-size: 20px;
}
/* Edit form response END */


/* Comprehensive FilePond credit hiding */
.filepond--credits,
.filepond--credits-link,
a.filepond--credits,
[class*="credits"],
[href*="pqina.nl"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: -1 !important;
}

/* Form Builder START */
.form_builder_container {
    padding-left: 0.5em;
    padding-right: 0.5em;
    width: 99%;
    background-color: #eeeeee;
    border-radius: 5px;
}

.form-wrap.form-builder .frmb .form-field .form-group {
    width: 98% !important;
}

.form-wrap.form-builder .frmb > li {
    border: 1px solid #c5c5c5;
    margin-bottom: 6px !important;
}

.form-builder-element-number {
    padding: 0.25rem;
    margin-right: 0.5rem;
    background-color: #ffd6cc;
}

.ui-sortable-handle {
    cursor: move;
}
.ui-state-highlight {
    height: 60px;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    margin: 10px 0;
}
/* Form Builder END */

/* Add Form: Preloaded form contents START */
.multiple_select_store_data_processing {
    width: 99%;
    height: auto;
    min-height: 25rem;
}

.user-mapping-item {
    margin: 0.5rem;
    padding: 0.5rem;
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
}

.user-mapping-item-remove {
    display: inline-block;
    padding: 0.5rem;
    margin: 0.5rem;
    background-color: #f1f1f1;
}

.user-mapping-item-remove:hover {
    cursor: pointer;
}
/* Add Form: Preloaded form contents END */

/* Form groups and conditions START */
#groups-and-conditions-list-holder {
    background-color: #eeeeee;
    padding: 0.5rem;
    min-height: 388px;
    border-radius: 5px;
}

.form-elements-sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.form-elements-sortable li {
    margin-bottom: 0.25rem;
    padding: 1rem;
    border-radius: 5px;

    background: #fff;
    border: 1px solid #c5c5c5;
}

.form-elements-sortable li:hover {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.1),0 0 8px rgba(102,175,233,0.6);
    cursor: grab;
}

.default-cursor li:hover {
    cursor: default;
}

.group-children-container .form-elements-group-list {
    padding: 1.25rem;
    height: 100%;
}

.group-children-container-footer {
    margin-left: 2rem;
    margin-top: 0.25rem;
}

.form-elements-sortable-btn {
    display: inline-block;
    width: 32px;
    padding-right: 6px;
    border-radius: 0;
    border-bottom-left-radius: 0px;
    border-color: #c5c5c5;
    background-color: #fff;
    color: #c5c5c5;
    font-size: 16px;
    border-width: 0 0 1px 1px;
}

.groupable-element-header {
    padding: 0.25rem;
}

.group-body-outer {
    display:flex;
}

.group-body-spacer {
    width: 1rem;
}

.group-body-border {
    border-left: 1px solid #c5c5c5; 
    border-bottom: 1px solid #c5c5c5;
}

:root {
    /* Level 0 - Pastel Blue (lighter) */
    --nesting-bg-level-0: #c5efff;
    --nesting-border-level-0: #7fd4f9;
    
    /* Level 1 - Pastel Green (lighter) */
    --nesting-bg-level-1: #d8f0d9;
    --nesting-border-level-1: #9ed6a0;
    
    /* Level 2 - Pastel Yellow (lighter) */
    --nesting-bg-level-2: #fffde7;
    --nesting-border-level-2: #fff9a3;
    
    /* Level 3 - Pastel Purple (lighter) */
    --nesting-bg-level-3: #efd4f5;
    --nesting-border-level-3: #e1adeb;
    
    /* Level 4 - Pastel Pink (lighter) */
    --nesting-bg-level-4: #ffd6e4;
    --nesting-border-level-4: #fbb0ca;
    
    /* Level 5 - Pastel Orange (lighter) */
    --nesting-bg-level-5: #fff0da;
    --nesting-border-level-5: #ffd092;
    
    /* Level 6 - Pastel Gray (lighter) */
    --nesting-bg-level-6: #fefefe;
    --nesting-border-level-6: #f0f0f0;
}

.group-body-content {
    flex-grow: 1; 
    border: 1px solid var(--nesting-border-level-0);
    border-radius: 5px;
    background: var(--nesting-bg-level-0);
}

/* Level 1 */
.group-children-container .group-body-content {
    background: var(--nesting-bg-level-1);
    border-color: var(--nesting-border-level-1);
}

/* Level 2 */
.group-children-container .group-children-container .group-body-content {
    background: var(--nesting-bg-level-2);
    border-color: var(--nesting-border-level-2);
}

/* Level 3 */
.group-children-container .group-children-container .group-children-container .group-body-content {
    background: var(--nesting-bg-level-3);
    border-color: var(--nesting-border-level-3);
}

/* Level 4 */
.group-children-container .group-children-container .group-children-container .group-children-container .group-body-content {
    background: var(--nesting-bg-level-4);
    border-color: var(--nesting-border-level-4);
}

/* Level 5 */
.group-children-container .group-children-container .group-children-container .group-children-container .group-children-container .group-body-content {
    background: var(--nesting-bg-level-5);
    border-color: var(--nesting-border-level-5);
}

/* Level 6 */
.group-children-container .group-children-container .group-children-container .group-children-container .group-children-container .group-children-container .group-body-content {
    background: var(--nesting-bg-level-6);
    border-color: var(--nesting-border-level-6);
}

/* Optional: Add this to your existing CSS to make room for collapse buttons */
.group-children-container-header {
    text-align: center;
    padding: 0.5rem;
}

.conditional-when-text {
    color: #f16032 !important;
}

.icon-delete-condition {
    padding-left: 1rem;
    padding-right: 1rem;
}

.inline-element {
    display: inline-block;
}

.inline-element-first {
    width: 6rem;
    display: inline-block;
}

.form-add-conditional-row {
    padding: 1rem;
    margin: 1rem;
    border: 1px solid #c1c1c1;
}
/* Form groups and conditions END */


/**
 * Element Header Actions START
 * Used in form builder to display field name and action buttons side by side
 */
.element-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Optional: Ensure the icon is properly sized */
.element-header-actions .icon {
    font-size: 1rem;
    line-height: 1;
}

/* Optional: Style the add conditional button */
.element-header-actions .btn-add-conditional {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.element-header-actions .btn-add-conditional:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
/* Element Header Actions END */

.form-builder-element-number {
    padding: 0.25rem;
    margin-right: 0.5rem;
    background-color: #ffd6cc;
}

/* form element numbering in the builder */
.form-wrap.form-builder .frmb li.form-field .field-label {
    display:inline-block !important;
}

.form-wrap.form-builder .frmb .form-field .form-group {
    width: 98% !important;
}

.form-wrap.form-builder .frmb > li {
    border: 1px solid #c5c5c5;
    margin-bottom: 6px !important;
}

.text-muted {
  font-size: 70%;
  color: #666;
  margin-top: 5px;
}

.help-block {
  font-size: 70%;
  color: #666;
}
/* Horizontal tabs */
.frontend-tabs-container.horizontal-tabs {
    margin: 20px 0;
}

.frontend-tabs-container.horizontal-tabs .frontend-tabs-headers {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.frontend-tabs-container.horizontal-tabs .frontend-tab-header {
    padding: 10px 20px;
    cursor: pointer;
    background: #f1f1f1;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.frontend-tabs-container.horizontal-tabs .frontend-tab-header.active {
    background: #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

/* Vertical tabs */
.frontend-tabs-container.vertical-tabs {
    display: flex;
    margin: 20px 0;
}

.frontend-tabs-container.vertical-tabs .frontend-tabs-headers {
    flex: 0 0 200px;
    border-right: 1px solid #ddd;
}

.frontend-tabs-container.vertical-tabs .frontend-tab-header {
    padding: 10px 15px;
    cursor: pointer;
    background: #f1f1f1;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 5px 0 0 5px;
}

.frontend-tabs-container.vertical-tabs .frontend-tab-header.active {
    background: #fff;
    border-right: 1px solid #fff;
    margin-right: -1px;
}

/* Common styles */
.frontend-tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ddd;
}

.horizontal-tabs .frontend-tab-content {
    border-top: none;
}

.vertical-tabs .frontend-tabs-contents {
    flex: 1;
}

.vertical-tabs .frontend-tab-content {
    border-left: none;
    height: 100%;
}

.frontend-tab-content.active {
    display: block;
}

.frontend-tabs-container .frontend-tabs-container {
    padding: 0;
}

/* Vertical tabs within horizontal tabs */
.horizontal-tabs .vertical-tabs {
    flex-direction: column;
}

.horizontal-tabs .vertical-tabs .frontend-tabs-headers {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid #ddd;
}

/* Horizontal tabs within vertical tabs */
.vertical-tabs .horizontal-tabs {
    margin-left: 0;
}

.vertical-tabs .horizontal-tabs .frontend-tabs-headers {
    border-bottom: 1px solid #ddd;
}

/* Style for tab header links */
/* Combined approach: icon + color + background */
.frontend-tab-header:has(.tab-header-link) {
    background: #f0f7ff;
    border-color: #c2d9f0;
}

.tab-header-link {
    color: #135e96;
    text-decoration: none;
    display: block;
    padding: inherit;
    margin: -10px -20px;
    padding: 10px 20px;
    padding-right: 30px;
    position: relative;
    font-weight: 500;
}

.tab-header-link::after {
    content: "↗";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.7;
}

.frontend-tab-header:hover:has(.tab-header-link) {
    background: #e1f0ff;
}

.frontend-tab-header.active:has(.tab-header-link) {
    background: #fff;
}

.frontend-tab-header.active:has(.tab-header-link) .tab-header-link {
    color: inherit;
}

.frontend-tab-header.active:has(.tab-header-link) .tab-header-link::after {
    display: none;
}

/* Add smooth transition for tab content */
.frontend-tab-content {
    transition: opacity 0.3s ease;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.frontend-tab-content.active {
    opacity: 1;
    height: auto;
    overflow: visible;
}

/* Hide tab headers */
.frontend-tab-header.hidden-tab {
    display: none !important;
}
.call-cycle-container {
    background-color: #f5f7fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.page-header-call-cycle {
    background: linear-gradient(135deg, #232d32, #2c3e50);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-call-cycle {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.card-call-cycle:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
}
.card-header-call-cycle {
    background: linear-gradient(to right, #232d32, #384951);
    color: white;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-bottom: none;
}
.card-body-call-cycle {
    padding: 1.5rem;
}
.template-item {
    display: flex;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #ddd;
    transition: all 0.3s ease;
}
.template-item:hover {
    background-color: #f8f9fa;
}
.template-item:last-child {
    border-bottom: none;
}
.template-icon {
    width: 40px;
    height: 40px;
    background-color: #384951;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: white;
}
.template-info {
    flex: 1;
}
.template-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.template-description {
    font-size: 0.85rem;
    color: #666;
}
.stores-input-container {
    background-color: #e8f4fc;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
}
.upload-area-call-cycle {
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    background-color: #fafafa;
}
.upload-area-call-cycle:hover, .upload-area-call-cycle.dragover {
    border-color: #232d32;
    background-color: rgba(52, 152, 219, 0.05);
}
.upload-icon {
    font-size: 3rem;
    color: #232d32;
    margin-bottom: 1rem;
}
.step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
    width: 100%;
}
.step-indicator::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #e0e0e0;
    z-index: 1;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}
.step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #666;
}
.step.active .step-number {
    background-color: #232d32;
    color: white;
}
.step-label {
    font-size: 0.85rem;
    font-weight: 500;
}
.feature-highlight {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.feature-icon {
    width: 30px;
    height: 30px;
    background-color: #2ecc71;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: white;
    font-size: 0.8rem;
}
@media (max-width: 768px) {
    .step-indicator {
        flex-direction: column;
        align-items: flex-start;
    }
    .step {
        flex-direction: row;
        margin-bottom: 1rem;
    }
    .step-number {
        margin-right: 1rem;
        margin-bottom: 0;
    }
    .step-indicator::before {
        display: none;
    }
}

/* ==========================================================
   CUSTOM FORMS DASHBOARD DESIGN
   Matches supplied Atomic Digital design reference
   Primary orange: #f1562a
   ========================================================== */

:root {
    --forms-orange: #f1562a;
    --forms-orange-dark: #d9471f;
    --forms-page-bg: #f5f5f5;
    --forms-surface: #ffffff;
    --forms-border: #dddddd;
    --forms-text: #111111;
    --forms-muted: #666666;
    --forms-radius: 14px;
}

/* Main forms area */
.perigee_plugin_list {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 28px 0 50px !important;
    background: var(--forms-page-bg) !important;
    color: var(--forms-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    box-shadow: none !important;
}

.perigee_plugin_list,
.perigee_plugin_list * {
    box-sizing: border-box;
}

/* Page heading */
.perigee_plugin_list h1,
.perigee_plugin_list h2,
.perigee_plugin_list h3 {
    color: #000 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.perigee_plugin_list h1:first-child,
.perigee_plugin_list h2:first-child,
.perigee_plugin_list h3:first-child {
    margin: 0 0 12px !important;
}

/* Top navigation tabs */
.frontend-tabs-container.horizontal-tabs {
    margin: 0 !important;
}

.frontend-tabs-container.horizontal-tabs > .frontend-tabs-headers,
.perigee_plugin_list .frontend-tabs-headers {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.frontend-tabs-container.horizontal-tabs > .frontend-tabs-headers > .frontend-tab-header,
.perigee_plugin_list .frontend-tabs-headers > .frontend-tab-header {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 8px 24px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #222222 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color .2s ease, color .2s ease, transform .2s ease !important;
}

.frontend-tabs-container.horizontal-tabs > .frontend-tabs-headers > .frontend-tab-header:hover,
.perigee_plugin_list .frontend-tabs-headers > .frontend-tab-header:hover {
    background: var(--forms-orange) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.frontend-tabs-container.horizontal-tabs > .frontend-tabs-headers > .frontend-tab-header.active,
.frontend-tabs-container.horizontal-tabs > .frontend-tabs-headers > .frontend-tab-header[aria-selected="true"],
.perigee_plugin_list .frontend-tabs-headers > .frontend-tab-header.active,
.perigee_plugin_list .frontend-tabs-headers > .frontend-tab-header[aria-selected="true"] {
    background: var(--forms-orange) !important;
    color: #ffffff !important;
    border: 0 !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.frontend-tab-header .tab-header-link,
.frontend-tab-header.active .tab-header-link,
.frontend-tab-header:hover .tab-header-link {
    color: inherit !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* Remove the old content card borders */
.frontend-tab-content,
.horizontal-tabs .frontend-tab-content {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Search label */
.table-search-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
}

.table-search-container label,
.perigee_plugin_list label[for*="search"] {
    flex: 0 0 100% !important;
    margin: 0 !important;
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Search field */
.table-search-input,
.perigee_plugin_list input[type="search"] {
    flex: 1 1 420px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 8px 14px 8px 38px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background-color: #ffffff !important;
    color: #222 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    outline: none !important;
}

.table-search-input:focus,
.perigee_plugin_list input[type="search"]:focus {
    border-color: var(--forms-orange) !important;
    box-shadow: 0 0 0 3px rgba(241, 86, 42, .12) !important;
}

/* Filter, reset and utility buttons near search */
.table-search-container button,
.perigee_plugin_list .filter-button,
.perigee_plugin_list button[class*="filter"],
.perigee_plugin_list .btn-filter {
    min-height: 34px !important;
    padding: 8px 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--forms-orange) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.table-search-container button:hover,
.perigee_plugin_list .filter-button:hover,
.perigee_plugin_list button[class*="filter"]:hover,
.perigee_plugin_list .btn-filter:hover {
    background: var(--forms-orange-dark) !important;
    color: #ffffff !important;
}

/* Table shell */
.table-renderer {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--forms-radius) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: none !important;
    table-layout: auto !important;
}

/* Orange table header */
.table-renderer thead,
.table-renderer thead tr {
    background: var(--forms-orange) !important;
}

.table-renderer th {
    height: 48px !important;
    min-height: 48px !important;
    padding: 13px 15px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: var(--forms-orange) !important;
    color: #ffffff !important;
    text-align: left !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.table-renderer th:first-child {
    border-top-left-radius: var(--forms-radius) !important;
}

.table-renderer th:last-child {
    border-top-right-radius: var(--forms-radius) !important;
}

.table-renderer th.sortable:hover {
    background: var(--forms-orange-dark) !important;
}

.table-renderer th .header-content,
.table-renderer th .header-text {
    color: #ffffff !important;
    min-height: 0 !important;
    margin: 0 !important;
}

/* Table rows */
.table-renderer tbody tr {
    background: #ffffff !important;
}

.table-renderer td {
    height: 52px !important;
    padding: 13px 15px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--forms-border) !important;
    background: #ffffff !important;
    color: #111111 !important;
    text-align: left !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.table-renderer tbody tr:last-child td {
    border-bottom: 0 !important;
}

.table-renderer tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--forms-radius) !important;
}

.table-renderer tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--forms-radius) !important;
}

.table-renderer tr:hover td {
    background: #fff7f4 !important;
}

/* Keep the options column compact */
.table-renderer th:last-child,
.table-renderer td:last-child {
    width: 42px !important;
    min-width: 42px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center !important;
}

/* Inputs inside table headers, when column filtering is enabled */
.table-filter-input {
    margin-top: 7px !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    color: #222 !important;
    box-shadow: none !important;
}

.table-filter-input:focus {
    border: 0 !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.28) !important;
}

/* Pagination */
.table-pagination {
    margin-top: 18px !important;
}

.table-pagination button {
    padding: 8px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #222 !important;
}

.table-pagination button:hover:not(:disabled),
.table-pagination button.active {
    background: var(--forms-orange) !important;
    color: #ffffff !important;
}

/* Mobile/tablet */
@media (max-width: 768px) {
    .perigee_plugin_list {
        padding: 20px 0 35px !important;
    }

    .frontend-tabs-container.horizontal-tabs > .frontend-tabs-headers,
    .perigee_plugin_list .frontend-tabs-headers {
        gap: 7px !important;
    }

    .frontend-tabs-container.horizontal-tabs > .frontend-tabs-headers > .frontend-tab-header,
    .perigee_plugin_list .frontend-tabs-headers > .frontend-tab-header {
        flex: 1 1 calc(50% - 7px) !important;
        padding: 9px 12px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .table-search-input,
    .perigee_plugin_list input[type="search"] {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .table-renderer {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-renderer th,
    .table-renderer td {
        padding: 12px !important;
    }
}


/* Only Multiple Select fields */
.field-element-wrapper select[multiple] {
    background: #ffffff !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 10px !important;
    color: #2d3748 !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
    transition: all .2s ease;
}

.field-element-wrapper select[multiple]:hover {
    border-color: #F1562A !important;
}

.field-element-wrapper select[multiple]:focus {
    border-color: #F1562A !important;
    box-shadow: 0 0 0 3px rgba(241,86,42,.15) !important;
    outline: none !important;
}

/* Override Elementor button styling ONLY inside Multiple Select */
.elementor-kit-6 .ms-parent.multiple-select button,
.elementor-kit-6 .ms-parent.multiple-select .ms-choice > div {
    background: transparent !important;
    border: none !important;
    color: #8b8b8b !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

/* Restore the field */
.elementor-kit-6 .ms-parent.multiple-select .ms-choice {
    background: #fff !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 10px !important;
    height: 46px !important;
    line-height: 46px !important;
    color: #2d3748 !important;
}

/* Global Button Styling */
.elementor-kit-6 button:not(.ms-choice),
.elementor-kit-6 input[type="button"],
.elementor-kit-6 input[type="submit"],
.elementor-kit-6 .elementor-button,
.perigee-btn-primary,
.perigee-btn-secondary,
.perigee-btn-success,
.perigee-btn-danger,
.perigee-btn-warning,
.perigee-submit-btn,
.field-buttons button,
.collapse-all-btn,
.expand-all-btn {

    background: #F1562A !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;

    padding: 10px 22px !important;
    min-height: 42px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    cursor: pointer;
    transition: all .25s ease;
    box-shadow: none !important;
}

.elementor-kit-6 button:not(.ms-choice):hover,
.elementor-kit-6 input[type="button"]:hover,
.elementor-kit-6 input[type="submit"]:hover,
.elementor-kit-6 .elementor-button:hover,
.perigee-btn-primary:hover,
.perigee-btn-secondary:hover,
.perigee-btn-success:hover,
.perigee-btn-danger:hover,
.perigee-btn-warning:hover,
.perigee-submit-btn:hover,
.field-buttons button:hover,
.collapse-all-btn:hover,
.expand-all-btn:hover {

    background: #d94b22 !important;
    transform: translateY(-1px);
}

.elementor-kit-6 button:not(.ms-choice):focus,
.elementor-kit-6 input[type="button"]:focus,
.elementor-kit-6 input[type="submit"]:focus,
.elementor-kit-6 .elementor-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(241,86,42,.2) !important;
}/* End custom CSS */