/* ========== PALETTE & TYPOGRAPHY ========== */

:root {
  --forest:#2F4C3A;
  --sand:#D9CBB8;
  --cream:#F6F2EB;
  --copper:#B47444;
  --charcoal:#36454F;

  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);

  --h1:32px; --h2:24px; --h3:20px; --body:18px;
  --lh-tight:1.25; --lh-mid:1.3; --lh-body:1.7;
}

/* Fonts from main site */
@font-face {
  font-family:"Playfair Akasha";
  src:url("https://akasha.com.ro/assets/fonts/playfair-v10-latin-ext-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Playfair Akasha";
  src:url("https://akasha.com.ro/assets/fonts/playfair-v10-latin-ext-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Playfair Akasha";
  src:url("https://akasha.com.ro/assets/fonts/playfair-v10-latin-ext-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Lato Akasha";
  src:url("https://akasha.com.ro/assets/fonts/lato-v24-latin-ext-300.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Lato Akasha";
  src:url("https://akasha.com.ro/assets/fonts/lato-v24-latin-ext-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Lato Akasha";
  src:url("https://akasha.com.ro/assets/fonts/lato-v24-latin-ext-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root {
  --playfair:"Playfair Akasha","Playfair Display",serif;
  --lato:"Lato Akasha","Lato",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

/* ========== BASE PAGE LOOK ========== */

body {
  font-family:var(--lato);
  font-size:var(--body);
  line-height:var(--lh-body);
  color:var(--charcoal);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3 {
  font-family:var(--playfair);
  color:var(--forest);
  margin:0 0 .5rem 0;
}
h1 { font-size:var(--h1); line-height:var(--lh-tight); font-weight:700; }
h2 { font-size:var(--h2); line-height:var(--lh-mid);   font-weight:600; }
h3 { font-size:var(--h3); line-height:1.35;           font-weight:400; }

p {
  margin:0 0 1rem 0;
}

a {
  color:var(--forest);
  text-decoration:none;
}
a:hover {
  color:var(--copper);
}

/* ========== AKASHA CARD LOOK ========== */

/* Apply the “card” style to main booking blocks */
.booking-wrapper .search-form,
.booking-wrapper .room-card,
.booking-wrapper .booking-summary-card,
.booking-wrapper .booking-guest-form-wrapper {
  background:var(--cream);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ========== FORM FIELDS ========== */

.booking-wrapper input,
.booking-wrapper select,
.booking-wrapper textarea {
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1.5px solid var(--forest);
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--lato);
  font-size:16px;
}

.booking-wrapper input:focus-visible,
.booking-wrapper select:focus-visible,
.booking-wrapper textarea:focus-visible {
  outline:3px solid color-mix(in srgb,var(--copper) 40%,white);
  border-color:var(--copper);
}

/* Slightly smaller fields on mobile */
@media (max-width:768px) {
  .booking-wrapper input,
  .booking-wrapper select,
  .booking-wrapper textarea {
    padding:6px 10px;
    font-size:15px;
  }
}

/* ========== BUTTONS ========== */

.booking-wrapper .btn,
.booking-wrapper button,
.booking-wrapper input[type=submit] {
  appearance:none;
  border:0;
  padding:10px 18px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
  font-family:var(--lato);
  background:var(--forest);
  color:var(--cream);
}

.booking-wrapper .btn:hover,
.booking-wrapper button:hover,
.booking-wrapper input[type=submit]:hover,
.booking-wrapper .btn:focus-visible,
.booking-wrapper button:focus-visible,
.booking-wrapper input[type=submit]:focus-visible {
  background:var(--copper);
}

/* ========== ALERTS IN AKASHA PALETTE ========== */

.booking-wrapper .alert-error {
  background:color-mix(in srgb,var(--copper) 12%,var(--cream));
  border-left:4px solid var(--copper);
  padding:12px 14px;
  border-radius:10px;
}

/* ========== MOBILE TUNING: LABEL & FIELD SPACING ON FIRST SCREEN ========== */
/* Goal: on phones – a bit more air ABOVE each label, very small gap
   between label and input, and consistent distance between fields. */

@media (max-width:768px) {

  /* Distance between complete field blocks (Property → Check-in …) */
  .booking-wrapper .search-form .form-row {
    gap: 10px;         /* total distance from one group to the next */
  }

  /* Each field group */
  .booking-wrapper .search-form .form-group {
    margin: 0;
    padding-top: 8px;  /* “air” above labels */
  }

  /* First field should not be pushed too low inside the card */
  .booking-wrapper .search-form .form-group:first-child {
    padding-top: 4px;
  }

  /* Label: more space above, very little under (keeps it close to input) */
  .booking-wrapper .search-form .form-group label {
    margin: 0 0 2px 0; /* tiny gap label → input */
    line-height: 1.2;
  }

  /* Card padding slightly tighter on mobile */
  .booking-wrapper .search-form {
    padding: 14px 12px;
  }
}