/*
 * Mun Yoga Studio — front-facing styles
 * Ported from munyogastudio. Scoped to body.studio-front so admin is unaffected.
 */

/* Override design tokens for the student-facing layout */
body.studio-front {
  --color-primary: #253938;
  --color-primary-foreground: #ffffff;
  --color-primary-hover: #0f1f1e;
  --color-secondary: #f6ddda;
  --color-secondary-foreground: #253938;
  --color-accent: #ee7756;
  --color-accent-foreground: #ffffff;
  --color-background: #f6ddda;
  --color-foreground: #253938;
  --color-muted: #fbeeed;
  --color-muted-foreground: #5a6b6a;
  --color-border: #e8c4bf;
  --color-card: #ffffff;
  --color-card-foreground: #253938;
  --font-sans: "Nunito Sans", sans-serif;
  --font-heading: "DM Serif Text", serif;

  background: #f6ddda;
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body.studio-front a {
  text-decoration: none;
}

body.studio-front h1,
body.studio-front h2,
body.studio-front h3,
body.studio-front h4,
body.studio-front h5,
body.studio-front h6 {
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
}

body.studio-front h2 {
  font-size: 2rem;
}

/* ---- Buttons ---- */
.button-green {
  background: #253938;
  border: none;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  font-family: "Nunito Sans", sans-serif;
  padding: 1rem 2.5rem;
  transition: all 0.25s ease;
}
.button-green:hover {
  background: #0f1f1e;
}

.button-white {
  background: #fff;
  border: none;
  border-radius: 30px;
  color: #253938 !important;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  font-family: "Nunito Sans", sans-serif;
  padding: 1rem 2.5rem;
  transition: all 0.25s ease;
}
.button-white:hover {
  background: #f4f4f4;
}

.button-disabled {
  background: #8d9796;
  border: none;
  border-radius: 30px;
  color: #fff !important;
  display: block;
  font-size: 1rem;
  font-family: "Nunito Sans", sans-serif;
  padding: 1rem 2.5rem;
  transition: all 0.25s ease;
}

.button-orange {
  background: #ee7756;
  border: none;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: block;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  padding: 1rem 2.5rem;
  transition: all 0.25s ease;
}
.button-orange:hover {
  background: #d45937;
}

/* ---- Notification ---- */
.notification {
  padding: 10px;
  position: absolute;
  top: 80px;
  right: 30px;
  background: #f6ddda;
  z-index: 9;
  border-radius: 30px;
  width: 90%;
  max-width: 330px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* ---- HOME ---- */
.home_hero {
  background-image: url(/assets/main_bg-ebe706dde3ebafbf2157348ab82ef5afaaccafd9cfcf259bd5fdc2dca04cc7cc.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 0 0 5rem 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 600px;
  width: 100%;
}

.container {
  padding: 2rem;
  margin: auto;
  max-width: 1320px;
  width: 100%;
}

.containerColumns {
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  margin: auto;
  max-width: 1320px;
  width: 100%;
  display: flex;
}

.home_textBanner {
  height: 600px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.home_textBanner img {
  margin-bottom: 2rem;
}
.home_textBanner p {
  margin: 0 auto;
  max-width: 660px;
}

.home_stylesColumn {
  width: 50%;
}
.home_stylesColumn img {
  width: 100%;
}
.home_stylesColumn .button-white {
  display: inline-block;
}

.anasana_cover img {
  width: 100%;
  border-radius: 5rem;
}

/* ---- Home Cards (3-column) ---- */
.homeCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 4rem 0;
}
.homeCards-item {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding: 0 0 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.homeCards-item h3 {
  font-size: 1.2rem;
  color: #253938;
  margin: 1.5rem 1.5rem 0.75rem;
}
.homeCards-item p {
  color: #5a6b6a;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 1.5rem 1.5rem;
  flex: 1;
}
.homeCards-item .button-green {
  display: inline-block;
  margin: 0 1.5rem;
}
.homeCards-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* ---- Prices ---- */
.containerPrices {
  background: #253938;
  color: #fff;
  text-align: center;
  padding: 7rem 0;
}
.containerPrices h2 {
  color: #f7c6bf;
}
.containerPrices-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}
.containerPrices-item {
  border: 1px solid #ee7756;
  border-radius: 40px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.containerPrices-item h2 {
  margin-bottom: 0.5rem;
}
.containerPrices-item button,
.containerPrices-item a.button-orange {
  width: 100%;
  margin-top: 0.5rem;
}
.containerPrices-item h3 {
  font-family: "DM Serif Text", serif;
  color: #253938;
  font-size: 1.5rem;
  margin: 0;
}
.containerPrices-validity {
  font-size: 14px !important;
  color: #f7c6bf;
  margin-bottom: 0.5rem;
}
.containerPrices-price {
  font-size: 28px !important;
  font-weight: bold;
  color: #fff;
  margin: 0.5rem 0;
}
.containerPrices-original {
  font-size: 14px !important;
  color: #aaa;
  text-decoration: line-through;
  margin-bottom: 1rem;
}
.containerPrices-separator {
  width: 80%;
  max-width: 600px;
  height: 1px;
  background: #ee7756;
  margin: 4rem auto;
}
.containerPrices-grid--prenatal {
  margin: 0 auto;
}
.containerPrices .button-orange-width {
  max-width: 320px;
  margin: auto;
}

/* ---- Location ---- */
.containerLocation {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 100px 2rem;
}
.containerLocation-map {
  width: 50%;
}
.containerLocation-about {
  width: 50%;
}
.containerLocation-about a {
  color: #000;
}
.containerLocation-about a:hover {
  text-decoration: underline;
}

/* ---- Devise / Registration ---- */
.registrationContainer {
  background: #253938;
  padding: 70px 0;
  display: flex;
  gap: 30px;
  align-items: center;
  color: #fff;
}
.registrationContainer-alt {
  align-items: baseline;
  max-width: 90%;
  margin: auto;
}
.registrationContainer-cover {
  width: 50%;
}
.registrationContainer-cover img {
  padding: 2rem;
  width: 100%;
  max-width: 630px;
  margin: auto;
  display: block;
}
.registrationContainer-form {
  padding: 2rem;
  width: 50%;
}
.registrationContainer-form img {
  height: 60px;
  margin-bottom: 50px;
}
.registrationContainer-form .button-white {
  display: inline-block;
}
.registrationContainer .field {
  margin-bottom: 30px;
}
.registrationContainer label {
  margin-bottom: 10px;
}
.registrationContainer .input {
  padding: 1rem;
  border-radius: 15px;
  width: 100%;
  max-width: 420px;
}
.registrationContainer a {
  color: #fff;
}
.registrationContainer a:hover {
  text-decoration: underline;
}

/* ---- Calendar ---- */
.calendarioCover {
  background: #253938;
  padding: 2rem;
}
.calendarioCover__box {
  background: #f6ddda;
  color: #111;
  height: 333px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  max-width: 800px;
}

.calendarGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 20px;
  padding: 2rem;
}
.calendarGrid-column {
  text-align: center;
}
.calendarGrid-column h3 {
  margin-bottom: 20px;
}
.calendarGrid-item {
  background: #fbeeed;
  padding: 2rem 1rem;
  border-radius: 30px;
  margin-top: 20px;
}
.calendarGrid-item .button-green {
  width: 100%;
}
.calendarGrid-class {
  font-size: 1.125rem;
  font-weight: bold;
  margin: 1rem 0;
}

/* ---- About ---- */
.about_terms {
  background: #253938;
  padding: 3rem 0;
}
.about_terms p {
  color: white;
  text-align: center;
  font-size: 1.1rem;
  margin: 0;
}
.about_terms .terms-link {
  color: #ee7756;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.3s ease;
}
.about_terms .terms-link:hover {
  color: #f89b82;
}

/* ---- Terms ---- */
.terms_hero {
  background: linear-gradient(135deg, #253938 0%, #3d5a58 100%);
  padding: 6rem 0 4rem;
  margin-top: 80px;
}
.terms_hero h1 {
  color: white;
  text-align: center;
  font-size: 3rem;
  margin: 0;
}

.terms_content {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
.terms_content h2 {
  color: #253938;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}
.terms_content h3 {
  color: #253938;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
}
.terms_content p {
  color: #253938;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.terms_content ul {
  margin: 1rem 0 1rem 2rem;
  color: #253938;
}
.terms_content li {
  margin-bottom: 0.5rem;
  line-height: 1.8;
}

.terms_back {
  text-align: center;
  padding: 2rem 0 4rem;
}

.registration-bg {
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

/* ---- Footer (studio) ---- */
body.studio-front footer.studio-footer {
  background: #253938;
  text-align: center;
  padding: 60px;
}

/* ---- Responsive ---- */
@media screen and (max-width: 1024px) and (min-width: 750px) {
  .containerPrices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 749px) {
  .homeCards {
    grid-template-columns: 1fr;
  }
  .home_hero {
    padding: 2rem;
  }
  .home_hero img {
    width: 300px;
  }
  .containerColumns {
    flex-direction: column;
  }
  .anasana_cover img {
    border-radius: 2rem;
  }
  .containerPrices-grid {
    grid-template-columns: 1fr;
  }
  .home_stylesColumn {
    width: 100%;
  }
  .containerLocation {
    flex-direction: column;
    padding: 50px 2rem;
  }
  .containerLocation-map,
  .containerLocation-about {
    width: 100%;
  }
  .containerLocation-map iframe {
    width: 100%;
  }
  .registrationContainer {
    flex-direction: column;
  }
  .registrationContainer-form {
    width: 100%;
  }
  .registrationContainer-cover {
    display: none;
  }
  .calendarGrid {
    padding: 1rem;
    grid-template-columns: 1fr;
  }
  .about_terms {
    padding: 2rem 0;
  }
  .about_terms p {
    font-size: 1rem;
  }
  .terms_hero {
    padding: 4rem 0 3rem;
  }
  .terms_hero h1 {
    font-size: 2rem;
  }
  .terms_content {
    padding: 3rem 1.5rem;
  }
  .terms_content h2 {
    font-size: 1.5rem;
  }
  .terms_content h3 {
    font-size: 1.2rem;
  }
}
:root {
  /* Base colors — override per client */
  --color-primary: #ee7756;
  --color-primary-foreground: #ffffff;
  --color-primary-hover: #d45937;
  --color-secondary: #f1f5f9;
  --color-secondary-foreground: #1e293b;
  --color-accent: #ee7756;
  --color-accent-foreground: #ffffff;
  --color-background: #ffffff;
  --color-foreground: #0f172a;
  --color-muted: #f8fafc;
  --color-muted-foreground: #64748b;
  --color-border: #e2e8f0;
  --color-destructive: #ef4444;
  --color-destructive-foreground: #ffffff;
  --color-success: #10b981;
  --color-success-foreground: #ffffff;
  --color-warning: #f59e0b;
  --color-warning-foreground: #ffffff;
  --color-card: #ffffff;
  --color-card-foreground: #0f172a;
  --color-sidebar: #f8fafc;
  --color-sidebar-foreground: #334155;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-sans);

  /* Spacing & Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Pill-shaped buttons globally */
button:not([class*="navbar-toggle"]):not([class*="mobile-menu"]),
input[type="submit"],
a.inline-flex,
[class*="rounded-lg"][class*="px-"] {
  border-radius: 9999px !important;
}

/* Calendar view toggle buttons */
.active-view {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.active-view:hover {
  opacity: 0.9;
}

.inactive-view {
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-foreground);
}

.inactive-view:hover {
  background-color: var(--color-secondary);
}

/* Pagy pagination */
.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagy.series-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.pagy.series-nav > a:hover:not([aria-disabled="true"]) {
  background-color: var(--color-muted);
}

.pagy.series-nav > a[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.pagy.series-nav > a[aria-disabled="true"]:not([aria-current="page"]) {
  color: var(--color-muted-foreground);
  cursor: default;
  opacity: 0.5;
}

.pagy.series-nav > a[role="separator"] {
  opacity: 1;
  letter-spacing: 0.1em;
}

.pagy.series-nav > a[aria-label="Previous"],
.pagy.series-nav > a[aria-label="Next"] {
  font-size: 0;
  overflow: hidden;
}

.pagy.series-nav > a[aria-label="Previous"]::before,
.pagy.series-nav > a[aria-label="Next"]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.pagy.series-nav > a[aria-label="Previous"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}

.pagy.series-nav > a[aria-label="Next"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}