/* Flippin App Custom Styles - Override Template Styles */
/* 
 * Background Color: F7EED5 at 30% opacity (rgba(247, 238, 213, 0.3))
 * Orange Highlight: FF785A at 100% opacity
 * Font: Lato (fallback to system sans-serif)
 */

/* Import Lato font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");

/* Root Variables */
:root {
  --flippin-bg-color: rgba(247, 238, 213, 0.3);
  --flippin-bg-solid: #f7eed5;
  --flippin-orange: #ff785a;
  --flippin-orange-hover: #ff6641;
  --flippin-font: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Body and Global Font */
body {
  font-family: var(--flippin-font) !important;
  background-color: var(--flippin-bg-color) !important;
}

/* Override all text elements with Lato font */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
button,
input,
textarea,
select {
  font-family: var(--flippin-font) !important;
}

/* Full page background */
html {
  background-color: var(--flippin-bg-color) !important;
  font-family: var(--flippin-font) !important;
}

/* Orange Highlight Color - Apply to buttons and links */
.header button,
button,
input[type="submit"],
input[type="button"],
.cta-button {
  background-color: var(--flippin-orange) !important;
  color: white !important;
  font-family: var(--flippin-font) !important;
  border-color: var(--flippin-orange) !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.cta-button:hover {
  background-color: var(--flippin-orange-hover) !important;
  border-color: var(--flippin-orange-hover) !important;
}

/* Links with orange highlight */
a:hover {
  color: var(--flippin-orange) !important;
}

/* Form Elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--flippin-font) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--flippin-orange) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 120, 90, 0.2) !important;
}

/* Ensure all headings use Lato */
h1,
.h1 {
  font-family: var(--flippin-font) !important;
  font-weight: 700 !important;
}

h2,
.h2 {
  font-family: var(--flippin-font) !important;
  font-weight: 600 !important;
}

h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--flippin-font) !important;
  font-weight: 500 !important;
}

/* Paragraph text */
p {
  font-family: var(--flippin-font) !important;
  font-weight: 400 !important;
}

/* Navigation */
nav,
.nav-container,
.menu-list {
  font-family: var(--flippin-font) !important;
}

/* Rounded corners for modern look */
button,
input,
textarea {
  border-radius: 8px !important;
}

/* Override any inline styles that might interfere */
*[style*="font-family"] {
  font-family: var(--flippin-font) !important;
}