/* Hotel Visibility Banner */
.hotel-visibility-banner {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    gap: 40px;
    border-radius: 24px;
    border: 1px solid;
    margin-bottom: -16px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Unpublished state - Orange/Beige */
.hotel-visibility-banner.unpublished {
    background: #FFF7ED;
    border-color: #EDD0A7;
}

/* Published state - Green */
.hotel-visibility-banner.published {
    background: var(--green-100);
    border-color: var(--green-200);
}

/* Content wrapper */
.hotel-visibility-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    flex: 1;
}

/* Text content */
.hotel-visibility-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 0;
}

.hotel-visibility-text .body-text-medium {
    color: var(--black);
}

.hotel-visibility-text .body-text-regular {
    color: var(--gray-700);
}

/* Frame 2839 - Toggle section container */
.hotel-visibility-toggle {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
    margin: 0 auto;
    height: 48px;
    border-radius: 8px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Frame 2833 - Inner container */
.hotel-visibility-toggle-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 4px;
    height: 24px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Hidden (Offline) / Visible (Online) text */
.hotel-visibility-toggle .custom-toggle-text {
    height: 24px;
    font-family: 'Lufga';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 24px;
    color: var(--gray-700);
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Status text (Online/Offline) */
.hotel-visibility-banner.published .toggle-status {
    color: var(--green-400);
}

/* Offline status - Orange color */
.hotel-visibility-banner.unpublished .toggle-status.offline {
    color: #D97706;
}

/* Toggle base - uses styles from form.css */
.hotel-visibility-toggle .custom-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex: none;
    order: 1;
    flex-grow: 0;
}