/* ============================================================
   DZONG HOLIDAYS — enquiry.css
   Enquiry Form + Sidebar Styles
   ============================================================ */

/* ---- SIDEBAR LAYOUT ---- */
.package-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: calc(var(--header-height, 68px) + 16px);
  max-height: calc(100vh - var(--header-height, 68px) - 32px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.package-sidebar::-webkit-scrollbar { display: none; }

/* ---- SIDEBAR CARD BASE ---- */
.sidebar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ---- PRICE CARD ---- */
.sidebar-price-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  color: #fff;
}
.price-label { font-size: var(--text-xs); opacity: 0.8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-1); }
.price-amount { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 700; display: flex; align-items: baseline; gap: var(--space-2); }
.price-per { font-size: var(--text-xs); opacity: 0.75; font-weight: 400; font-family: var(--font-body); }

/* ---- ENQUIRY CARD ---- */
.enquiry-card-header {
  background: linear-gradient(135deg, #0f2027 0%, #01696f 100%);
  padding: var(--space-5) var(--space-6);
}
.enquiry-title {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
  color: #fff; margin-bottom: var(--space-1);
}
.enquiry-subtitle { font-size: var(--text-xs); color: rgba(255,255,255,0.75); }

/* ---- FORM ---- */
.enquiry-form { padding: var(--space-5) var(--space-6); }

.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-label {
  font-size: var(--text-xs); font-weight: 700;
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.req { color: var(--color-error); }

.input-wrap {
  position: relative;
  display: flex; align-items: center;
}
.input-icon {
  position: absolute; left: var(--space-3);
  color: var(--color-text-faint); pointer-events: none; flex-shrink: 0;
}
.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 16px + var(--space-3));
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}
.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light, rgba(1,105,111,0.12)); }
.form-input.is-invalid { border-color: var(--color-error); }
.form-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(161,44,123,0.1); }
.form-input::placeholder { color: var(--color-text-faint); }

.form-select { padding-right: var(--space-8) !important; cursor: pointer; }
.form-textarea {
  resize: vertical; min-height: 80px;
  padding-top: var(--space-3) !important;
  padding-left: var(--space-4) !important;
}

.field-error {
  display: none;
  font-size: var(--text-xs); color: var(--color-error);
  margin-top: calc(var(--space-1) * -1);
}

/* ---- SUBMIT BUTTON ---- */
.enq-submit-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  margin-top: var(--space-2);
}
.enq-submit-btn:hover:not(:disabled) { background: var(--color-primary-hover); transform: translateY(-1px); }
.enq-submit-btn:disabled { opacity: 0.75; cursor: not-allowed; transform: none; }
.btn-text, .btn-loading { display: flex; align-items: center; gap: var(--space-2); }

/* ---- RESPONSE MESSAGES ---- */
.enq-response {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  display: flex; align-items: flex-start; gap: var(--space-3);
  display: none;
}
.enq-response:not(:empty) { display: flex; }
.enq-success {
  background: #f0fdf4; color: #15803d;
  border: 1px solid #bbf7d0;
}
.enq-error {
  background: #fdf2f8; color: #a12c7b;
  border: 1px solid #f5d0e8;
}
[data-theme="dark"] .enq-success { background: rgba(21,128,61,0.12); color: #4ade80; border-color: rgba(21,128,61,0.25); }
[data-theme="dark"] .enq-error   { background: rgba(161,44,123,0.12); color: #d163a7; border-color: rgba(161,44,123,0.25); }

.form-privacy {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-faint);
  margin-top: var(--space-3); text-align: center; justify-content: center;
}

/* ---- QUICK CONTACT CARD ---- */
.quick-contact-card { padding: var(--space-5); }
.quick-contact-title {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.quick-contact-btn {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1.5px solid var(--color-border);
}
.quick-contact-btn:last-child { margin-bottom: 0; }
.quick-contact-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.call-btn { background: var(--color-primary-light, rgba(1,105,111,0.08)); color: var(--color-primary); border-color: rgba(1,105,111,0.2); }
.call-btn:hover { color: var(--color-primary); }
.wa-btn { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.wa-btn:hover { color: #15803d; }
[data-theme="dark"] .wa-btn { background: rgba(37,211,102,0.1); color: #4ade80; border-color: rgba(37,211,102,0.2); }

.quick-contact-btn small { display: block; font-size: var(--text-xs); opacity: 0.7; margin-bottom: 2px; }
.quick-contact-btn strong { display: block; font-size: var(--text-sm); font-weight: 700; }
.quick-contact-btn svg { flex-shrink: 0; }

/* ---- RELATED TOURS ---- */
.related-tours-card { padding: var(--space-5); }
.sidebar-card-title {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-text); margin-bottom: var(--space-4);
}
.sidebar-card-title svg { color: var(--color-primary); }
.related-tours-list { display: flex; flex-direction: column; gap: var(--space-3); }
.related-tour-item {
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background 0.2s;
  color: var(--color-text);
}
.related-tour-item:hover { background: var(--color-surface-offset); color: var(--color-text); }
.related-tour-img {
  width: 60px; height: 50px; flex-shrink: 0;
  border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-offset);
}
.related-tour-img img { width: 100%; height: 100%; object-fit: cover; }
.related-tour-no-img { display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); }
.related-tour-name { display: block; font-size: var(--text-xs); font-weight: 700; line-height: 1.4; margin-bottom: var(--space-1); }
.related-tour-meta { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.related-price { color: var(--color-primary); font-weight: 700; }

/* ---- TRUST CARD ---- */
.trust-card { padding: var(--space-5); }
.trust-badges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.trust-badge {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600;
}
.trust-badge svg { color: var(--color-primary); }

/* ---- MOBILE: sidebar below content ---- */
@media (max-width: 1023px) {
  .package-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .form-row { grid-template-columns: 1fr; gap: var(--space-3); }
}