/* =====================================================================
   common-templates.css
   Shared component styles extracted from Thymeleaf templates.
   These rules were byte-identical across 2+ templates with no
   conflicting variants, so they are consolidated here and loaded
   globally via layouts/master.html. Page-unique styles remain in
   their own templates.
   Generated: 2026-07-10
   ===================================================================== */

/* ---- adm ---- */
.adm-control-bar {
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  border-radius:var(--radius);
  padding:1rem 1.4rem;
  box-shadow:var(--shadow-md);
  margin-bottom:1.25rem;
}

.adm-form-control {
  width:100%;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--warm-white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.88rem;
  padding:.5rem .75rem;
  transition:all var(--t);
}

.adm-form-control:focus {
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(26,107,114,.12);
}

.adm-section-card {
  background:var(--warm-white);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:1rem 1.1rem;
  margin-bottom:1rem;
}

.adm-section-card__title {
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.75rem;
}

.adm-section-card__title::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--gold-light);
}

/* ---- archive ---- */
.archive-modal {
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-54%);
  z-index:9999;
  background:var(--warm-white);
  border:1.5px solid var(--gold-light);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:1.8rem 2.2rem;
  min-width:300px;
  text-align:center;
  animation:popIn .25s cubic-bezier(.34,1.56,.64,1) both;
}

/* ---- btn ---- */
.btn-adm-modal-submit {
  background:var(--teal);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  padding:.65rem 1.6rem;
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:600;
  width:100%;
  cursor:pointer;
  transition:all var(--t);
  box-shadow:0 3px 10px rgba(26,107,114,.3);
}

.btn-adm-modal-submit:hover {
  background:var(--teal-dark);
  transform:translateY(-1px);
}

.btn-adm-primary {
  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);
  box-shadow:0 3px 10px rgba(201,150,59,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  width:100%;
}

.btn-adm-primary:hover {
  background:#b5832e;
  transform:translateY(-1px);
}

.btn-archive-cancel {
  background:transparent;
  color:var(--ink-light);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.48rem 1.2rem;
  font-family:var(--font-body);
  font-weight:500;
  cursor:pointer;
  transition:all var(--t);
}

.btn-archive-cancel:hover {
  border-color:var(--ink-light);
  color:var(--ink);
}

.btn-archive-confirm {
  background:var(--teal);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  padding:.48rem 1.2rem;
  font-family:var(--font-body);
  font-weight:600;
  cursor:pointer;
  transition:background var(--t);
}

.btn-archive-confirm:hover {
  background:#145a60;
}

.btn-enq-danger {
  background:#fff4f4;
  color:#b91c1c;
  border:1.5px solid #f5c6c6;
  border-radius:var(--radius-sm);
  padding:.44rem 1rem;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--t);
  display:flex;
  align-items:center;
  gap:.35rem;
}

.btn-enq-danger:hover {
  background:#ffe4e4;
}

.btn-enq-primary:hover {
  background:linear-gradient(135deg,#115a61,#0d454a);
  box-shadow:0 5px 18px rgba(26,107,114,.32);
  transform:translateY(-1px);
}

.btn-enq-secondary:hover {
  background:var(--teal-light);
  transform:translateY(-1px);
}

.btn-pax-apply:disabled {
  opacity:.4;
  cursor:not-allowed;
  transform:none;
}

.btn-pax-apply:hover {
  opacity:.9;
  transform:translateY(-1px);
}

/* ---- conf ---- */
.conf-layout {
  display:flex;
  gap:1rem;
  align-items:flex-start;
  flex-wrap:wrap;
  width:100%;
  min-width:0;
}

.conf-right {
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
}

/* ---- cost ---- */
.cost-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.38rem 0;
  border-bottom:1px solid var(--cream);
  font-size:.84rem;
}

.cost-row--total {
  background:var(--gold-pale);
  padding:.5rem .65rem;
  border-radius:var(--radius-sm);
  margin-top:.4rem;
  border:1px solid var(--gold-light);
}

.cost-row-label {
  color:var(--ink-light);
  font-weight:600;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.cost-row-value {
  color:var(--ink);
  font-weight:600;
}

.cost-row:last-child {
  border-bottom:none;
}

/* ---- enq ---- */
.enq-action-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
  background:var(--teal-light);
  border-radius:var(--radius-sm);
  padding:.65rem 1rem;
  margin-bottom:1rem;
}

.enq-alert--success {
  background:var(--green-light);
  border:1px solid #a8dfd3;
  color:var(--green);
}

.enq-alert--warning {
  background:#fffbeb;
  border:1px solid #fde68a;
  color:#92400e;
}

.enq-breadcrumb {
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.8rem;
  color:var(--ink-light);
  padding:.7rem 0 .3rem;
}

.enq-breadcrumb a:hover {
  text-decoration:underline;
}

