/* =============================================================================
   bookingsmaker.com - "bmdefault" NEW THEME
   File: bm-tokens.css
   Purpose: Design tokens (colors, spacing, radius, shadow, type, motion) +
            web font / icon font imports + base skeleton-loading primitives
            shared by all "new GUI" pages: hotel-search, hotel-listing,
            hotel-detail, hotel-booking (desktop + mobile, combined responsive).

   SCOPE / STATUS (read me):
   - This file is NOT yet linked into any layout/asset bundle. It only takes
     effect once it is registered (a follow-up step, requires separate
     permission since it touches non-CSS files).
   - Values are derived from the new Stitch templates in
     _protected/bmapps/newtemplates/{website_view,mobile_view} using the
     homepage template (bm_homepage.html) as the canonical source of truth,
     since the shared header/footer are taken from the homepage design.
   - Every class introduced by this new theme is prefixed "bm-" (or is the
     Tabler Icons webfont class "ti") specifically to
     avoid colliding with Bootstrap 3.3.1 class names (.container, .row,
     .col-*, .navbar*, .btn*, .form-control, .badge, .label, .modal*,
     .pagination, .panel*, etc.) that are already loaded on every page via
     bmapps/themes/bmdefault/css/site.css -> bootstrap.min.css.
   - Bootstrap itself is untouched/not upgraded. No existing .js files are
     referenced or modified by this theme.
   ========================================================================== */

/* -----------------------------------------------------------------------
   Web fonts / icon font
   Manrope stays on the Google Fonts CDN. Tabler Icons 3.49.0 is self-hosted
   from css/tabler/ (registered by bmapps\assets\BmThemeAsset) so the
   outline webfont and the two filled glyphs do not depend on a third-party
   icon CDN.
   ----------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Size and alignment on top of the Tabler .ti webfont class. */
.ti {
  display: inline-block;
  font-size: 24px;
  vertical-align: middle;
}

/* -----------------------------------------------------------------------
   Design tokens
   ----------------------------------------------------------------------- */
