/* =============================================================================
   FlyChina Professional Design — Component Library (02 Components)
   Imported from Figma (file Z4ao4Tmh1dAEjrPAzEsyZj › 02 Components) via Figma
   MCP. Values are byte-exact to the Figma export in ..\FigmaStatic\css\
   components.css. The only change is a `.fc-figma` namespace on every selector,
   so the design-system generic classes (.btn, .field, .nav-item, …) don't
   collide with the app's existing Bootstrap `.btn` etc. Apply the class
   `fc-figma` on a container to opt an element subtree into the library.
   Depends on the tokens in css/design-tokens.css.
   ============================================================================= */

/* ---- Icon ---------------------------------------------------------------- */
.fc-figma .ds-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Button -------------------------------------------------------------- */
.fc-figma .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-20);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family-base);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.fc-figma .btn--sm { font-size: 12px; line-height: 16px; }
.fc-figma .btn--md { font-size: 14px; line-height: 20px; }
.fc-figma .btn--lg { font-size: 16px; line-height: 24px; }

/* Primary — slate fill, background-colored text */
.fc-figma .btn--primary {
    background: var(--color-primary);
    color: var(--color-background);
}
/* Action — CTA yellow fill, primary text */
.fc-figma .btn--action {
    background: var(--color-primary-action);
    color: var(--color-primary);
}
/* Outline — white, navy 2px border + navy text */
.fc-figma .btn--outline {
    background: var(--color-surface);
    border: 2px solid var(--color-primary-border);
    color: var(--color-primary-border);
}
/* Text Action — no fill, primary text */
.fc-figma .btn--text-action {
    background: transparent;
    color: var(--color-primary);
    padding-left: 0;
    padding-right: 0;
}

/* ---- Input / Field ------------------------------------------------------- */
.fc-figma .field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: var(--font-body-md);
    color: var(--color-text-primary);
}

.fc-figma .field__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-figma .field__trailing { margin-left: auto; opacity: .7; }

/* States */
.fc-figma .field--placeholder .field__text,
.fc-figma .field.is-placeholder .field__text { color: var(--color-text-placeholder); }

.fc-figma .field--focus,
.fc-figma .field.is-focus { border-color: var(--color-text-primary); }

.fc-figma .field--error,
.fc-figma .field.is-error {
    border-color: var(--color-error-border);
    color: var(--color-error);
}
.fc-figma .field--error .field__text { color: var(--color-error); }

/* ---- Navigation Item ----------------------------------------------------- */
.fc-figma .nav-item {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font: var(--font-navigation);
    color: var(--color-text-primary);
    text-decoration: none;
}

.fc-figma .nav-item__bar,
.fc-figma .active-bar {
    height: 4px;
    width: 100%;
    background: var(--color-primary-action);
    border-radius: var(--radius-pill);
}

/* ---- Action Item --------------------------------------------------------- */
.fc-figma .action-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font: var(--font-navigation);
    color: var(--color-text-primary);
    text-decoration: none;
    cursor: pointer;
}

/* ---- Icon Button --------------------------------------------------------- */
.fc-figma .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    color: var(--color-text-primary);
    cursor: pointer;
}

/* ---- Logo ---------------------------------------------------------------- */
.fc-figma .ds-logo { display: inline-flex; align-items: center; }
.fc-figma .ds-logo img { display: block; height: 40px; width: auto; }

/* ---- Hotel Search --------------------------------------------------------
   Desktop (default): single row, destination widest, submit at the right. */
.fc-figma .hotel-search {
    width: 100%;
    max-width: 1180px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);       /* 16 */
    box-shadow: var(--shadow-sm);
    padding: var(--space-16);
}

.fc-figma .hotel-search__fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-32);
}

.fc-figma .hotel-search__field { height: var(--space-48); }
.fc-figma .hotel-search__field .ds-icon { opacity: .9; }

.fc-figma .hotel-search__field--destination { flex: 2 1 260px; min-width: 0; }
.fc-figma .hotel-search__field--date,
.fc-figma .hotel-search__field--guests { flex: 1 1 160px; min-width: 0; }

/* Guests copy differs by breakpoint (desktop vs. tablet/mobile) */
.fc-figma .hotel-search .guests-compact { display: none; }

.fc-figma .hotel-search__submit {
    height: var(--space-48);               /* Figma desktop: 48 */
    padding: 0 var(--space-32);
    margin-left: auto;                     /* anchor right on desktop */
}

/* -- Tablet: destination on row 1, date + guests on row 2, submit full width. */
@media (max-width: 1023px) {
    .fc-figma .hotel-search {
        max-width: 700px;
        margin: 0 auto;
        padding: var(--space-16) var(--space-16) var(--space-24);
    }
    .fc-figma .hotel-search__fields { gap: var(--space-20); }
    .fc-figma .hotel-search__field--destination { flex: 1 1 100%; }
    .fc-figma .hotel-search__field--date,
    .fc-figma .hotel-search__field--guests { flex: 1 1 0; }
    .fc-figma .hotel-search__submit {
        flex: 1 1 100%;
        height: var(--space-52);           /* Figma tablet: 52 (Spacing/52) */
        padding: 0 var(--space-16);
        margin-left: 0;
    }
    .fc-figma .hotel-search .guests-full { display: none; }
    .fc-figma .hotel-search .guests-compact { display: inline; }
}

/* -- Mobile: everything stacked full width. */
@media (max-width: 670px) {
    .fc-figma .hotel-search { max-width: 100%; padding: var(--space-24) var(--space-16); }
    .fc-figma .hotel-search__fields {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-16);
    }
    .fc-figma .hotel-search__field { width: 100%; }
    .fc-figma .hotel-search__field--destination,
    .fc-figma .hotel-search__field--date,
    .fc-figma .hotel-search__field--guests { flex: 0 0 auto; }
    .fc-figma .hotel-search__submit {
        flex: 0 0 auto;                    /* keep fixed height in the column layout */
        width: 100%;
        height: var(--space-52);           /* Figma mobile: 52 (Spacing/52) */
    }
}