.enq-card {
  background:var(--warm-white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:1.4rem 1.8rem 1.5rem;
  margin-bottom:1.5rem;
}

.enq-card-header {
  display:flex;
  align-items:center;
  gap:.8rem;
  border-bottom:2px solid var(--gold-light);
  padding-bottom:.9rem;
  margin-bottom:1rem;
}

.enq-card-icon {
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--gold-pale);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}

.enq-card-subtitle {
  font-size:.76rem;
  color:var(--ink-light);
  margin:.1rem 0 0;
}

.enq-card-title {
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  color:var(--ink);
  margin:0;
}

.enq-dropdown .dropdown-toggle.selected {
  color:var(--ink);
  font-weight:500;
}

.enq-dropdown .dropdown-toggle:hover,
.enq-dropdown .dropdown-toggle:focus {
  border-color:var(--teal);
  background:var(--warm-white);
  box-shadow:0 0 0 2.5px rgba(26,107,114,.12);
  outline:none;
}

.enq-input,
.enq-textarea {
  width:100%;
  box-sizing:border-box;
  background:var(--cream);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.42rem .65rem;
  font-family:var(--font-body);
  font-size:.84rem;
  color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
  outline:none;
}

.enq-input--cost {
  border-color:var(--gold-light);
  font-weight:700;
  color:var(--teal);
}

.enq-input--cost:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 2.5px rgba(201,150,59,.12);
}

.enq-input::placeholder {
  color:#c0bab4;
  font-size:.8rem;
}

.enq-input::placeholder,
.enq-textarea::placeholder {
  color:#c0bab4;
  font-size:.79rem;
}

.enq-input:focus {
  border-color:var(--teal);
  background:var(--warm-white);
  box-shadow:0 0 0 2.5px rgba(26,107,114,.12);
}

.enq-input:focus,
.enq-textarea:focus {
  border-color:var(--teal);
  background:var(--warm-white);
  box-shadow:0 0 0 2.5px rgba(26,107,114,.12);
}

.enq-label .req {
  color:var(--gold);
}

.enq-page {
  background:var(--cream);
  font-family:var(--font-body);
  color:var(--ink);
}

.enq-section-label::before,
.enq-section-label::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--gold-light);
}

.enq-tc-link {
  color:var(--teal);
  font-weight:500;
  font-size:.84rem;
  text-decoration:underline;
  cursor:pointer;
}

.enq-textarea:focus {
  border-color:var(--teal);
  background:var(--warm-white);
  box-shadow:0 0 0 2.5px rgba(26,107,114,.12);
}

/* ---- modal ---- */
.modal-list {
  list-style:none;
  padding:0;
  margin:0;
}

.modal-list li:last-child {
  border-bottom:none;
}

/* ---- pax ---- */
.pax-badge {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  background:var(--teal-light);
  border:1px solid #a8dfd3;
  border-radius:var(--radius-sm);
  padding:.45rem .85rem;
  font-size:.84rem;
  color:var(--teal);
  font-weight:600;
  margin-bottom:.75rem;
}

.pax-counter {
  display:flex;
  align-items:center;
  gap:.6rem;
}

.pax-counter__btn:disabled {
  opacity:.3;
  cursor:not-allowed;
}

.pax-row:last-of-type {
  border-bottom:none;
}

/* ---- pkg ---- */
.pkg-breadcrumb .sep {
  color:var(--border);
}

.pkg-breadcrumb a:hover {
  text-decoration:underline;
}

.pkg-card--sticky {
  position:sticky;
  top:.75rem;
}

.pkg-card-head::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--gold-light);
}

.pkg-search-icon {
  width:16px;
  height:16px;
  opacity:.7;
  flex-shrink:0;
}

.pkg-search-input-wrap {
  display:flex;
  align-items:center;
  gap:.4rem;
}

.pkg-step-badge {
  font-size:.72rem;
  font-weight:700;
  background:rgba(255,255,255,.2);
  color:#fff;
  border:1px solid rgba(255,255,255,.3);
  padding:.25rem .85rem;
  border-radius:99px;
  white-space:nowrap;
}

.pkg-submit-row {
  background:var(--gold-pale);
  border:1px solid var(--gold-light);
  border-radius:var(--radius-sm);
  padding:.9rem 1.1rem;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1rem;
}

/* ---- required ---- */
.requiredRooms {
  cursor:pointer !important;
}

/* ---- spin ---- */
.spin-ring {
  width:48px;
  height:48px;
  border:4px solid rgba(255,255,255,.2);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

/* ---- w ---- */
.w-lg {
  flex:2 1 210px;
}

.w-md {
  flex:1 1 145px;
}

.w-xl {
  flex:3 1 270px;
}

/* ---- keyframes ---- */
@keyframes popIn {
  from {
    opacity:0;
    transform:translate(-50%,-44%) scale(.92);
  }
  to {
    opacity:1;
    transform:translate(-50%,-54%) scale(1);
  }
}

@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}