:root {
  /* --- Color tokens (Material Design 3 style palette, canonical values
     taken from newtemplates/website_view/bm_homepage.html) ------------- */
  --bm-color-primary: #00030a;
  --bm-color-on-primary: #ffffff;
  --bm-color-primary-container: #0a1d37;
  --bm-color-on-primary-container: #7586a5;
  --bm-color-primary-fixed: #d6e3ff;
  --bm-color-primary-fixed-dim: #b6c7e9;
  --bm-color-on-primary-fixed: #081c36;
  --bm-color-on-primary-fixed-variant: #364763;
  --bm-color-inverse-primary: #b6c7e9;

  --bm-color-secondary: #1f7abb;         /* accent orange - links, active nav, prices */
  --bm-color-on-secondary: #ffffff;
  --bm-color-secondary-variant: #ffdcc3;
  --bm-color-secondary-container: #fd8f1a; /* CTA / button orange */
  --bm-color-on-secondary-container: #633300;
  --bm-color-on-secondary-container-variant: #904d00;
  --bm-color-secondary-fixed: #ffdcc3;
  --bm-color-secondary-fixed-dim: #ffb77c;
  --bm-color-on-secondary-fixed: #2f1500;
  --bm-color-on-secondary-fixed-variant: #6e3900;

  --bm-color-tertiary: #000407;
  --bm-color-on-tertiary: #ffffff;
  --bm-color-tertiary-container: #002030;
  --bm-color-on-tertiary-container: #008ec4; /* info / "verified" blue accents */
  --bm-color-tertiary-fixed: #c6e7ff;
  --bm-color-tertiary-fixed-dim: #81cfff;
  --bm-color-on-tertiary-fixed: #001e2d;
  --bm-color-on-tertiary-fixed-variant: #004c6b;
  --bm-color-tertiary-text: #196093;

  --bm-color-error: #ba1a1a;
  --bm-color-on-error: #ffffff;
  --bm-color-error-container: #ffdad6;
  --bm-color-on-error-container: #93000a;
  --bm-color-success: #16a34a;            /* not part of the MD3 export, added for
                                              confirmations / free-cancellation callouts */
  --bm-color-success-container: #ecfdf5;
  --bm-color-on-success-container: #065f46;

  --bm-color-background: #f8f9ff;
  --bm-color-on-background: #0b1c30;
  --bm-color-surface: #f8f9ff;
  --bm-color-on-surface: #0b1c30;
  --bm-color-on-surface-variant: #44474d;
  --bm-color-surface-variant: #d3e4fe;
  --bm-color-surface-dim: #cbdbf5;
  --bm-color-surface-bright: #f8f9ff;
  --bm-color-surface-container-lowest: #ffffff;
  --bm-color-surface-container-low: #eff4ff;
  --bm-color-surface-container: #e5eeff;
  --bm-color-surface-container-high: #dce9ff;
  --bm-color-surface-container-highest: #d3e4fe;
  --bm-color-inverse-surface: #213145;
  --bm-color-inverse-on-surface: #eaf1ff;
  --bm-nav-underline: #ad6267;
  --bm-color-outline: #75777e;
  --bm-color-outline-variant: #c5c6cf;
  --bm-color-shadow-variant: #e6e6e6;
  /* Convenience aliases used throughout component files */
  --bm-color-white: #ffffff;
  --bm-color-star: #f59e0b;

  /* --- Spacing scale (rem based, 1rem = 16px) -------------------------- */
  --bm-space-3xs: 0.25rem;   /* 4px */
  --bm-space-2xs: 0.5rem;    /* 8px  - "stack-sm" */
  --bm-space-xs: 0.75rem;    /* 12px */
  --bm-space-sm: 1rem;       /* 16px - "margin-mobile" */
  --bm-space-md: 1.5rem;     /* 24px - "stack-md" / "margin-x" */
  --bm-space-lg: 2rem;       /* 32px - "gutter" */
  --bm-space-xl: 3rem;       /* 48px - "stack-lg" */
  --bm-space-2xl: 5rem;      /* 80px - "section-padding" (desktop) */
  --bm-space-2xl-mobile: 3rem; /* 48px - reduced section padding on mobile */

  --bm-container-max: 1280px;
  --bm-container-padding-x: 1.5rem;
  --bm-container-padding-x-mobile: 1rem;

  /* --- Radius ------------------------------------------------------------
     The homepage template favors soft rounded corners while the listing /
     detail templates deliberately use sharp corners ("rounded-none") for a
     more editorial look. Both scales are provided; each component file
     picks the one matching its source template. */
  --bm-radius-sm: 0.25rem;   /* 4px */
  --bm-radius-md: 0.5rem;    /* 8px */
  --bm-radius-lg: 0.75rem;   /* 12px */
  --bm-radius-xl: 1rem;      /* 16px */
  --bm-radius-full: 9999px;
  --bm-radius-sharp: 0;

  /* --- Shadows ---------------------------------------------------------- */
  --bm-shadow-sm: 0 1px 2px rgba(11, 28, 48, 0.05);
  --bm-shadow-card: 0 2px 8px rgba(11, 28, 48, 0.05), 0 1px 2px rgba(11, 28, 48, 0.06);
  --bm-shadow-md: 0 4px 12px rgba(11, 28, 48, 0.08);
  --bm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --bm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --bm-shadow-search-card: 0 20px 40px rgba(10, 29, 55, 0.12);
  --bm-shadow-lift: 0 8px 24px rgba(11, 30, 54, 0.08);
  --bm-shadow-header: 0 0 8px rgba(175, 175, 183, 0.5);
  /* --- Typography --------------------------------------------------------
     Manrope is used as the single type family across desktop and mobile
     (the mobile mockups introduced "Noto Serif" / "Plus Jakarta Sans", but
     per project decision the theme keeps one consistent typeface). */
  --bm-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --bm-fs-display-lg: 48px;
  --bm-lh-display-lg: 56px;
  --bm-fs-headline-lg: 32px;
  --bm-lh-headline-lg: 40px;
  --bm-fs-headline-lg-mobile: 28px;
  --bm-lh-headline-lg-mobile: 36px;
  --bm-fs-headline-md: 24px;
  --bm-lh-headline-md: 32px;
  --bm-fs-headline-sm: 20px;
  --bm-lh-headline-sm: 28px;
  --bm-fs-body-lg: 18px;
  --bm-lh-body-lg: 28px;
  --bm-fs-body-md: 16px;
  --bm-lh-body-md: 24px;
  --bm-fs-label-md: 14px;
  --bm-lh-label-md: 20px;
  --bm-fs-label-sm: 14px;
  --bm-fs-label-sm2: 13px;
  --bm-lh-label-sm: 16px;
  --bm-fs-label-xs: 12px;
  --bm-fs-label-xss: 11px;
  --bm-fs-caption: 10px;
  --bm-lh-caption: 14px;

  /* --- Motion ------------------------------------------------------------ */
  --bm-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --bm-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --bm-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-index scale ------------------------------------------------------ */
  --bm-z-sticky: 40;
  --bm-z-header: 50;
  --bm-z-dropdown: 30;
  --bm-z-mobile-nav: 50;
  --bm-z-modal: 100;

  /* --- Skeleton loading shimmer colors ------------------------------------ */
  --bm-skeleton-base: var(--bm-color-surface-container);
  --bm-skeleton-shine: var(--bm-color-surface-container-lowest);
}

