/* ==========================================================================
   TanahTara - elegant.css
   Premium styling for TanahTara enquiry / contact forms.

   HOW TO USE
   1. Upload this file to your hosting's ROOT folder (works regardless of
      where each project's own CSS lives), then link it on any page with
      a form:
        <link rel="stylesheet" href="/elegant.css">

   2. Wrap the form in a `tt-elegant` class - either on the <form> itself
      or on a parent container:
        <div class="tt-elegant"> ... your existing form markup ... </div>
      No other HTML changes are required. It targets the class names
      already used across TanahTara's forms (.tt-form, .tt-enq-form,
      .form-control, .form-label, .btn-primary, .form-submit, .row,
      .row-2, .form-grid) so it works on both the systems/ site forms and
      the portable copy-paste snippets without editing their markup.

   3. Optional - add the italic script-style title block above the form
      for the full "premium resort" look:
        <div class="tt-elegant-title-wrap">
          <span class="tt-elegant-eyebrow">Enquiry Form</span>
          <h2 class="tt-elegant-title">
            <span class="tt-elegant-title-name">TanahTara</span> - The Balai Enquiry Form
          </h2>
          <div class="tt-elegant-rule"></div>
        </div>
      Swap "The Balai Enquiry Form" for the relevant venue/page name.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Cormorant+Garamond:ital,wght@1,500;1,600&display=swap');

.tt-elegant {
  --e-green-dark: #2d5a1b;
  --e-green: #3d7824;
  --e-green-light: #4e962c;
  --e-gold: #c8a86a;
  --e-gold-light: #e8d4a8;
  --e-text: #2a2a2a;
  --e-muted: #6b7c6b;
  --e-cream: #faf8f3;
  --e-white: #ffffff;
  --e-border: rgba(45, 90, 27, 0.14);
  --e-radius: 14px;
  --e-radius-lg: 22px;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  color: var(--e-text);
}

/* --- Card wrapper (applies whether tt-elegant is a parent or is on the form itself) --- */
.tt-elegant .tt-form,
.tt-elegant .tt-enq-form,
.tt-elegant.tt-form,
.tt-elegant.tt-enq-form {
  background: linear-gradient(180deg, var(--e-white) 0%, var(--e-cream) 100%);
  border: 1px solid var(--e-border);
  border-radius: var(--e-radius-lg);
  padding: 2.75rem 2.5rem;
  box-shadow: 0 20px 50px -20px rgba(45, 90, 27, 0.18), 0 2px 8px rgba(0, 0, 0, 0.03);
  max-width: 640px;
  margin: 0 auto;
}

/* --- Title block --- */
.tt-elegant-title-wrap {
  text-align: center;
  margin-bottom: 2rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.tt-elegant-eyebrow {
  display: block;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--e-gold);
  margin-bottom: .5rem;
}
.tt-elegant-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--e-green-dark);
  margin: 0;
  line-height: 1.25;
}
.tt-elegant-title-name {
  color: var(--e-gold);
  font-style: italic;
}
.tt-elegant-rule {
  width: 64px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--e-gold), transparent);
  margin: 1rem auto 0;
}

/* --- Labels --- */
.tt-elegant .form-label,
.tt-elegant label {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--e-green-dark);
  margin-bottom: .4rem;
}

/* --- Inputs: rounded rectangles throughout --- */
.tt-elegant input[type="text"],
.tt-elegant input[type="email"],
.tt-elegant input[type="tel"],
.tt-elegant input[type="date"],
.tt-elegant input[type="number"],
.tt-elegant select,
.tt-elegant textarea,
.tt-elegant .form-control {
  width: 100%;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: .96rem;
  color: var(--e-text);
  background: var(--e-cream);
  border: 1.5px solid var(--e-border);
  border-radius: var(--e-radius);
  padding: .85rem 1.1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-sizing: border-box;
}
.tt-elegant textarea {
  resize: vertical;
  min-height: 110px;
}
.tt-elegant input::placeholder,
.tt-elegant textarea::placeholder {
  color: var(--e-muted);
  font-style: italic;
}
.tt-elegant input:focus,
.tt-elegant select:focus,
.tt-elegant textarea:focus,
.tt-elegant .form-control:focus {
  outline: none;
  border-color: var(--e-green-light);
  background: var(--e-white);
  box-shadow: 0 0 0 4px rgba(200, 168, 106, 0.18);
}

/* --- Layout rows (covers both class systems used site-wide) --- */
.tt-elegant .row,
.tt-elegant .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.tt-elegant .row-2,
.tt-elegant .form-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}
.tt-elegant .row-3,
.tt-elegant .form-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 560px) {
  .tt-elegant .row-2,
  .tt-elegant .row-3,
  .tt-elegant .form-grid.cols-2,
  .tt-elegant .form-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}
.tt-elegant .form-group {
  margin-bottom: 1.25rem;
}
.tt-elegant .form-group.full,
.tt-elegant .full {
  grid-column: 1 / -1;
}

/* --- Submit button --- */
.tt-elegant button[type="submit"],
.tt-elegant .btn-primary,
.tt-elegant .form-submit {
  display: block;
  width: 100%;
  margin-top: .5rem;
  background: linear-gradient(135deg, var(--e-green) 0%, var(--e-green-dark) 100%);
  color: var(--e-white);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 10px 24px -8px rgba(45, 90, 27, 0.45);
}
.tt-elegant button[type="submit"]:hover,
.tt-elegant .btn-primary:hover,
.tt-elegant .form-submit:hover {
  background: linear-gradient(135deg, var(--e-green-light) 0%, var(--e-green) 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(45, 90, 27, 0.55);
}
.tt-elegant button[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* --- Mandatory-fields note --- */
.tt-elegant .form-note,
.tt-elegant form > p:first-of-type {
  font-style: italic;
  font-size: .85rem;
  color: var(--e-muted);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* --- Success / error messages (matches snippet ids ending Success/Error, and .success-msg/.error-msg) --- */
.tt-elegant .success-msg,
.tt-elegant .tt-form-success,
.tt-elegant [id$="Success"] {
  background: rgba(78, 150, 44, 0.1);
  border: 1px solid rgba(78, 150, 44, 0.3);
  color: var(--e-green-dark);
  border-radius: var(--e-radius);
  padding: 1rem 1.25rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  text-align: center;
}
.tt-elegant .error-msg,
.tt-elegant .tt-form-error,
.tt-elegant [id$="Error"] {
  background: rgba(200, 60, 60, 0.08);
  border: 1px solid rgba(200, 60, 60, 0.25);
  color: #a33;
  border-radius: var(--e-radius);
  padding: .75rem 1rem;
  font-size: .88rem;
}

/* --- Honeypot stays hidden regardless of any inline style already on the field --- */
.tt-elegant input[name="_hp"] {
  display: none !important;
}