/* ============================================================
   Shared styles for the hotel flow Thymeleaf templates
   (SearchEngin, hotels, hotelDetails, ConfirmationPage, PayNDone)
   Holds the design tokens + common components. Page-specific
   rules live in each template's inline <style>.
   Referenced as @{/css/hotel/hotel.css}.
   ============================================================ */

/* ── Design tokens ── */
:root {
  --cream:        #faf8f4;
  --warm-white:   #ffffff;
  --ink:          #1a1a2e;
  --ink-light:    #4a4a6a;
  --gold:         #c9963b;
  --gold-light:   #f0d9b0;
  --gold-pale:    #fdf6ea;
  --teal:         #1a6b72;
  --teal-light:   #e6f3f4;
  --teal-dark:    #115a61;
  --red-soft:     #c0392b;
  --red-pale:     #fdf0ee;
  --green-soft:   #1a7a4a;
  --green-pale:   #eaf5ef;
  --danger:       #c0392b;
  --danger-light: #fdf2f2;
  --success:      #1a6b42;
  --success-light:#f0faf4;
  --border:       #e8e2d8;
  --shadow-sm:    0 2px 8px rgba(26,26,46,.06);
  --shadow-md:    0 6px 24px rgba(26,26,46,.10);
  --shadow-lg:    0 16px 48px rgba(26,26,46,.14);
  --radius:       12px;
  --radius-sm:    7px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
  --t:            .2s cubic-bezier(.4,0,.2,1);
}

/* ── Base ── */
.hotel-page * , .hotel-page *::before, .hotel-page *::after { box-sizing: border-box; }
.hotel-page { background: var(--cream); font-family: var(--font-body); color: var(--ink); }

/* ── Breadcrumb ── */
.pkg-breadcrumb {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-light); padding: .7rem 0 .4rem;
}
.pkg-breadcrumb a { color: var(--teal); text-decoration: none; }
.pkg-breadcrumb a:hover { text-decoration: underline; }
.pkg-breadcrumb .sep { color: var(--border); }

/* ── Buttons ── */
.btn-gold {
  background: var(--gold); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: .52rem 1.4rem;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: all var(--t); white-space: nowrap;
  box-shadow: 0 3px 10px rgba(201,150,59,.35);
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
}
.btn-gold:hover { background: #b5832e; transform: translateY(-1px); }
.btn-gold:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-teal {
  background: var(--teal); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: .52rem 1.4rem;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: all var(--t); text-align: center;
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
}
.btn-teal:hover { background: var(--teal-dark); transform: translateY(-1px); }

.btn-teal-ghost {
  background: var(--warm-white); color: var(--teal);
  border: 1.5px solid var(--teal); border-radius: var(--radius-sm);
  padding: .42rem 1rem; font-family: var(--font-body); font-size: .82rem;
  font-weight: 600; cursor: pointer; transition: all var(--t);
  text-align: center; text-decoration: none; display: inline-flex;
  align-items: center; gap: .35rem; justify-content: center;
}
.btn-teal-ghost:hover { background: var(--teal-light); }

/* Alias kept for the search-bar primary action */
.btn-pkg-search { width: 100%; }

/* ── Section / filter card ── */
.pkg-card, .pkg-panel {
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.pkg-panel { padding: 1rem 1.1rem; margin-bottom: .75rem; }
.pkg-panel__title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gold); margin-bottom: .7rem;
  display: flex; align-items: center; gap: .5rem;
}
.pkg-panel__title::after { content: ''; flex: 1; height: 1px; background: var(--gold-light); }

/* ── Badges / tags ── */
.pkg-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--gold-pale); color: var(--gold);
  border: 1px solid var(--gold-light); border-radius: 4px;
  font-size: .72rem; font-weight: 600; padding: .18rem .5rem;
}
.pkg-tag--teal { background: var(--teal-light); color: var(--teal); border-color: #a8dfd3; }

.status-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .18rem .55rem; border-radius: 99px; white-space: nowrap; }
.status-badge--cancelled { background: var(--red-pale); color: var(--red-soft); border: 1px solid #e8b4ae; }
.status-badge--confirmed { background: var(--green-pale); color: var(--green-soft); border: 1px solid #a8d5bc; }

/* ── Rating stars ── */
.pkg-rating { display: flex; align-items: center; gap: .3rem; }
.pkg-rating .stars { display: flex; gap: 1px; }
.pkg-rating .stars img { width: 12px; height: 12px; }
.pkg-rating__score { font-size: .75rem; color: var(--ink-light); }

/* ── Modal ── */
.modal-content { border-radius: var(--radius); overflow: hidden; border: 0; box-shadow: var(--shadow-lg); }
.modal-header { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); padding: .85rem 1.2rem; border-bottom: 0; color: #fff; display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-family: var(--font-display); font-size: 1.05rem; color: #fff; margin: 0; }
.modal-body { padding: 1.2rem 1.4rem; }
.btn-close-adm, .bth_close {
  background: rgba(255,255,255,.2); border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: background var(--t);
}
.btn-close-adm:hover, .bth_close:hover { background: rgba(255,255,255,.35); }

/* ── Spinner overlay ── */
#cover-spin {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(250,248,244,.75); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
}
#cover-spin.active { display: flex; }
.adm-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--gold-light); border-top-color: var(--gold);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.pkg-empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-light); font-size: .9rem; }
.pkg-empty__icon { font-size: 2.4rem; display: block; margin-bottom: .5rem; }
.pkg-empty__title { font-family: var(--font-display); font-size: 1rem; color: var(--ink); margin-bottom: .3rem; }