/* =============================================================================
   Skeleton loading primitives
   Views under hotel-search / hotel-listing / hotel-detail / hotel-booking are
   expected to add skeleton/loading placeholder states later (e.g. while
   search results, room rates, or price breakdowns are fetched via AJAX).
   These base classes are provided now so page-specific CSS/markup added
   later can simply apply "bm-skeleton" + a shape modifier, without needing
   new keyframes or colors.
   ========================================================================== */
@keyframes bm-skeleton-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.bm-skeleton {
  position: relative;
  display: block;
  background-color: var(--bm-skeleton-base);
  background-image: linear-gradient(
    90deg,
    var(--bm-skeleton-base) 0px,
    var(--bm-skeleton-shine) 40px,
    var(--bm-skeleton-base) 80px
  );
  background-size: 800px 100%;
  animation: bm-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--bm-radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

/* Text line placeholder. Combine with a width utility, e.g.
   <span class="bm-skeleton bm-skeleton--text bm-skeleton--w-75"></span> */
.bm-skeleton--text {
  height: 0.9em;
  width: 100%;
  margin: 0.25em 0;
}

.bm-skeleton--title {
  height: 1.4em;
  width: 60%;
  margin-bottom: var(--bm-space-2xs);
}

.bm-skeleton--circle {
  border-radius: var(--bm-radius-full);
  width: 2.5rem;
  height: 2.5rem;
}

.bm-skeleton--image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.bm-skeleton--chip {
  display: inline-block;
  width: 80px;
  height: 1.75rem;
  border-radius: var(--bm-radius-full);
  margin-right: var(--bm-space-2xs);
}

.bm-skeleton--button {
  width: 140px;
  height: 2.75rem;
  border-radius: var(--bm-radius-md);
}

.bm-skeleton--input {
  width: 100%;
  height: 2.75rem;
  border-radius: var(--bm-radius-md);
}

/* Width helpers for text-line skeletons */
.bm-skeleton--w-25 { width: 25%; }
.bm-skeleton--w-50 { width: 50%; }
.bm-skeleton--w-75 { width: 75%; }
.bm-skeleton--w-100 { width: 100%; }

/* Vertical rhythm helper for grouping several skeleton lines/rows */
.bm-skeleton-group > * + * {
  margin-top: var(--bm-space-2xs);
}

/* Convention: any element (row/card/section) can be marked with the
   [data-bm-loading="true"] attribute; real content should be hidden and a
   sibling ".bm-skeleton*" placeholder shown while true. Left generic on
   purpose since markup for this will be wired up in a later pass. */
[data-bm-loading='true'] .bm-skeleton-hide {
  display: none !important;
}
[data-bm-loading='false'] .bm-skeleton,
[data-bm-loading='false'] .bm-skeleton--text,
[data-bm-loading='false'] .bm-skeleton--title,
[data-bm-loading='false'] .bm-skeleton--circle,
[data-bm-loading='false'] .bm-skeleton--image,
[data-bm-loading='false'] .bm-skeleton--chip,
[data-bm-loading='false'] .bm-skeleton--button,
[data-bm-loading='false'] .bm-skeleton--input {
  display: none !important;
}
/* Use ".bm-skeleton-placeholder" on the WRAPPER around a group of skeleton
   rows/cards (e.g. a whole placeholder <div class="bm-hotel-card">) so the
   entire wrapper - not just its inner ".bm-skeleton*" children - disappears
   once loading is done. Without this, non-skeleton wrapper chrome (borders/
   padding/background from e.g. .bm-hotel-card or .bm-card) would be left
   behind as an empty box. */
[data-bm-loading='false'] .bm-skeleton-placeholder {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .bm-skeleton {
    animation: none;
    background-image: none;
  }
}