/* ============================================================
   El Monte Mexican Restaurant — Shared Site CSS
   Loaded sitewide via Bricks > Settings > Custom Code > CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Galindo&family=Ribeye&display=swap');


/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }


/* ===== TOKENS ===== */
:root {
  --coral: #E8553D;
  --coral-light: #FF7B6B;
  --sunshine: #FFBA42;
  --sunshine-light: #FFD88A;
  --turquoise: #2AB5A0;
  --turquoise-dark: #1E9484;
  --lime: #8DC63F;
  --hot-pink: #E84393;
  --cream: #FFF9F0;
  --warm-white: #FFFCF7;
  --sand: #F5E6CC;
  --text: #2D1B14;
  --text-mid: #5C4A42;
  --text-light: #8B7B73;
  --radius: 24px;
}

/* ===== BASE ===== */
html { scroll-behavior: smooth; font-size: unset; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--warm-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: none;
  font-family: 'DM Sans', sans-serif;
}
.btn svg { width: 20px; height: 20px; }



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}



/* ==========================================================================
                                                                              GRAVITY FORMS
   1. Global Inputs, Textareas, and Selects
   ========================================================================== */
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="number"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="password"],
body .gform_wrapper input[type="date"],
body .gform_wrapper textarea,
body .gform_wrapper select { 
    border-radius: 14px;
    border: 1px solid #a7a7a7 !important;
    background-color: var(--cream);
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: var(--text);
    transition: all 0.3s ease;

    height: 70px !important;
    display: flex !important;
    align-content: center !important;
    flex-wrap: wrap !important;
}

/* Fix for Textarea height */
body .gform_wrapper textarea {
    min-height: 120px;
    resize: vertical;                /* Allows users to resize vertically only */
}



/* Target Gravity Forms Dropdowns Arrow
 * 	Change the color using the "fill" attribute
 * */
/*body .gform_wrapper select {
  // Hides the default browser arrow 
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  
  // Adds a custom white chevron 
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(255, 255, 255, 1)'/%3E%3C/svg%3E") !important;
}*/


/* ==========================================================================
   2. Placeholder Text
   ========================================================================== */
body .gform_wrapper input::placeholder,
body .gform_wrapper textarea::placeholder {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: var(--text);
}

/* Make the 'Placeholder' option white so you can see it before clicking */
body .gform_wrapper select option[value=""] {
    color: #333333 !important; 
}

 /*Optional: Make the actual dropdown list options dark so they are readable when clicked */
body .gform_wrapper select option:not([value=""]) {
    color: #333333 !important; 
}


/* For older browser compatibility (Optional but recommended for thoroughness) */
body .gform_wrapper input::-webkit-input-placeholder,
body .gform_wrapper textarea::-webkit-input-placeholder {
    color: #888888;
}
body .gform_wrapper input::-moz-placeholder,
body .gform_wrapper textarea::-moz-placeholder {
    color: #888888;
    opacity: 1;
}

/* ==========================================================================
   3. Focus States (When a user clicks inside the field)
   ========================================================================== */
body .gform_wrapper input[type="text"]:focus,
body .gform_wrapper input[type="email"]:focus,
body .gform_wrapper input[type="number"]:focus,
body .gform_wrapper input[type="url"]:focus,
body .gform_wrapper input[type="tel"]:focus,
body .gform_wrapper input[type="password"]:focus,
body .gform_wrapper input[type="date"]:focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper select:focus {
    border-color: #007bff;           /* Highlight color */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); /* Soft glow effect */
    outline: none;                   /* Removes default browser outline */
}

/* ==========================================================================
   4. Field Labels
   ========================================================================== */
body .gform_wrapper .gfield_label {
    font-weight: 600;                /* Make labels bold */
    font-size: 14px;
    color: #222222;
    margin-bottom: 8px;              /* Space between label and input */
    display: inline-block;
}

/* Sub-labels (e.g., "First", "Last" under Name fields) */
body .gform_wrapper .gfield_description,
body .gform_wrapper .gform_description,
body .gform_wrapper .ginput_complex label {
    font-size: 12px;
    color: #666666;
    margin-top: 4px;
}

/* ==========================================================================
   5. Checkboxes and Radio Buttons
   ========================================================================== */
body .gform_wrapper .gfield_checkbox li label, 
body .gform_wrapper .gfield_radio li label {
    font-size: 15px;
    color: #333333;
    font-weight: normal;
    padding-left: 8px;
}

/* ==========================================================================
   6. Submit Button
   ========================================================================== */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    color: white !important;
    cursor: pointer;
    box-shadow: rgba(232, 85, 61, 0.35) 0px 8px 30px !important;
    font-family: "DM Sans", sans-serif;
    grid-column: 1 / -1;
    gap: 0.6rem;
    padding: 1.2rem 2rem !important;
    border-radius: 100px !important;
   background: linear-gradient(135deg, var(--coral), var(--hot-pink)) !important;
    border-width: medium !important;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.gform-theme--foundation .gform_footer, .gform-theme--foundation .gform_page_footer
 {
    flex-direction: column !important;
}

/* Submit Button Hover State */
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer button:hover {
    background-color: #0056b3;       /* Darker shade for hover */
    transform: translateY(-1px);     /* Slight lift effect */
}