/* BookingConfiguration Module Styles */

/* Hotel selector spacing */
.booking-config-hotel-selector {
    padding-bottom: var(--space-4);
}

/* Code type select container - gap-only spacing */
.code-type-select {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Selected code chips with star toggle */
.selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.selected-code-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--duration-150) var(--easing-out);
}

.selected-code-chip:hover {
    border-color: var(--border-strong);
    background: var(--bg-surface-hover);
}

.selected-code-chip.is-default {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.chip-code {
    color: var(--text-primary);
}

.chip-star {
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1;
}

.selected-code-chip.is-default .chip-star {
    color: var(--color-primary);
}

.selected-code-chip:hover .chip-star {
    color: var(--color-primary);
}

/* Uppercase text input for codes */
.input-uppercase {
    text-transform: uppercase;
}

/* Travel agent grid layout (4 unequal columns) */
.ta-grid-layout {
    grid-template-columns: 3fr 3fr 2fr 2fr;
}

/* Narrow mapping columns */
.mapping-column-narrow {
    max-width: var(--space-75);
}

/* Folio routing section */
.folio-routing-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.folio-panel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.folio-content {
    padding: var(--space-2) 0;
}

/* ============================================
   TEMPLATE WIDGETS
   ============================================ */

/* Guest type content layout - gap-only spacing */
.guest-type-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.template-widgets {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Template widget inner content (inside ExpandablePanel) */
.template-widget {
    display: flex;
    flex-direction: column;
}

/* Merge field bar styles: shared/components/merge-field-bar.css */

/* ============================================
   RICH TEXT EDITOR
   ============================================ */

.rich-text-editor-container {
    padding: var(--space-3) var(--space-4);
}

.rich-text-editor {
    min-height: 180px;
    padding: var(--space-3);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
    color: var(--text-body);
    white-space: pre-wrap;
    overflow-y: auto;
}

.rich-text-editor:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.rich-text-editor.disabled {
    background: var(--color-neutral-100);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Drop zone highlight when dragging merge fields */
.rich-text-editor.drag-over {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

/* ============================================
   SMS EDITOR & CHARACTER COUNTER
   ============================================ */

.sms-editor-container {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sms-textarea {
    width: 100%;
    min-height: 80px;
    padding: var(--space-3);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    line-height: var(--line-height-relaxed);
    color: var(--text-body);
    resize: vertical;
}

.sms-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.sms-textarea:disabled {
    background: var(--color-neutral-100);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Character counter */
.sms-counter {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sms-counter-bar {
    flex: 1;
    height: 4px;
    background: var(--border-subtle);
    border-radius: var(--border-radius-full);
    overflow: hidden;
}

.sms-counter-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--border-radius-full);
    transition: width var(--duration-150) var(--easing-out);
}

.sms-counter-text {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Warning state (>85% of limit) */
.sms-counter-warn .sms-counter-fill {
    background: var(--color-warning);
}

.sms-counter-warn .sms-counter-text {
    color: var(--color-warning);
}

/* Over limit */
.sms-counter-over .sms-counter-fill {
    background: var(--color-error);
}

.sms-counter-over .sms-counter-text {
    color: var(--color-error);
    font-weight: var(--font-weight-semibold);
}