@import url("./design-system.b34329df23d5.css");

/* ============================= */
/* 🌐 CSS Base - Custom Framework */
/* ============================= */

/* 🎨 Color Variables */
:root {
  --color-primary: #4f6d7a;      /* Neutral blue-gray */
  --color-secondary: #08c4bb;    /* Darker blue-gray */
  --color-background: #f8fafb;   /* Neutral background */
  --color-surface: #ffffff;      /* White surface */
  --color-text: #2f3a40;         /* Neutral dark text */
  --color-muted: #7b8790;        /* Neutral muted text */
  --color-border: #dde4e8;       /* Soft neutral border */

  --color-blue: #4A90E2;
  --color-green: #4CAF50; 
  --color-dark-green: #207723;      
  --color-yellow: #F2C94C;       
  --color-dark-yellow: #9a7b14;  
  --color-orange: #E67E22;    
  --color-red: #C0392B;      
  --color-dark-red: #92190c;       
  --color-pink: #d980c9;   
  --color-purple: #8E44AD; 
  --color-beige: #DCC7AA;
  --color-brown: #7B4B2A;    
  --color-gray: #B0A99F;  
  --color-white: #FFFFFF;
  --border-radius: var(--eo-radius-card);
  --shadow-default: var(--eo-shadow-xs);
  --transition-default: all var(--eo-transition-base);
}

/* =============================
   CRM de clientes do locador
============================= */
.crm-page { display: grid; gap: 1.25rem; max-width: 1180px; margin: 0 auto; }
.crm-header h1, .crm-profile-header h1 { margin: 0.25rem 0 0.35rem; color: var(--color-dark); font-size: clamp(1.8rem, 4vw, 2.45rem); }
.crm-header p, .crm-profile-header p { margin: 0; color: var(--color-text-light); }
.crm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.crm-kpis article { display: grid; gap: 0.32rem; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-white); box-shadow: 0 8px 28px rgba(27, 38, 44, 0.05); }
.crm-kpis article > span { color: var(--color-text-light); font-size: 0.82rem; font-weight: 700; }
.crm-kpis article > span i { margin-right: 0.35rem; color: var(--color-primary); }
.crm-kpis strong { color: var(--color-dark); font-size: 1.8rem; }
.crm-kpis small { color: var(--color-text-light); }
.crm-filters { display: flex; align-items: stretch; gap: 0.65rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-white); }
.crm-filters label { margin: 0; }
.crm-filters select, .crm-filters input { height: 100%; min-height: 44px; margin: 0; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-white); }
.crm-search { position: relative; flex: 1; }
.crm-search i { position: absolute; top: 50%; left: 1rem; color: var(--color-text-light); transform: translateY(-50%); }
.crm-search input { width: 100%; padding-left: 2.7rem; }
.crm-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-white); box-shadow: 0 8px 28px rgba(27, 38, 44, 0.05); }
.crm-card > header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--color-border); }
.crm-card > header h2 { margin: 0.15rem 0 0; color: var(--color-dark); font-size: 1.15rem; }
.crm-card > header > i { color: var(--color-primary); font-size: 1.2rem; }
.crm-table-wrap { overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; }
.crm-table th { padding: 0.9rem 1rem; background: var(--color-background); color: var(--color-text-light); font-size: 0.76rem; text-align: left; text-transform: uppercase; letter-spacing: 0.035em; white-space: nowrap; }
.crm-table td { padding: 1rem; border-top: 1px solid var(--color-border); color: var(--color-text); vertical-align: middle; }
.crm-table tbody tr:hover { background: rgba(77, 168, 166, 0.035); }
.crm-table td > small, .crm-table td > span { display: block; }
.crm-table td > small { margin-top: 0.22rem; color: var(--color-text-light); }
.crm-client { display: flex; align-items: center; gap: 0.7rem; min-width: 170px; color: var(--color-dark); text-decoration: none; }
.crm-client img, .crm-client > span { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; }
.crm-client > span { display: grid; place-items: center; background: rgba(77, 168, 166, 0.15); color: var(--color-primary-dark); font-weight: 800; }
.crm-row-action { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: var(--color-primary); text-decoration: none; }
.crm-row-action:hover { background: rgba(77, 168, 166, 0.12); }
.crm-empty { padding: 3rem !important; text-align: center; }
.crm-empty i, .crm-empty strong, .crm-empty span { display: block; }
.crm-empty i { margin-bottom: 0.7rem; color: var(--color-primary); font-size: 1.8rem; }
.crm-empty span { margin-top: 0.3rem; color: var(--color-text-light); }
.crm-profile-header { display: flex; align-items: center; gap: 1.2rem; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-white); }
.crm-profile-header > img, .crm-profile-avatar { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 50%; object-fit: cover; }
.crm-profile-avatar { display: grid; place-items: center; background: rgba(77, 168, 166, 0.15); color: var(--color-primary-dark); font-size: 1.8rem; font-weight: 800; }
.crm-profile-header p { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.crm-profile-header p a, .crm-profile-header p span { color: var(--color-text-light); text-decoration: none; }
.crm-profile-header p i { margin-right: 0.3rem; color: var(--color-primary); }
.crm-profile-header small { display: block; margin-top: 0.6rem; color: var(--color-text-light); }
.crm-detail-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.75fr); gap: 1rem; }
.crm-space-history ul { margin: 0; padding: 0; list-style: none; }
.crm-space-history li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-top: 1px solid var(--color-border); }
.crm-space-history li:first-child { border-top: 0; }
.crm-space-history li small { display: block; margin-top: 0.2rem; color: var(--color-text-light); }
.crm-space-history li b { color: var(--color-primary-dark); font-size: 0.84rem; white-space: nowrap; }
.crm-status-card dl { margin: 0; padding: 0.6rem 1.4rem; }
.crm-status-card dl div { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.crm-status-card dl div:last-child { border-bottom: 0; }
.crm-status-card dt { color: var(--color-text-light); }
.crm-status-card dd { margin: 0; color: var(--color-dark); font-weight: 800; }
.crm-status { display: inline-flex !important; width: fit-content; padding: 0.3rem 0.55rem; border-radius: 999px; background: #eef1f3; font-size: 0.76rem; font-weight: 800; }
.crm-status-confirmed { background: #e4f6ec; color: #237a4b; }
.crm-status-pending { background: #fff3d8; color: #946400; }
.crm-status-cancelled, .crm-status-rejected, .crm-status-expired { background: #fde8e8; color: #a23838; }
.crm-history-pagination { margin: 0; padding: 1rem 1.4rem; border-top: 1px solid var(--color-border); }

@media (max-width: 800px) {
  .crm-kpis { grid-template-columns: 1fr; }
  .crm-filters { flex-wrap: wrap; }
  .crm-search { flex-basis: 100%; }
  .crm-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .crm-filters label:not(.crm-search), .crm-filters select, .crm-filters .btn { width: 100%; }
  .crm-profile-header { align-items: flex-start; }
  .crm-profile-header > img, .crm-profile-avatar { width: 56px; height: 56px; flex-basis: 56px; }
}

/* 🌙 Dark Mode */
/*
@media (prefers-color-scheme: dark) {
  :root {
  }
}
*/

/* ============================= */
/* ✨ Base Elements               */
/* ============================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
  transition: var(--transition-default);
}

.development-banner {
  background: #4b5563;
  border-bottom: 2px solid #fbbf24;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.35rem 1rem;
  text-align: center;
  text-transform: uppercase;
}

.development-banner i {
  color: #fbbf24;
  margin-right: 0.35rem;
}

.pagination {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.pagination-link,
.pagination-current {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.pagination-current {
  color: var(--color-text-muted);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================= */
/* 📐 Layout & Utilities         */
/* ============================= */

/* Flexbox */
.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

/* Text */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.muted {
  color: var(--color-muted);
}

.font-tiny {
  font-size: 0.75rem;
}

/* Two-factor authentication for the administrative panel */
.two-factor-page {
  min-width: 320px;
  background: #edf4f4;
}

.two-factor-main {
  min-height: 100vh;
}

.two-factor-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 0.85fr) minmax(520px, 1.15fr);
  min-height: 100vh;
  overflow: hidden;
  background: #f7fafb;
}

.two-factor-showcase {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(36px, 5vw, 72px);
  color: #fff;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.16), transparent 27%),
    linear-gradient(145deg, #395764 0%, #456f76 44%, #087f7d 100%);
}

.two-factor-showcase::before,
.two-factor-showcase::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}

.two-factor-showcase::before {
  width: 430px;
  height: 430px;
  right: -230px;
  top: -120px;
  box-shadow: 0 0 0 65px rgba(255, 255, 255, 0.035), 0 0 0 130px rgba(255, 255, 255, 0.02);
}

.two-factor-showcase::after {
  width: 320px;
  height: 320px;
  left: -210px;
  bottom: -130px;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.035);
}

.two-factor-brand {
  display: inline-flex;
  align-self: flex-start;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 38px rgba(22, 44, 52, 0.18);
}

.two-factor-brand-mark img {
  width: 148px;
  max-height: 54px;
}

.two-factor-showcase-content {
  max-width: 510px;
  margin: 72px 0;
}

.two-factor-eyebrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 26px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #dcfffc;
  background: rgba(4, 44, 48, 0.18);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.two-factor-showcase h2 {
  max-width: 470px;
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(2.25rem, 4.2vw, 4.15rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.two-factor-showcase-content > p {
  max-width: 470px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.75;
}

.two-factor-trust {
  display: flex;
  gap: 9px;
  align-items: center;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.84rem;
}

.two-factor-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 6vw, 88px);
  background:
    radial-gradient(circle at 90% 8%, rgba(8, 196, 187, 0.08), transparent 25%),
    #f7fafb;
}

.two-factor-panel-top {
  position: absolute;
  top: 34px;
  right: clamp(34px, 6vw, 88px);
  left: calc(41.5% + clamp(34px, 6vw, 88px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #708087;
  font-size: 0.86rem;
  font-weight: 600;
}

.two-factor-panel-top span,
.two-factor-panel-top a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.two-factor-panel-top a {
  color: #526970;
  transition: color 160ms ease, transform 160ms ease;
}

.two-factor-panel-top a:hover {
  color: #087f7d;
  transform: translateX(-2px);
}

.two-factor-card {
  width: 100%;
  max-width: 550px;
  margin: 24px auto 0;
  padding: clamp(30px, 4vw, 50px);
  border: 1px solid rgba(75, 106, 116, 0.11);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 80px rgba(44, 74, 82, 0.13), 0 3px 12px rgba(44, 74, 82, 0.05);
}

.two-factor-card-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 22px;
  place-items: center;
  border: 1px solid rgba(8, 196, 187, 0.2);
  border-radius: 18px;
  color: #087f7d;
  background: linear-gradient(145deg, #effcfb, #dff6f4);
  box-shadow: 0 12px 28px rgba(8, 127, 125, 0.12);
  font-size: 1.55rem;
}

.two-factor-card h1 {
  margin-bottom: 13px;
  color: #314b55;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-align: center;
}

.two-factor-card > p {
  margin: 0 auto 26px;
  color: #718087;
  line-height: 1.65;
  text-align: center;
}

.two-factor-card form > p {
  color: #526269;
}

.two-factor-card table {
  width: 100%;
  margin-bottom: 22px;
  border-collapse: collapse;
}

.two-factor-card th,
.two-factor-card td {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.two-factor-card th label,
.two-factor-card form > p label {
  display: block;
  margin: 16px 0 7px;
  color: #415961;
  font-size: 0.88rem;
  font-weight: 700;
}

.two-factor-card input:not([type="hidden"]):not([type="checkbox"]),
.two-factor-card select {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #d8e2e5;
  border-radius: 12px;
  outline: 3px solid transparent;
  background: #fbfdfd;
  color: #2f3a40;
  font-size: 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, outline-color 160ms ease;
}

.two-factor-card input:focus,
.two-factor-card select:focus {
  border-color: #08a9a2;
  outline-color: rgba(8, 196, 187, 0.11);
  background: #fff;
  box-shadow: 0 7px 18px rgba(8, 127, 125, 0.07);
}

.two-factor-card .helptext {
  display: block;
  margin-top: 6px;
  color: #86949a;
  font-size: 0.8rem;
}

.two-factor-card .errorlist {
  margin: 8px 0;
  padding: 10px 13px;
  border: 1px solid #f1c7c2;
  border-radius: 10px;
  color: #9d3025;
  background: #fff4f2;
  font-size: 0.87rem;
  list-style: none;
}

.two-factor-card img {
  display: block;
  max-width: 250px;
  height: auto;
  margin: 24px auto;
  padding: 12px;
  border: 1px solid #dce7e9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 35px rgba(49, 75, 85, 0.1);
}

.two-factor-card .btn {
  min-height: 46px;
  margin: 5px 5px 5px 0;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(8, 127, 125, 0.12);
}

.two-factor-card .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(8, 127, 125, 0.18);
}

.two-factor-card .btn-secondary,
.two-factor-card .btn:disabled {
  color: #5d7077;
  border-color: #dbe4e7;
  background: #eef3f4;
  box-shadow: none;
}

.two-factor-card .btn-link {
  color: #536d75;
  background: transparent;
  box-shadow: none;
}

.two-factor-card .btn-block {
  width: 100%;
}

.two-factor-card .float-right {
  float: right;
}

.two-factor-card hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid #e5ecee;
}

.two-factor-rate-limit-status {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0 22px;
  padding: 14px 16px;
  border: 1px solid #f0d9aa;
  border-radius: 12px;
  color: #795d20;
  background: #fffaf0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.two-factor-rate-limit-status i {
  color: #b4872e;
  font-size: 1.1rem;
}

.two-factor-card .two-factor-rate-limit-action {
  display: block;
  width: 100%;
  text-align: center;
}

@media (max-width: 960px) {
  .two-factor-shell {
    grid-template-columns: 1fr;
  }

  .two-factor-showcase {
    min-height: auto;
    padding: 28px clamp(24px, 6vw, 60px) 38px;
  }

  .two-factor-showcase-content {
    margin: 48px 0 0;
  }

  .two-factor-showcase h2 {
    max-width: 620px;
    font-size: clamp(2.15rem, 7vw, 3.6rem);
  }

  .two-factor-trust {
    display: none;
  }

  .two-factor-panel {
    min-height: 620px;
    padding: 42px 24px 44px;
  }

  .two-factor-panel-top {
    position: static;
    width: 100%;
    max-width: 550px;
    margin: 0 auto 20px;
  }

  .two-factor-card {
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .two-factor-showcase {
    padding: 22px 20px 30px;
  }

  .two-factor-brand-mark img {
    width: 118px;
  }

  .two-factor-showcase-content {
    margin-top: 34px;
  }

  .two-factor-showcase-content > p {
    font-size: 0.95rem;
  }

  .two-factor-panel {
    min-height: 570px;
    padding: 28px 14px 34px;
  }

  .two-factor-panel-top span {
    display: none;
  }

  .two-factor-panel-top {
    justify-content: flex-end;
  }

  .two-factor-card {
    padding: 30px 20px;
    border-radius: 22px;
  }

  .two-factor-card .float-right {
    float: none;
  }
}

/* Spacing */
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }

.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }

.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }

.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Width / Height */
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.max-w-400 { max-width: 400px; }

/* Border / Radius / Shadow */
.rounded { border-radius: var(--border-radius); }
.shadow { box-shadow: var(--shadow-default); }
.border { border: 1px solid var(--color-border); }


/* Images */
.img-fluid { max-width: 100%; height: auto; object-fit: cover; border-radius: var(--eo-radius-card); }

.icon-image-sm,
.icon-image-md,
.icon-image-lg {
  display: block;
  object-fit: contain;
}

.icon-image-sm {
  width: var(--eo-icon-sm);
  height: var(--eo-icon-sm);
}
.icon-image-md {
  width: var(--eo-icon-md);
  height: var(--eo-icon-md);
}
.icon-image-lg {
  width: var(--eo-icon-lg);
  height: var(--eo-icon-lg);
}

/* Image color filters
.img-tint-primary {
  filter: brightness(0) saturate(100%) invert(69%) sepia(22%) saturate(703%) hue-rotate(287deg) brightness(91%) contrast(88%);
}

.img-tint-secondary {
  filter: brightness(0) saturate(100%) invert(59%) sepia(20%) saturate(1019%) hue-rotate(289deg) brightness(85%) contrast(86%);
}

.img-tint-muted {
  filter: brightness(0) saturate(100%) invert(74%) sepia(10%) saturate(395%) hue-rotate(282deg) brightness(84%) contrast(87%);
} */

/* Highlighted links */
.link-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-blue);
  font-weight: 500;
  transition: var(--transition-default);
}

.link-highlight i {
  font-size: 0.95em;
}

.link-highlight:hover {
  color: color-mix(in srgb, var(--color-blue) 82%, black);
}

.link-muted {
  opacity: 0.6;
}

.link-muted:hover {
  opacity: 0.8;
}

/* ============================= */
/* 🎯 Buttons                    */
/* ============================= */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--eo-radius-button);
  cursor: pointer;
  transition: var(--transition-default);
  text-align: center;
}

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

/* Variants */
.btn-secondary {
  background-color: var(--color-secondary);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: white;
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid transparent;
  border-radius: var(--eo-radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: var(--transition-default);
  white-space: nowrap;
}

.ui-button i {
  font-size: 0.82rem;
}

.ui-button--sm {
  padding: 0.42rem 0.72rem;
  font-size: 0.88rem;
}

.ui-button--tint-primary {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.ui-button--tint-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
  text-decoration: none;
}

.ui-button--tint-blue {
  background: color-mix(in srgb, var(--color-blue) 12%, transparent);
  color: var(--color-blue);
}

.ui-button--tint-blue:hover {
  background: color-mix(in srgb, var(--color-blue) 20%, transparent);
  color: var(--color-blue);
  text-decoration: none;
}

.ui-button--tint-green {
  background: color-mix(in srgb, var(--color-green) 12%, transparent);
  color: var(--color-green);
}

.ui-button--tint-green:hover {
  background: color-mix(in srgb, var(--color-green) 20%, transparent);
  color: var(--color-green);
  text-decoration: none;
}

.ui-button--tint-red {
  background: color-mix(in srgb, var(--color-red) 10%, transparent);
  color: var(--color-red);
}

.ui-button--tint-red:hover {
  background: color-mix(in srgb, var(--color-red) 18%, transparent);
  color: var(--color-red);
  text-decoration: none;
}

/* ============================= */
/* 🧩 Cards, Containers, etc.    */
/* ============================= */

.container {
  width: 100%;
  max-width: var(--eo-container-lg);
  margin: 0 auto;
  padding-inline: var(--eo-page-x);
}

.card {
  background-color: var(--color-surface);
  border-radius: var(--eo-radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-default);
  transition: var(--transition-default);
}

.card:hover {
  transform: translateY(-4px);
}

/* ============================= */
/* 🔠 Typography                 */
/* ============================= */

.title {
  font-size: 2rem;
  color: var(--color-primary);
}

.subtitle {
  font-size: 1.25rem;
  color: var(--color-muted);
}

.paragraph {
  font-size: 1rem;
  color: var(--color-text);
}

/* ============================= */
/* 📱 Responsive Breakpoints     */
/* ============================= */
@media (max-width: 768px) {
  .flex-row {
    flex-direction: column;
  }

  .container {
    padding: 1rem;
  }
}

/* ============================= */
/* 🌐 Template Base Layout       */
/* ============================= */

.header {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
  box-shadow: var(--shadow-default);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem;
}

.logo a {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
  text-decoration: none;
}

.logo img {
  max-height: 50px;
}

.menu a {
  margin-left: 1.5rem;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.menu {
  display: flex;
  align-items: center;
}

.menu-mobile-home,
.menu-label-mobile {
  display: none;
}

.menu a:hover {
  color: var(--color-primary);
}

.header-notifications-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 1.5rem;
}

.header-notifications {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-default);
}

.header-notifications:hover,
.header-notifications[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--eo-radius-pill);
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--color-surface);
}

.notifications-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: min(360px, calc(100vw - 2rem));
  max-height: 420px;
  overflow-y: auto;
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.notifications-dropdown.is-open {
  display: block;
}

.notifications-dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 14px;
  width: 14px;
  height: 14px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}

.notifications-dropdown-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.notifications-dropdown-header button {
  border: 0;
  background: transparent;
  color: var(--color-secondary);
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  cursor: pointer;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  transition: var(--transition-default);
}

.notification-item:last-child {
  border-bottom: none;
}


.notification-item:hover {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-text);
}

/* Read notification styles */
.notification-item-read {
  opacity: 0.58;
  background: rgba(0, 0, 0, 0.025);
}

.notification-item-read:hover {
  opacity: 0.78;
  background: rgba(0, 0, 0, 0.04);
}

.notification-item-read .notification-item-icon {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--color-border);
  color: var(--color-muted);
}

.notification-item-read .notification-item-content strong,
.notification-item-read .notification-item-content span {
  color: var(--color-muted);
}

.notification-item-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--eo-radius-pill);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
}

.notification-item-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.notification-item-content strong {
  color: var(--color-secondary);
  font-size: 0.92rem;
  line-height: 1.3;
}

.notification-item-content span {
  color: var(--color-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.notification-item-content time {
  align-self: flex-end;
  margin-top: .15rem;
  color: var(--color-muted);
  font-size: .68rem;
  line-height: 1;
}

.notification-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  text-align: center;
}

.notification-text-highlight {
  color: var(--color-primary) !important;
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .header {
    height: calc(64px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 0 0;
    box-shadow: none;
    z-index: 40;
  }

  .header .container {
    height: 64px;
    padding: 0 1rem;
  }

  .logo img {
    width: 56px;
    max-height: 36px;
  }

  .menu {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: calc(68px + env(safe-area-inset-bottom));
    padding: 0.45rem max(0.4rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0.4rem, env(safe-area-inset-left));
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    box-shadow: 0 -10px 30px rgba(35, 55, 64, 0.08);
    backdrop-filter: blur(14px);
  }

  body.is-anonymous .menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-authenticated:not(.has-landlord-account) .menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .menu > a,
  .menu > .menu-mobile-home {
    display: flex;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 0.38rem 0.2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border-radius: 0.8rem;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.15;
    text-align: center;
  }

  .menu > a > i {
    font-size: 1.15rem;
  }

  .menu > a:hover,
  .menu > a:focus-visible,
  .menu > a.is-active {
    background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
    color: var(--color-secondary);
  }

  .menu > a.is-active > i {
    transform: translateY(-1px);
  }

  .menu-label-desktop {
    display: none;
  }

  .menu-label-mobile {
    display: inline;
  }

  .header-notifications-wrapper {
    position: fixed;
    z-index: 60;
    top: calc(env(safe-area-inset-top) + 13px);
    right: 1rem;
    margin: 0;
  }

  .header-notifications {
    width: 38px;
    height: 38px;
    background: var(--color-background);
  }

  .notifications-dropdown {
    position: fixed;
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-height: min(68vh, calc(100vh - 150px));
    border-radius: 1rem 1rem .35rem .35rem;
    box-shadow: 0 -18px 48px rgba(20, 35, 42, .18);
  }

  .notifications-dropdown::before {
    display: none;
  }

  body .main-content {
    padding: 1.25rem 1rem;
  }

  .footer {
    display: block;
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }
}

/* Content */
.main-content {
  padding: 2rem 1rem;
  min-height: 80vh;
  background-color: var(--color-background);
}

/* Footer */
.footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0;
  padding-bottom: 0;
}

.footer-legal-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-legal-links a { color: var(--color-muted); font-weight: 600; }
.footer-legal-links a:hover { color: var(--color-primary); text-decoration: underline; }

/* Public legal documents */
.legal-page {
  width: min(1120px, 100%);
  margin: 0 auto;
  color: var(--color-text);
}

.legal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.25rem);
  border: 1px solid var(--color-border);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--color-secondary) 18%, transparent), transparent 17rem),
    linear-gradient(145deg, var(--color-surface), color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)));
  box-shadow: var(--eo-shadow-sm);
}

.legal-eyebrow {
  display: inline-flex;
  margin-bottom: 0.8rem;
  color: var(--color-secondary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--color-primary);
  font-size: clamp(2rem, 5vw, 3.65rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.legal-hero > p {
  max-width: 760px;
  margin: 1rem 0 0;
  color: var(--color-muted);
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.7;
}

.legal-meta { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.5rem; }
.legal-meta span { display: inline-flex; align-items: center; gap: 0.42rem; color: var(--color-muted); font-size: 0.82rem; font-weight: 650; }
.legal-meta i { color: var(--color-secondary); }

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: 2rem;
}

.legal-sidebar {
  position: sticky;
  top: 7.5rem;
  max-height: calc(100vh - 9rem);
  overflow: auto;
  padding: 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
}

.legal-sidebar > strong { display: block; margin-bottom: 0.7rem; color: var(--color-text); font-size: 0.83rem; }
.legal-sidebar nav { display: grid; }
.legal-sidebar nav a { padding: 0.31rem 0; color: var(--color-muted); font-size: 0.78rem; line-height: 1.35; }
.legal-sidebar nav a:hover { color: var(--color-primary); }
.legal-sidebar-help { display: flex; gap: 0.65rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.75rem; line-height: 1.45; }
.legal-sidebar-help i { margin-top: 0.18rem; color: var(--color-secondary); }
.legal-sidebar-help a { overflow-wrap: anywhere; font-weight: 650; }

.legal-document { min-width: 0; }
.legal-document > section:not(.legal-contact-card) { position: relative; padding: 1.85rem 0; scroll-margin-top: 7.5rem; border-bottom: 1px solid var(--color-border); }
.legal-document h2 { margin: 0 0 0.85rem; color: var(--color-primary); font-size: clamp(1.25rem, 3vw, 1.65rem); line-height: 1.25; letter-spacing: -0.018em; }
.legal-document h3 { margin: 0.55rem 0 0.3rem; color: var(--color-text); font-size: 0.94rem; }
.legal-document p { margin: 0.72rem 0; line-height: 1.78; }
.legal-document ul { display: grid; gap: 0.55rem; margin: 0.9rem 0 0.9rem 1.2rem; }
.legal-document li { padding-left: 0.25rem; line-height: 1.7; }
.legal-document a { color: color-mix(in srgb, var(--color-primary) 80%, var(--color-secondary)); font-weight: 650; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 28%, transparent); text-underline-offset: 0.16em; }
.legal-section-number { display: block; margin-bottom: 0.3rem; color: var(--color-secondary); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; }

.legal-callout { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 0.6rem; padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--eo-radius-panel); }
.legal-callout > i { margin-top: 0.28rem; font-size: 1.05rem; }
.legal-callout p { margin: 0; }
.legal-callout--summary { border-color: color-mix(in srgb, var(--color-secondary) 27%, var(--color-border)); background: color-mix(in srgb, var(--color-secondary) 5%, var(--color-surface)); }
.legal-callout--summary > i { color: var(--color-secondary); }
.legal-callout--google { margin-top: 1.1rem; border-color: color-mix(in srgb, var(--color-blue) 24%, var(--color-border)); background: color-mix(in srgb, var(--color-blue) 5%, var(--color-surface)); }
.legal-callout--google > i { color: var(--color-blue); }

.legal-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.legal-data-grid > div { padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--eo-radius-panel); background: var(--color-surface); }
.legal-data-grid > div > i { color: var(--color-secondary); }
.legal-data-grid p { margin: 0; color: var(--color-muted); font-size: 0.88rem; line-height: 1.6; }

.legal-scope-list { display: grid; gap: 0.55rem; margin: 1rem 0; }
.legal-scope-list > div { display: grid; grid-template-columns: minmax(175px, .75fr) 1.5fr; gap: 0.8rem; align-items: start; padding: 0.75rem; border-radius: var(--eo-radius-input); background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); }
.legal-scope-list code { overflow-wrap: anywhere; color: var(--color-primary); font-size: 0.78rem; font-weight: 750; }
.legal-scope-list span { font-size: 0.88rem; line-height: 1.55; }

.legal-identity-list { display: grid; gap: 0.5rem; margin: 1rem 0; }
.legal-identity-list > div { display: grid; grid-template-columns: 90px 1fr; gap: 0.7rem; }
.legal-identity-list dt { color: var(--color-muted); font-size: 0.8rem; font-weight: 700; }
.legal-identity-list dd { font-weight: 650; }

.legal-contact-card { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2rem; padding: 1.2rem; border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); border-radius: var(--eo-radius-card); background: var(--color-surface); }
.legal-contact-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-surface)); color: var(--color-secondary); }
.legal-contact-card h2 { margin-bottom: 0.3rem; font-size: 1rem; }
.legal-contact-card p { margin: 0; color: var(--color-muted); font-size: 0.88rem; }

@media (max-width: 820px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-sidebar { position: static; max-height: none; }
  .legal-sidebar > strong,
  .legal-sidebar nav { display: none; }
  .legal-sidebar-help { margin: 0; padding: 0; border: 0; }
}

@media (max-width: 600px) {
  .footer-content { align-items: flex-start; flex-direction: column; }
  .legal-hero { padding: 1.5rem; border-radius: 1rem; }
  .legal-data-grid { grid-template-columns: 1fr; }
  .legal-scope-list > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .legal-contact-card { align-items: flex-start; }
}

/* ============================= 
Login:
login.html
register.html
create_organization.html
============================= */

.site-messages {
  padding-top: 1rem;
}

.site-message {
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-text);
}

.site-message--warning,
.site-message--error {
  border-color: #d6a84b;
  background: #fff8e7;
  color: #684b0b;
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 85vh;
  padding: 20px;
  background: var(--color-background);
}

.auth-form {
  background: var(--color-surface);
  padding: 40px 32px;
  border-radius: var(--eo-radius-card);
  box-shadow: var(--shadow-default);
  max-width: 400px;
  width: 100%;
}

.auth-form h2 {
  text-align: center;
  margin-bottom: 32px;
  font-size: 1.8rem;
  color: var(--color-primary);
}

.register-field-label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 750;
}

.register-field-label > span { color: var(--color-red); }
.register-field-label small { color: var(--color-muted); font-weight: 500; }
.register-field-help { display: block; margin: -0.8rem 0 1.2rem; color: var(--color-muted); line-height: 1.4; }
.register-username-status { display: block; margin: -0.9rem 0 1.2rem; color: var(--color-dark-green); font-weight: 700; }

.register-profile-field { margin-bottom: 1.5rem; }
.register-profile-picker { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem; border: 1px dashed var(--color-border); border-radius: var(--eo-radius-panel); cursor: pointer; }
.register-profile-picker:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); }
.register-profile-preview { width: 58px; height: 58px; flex: 0 0 58px; overflow: hidden; border-radius: 50%; background: var(--color-background); }
.register-profile-preview img { width: 100%; height: 100%; object-fit: cover; }
.register-profile-picker > span:nth-child(2) { display: grid; gap: 0.2rem; min-width: 0; }
.register-profile-picker small { color: var(--color-muted); font-size: 0.72rem; }
.register-profile-picker > i { margin-left: auto; color: var(--color-primary); }
.register-profile-field input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.input-group {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 24px;
  transition: border 0.2s ease;
}

.input-group:focus-within {
  border-bottom-color: var(--color-primary);
}

.input-group i {
  margin-right: 10px;
  color: var(--color-muted);
  font-size: 1rem;
}

.input-group input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  font-size: 1rem;
  padding: 12px 0;
  color: var(--color-text);
}

.input-group input::placeholder {
  color: var(--color-muted);
  font-style: italic;
}

.input-group.highlighted-select-group {
  position: relative;
}

.input-group.highlighted-select-group select,
.input-group .form-select {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-white);
  color: var(--color-text);
  font-size: 0.95rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.input-group.highlighted-select-group select:focus,
.input-group .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.input-group.highlighted-select-group::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.input-group.subtle-select-group select {
  width: 100%;
  height: 48px;
  padding: 0;

  border: none;
  background: transparent;

  font-size: 0.95rem;
  color: var(--color-text);

  appearance: none;
  cursor: pointer;
}

.input-group.subtle-select-group select:focus {
  outline: none;
  box-shadow: none;
}

.btn.full {
  width: 100%;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px;
  font-size: 1rem;
  border: none;
  border-radius: var(--eo-radius-button);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn.full:hover {
  background: var(--color-secondary);
}

.text-muted {
  margin-top: 20px;
  font-size: 0.9rem;
  text-align: center;
  color: var(--color-muted);
}

.error-text {
  color: var(--color-red); 
  font-size: 12px;
  margin-top: -16px;
  display: block;
}

/* =============================
Organization Address Form
create_organization.html
============================= */

.organization-address-section {
  margin: 1.25rem 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-panel);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-primary) 12%);
}

.form-section-title {
  margin: 0 0 0.35rem;
  color: var(--color-primary);
  font-size: 1.05rem;
  font-weight: 700;
}

.form-section-subtitle {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
}

.organization-address-section .btn-outline.full {
  margin-top: 0.25rem;
  margin-bottom: 0;
  background: transparent;
  color: var(--color-primary);
}

.organization-address-section .btn-outline.full:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.new-address-fields {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-border);
}

.new-address-fields .input-group:last-of-type {
  margin-bottom: 0;
}

/* ============================= 
Account:
account_details.html 
============================= */

.account-container {
  max-width: 800px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 20px;
}

.account-card {
  background: linear-gradient(145deg, var(--color-background), var(--color-surface));
  border-radius: var(--eo-radius-card);
  padding: 36px;
  box-shadow: var(--shadow-default);
  position: relative;
  overflow: hidden;
}

.account-card::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  opacity: 0.06;
}

.account-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.profile-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.account-profile-picker { position: relative; display: block; width: 80px; height: 80px; flex: 0 0 80px; border-radius: 50%; }
.account-profile-picker input { display: none; }
.account-profile-edit { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 0.15rem; border-radius: 50%; background: rgba(17, 24, 39, 0.68); color: #fff; text-align: center; }
.account-profile-edit small { color: inherit; font-size: 0.65rem; font-weight: 700; }
.account-profile-picker.is-editing { cursor: pointer; }
.account-profile-picker.is-editing .account-profile-edit { display: flex; }
.account-profile-picker.is-editing:hover .account-profile-edit,
.account-profile-picker.is-editing:focus-within .account-profile-edit { background: rgba(17, 24, 39, 0.8); }

.username {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.account-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--color-border); }
.account-detail-item { display: grid; align-content: center; gap: 0.3rem; min-height: 86px; padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.account-detail-item > label { color: var(--color-muted); font-size: 0.72rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; }
.account-detail-item > strong { color: var(--color-text); overflow-wrap: anywhere; }
.account-detail-item > small { color: var(--color-muted); font-size: 0.7rem; }
.account-detail-item--locked { opacity: 0.82; }
.account-created-at { margin: 0.85rem 0 0; color: var(--color-muted); font-size: 0.75rem; }

.account-footer {
  text-align: right;
  margin-top: 20px;
}
.account-save-error { margin: 0 0 0.75rem; color: var(--color-red); font-size: 0.82rem; }

/* Upload Overlay */
.profile-picture-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
}

.upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-background);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  opacity: 0;
  transition: 0.3s ease;
  cursor: pointer;
}

.profile-picture-wrapper:hover .upload-overlay {
  opacity: 1;
}

.upload-overlay i {
  font-size: 18px;
}

/* Inputs de edição */
.edit-account-input {
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  padding: 0.65rem 0.75rem;
  font-size: 0.95rem;
  outline: none;
  width: 100%;
  max-width: 300px;
  color: var(--color-text);
}
.edit-account-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); }

@media (max-width: 600px) {
  .account-details { grid-template-columns: 1fr; }
  .account-card { padding: 1.25rem; }
}

/* Botão de logout */
.logout-button {
  background: none;
  border: none;
  color: var(--color-red); 
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0;
  margin-top: 24px;
  transition: color 0.2s ease;
}

.logout-button i {
  font-size: 1rem;
}

.logout-button:hover {
  filter: brightness(0.8);
  text-decoration: underline;
}

/* Google Calendar connection */
.calendar-connect-card {
  margin-top: 1.5rem;
  padding: 1.4rem;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, var(--color-primary) 16%);
  border-radius: var(--eo-radius-card);
  box-shadow: var(--eo-shadow-xs);
}

.landlord-account-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-default);
}

.landlord-account-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
}

.landlord-account-card__content h3 { margin: 0 0 .25rem; color: var(--color-primary); }
.landlord-account-card__content p { margin: 0 0 .8rem; color: var(--color-muted); }

.landlord-account-card__content { min-width: 0; flex: 1; }
.landlord-account-list { display: grid; gap: .55rem; margin: .8rem 0; }
.landlord-account-list__item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--eo-radius-panel); background: var(--color-background); }
.landlord-account-list__item > span:first-child { min-width: 0; }
.landlord-account-identity { display: flex; align-items: center; gap: .7rem; }
.landlord-account-identity > span:last-child { display: grid; min-width: 0; }
.landlord-account-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border); }
.landlord-account-avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-background)); }
.landlord-account-list__item strong { color: var(--color-text); }
.landlord-account-list__item small { color: var(--color-muted); }
.landlord-account-status { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; font-size: .72rem; font-weight: 750; }
.landlord-account-status--approved { color: var(--color-dark-green); }
.landlord-account-status--pending { color: var(--color-dark-yellow); }
.landlord-account-pending-help { font-size: .82rem; }
.landlord-account-new-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; font-size: .82rem; font-weight: 700; color: var(--color-secondary); }

@media (max-width: 600px) {
  .landlord-account-card { padding: 1rem; }
  .landlord-account-list__item { align-items: flex-start; flex-direction: column; }
}

.calendar-connect-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}

.calendar-connect-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  color: var(--color-primary);
  font-size: 1.12rem;
}

.calendar-connect-heading { min-width: 0; }

.calendar-connect-header h3 {
  margin: 0 0 0.2rem;
  color: var(--color-text);
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.calendar-connect-header p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.calendar-connect-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  padding: 0.42rem 0.65rem;
  border-radius: var(--eo-radius-input);
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1;
}

.calendar-connect-status.connected {
  border-color: color-mix(in srgb, var(--color-green) 28%, var(--color-border));
  color: var(--color-green);
  background: color-mix(in srgb, var(--color-green) 6%, var(--color-surface));
}

.calendar-connect-status.disconnected {
  border-color: color-mix(in srgb, var(--color-red) 26%, var(--color-border));
  color: var(--color-red);
  background: color-mix(in srgb, var(--color-red) 5%, var(--color-surface));
}

.calendar-account-badge {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.46rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, var(--color-primary) 16%);
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-background) 46%, var(--color-surface));
  color: var(--color-text);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.2;
}

.calendar-account-badge i {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.calendar-account-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-connected-account {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-green) 20%, var(--color-border));
  border-radius: var(--eo-radius-panel);
  background: color-mix(in srgb, var(--color-green) 4%, var(--color-surface));
}

.calendar-connected-indicator {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 0.7rem;
}

.calendar-connected-account > div { display: grid; min-width: 0; flex: 1; }
.calendar-connected-account strong { color: var(--color-dark-green); font-size: 0.82rem; }
.calendar-connected-account div span { overflow: hidden; color: var(--color-muted); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }

.calendar-account-change,
.calendar-edit-trigger,
.calendar-edit-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-button);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.calendar-account-change:hover,
.calendar-edit-trigger:hover,
.calendar-edit-cancel:hover {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  transform: translateY(-1px);
}

.calendar-destination-card {
  overflow: hidden;
  margin-top: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-panel);
  background: var(--color-background);
}

.calendar-destination-summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem;
}

.calendar-destination-summary[hidden] { display: none; }

.calendar-destination-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-secondary) 11%, var(--color-surface));
  color: color-mix(in srgb, var(--color-secondary) 82%, var(--color-primary));
}

.calendar-destination-copy { display: grid; min-width: 0; flex: 1; }
.calendar-destination-copy span { color: var(--color-muted); font-size: 0.75rem; font-weight: 600; }
.calendar-destination-copy strong { overflow: hidden; color: var(--color-text); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }

.calendar-connect-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}

.calendar-preference-form {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
  background: var(--color-surface);
  animation: calendar-form-enter 0.18s ease-out;
}

.calendar-preference-form[hidden] { display: none; }

@keyframes calendar-form-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.calendar-preference-form label {
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 700;
}

.calendar-preference-form select { width: 100%; min-width: 0; }
.calendar-preference-form p { display: flex; align-items: center; gap: 0.38rem; margin: 0; color: var(--color-muted); font-size: 0.76rem; }
.calendar-preference-form p i { color: var(--color-secondary); }
.calendar-preference-actions { display: flex; justify-content: flex-end; gap: 0.55rem; margin-top: 0.15rem; }
.calendar-preference-save { flex: 0 0 auto; margin: 0; padding: 0.55rem 0.8rem; font-size: 0.8rem; font-weight: 700; }
.calendar-preference-warning { margin: 0.5rem 0 0; color: var(--color-muted); font-size: 0.86rem; }
.calendar-disconnect-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}
.calendar-disconnect-button { color: var(--color-red); }
.calendar-disconnect-button:hover { text-decoration: underline; }

.calendar-connect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: fit-content;
  margin-top: 0.9rem;
  padding: 0.56rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
  border-radius: var(--eo-radius-button);
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.calendar-connect-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 52%, var(--color-border));
  color: var(--color-secondary);
  transform: translateY(-1px);
}

.calendar-reconnect-btn {
  margin-top: 0;
  padding: 0.68rem 1rem;
  border-color: color-mix(in srgb, var(--color-blue) 34%, var(--color-border));
  background: color-mix(in srgb, var(--color-blue) 6%, var(--color-surface));
  color: var(--color-blue);
  font-weight: 700;
}

.calendar-reconnect-btn:hover {
  background: color-mix(in srgb, var(--color-blue) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-blue) 48%, var(--color-border));
  color: var(--color-blue);
}

@media (max-width: 640px) {
  .calendar-connect-card {
    padding: 1rem;
  }

  .calendar-connect-header {
    gap: 0.75rem;
  }

  .calendar-account-badge,
  .calendar-connect-btn {
    width: 100%;
  }

  .calendar-connect-actions {
    justify-content: flex-end;
  }

  .calendar-connected-account { align-items: flex-start; flex-wrap: wrap; }
  .calendar-account-change { margin-left: 2.4rem; }
  .calendar-destination-summary { align-items: flex-start; flex-wrap: wrap; }
  .calendar-edit-trigger { width: 100%; margin-top: 0.15rem; }
  .calendar-preference-actions { align-items: stretch; flex-direction: column-reverse; }
  .calendar-preference-save,
  .calendar-edit-cancel { width: 100%; }
}

/* =============================
📅 Calendar:
calendar.html
============================= */

.calendar-space-section {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 22rem),
    linear-gradient(145deg, var(--color-surface), color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)));
  border: 1px solid color-mix(in srgb, var(--color-border) 86%, var(--color-primary) 14%);
  border-radius: var(--eo-radius-panel);
  padding: clamp(1.2rem, 3vw, 2rem);
  margin-bottom: 2rem;
  box-shadow: var(--eo-shadow-sm);
  color: var(--color-text);
}

.calendar-space-section::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: 260px;
  height: 260px;
  border-radius: var(--eo-radius-pill);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  pointer-events: none;
}

.calendar-space-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 1.35rem;
}

.calendar-space-header-content {
  max-width: 760px;
}

.calendar-organization-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
  padding: .42rem .58rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  color: var(--color-primary);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

.calendar-organization-link:hover {
  border-color: var(--color-secondary);
  background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface));
}

.calendar-organization-logo {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  overflow: hidden;
  place-items: center;
  border-radius: .55rem;
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.calendar-organization-logo img { width: 100%; height: 100%; object-fit: cover; }
.calendar-organization-link > span:nth-child(2) { display: grid; gap: .08rem; }
.calendar-organization-link small { color: var(--color-muted); font-size: .62rem; }
.calendar-organization-link strong { font-size: .78rem; }
.calendar-organization-link > i { margin-left: .15rem; font-size: .65rem; }

.calendar-space-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.7rem;
  padding: 0.46rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-space-title {
  max-width: 780px;
  margin: 0 0 0.55rem;
  color: var(--color-primary);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 850;
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.calendar-space-description {
  max-width: 760px;
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.86;
}

.calendar-space-price-card {
  min-width: 190px;
  padding: 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-surface) 76%, transparent);
  box-shadow: var(--eo-shadow-xs);
  backdrop-filter: blur(8px);
  text-align: right;
}

.calendar-space-price-label,
.calendar-space-price-period {
  display: block;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.calendar-space-price {
  display: block;
  margin: 0.14rem 0;
  color: var(--color-primary);
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.calendar-info-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  margin-top: 0;
}

.calendar-info-card {
  width: 100%;
  min-height: 82px;
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-background) 12%);
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%);
  border-radius: var(--eo-radius-card);
  padding: 0.9rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.12rem 0.7rem;
  transition: border-color var(--eo-transition-fast), box-shadow var(--eo-transition-fast), background var(--eo-transition-fast), transform var(--eo-transition-fast);
}

.calendar-info-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-xs);
}

.calendar-info-card-wide {
  width: 100%;
  max-width: none;
  grid-column: 1 / -1;
}

.calendar-info-card i {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  border-radius: var(--eo-radius-button);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.88rem;
}

.calendar-info-card strong {
  color: var(--color-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.calendar-info-card span {
  color: var(--color-text);
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.4;
}

.calendar-text-highlight {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

.calendar-gallery-section,
.calendar-availability-section,
.calendar-features-section {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%);
}

.calendar-gallery-section {
  padding-top: 0;
  border-top: 0;
}

.calendar-availability-section {
  width: 100%;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.calendar-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.calendar-section-description {
  max-width: 540px;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: right;
}

.calendar-gallery-slider {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.calendar-gallery-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-xs);
}

.calendar-gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--eo-transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--color-surface);
}

.calendar-gallery-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.calendar-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--color-surface);
}

.calendar-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%);
  border-radius: var(--eo-radius-pill);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  color: var(--color-primary);
  cursor: pointer;
  z-index: 5;
  transition: var(--eo-transition-fast);
}

.calendar-gallery-nav-prev {
  left: 1rem;
}

.calendar-gallery-nav-next {
  right: 1rem;
}

.calendar-gallery-thumbnails {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
}

.calendar-gallery-thumbnail {
  flex: 0 0 96px;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--eo-radius-input);
  cursor: pointer;
  background: var(--color-surface);
  opacity: .65;
  transition: var(--eo-transition-fast);
}

.calendar-gallery-thumbnail:hover {
  opacity: 1;
}

.calendar-gallery-thumbnail.is-active {
  opacity: 1;
  border-color: var(--color-primary);
}

.calendar-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--color-surface);
}

.calendar-availability-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.calendar-availability-title i {
  font-size: 1rem;
}

.calendar-availability-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.calendar-availability-item {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%);
  border-radius: var(--eo-radius-card);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.38rem;
  transition: border-color var(--eo-transition-fast), box-shadow var(--eo-transition-fast), background var(--eo-transition-fast), transform var(--eo-transition-fast);
}

.calendar-availability-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-xs);
}

.calendar-availability-item > div {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.4;
}

.calendar-availability-item > div:first-child {
  color: var(--color-text);
  font-weight: 750;
}

.calendar-availability-item > div:last-child {
  color: var(--color-muted);
  font-weight: 650;
}

.calendar-availability-item i {
  width: 1rem;
  color: var(--color-primary);
  margin-right: 0;
  font-size: 0.86rem;
  text-align: center;
}

.calendar-features-section {
  width: 100%;
}

.calendar-features-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.calendar-feature-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.68rem 0.86rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1;
  box-shadow: none;
  transition: transform var(--eo-transition-fast), border-color var(--eo-transition-fast), background var(--eo-transition-fast);
}

.calendar-feature-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
}

.calendar-feature-item i {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--eo-radius-button);
  font-size: 0.68rem;
  flex-shrink: 0;
}

.calendar-feature-item span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.calendar-feature-item small {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  opacity: 0.78;
}

.calendar-feature-item-positive {
  border-color: color-mix(in srgb, var(--color-green) 30%, var(--color-border));
  background: color-mix(in srgb, var(--color-green) 8%, var(--color-surface));
}

.calendar-feature-item-positive i {
  background: color-mix(in srgb, var(--color-green) 16%, transparent);
  color: var(--color-green);
}

.calendar-feature-item-positive small {
  color: var(--color-green);
}

.calendar-feature-item-negative {
  border-color: color-mix(in srgb, var(--color-red) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-red) 6%, var(--color-surface));
}

.calendar-feature-item-negative i {
  background: color-mix(in srgb, var(--color-red) 14%, transparent);
  color: var(--color-red);
}

.calendar-feature-item-negative small {
  color: var(--color-red);
}

.calendar-feature-item-default {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}


.calendar-feature-item-default i {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.calendar-location-card {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-muted);
  text-decoration: none;
}

.calendar-location-card:hover span { color: var(--color-primary); text-decoration: underline; }

.calendar-location-card > i {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.calendar-location-card strong {
  display: inline;
  margin: 0;
  color: var(--color-primary);
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.calendar-location-card span {
  display: inline;
  color: var(--color-muted);
  font-size: 0.86rem;
  font-weight: 550;
  line-height: 1.45;
}

.calendar-booking-rules-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: -0.35rem 0 0.9rem;
}

.calendar-booking-rule-card {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: fit-content;
  padding: 0.38rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  color: var(--color-muted);
  box-shadow: none;
  transition: border-color var(--eo-transition-fast), background var(--eo-transition-fast);
}

.calendar-booking-rule-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.calendar-booking-rule-card > i {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.calendar-booking-rule-card strong {
  display: inline;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.calendar-booking-rule-card span {
  display: inline;
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
}

.calendar-no-availability {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  color: var(--color-muted);
  font-style: italic;
}

.calendar-wrapper {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: flex-start;
}

.calendar-sidebar {
  position: sticky;
  top: 96px;
  width: 100%;
  flex-shrink: 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-xs);
}

.calendar-main {
  min-width: 0;
}

.calendar-container {
  height: 80vh;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%);
  border-radius: var(--eo-radius-card);
  box-shadow: var(--eo-shadow-xs);
  padding: 1rem;
  transition: var(--transition-default);
}

 .datepicker-custom {
  width: 100%;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  padding: 0.72rem 0.85rem;
  font-size: 0.95rem;
  font-weight: 550;
  transition: border-color var(--eo-transition-fast), box-shadow var(--eo-transition-fast), background var(--eo-transition-fast);
  box-shadow: none;
}

.datepicker-custom:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  background: var(--color-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.flatpickr-calendar {
  overflow: hidden;
  font-family: inherit;
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%);
  border-radius: var(--eo-radius-card);
  box-shadow: var(--eo-shadow-sm);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

.calendar-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.1rem 0;
}

.calendar-main-title {
  margin: 0;
}

.calendar-booking-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.68rem 0.95rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-primary) 82%, black);
  border-radius: var(--eo-radius-button);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--eo-transition-fast), border-color var(--eo-transition-fast), color var(--eo-transition-fast), transform var(--eo-transition-fast);
}

.calendar-booking-button:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--color-primary) 86%, black);
  border-color: color-mix(in srgb, var(--color-primary) 74%, black);
  color: var(--color-white);
}

/* Calendar selected slot card styles */
.calendar-selected-slot-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: min(360px, calc(100% - 24px));
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  color: var(--color-text);
  box-shadow: var(--eo-shadow-md);
  backdrop-filter: blur(10px);
}

.calendar-selected-slot-card-floating {
  position: absolute;
  z-index: 30;
}

.calendar-selected-slot-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.calendar-selected-slot-label {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.calendar-selected-slot-content strong {
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.35;
}

.calendar-selected-slot-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  flex-shrink: 0;
  padding: 0.58rem 0.74rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 82%, black);
  border-radius: var(--eo-radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--eo-transition-fast), border-color var(--eo-transition-fast), transform var(--eo-transition-fast);
}

.calendar-selected-slot-button:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--color-primary) 86%, black);
  border-color: color-mix(in srgb, var(--color-primary) 74%, black);
  color: var(--color-white);
  text-decoration: none;
}

.calendar-selected-slot-card-warning {
  border-color: color-mix(in srgb, var(--color-yellow) 34%, var(--color-border));
  background: color-mix(in srgb, var(--color-yellow) 10%, var(--color-surface));
}

.calendar-selected-slot-card-warning .calendar-selected-slot-label {
  color: var(--color-dark-yellow);
}

.calendar-selected-slot-card-warning .calendar-selected-slot-content strong {
  color: var(--color-dark-yellow);
}

.calendar-container .toastui-calendar-grid-selection {
  border-color: color-mix(in srgb, var(--color-primary) 56%, var(--color-border)) !important;
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

.calendar-container .toastui-calendar-grid-selection-label {
  color: var(--color-primary) !important;
}

.calendar-container-selection-valid .toastui-calendar-grid-selection {
  border-color: color-mix(in srgb, var(--color-green) 72%, var(--color-border)) !important;
  background-color: color-mix(in srgb, var(--color-green) 16%, transparent) !important;
}

.calendar-container-selection-valid .toastui-calendar-grid-selection-label {
  color: color-mix(in srgb, var(--color-green) 80%, black) !important;
}

.calendar-container-selection-invalid .toastui-calendar-grid-selection {
  border-color: color-mix(in srgb, var(--color-red) 72%, var(--color-border)) !important;
  background-color: color-mix(in srgb, var(--color-red) 14%, transparent) !important;
}

.calendar-container-selection-invalid .toastui-calendar-grid-selection-label {
  color: var(--color-red) !important;
}

.calendar-container .toastui-calendar-timegrid-current-time {
  color: var(--color-primary) !important;
  background-color: transparent !important;
}

.calendar-container .toastui-calendar-timegrid-now-indicator-left,
.calendar-container .toastui-calendar-timegrid-now-indicator-today,
.calendar-container .toastui-calendar-timegrid-now-indicator-right {
  border-top-color: var(--color-primary) !important;
}

.calendar-container .toastui-calendar-timegrid-now-indicator-marker {
  background-color: var(--color-primary) !important;
}

@media (max-width: 768px) {
  .calendar-space-section {
    padding: 1.1rem;
  }

  .calendar-space-header,
  .calendar-wrapper {
    grid-template-columns: 1fr;
  }

  .calendar-section-header {
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-sidebar {
    position: static;
    top: auto;
    width: 100%;
  }

  .calendar-space-price-card {
    width: 100%;
    text-align: left;
  }

  .calendar-info-grid,
  .calendar-availability-list,
  .calendar-space-gallery {
    grid-template-columns: 1fr;
  }

  .calendar-info-card,
  .calendar-availability-item,
  .calendar-availability-section,
  .calendar-feature-item {
    width: 100%;
    max-width: none;
  }

  .calendar-location-card,
  .calendar-booking-rule-card {
    max-width: 100%;
  }

  .calendar-features-list {
    flex-direction: column;
  }

  .calendar-main-header {
    align-items: stretch;
  }

  .calendar-section-description {
    max-width: none;
    text-align: left;
  }

  .calendar-booking-button {
    width: 100%;
  }

  .calendar-selected-slot-card {
    width: calc(100% - 24px);
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-selected-slot-button {
    width: 100%;
  }
}


/* =============================
Spaces Info
organization_spaces.html
============================= */

.organization-portfolio-page {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 34rem),
    var(--color-background);
}

.organization-portfolio-page .container {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.organization-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--color-border) 86%, var(--color-primary) 14%);
  border-radius: var(--eo-radius-panel);
  background: linear-gradient(145deg, var(--color-surface), color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.045);
}

.organization-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  pointer-events: none;
}

.organization-hero__identity,
.organization-hero__details {
  position: relative;
  z-index: 1;
}

.organization-hero__identity {
  display: flex;
  align-items: flex-start;
  gap: 1.45rem;
  min-width: 0;
}

.organization-hero__logo {
  width: 124px;
  height: 124px;
  flex: 0 0 124px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-radius: var(--eo-radius-button);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-primary);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.organization-hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.organization-hero__content {
  min-width: 0;
  padding-top: 0.2rem;
  display: flex;
  flex-direction: column;
}

.organization-hero__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  width: fit-content;

  padding: 0.72rem 1.05rem;

  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-radius: var(--eo-radius-card);

  background:
      linear-gradient(
          135deg,
          color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)),
          color-mix(in srgb, var(--color-primary) 7%, var(--color-surface))
      );

  color: var(--color-primary);

  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;

  flex-shrink: 0;

  box-shadow:
      0 8px 18px rgba(0,0,0,.05),
      inset 0 1px 0 rgba(255,255,255,.55);

}

.organization-spaces-section__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .35rem .55rem;

  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-radius: var(--eo-radius-input);

  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));

  color: var(--color-primary);

  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.organization-hero__heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.organization-portfolio-page .organization-hero__title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.organization-hero__heading .organization-hero__title {
  margin: 0;
}

.organization-hero__title {
  margin: 0 0 0.55rem;
  color: var(--color-primary);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 850;
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.organization-portfolio-page .organization-hero__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: 0.25rem;
  color: var(--color-green);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-0.08em);
}

.organization-hero__verified i {
  display: block;
  line-height: 1;
}

.organization-hero__description {
  max-width: 820px;
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.88;
}

.organization-hero__description--muted {
  color: var(--color-muted);
}

.organization-portfolio-page .organization-hero__details {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 1.25fr);
  gap: 0;
  align-content: start;
  padding-top: 2.25rem;
  border-top: 1px solid var(--color-border);
}

.organization-portfolio-page .organization-info-card {
  min-height: 8rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.organization-portfolio-page .organization-info-card + .organization-info-card {
  border-left: 1px solid var(--color-border);
}

.organization-portfolio-page .organization-info-card--wide {
  grid-column: auto;
}

.organization-portfolio-page .organization-info-card--contact {
  justify-content: center;
  text-align: center;
}

.organization-portfolio-page .organization-info-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  background: var(--color-surface);
}

.organization-portfolio-page .organization-info-card__icon {
  width: 3.1rem;
  height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 3.1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  color: var(--color-primary);
  font-size: 1.15rem;
}

.organization-portfolio-page .organization-info-card__icon i {
  line-height: 1;
}

.organization-portfolio-page .organization-info-card > div {
  min-width: 0;
}

.organization-portfolio-page .organization-info-card__label {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.organization-portfolio-page .organization-info-card__value {
  display: block;
  color: var(--color-primary);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 850;
  line-height: 1;
}

.organization-portfolio-page .organization-contact-links {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 1rem 1.15rem;
}

.organization-portfolio-page .organization-contact-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 4rem;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.organization-portfolio-page .organization-contact-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-primary);
  font-size: 1.28rem;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.organization-portfolio-page .organization-contact-link:hover {
  color: var(--color-blue);
}

.organization-portfolio-page .organization-contact-link:hover i {
  border-color: var(--color-blue);
  color: var(--color-blue);
  transform: translateY(-2px);
}

.organization-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.organization-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0.38rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  border-radius: var(--eo-radius-button);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.2;
}

.organization-address {
  margin: 0;
  color: var(--color-text);
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}

.organization-spaces-section {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.organization-spaces-section__header {
  max-width: 760px;
}

.organization-spaces-section__title {
  margin: 0 0 0.35rem;
  color: var(--color-primary);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.organization-spaces-section__description {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.organization-empty-state {
  padding: 2rem;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-radius: var(--eo-radius-panel);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-background) 12%);
  text-align: center;
}

.organization-empty-state h3 {
  margin: 0 0 0.35rem;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.organization-empty-state p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.94rem;
}

@media (max-width: 900px) {
  .organization-portfolio-page .organization-hero__details {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .organization-portfolio-page .organization-info-card {
    min-height: auto;
    padding: 1.25rem 0;
  }

  .organization-portfolio-page .organization-info-card + .organization-info-card {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 640px) {
  .organization-portfolio-page .container {
    gap: 1.5rem;
  }

  .organization-hero {
    padding: 1rem;
  }

  .organization-hero__identity {
    flex-direction: column;
    gap: 1rem;
  }

  .organization-hero__logo {
    width: 96px;
    height: 96px;
    flex-basis: 96px;
  }

  .organization-portfolio-page .organization-info-card {
    min-height: auto;
    align-items: flex-start;
  }

  .organization-portfolio-page .organization-info-card__icon {
    width: 38px;
    height: 38px;
  }

  .organization-hero__heading {
    flex-direction: column;
    gap: 0.75rem;
  }

  .organization-hero__category {
    align-self: flex-start;
  }
}

/* =============================
Spaces Grid Component
spaces_grid.html
============================= */
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.space-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--eo-transition-fast), background var(--eo-transition-fast);
}

.space-card:hover {
  transform: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.space-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-background) 92%, var(--color-primary) 8%);
  border: 1px solid color-mix(in srgb, var(--color-border) 86%, var(--color-primary) 14%);
  border-radius: 0;
  box-shadow: none;
}

.space-image::after,
.space-card:hover .space-image::after {
  content: none;
  opacity: 0;
}

.space-image img,
.space-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.space-card:hover .space-img {
  transform: none;
  opacity: 1;
}

.space-info {
  padding: 0.95rem 0.15rem 0.45rem;
}

.space-card-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 0.52rem;
}

.space-title {
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  font-size: 1.14rem;
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: -0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-price {
  flex-shrink: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  padding-top: 0;
  white-space: nowrap;
  color: var(--color-text);
}

.space-price strong {
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.space-price span {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.space-desc {
  margin: 0 0 0.58rem;
  color: var(--color-muted);
  font-size: 0.86rem;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.space-location {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
}

.space-location i {
  width: 0.9rem;
  color: color-mix(in srgb, var(--color-primary) 58%, var(--color-muted));
  font-size: 0.78rem;
  text-align: center;
  flex-shrink: 0;
}

.space-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.space-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.space-meta li:first-child {
  color: var(--color-text);
  font-size: 0.94rem;
  font-weight: 700;
}

.space-meta li:first-child strong {
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.space-meta i {
  width: 0.95rem;
  color: color-mix(in srgb, var(--color-primary) 62%, var(--color-muted));
  font-size: 0.8rem;
  text-align: center;
  flex-shrink: 0;
}

.space-footer {
  margin-top: 0;
  padding: 0.58rem 0.15rem 0;
  border-top: none;
  background: transparent;
}

.space-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.space-footer .btn,
.space-footer a.btn {
  width: auto;
  min-height: 36px;
  padding: 0.5rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: var(--eo-radius-button);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  color: var(--color-primary);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--eo-transition-fast), background var(--eo-transition-fast), border-color var(--eo-transition-fast);
}

.space-footer .btn i,
.space-footer a.btn i {
  font-size: 0.72rem;
}

.space-details-button {
  flex: 1 1 auto;
  border-color: color-mix(in srgb, var(--color-primary) 44%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-primary);
}

.space-details-button:hover {
  transform: none;
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
  color: var(--color-primary);
  text-decoration: none;
}

.space-booking-button {
  flex: 1 1 auto;
  border-color: color-mix(in srgb, var(--color-secondary) 42%, var(--color-border));
  background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface));
  color: var(--color-secondary) !important;
  font-weight: 760 !important;
  padding-inline: 0.78rem !important;
}

.space-booking-button:hover {
  transform: none;
  background: color-mix(in srgb, var(--color-secondary) 11%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-secondary) 56%, var(--color-border));
  color: var(--color-secondary) !important;
  text-decoration: none;
}

/* Responsivity */
@media (min-width: 1200px) {
  .spaces-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .spaces-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .spaces-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .space-footer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .space-footer .btn,
  .space-footer a.btn {
    width: 100%;
  }
}

/* =============================
🏠 Home
home.html
============================= */

.search-form {
  width: min(760px, 100%);
  margin: 0 auto 2.25rem;
  padding: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-primary) 8%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
  border-radius: var(--eo-radius-pill);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.055);
}

.search-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 1.25rem;
  border: none;
  border-radius: var(--eo-radius-pill);
  background: transparent;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 500;
  outline: none;
}

.search-input::placeholder {
  color: var(--color-muted);
  font-weight: 400;
}

.search-input:focus {
  box-shadow: none;
}

.search-form:focus-within {
  border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
  background: var(--color-surface);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.075),
              0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.search-btn {
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1.35rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: var(--eo-radius-pill);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
  font-weight: 700;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.search-btn:hover {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  transform: translateY(-1px);
}

.space-img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: var(--eo-radius-card);
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.075);
}

@media (max-width: 640px) {
  .search-form {
    padding: 0.65rem;
    flex-direction: column;
    align-items: stretch;
  }

  .search-input,
  .search-btn {
    width: 100%;
  }

  .search-input {
    height: 48px;
    padding: 0 1rem;
    background: color-mix(in srgb, var(--color-background) 52%, var(--color-surface));
  }

  .search-btn {
    height: 48px;
  }

  .space-img {
    height: 190px;
  }
}

/* =============================
Organizations
organization_list.html
============================= */

/* Home refresh */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-page {
  --home-ink: #17363d;
  --home-teal: #0a9b91;
  --home-mint: #9be0c6;
  margin: -2rem -1rem 0;
  overflow: hidden;
  background: #f7faf9;
}

.home-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 10%, rgba(155, 224, 198, .22), transparent 25%),
    linear-gradient(135deg, #f2faf6 0%, #f8fbfa 52%, #edf8f5 100%);
  border-bottom: 1px solid rgba(23, 54, 61, .08);
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .33;
  pointer-events: none;
  background-image: radial-gradient(rgba(23, 54, 61, .18) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to right, #000, transparent 70%);
}

.home-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 520px;
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: 3.5rem;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.35rem;
  color: #527078;
  font-size: .77rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.home-eyebrow span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(10, 155, 145, .2);
  border-radius: 50%;
  background: rgba(10, 155, 145, .08);
  color: var(--home-teal);
  font-size: .68rem;
}

.home-hero h1 {
  max-width: 850px;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(3rem, 7vw, 5.8rem);
  font-weight: 780;
  line-height: .94;
  letter-spacing: -.065em;
}

.home-hero h1 em {
  color: var(--home-teal);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.home-hero__lead {
  max-width: 590px;
  margin: 1.6rem auto 2rem;
  color: #637b80;
  font-size: clamp(.98rem, 2vw, 1.12rem);
  line-height: 1.65;
}

.home-page .search-form {
  width: min(760px, 100%);
  margin: 0;
  padding: .45rem;
  gap: .4rem;
  border: 1px solid rgba(23, 54, 61, .11);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 24px 65px rgba(23, 54, 61, .12);
  backdrop-filter: blur(14px);
}

.search-field {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  color: #789095;
}

.search-field > i {
  margin-left: 1rem;
  font-size: .92rem;
}

.home-page .search-input {
  height: 54px;
  padding: 0 .9rem;
  font-size: .96rem;
}

.home-page .search-btn {
  height: 54px;
  padding: 0 1.25rem;
  border-radius: 11px;
  background: var(--home-ink);
  box-shadow: none;
  font-size: .9rem;
}

.home-page .search-btn:hover {
  background: var(--home-teal);
}

.home-categories {
  display: flex;
  max-width: 760px;
  margin-top: 1.1rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  color: #789095;
  font-size: .78rem;
}

.home-categories > span {
  margin-right: .15rem;
  font-weight: 650;
}

.home-categories a {
  padding: .35rem .7rem;
  border: 1px solid rgba(23, 54, 61, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: #536f75;
  font-weight: 650;
  transition: var(--transition-default);
}

.home-categories a:hover {
  border-color: rgba(10, 155, 145, .32);
  background: #fff;
  color: var(--home-teal);
}

.home-hero__glow {
  position: absolute;
  border: 1px solid rgba(10, 155, 145, .11);
  border-radius: 50%;
  pointer-events: none;
}

.home-hero__glow--one {
  width: 390px;
  height: 390px;
  top: -190px;
  right: -80px;
}

.home-hero__glow--two {
  width: 210px;
  height: 210px;
  bottom: -130px;
  left: 5%;
}

.home-results {
  padding-top: clamp(3.2rem, 7vw, 5.5rem);
  padding-bottom: 5rem;
}

.home-results__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.home-results__kicker {
  display: block;
  margin-bottom: .55rem;
  color: var(--home-teal);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-results__header h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.home-results__header p {
  margin: .7rem 0 0;
  color: #70858a;
  font-size: .93rem;
}

.home-results__count {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #71868a;
}

.home-results__count strong {
  color: var(--home-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 1;
}

.home-results__count span {
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-clear-search {
  display: inline-flex;
  padding: .65rem .85rem;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgba(23, 54, 61, .12);
  border-radius: 999px;
  color: #587178;
  font-size: .8rem;
  font-weight: 700;
}

.home-page .spaces-grid {
  gap: clamp(1.5rem, 3vw, 2.1rem) 1.25rem;
  margin-top: 2.25rem;
}

.home-page .space-card {
  min-width: 0;
}

.home-page .space-image {
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 14px;
  background: #e4efec;
}

.home-page .space-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

.home-page .space-img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}

.home-page .space-card:hover .space-img {
  transform: scale(1.035);
}

.space-image-placeholder {
  display: grid !important;
  place-content: center;
  gap: .5rem;
  color: #78918f;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .35), transparent),
    #dfebe8;
  text-align: center;
}

.space-image-placeholder i {
  font-size: 1.5rem;
}

.space-image-placeholder span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.space-category {
  position: absolute;
  top: .75rem;
  left: .75rem;
  max-width: calc(100% - 1.5rem);
  padding: .4rem .7rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  background: rgba(255, 255, 255, .87);
  box-shadow: 0 5px 15px rgba(23, 54, 61, .08);
  color: var(--home-ink);
  font-size: .68rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.home-page .space-info {
  padding: .95rem .15rem .3rem;
}

.home-page .space-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: end;
  margin: 0;
}

.space-organization {
  display: block;
  margin-bottom: .2rem;
  overflow: hidden;
  color: #819296;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-page .space-title {
  font-size: 1.1rem;
  letter-spacing: -.025em;
}

.home-page .space-title a {
  color: var(--home-ink);
}

.home-page .space-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.home-page .space-price strong {
  color: var(--home-ink);
  font-size: .94rem;
}

.home-page .space-price span {
  font-size: .62rem;
  line-height: 1.2;
}

.home-page .space-location {
  max-width: 100%;
  margin-top: .7rem;
  font-size: .78rem;
}

.home-page .space-location span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-page .space-footer {
  padding-top: .55rem;
}

.home-page .space-footer .btn {
  min-height: 40px;
  border-radius: 9px;
  font-size: .78rem;
}

.home-page .space-details-button {
  border-color: rgba(23, 54, 61, .13);
  background: transparent;
  color: var(--home-ink);
}

.home-page .space-booking-button {
  border-color: var(--home-ink);
  background: var(--home-ink);
  color: #fff !important;
}

.home-page .space-booking-button:hover {
  border-color: var(--home-teal);
  background: var(--home-teal);
  color: #fff !important;
}

.home-empty {
  display: flex;
  min-height: 320px;
  margin-top: 2rem;
  padding: 3rem 1.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(23, 54, 61, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .58);
  text-align: center;
}

.home-empty__icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 1.1rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 155, 145, .09);
  color: var(--home-teal);
}

.home-empty h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: 1.35rem;
}

.home-empty p {
  margin: .5rem 0 1.3rem;
  color: #71868a;
  font-size: .9rem;
}

.home-empty .btn {
  background: var(--home-ink);
  font-weight: 700;
}

@media (max-width: 768px) {
  .home-page {
    margin: -1.25rem -1rem 0;
  }

  .home-hero,
  .home-hero__content {
    min-height: auto;
  }

  .home-hero__content {
    padding: 3.8rem 1.25rem 2.7rem;
  }

  .home-eyebrow {
    margin-bottom: 1rem;
    font-size: .65rem;
    letter-spacing: .1em;
  }

  .home-hero h1 {
    font-size: clamp(2.75rem, 14vw, 4rem);
  }

  .home-hero__lead {
    margin: 1.2rem auto 1.6rem;
    font-size: .93rem;
    line-height: 1.55;
  }

  .home-page .search-form {
    padding: .35rem;
    flex-direction: row;
    align-items: center;
    border-radius: 13px;
  }

  .home-page .search-field {
    width: auto;
  }

  .search-field > i {
    margin-left: .75rem;
  }

  .home-page .search-input {
    width: 100%;
    height: 50px;
    padding: 0 .65rem;
    background: transparent;
    font-size: .88rem;
  }

  .home-page .search-btn {
    width: 50px;
    height: 50px;
    padding: 0;
    flex: 0 0 50px;
  }

  .home-page .search-btn span {
    display: none;
  }

  .home-page .search-btn i {
    transform: rotate(-45deg);
  }

  .home-categories {
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: calc(100vw - 2.5rem);
    padding-bottom: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .home-categories::-webkit-scrollbar {
    display: none;
  }

  .home-categories > * {
    flex: 0 0 auto;
  }

  .home-results {
    padding: 2.7rem 1rem 3.5rem;
  }

  .home-results__header {
    align-items: flex-start;
  }

  .home-results__header p {
    max-width: 290px;
  }

  .home-results__count {
    display: none;
  }

  .home-clear-search {
    flex: 0 0 auto;
    padding: .55rem;
    font-size: 0;
  }

  .home-clear-search i {
    font-size: .85rem;
  }

  .home-page .spaces-grid {
    gap: 2rem;
    margin-top: 1.7rem;
  }

  .home-page .space-footer-actions {
    flex-direction: row;
  }

  .home-page .space-footer .btn {
    width: auto;
  }
}

@media (max-width: 380px) {
  .home-page .space-footer-actions {
    flex-direction: column;
  }

  .home-page .space-footer .btn {
    width: 100%;
  }
}

.organizations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.organizations-subtitle {
  max-width: 700px;
}

.organizations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.organization-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-surface);
  border-radius: var(--eo-radius-card);
  box-shadow: var(--shadow-default);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  min-height: 240px;
}

.organization-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.organization-avatar-wrapper {
  flex-shrink: 0;
}

.organization-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  background: var(--color-background);
}

.organization-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 1.5rem;
}

.organization-card-title-group {
  min-width: 0;
}

.organization-card-title {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.organization-card-username {
  color: var(--color-muted);
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.organization-card-body {
  margin-bottom: 1.5rem;
}

.organization-card-meta {
  font-size: 0.95rem;
  color: var(--color-text);
}

.organization-card-footer {
  margin-top: auto;
}

.organizations-empty-state {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.organizations-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
  color: var(--color-primary);
  font-size: 1.75rem;
}

@media (max-width: 768px) {
  .organizations-header {
    align-items: stretch;
  }

  .organizations-header .btn {
    width: 100%;
  }
}

/* =============================
Organizations
organization_manage.html
============================= */

.manage-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.manage-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.manage-card {
  background: linear-gradient(145deg, var(--color-background), var(--color-surface));
  border-radius: var(--eo-radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-default);
  border: 1px solid var(--color-border);
}

.manage-organization-top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.manage-avatar-wrapper {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.manage-avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  background: var(--color-background);
}

.manage-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 2rem;
}

.manage-org-meta h2 {
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}

.manage-username {
  color: var(--color-muted);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.manage-info-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  padding: 1rem;
}

.manage-info-label {
  display: block;
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-bottom: 0.35rem;
}

.manage-info-value {
  color: var(--color-text);
  font-weight: 600;
  word-break: break-word;
}

.manage-edit-fields {
  display: none;
  margin-top: 1.5rem;
}

.manage-edit-fields.is-visible {
  display: block;
}

.manage-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.manage-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.manage-field label {
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 600;
}

.manage-field input,
.manage-field select,
.manage-field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  padding: 0.8rem 0.9rem;
  color: var(--color-text);
  outline: none;
  font: inherit;
}

.manage-field input[type="file"] {
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}

.manage-field textarea {
  min-height: 130px;
  resize: vertical;
}

.manage-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.manage-field input:focus,
.manage-field select:focus,
.manage-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15);
}

.manage-field .help-text,
.manage-field .form-help-text {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-top: 0.1rem;
}

.manage-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.manage-table-wrapper {
  overflow-x: auto;
}

.manage-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.manage-table th,
.manage-table td {
  text-align: left;
  padding: 0.95rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.manage-table th {
  color: var(--color-primary);
  font-size: 0.92rem;
}

.manage-table td {
  color: var(--color-text);
  font-size: 0.94rem;
}

.manage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.65rem;
  border-radius: var(--eo-radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
}

.manage-badge-active {
  background: rgba(76, 175, 80, 0.12);
  color: var(--color-green);
}

.manage-badge-inactive {
  background: rgba(192, 57, 43, 0.12);
  color: var(--color-red);
}

.manage-badge-warning {
  background: color-mix(in srgb, #d97706 13%, var(--color-surface));
  color: #a65305;
}

.manage-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-muted);
}

.manage-message {
  display: none;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.manage-message.is-visible {
  display: block;
}

.manage-message.is-success {
  color: var(--color-green);
}

.manage-message.is-error {
  color: var(--color-red);
}

@media (max-width: 768px) {
  .manage-header {
    align-items: stretch;
  }

  .manage-header-actions,
  .manage-actions {
    width: 100%;
  }

  .manage-header-actions .btn,
  .manage-actions .btn {
    width: 100%;
  }
}

/* =============================
   Organization overview and form
============================= */

.organization-form-page,
.organization-overview-page {
  display: grid;
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
}

.organization-form-header,
.organization-overview-hero,
.organization-overview-section-heading,
.organization-form-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.organization-form-header h1,
.organization-overview-identity h1 {
  margin: 0.25rem 0 0.35rem;
  color: var(--color-text);
}

.organization-form-header p {
  max-width: 720px;
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5;
}

.organization-form-eyebrow {
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.organization-form,
.organization-overview-section,
.organization-overview-hero {
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-sm);
}

.organization-form {
  display: grid;
  gap: 0;
}

.organization-form-section {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--color-border);
}

#recebimento-pix {
  scroll-margin-top: 6.5rem;
}

.organization-form-section:first-of-type {
  padding-top: 0;
}

.organization-form-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.organization-form-section-heading > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
}

.organization-form-section-heading h2 {
  margin: 0 0 0.2rem;
  color: var(--color-text);
  font-size: 1.08rem;
}

.organization-form-section-heading p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.84rem;
}

.organization-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.organization-form-field-full {
  grid-column: 1 / -1;
}

.organization-form-field-compact {
  max-width: 420px;
}

.organization-duration-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
}

.organization-duration-control input {
  border-radius: var(--eo-radius-input) 0 0 var(--eo-radius-input);
}

.organization-duration-control select {
  border-left: 0;
  border-radius: 0 var(--eo-radius-input) var(--eo-radius-input) 0;
}

.organization-form .manage-field textarea {
  min-height: 105px;
  resize: vertical;
}

.organization-form .manage-field input[type="file"] {
  min-height: 46px;
}

.organization-picture-field {
  align-self: start;
}

.organization-picture-label {
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 700;
}

.organization-picture-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.45rem;
}

.organization-picture-preview {
  position: relative;
  display: block;
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  overflow: hidden;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-background);
  cursor: pointer;
}

.organization-picture-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.organization-picture-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgb(0 0 0 / 48%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.organization-picture-preview:hover .organization-picture-overlay,
.organization-picture-preview:focus-within .organization-picture-overlay {
  opacity: 1;
}

.organization-picture-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.organization-picture-button {
  cursor: pointer;
}

.organization-picture-copy small {
  max-width: 220px;
  overflow: hidden;
  color: var(--color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-picture-control input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.organization-field-error {
  color: var(--color-red);
  font-size: 0.78rem;
}

.organization-address-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: auto;
  margin-top: 0.85rem;
  padding: 0.62rem 0.82rem;
  border: 1px dashed var(--color-primary);
  border-radius: var(--eo-radius-button);
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.organization-new-address {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-background);
}

.organization-new-address[hidden] {
  display: none;
}

.organization-form-actions {
  justify-content: flex-end;
  align-items: center;
  padding-top: 1.25rem;
}

.organization-overview-hero {
  align-items: center;
}

.organization-setup-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, #d97706 34%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, #d97706 7%, var(--color-surface));
}

.organization-setup-alert__icon {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border-radius: 0.75rem;
  background: color-mix(in srgb, #d97706 15%, var(--color-surface));
  color: #a65305;
}

.organization-setup-alert h2 {
  margin: 0.18rem 0 0.25rem;
  color: var(--color-text);
  font-size: 1rem;
}

.organization-setup-alert p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.organization-setup-alert__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.organization-overview-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.organization-overview-identity > img,
.organization-overview-identity > span {
  width: 76px;
  height: 76px;
  border-radius: 50%;
}

.organization-overview-identity > img {
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.organization-overview-identity > span {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
  font-size: 1.5rem;
}

.organization-overview-identity p {
  margin: 0;
  color: var(--color-muted);
}

.organization-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.organization-overview-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.organization-overview-navigation > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--eo-shadow-xs);
}

.organization-overview-navigation > a > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
}

.organization-overview-navigation strong,
.organization-overview-navigation small {
  display: block;
}

.organization-overview-navigation small {
  margin-top: 0.12rem;
  color: var(--color-muted);
}

.organization-overview-navigation > a > i {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.organization-overview-section-heading {
  align-items: center;
  margin-bottom: 1rem;
}

.organization-overview-section-heading h2 {
  margin: 0.18rem 0 0;
  color: var(--color-text);
  font-size: 1.12rem;
}

.organization-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.organization-overview-grid > div {
  padding: 0.85rem 0.95rem;
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
}

.organization-overview-grid span,
.organization-overview-grid strong {
  display: block;
}

.organization-overview-grid span {
  margin-bottom: 0.28rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.organization-overview-grid span i {
  width: 1rem;
  margin-right: 0.25rem;
  color: var(--color-primary);
  text-align: center;
}

.organization-overview-grid strong {
  color: var(--color-text);
  font-size: 0.88rem;
  line-height: 1.45;
}

.organization-overview-field-wide {
  grid-column: 1 / -1;
}

/* Organization analytics */
.analytics-page { display: grid; gap: 1.1rem; max-width: 1180px; margin: 0 auto; }
.analytics-header, .analytics-card, .analytics-kpis article { border: 1px solid var(--color-border); border-radius: var(--eo-radius-card); background: var(--color-surface); box-shadow: var(--eo-shadow-sm); }
.analytics-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: clamp(1.1rem, 3vw, 1.7rem); }
.analytics-header-identity { display: flex; align-items: center; min-width: 0; gap: 1rem; }
.analytics-header-identity > img, .analytics-header-logo { width: 72px; height: 72px; flex: 0 0 72px; border: 2px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); border-radius: 50%; }
.analytics-header-identity > img { object-fit: cover; }
.analytics-header-logo { display: grid; place-items: center; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); font-size: 1.35rem; }
.analytics-header h1 { margin: 0.25rem 0; color: var(--color-text); font-size: clamp(1.65rem, 4vw, 2.15rem); }
.analytics-header p, .analytics-card header p { margin: 0; color: var(--color-muted); font-size: 0.84rem; }
.analytics-back { display: block; width: fit-content; margin-bottom: 1rem; color: var(--color-primary); font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.analytics-back i { margin-right: 0.3rem; }
.analytics-period-form { display: grid; min-width: 190px; gap: 0.35rem; }
.analytics-period-form label { color: var(--color-muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.analytics-period-form select { padding: 0.72rem 2.2rem 0.72rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--eo-radius-input); background: var(--color-background); color: var(--color-text); font: inherit; font-weight: 650; }
.analytics-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 0.85rem; }
.analytics-kpis article { position: relative; overflow: hidden; padding: 1rem; }
.analytics-kpis article::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--color-primary); content: ""; }
.analytics-kpis .analytics-kpi-credit::before { background: var(--color-secondary); }
.analytics-kpis .analytics-kpi-cancellation::before { background: var(--color-orange); }
.analytics-kpis span, .analytics-kpis strong, .analytics-kpis small { display: block; }
.analytics-kpis span { color: var(--color-muted); font-size: 0.76rem; font-weight: 700; }
.analytics-kpis span i { width: 1rem; margin-right: 0.25rem; color: var(--color-primary); text-align: center; }
.analytics-kpis strong { margin: 0.48rem 0 0.18rem; color: var(--color-text); font-size: clamp(1.25rem, 3vw, 1.65rem); }
.analytics-kpis small { color: var(--color-muted); font-size: 0.72rem; }
.analytics-grid { display: grid; gap: 0.85rem; }
.analytics-grid-thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analytics-grid-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analytics-card { min-width: 0; padding: 1.1rem; }
.analytics-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.analytics-card > header h2 { margin: 0.18rem 0; color: var(--color-text); font-size: 1.02rem; }
.analytics-card > header > i { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); }
.analytics-ranking ol { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.analytics-ranking li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--color-border); }
.analytics-ranking li > strong { color: var(--color-text); font-size: 0.78rem; }
.analytics-rank { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--color-background); color: var(--color-primary); font-size: 0.7rem; font-weight: 800; }
.analytics-ranking-first { margin-inline: -0.35rem; padding-inline: 0.35rem !important; border-radius: var(--eo-radius-input); background: color-mix(in srgb, var(--color-secondary) 5%, var(--color-surface)); }
.analytics-ranking-first .analytics-rank { background: color-mix(in srgb, var(--color-green) 13%, var(--color-surface)); color: var(--color-dark-green); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-green) 18%, transparent); }
.analytics-ranked-client strong, .analytics-ranked-client small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-ranked-client strong { color: var(--color-text); font-size: 0.82rem; }
.analytics-ranked-client small { color: var(--color-muted); font-size: 0.68rem; }
.analytics-ranked-client progress { display: block; width: 100%; height: 3px; margin-top: 0.35rem; }
.analytics-bars { display: grid; gap: 0.65rem; }
.analytics-bar-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 46px; align-items: center; gap: 0.6rem; }
.analytics-bar-row span, .analytics-bar-row strong { font-size: 0.74rem; }
.analytics-bar-row span { color: var(--color-muted); }
.analytics-bar-row strong { color: var(--color-text); text-align: right; }
.analytics-bar-row progress, .analytics-ranked-client progress { overflow: hidden; border: 0; border-radius: 99px; background: var(--color-background); appearance: none; -webkit-appearance: none; }
.analytics-bar-row progress { width: 100%; height: 8px; }
.analytics-bar-row progress::-webkit-progress-bar, .analytics-ranked-client progress::-webkit-progress-bar { border-radius: 99px; background: var(--color-background); }
.analytics-bar-row progress::-webkit-progress-value, .analytics-ranked-client progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }
.analytics-bar-row progress::-moz-progress-bar, .analytics-ranked-client progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }
.analytics-bars-large { gap: 1rem; padding-top: 0.4rem; }
.analytics-note { margin: 1rem 0 0; color: var(--color-muted); font-size: 0.68rem; }
.analytics-table-wrap { width: 100%; overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.analytics-table th { padding: 0.65rem; border-bottom: 1px solid var(--color-border); color: var(--color-muted); text-align: left; white-space: nowrap; }
.analytics-table td { padding: 0.75rem 0.65rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.analytics-table tbody tr:last-child td { border-bottom: 0; }
.analytics-table td small { display: block; margin-top: 0.16rem; color: var(--color-muted); }
.analytics-credit-summary { display: inline-flex; align-items: baseline; gap: 0.45rem; margin: -0.2rem 0 0.8rem; padding: 0.55rem 0.75rem; border-radius: var(--eo-radius-input); background: color-mix(in srgb, var(--color-orange) 8%, var(--color-surface)); color: var(--color-muted); font-size: 0.76rem; }
.analytics-credit-summary strong { color: var(--color-orange); font-size: 0.9rem; }
.analytics-cancellation-card progress { width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--color-green) 16%, var(--color-background)); appearance: none; -webkit-appearance: none; }
.analytics-cancellation-card progress::-webkit-progress-bar { border-radius: 99px; background: color-mix(in srgb, var(--color-green) 16%, var(--color-background)); }
.analytics-cancellation-card progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, var(--color-orange), var(--color-red)); }
.analytics-cancellation-card progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, var(--color-orange), var(--color-red)); }
.analytics-cancellation-rate { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.7rem; }
.analytics-cancellation-rate strong { color: var(--color-orange); font-size: 1.45rem; }
.analytics-cancellation-rate span { color: var(--color-muted); font-size: 0.78rem; }
.analytics-cancellation-breakdown { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; color: var(--color-muted); font-size: 0.74rem; }
.analytics-cancellation-breakdown span { display: inline-flex; align-items: center; gap: 0.35rem; }
.analytics-cancellation-breakdown i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-green); }
.analytics-cancellation-breakdown span:last-child i { background: var(--color-orange); }
.analytics-empty { padding: 1rem !important; color: var(--color-muted) !important; text-align: center !important; }

@media (max-width: 900px) {
  .analytics-kpis, .analytics-grid-thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid-thirds .analytics-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .analytics-header { align-items: stretch; flex-direction: column; }
  .analytics-period-form { width: 100%; }
  .analytics-header-identity { align-items: flex-start; }
  .analytics-header-identity > img, .analytics-header-logo { width: 54px; height: 54px; flex-basis: 54px; }
  .analytics-kpis, .analytics-grid-thirds, .analytics-grid-halves { grid-template-columns: 1fr; }
  .analytics-grid-thirds .analytics-card:last-child { grid-column: auto; }
  .analytics-bar-row { grid-template-columns: 78px minmax(0, 1fr) 42px; }
}

.organization-spaces-table td:first-child strong,
.organization-spaces-table td:first-child small,
.organization-space-config {
  display: block;
}

.organization-space-identity {
  display: grid;
  grid-template-columns: auto auto minmax(8rem, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-width: 15rem;
}

.organization-space-public-link {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-button);
  color: var(--color-primary);
  font-size: 0.78rem;
  text-decoration: none;
  transition: var(--transition-default);
}

.organization-space-public-link:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-primary);
}

.organization-space-public-link.is-disabled {
  opacity: 0.3;
}

.organization-space-thumbnail {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-background));
  color: var(--color-primary);
}

.organization-space-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.organization-space-identity-copy {
  min-width: 0;
}

.organization-space-identity-copy strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-space-identity-copy small {
  margin-top: 0.18rem;
  color: var(--color-muted);
  font-size: 0.75rem;
}

.organization-space-pending {
  display: flex;
  min-width: 10rem;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.35rem;
}

.organization-space-pending-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.organization-space-pending-item.is-urgent {
  color: var(--color-red);
}

.organization-space-pending-item.is-warning {
  color: #a65305;
}

.organization-space-pending-item.is-clear {
  color: var(--color-green);
}

.organization-space-pending-item:is(a):hover {
  text-decoration: underline;
}

.organization-spaces-table td:first-child small,
.organization-space-config {
  margin-top: 0.18rem;
  color: var(--color-muted);
  font-size: 0.76rem;
}

.organization-space-config i {
  width: 1rem;
  color: var(--color-primary);
}

.organization-space-issues {
  max-width: 25rem;
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, #d97706 28%, var(--color-border));
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, #d97706 6%, var(--color-surface));
}

.organization-space-issues strong {
  display: block;
  color: #8a4708;
  font-size: 0.78rem;
}

.organization-space-issues ul {
  margin: 0.35rem 0 0;
  padding-left: 1.05rem;
  color: var(--color-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.organization-space-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

@media (max-width: 760px) {
  .organization-form-header,
  .organization-overview-hero,
  .organization-overview-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .organization-form-grid,
  .organization-overview-grid,
  .organization-overview-navigation {
    grid-template-columns: 1fr;
  }

  .organization-form-field-full,
  .organization-overview-field-wide {
    grid-column: auto;
  }

  .organization-duration-control {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .organization-overview-actions {
    width: 100%;
  }

  .organization-setup-alert {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .organization-setup-alert__actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .organization-setup-alert__actions .btn {
    flex: 1 1 auto;
  }
}

/* =============================
Bookings
create_space.html
============================= */

.space-form-section {
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.space-form-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.space-form-section-header,
.space-form-subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.space-form-section-title,
.space-form-subsection-title {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.space-form-section-subtitle,
.space-form-subsection-subtitle {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.space-form-inline-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.space-form-search-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  padding: 0.8rem 0.9rem;
  color: var(--color-text);
  outline: none;
  font: inherit;
}

.space-form-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15);
}

.duration-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.money-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.money-input-group > input[type="number"] {
  min-width: 0;
  flex: 1 1 auto;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.money-input-group > select {
  width: 74px;
  flex: 0 0 74px;
  padding: 0.65rem 0.55rem;
  border: 1px solid var(--color-border);
  border-left: 0;
  border-radius: 0 var(--eo-radius-input) var(--eo-radius-input) 0;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
}

.money-input-group:focus-within > select {
  border-color: var(--color-primary);
}

.space-discount-card[hidden] {
  display: none;
}

.space-url-editor {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  overflow: hidden;
}

.space-url-editor-prefix,
.space-url-editor-suffix {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-size: 0.88rem;
  white-space: nowrap;
}

.space-url-editor-prefix {
  padding-left: 0.9rem;
}

.space-url-editor-suffix {
  padding-right: 0.9rem;
}

.space-url-editor input {
  min-width: 8rem;
  flex: 1 1 auto;
  padding: 0.8rem 0.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary);
  font-weight: 750;
  outline: none;
  box-shadow: none;
}

.space-url-editor:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15);
}

.duration-input-group > input[type="number"] {
  min-width: 0;
  flex: 1 1 auto;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.duration-unit-select {
  width: 74px;
  flex: 0 0 74px;
  padding: 0.65rem 0.55rem;
  border: 1px solid var(--color-border);
  border-left: 0;
  border-radius: 0 var(--eo-radius-input) var(--eo-radius-input) 0;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.duration-input-group:focus-within .duration-unit-select {
  border-color: var(--color-primary);
}

.duration-input-group[data-disabled="true"] {
  opacity: 0.5;
}

.full-day-booking-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.65rem;
  color: var(--color-text);
  cursor: pointer;
}

.full-day-booking-option input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.full-day-booking-option strong,
.full-day-booking-option small {
  display: block;
}

.full-day-booking-option strong {
  font-size: 0.82rem;
}

.full-day-booking-option small {
  margin-top: 0.1rem;
  color: var(--color-muted);
  font-size: 0.76rem;
}

.space-form-hidden-fields {
  display: none;
}

.space-form-subsection {
  margin-top: 1rem;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed var(--color-border);
  border-radius: var(--eo-radius-card);
}

.space-form-preview {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--eo-radius-card);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--color-border);
}

.space-form-preview-label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.space-form-preview-text {
  color: var(--color-text);
  font-weight: 600;
}

/* =============================
   Space Attributes Fields
============================= */

.space-attribute-field {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  padding: 0.8rem 0.9rem;
  color: var(--color-text);
  font: inherit;
  transition: var(--transition-default);
}

.space-attribute-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15);
}

.space-attribute-field::placeholder {
  color: var(--color-muted);
}

/* Improve spacing inside attributes grid */
.space-form-section .manage-field {
  margin-bottom: 0.25rem;
}

/* =============================
   Space Images Form
============================= */

.space-image-bulk-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.space-image-bulk-upload strong,
.space-image-bulk-upload small {
  display: block;
}

.space-image-bulk-upload strong {
  color: var(--color-text);
  font-size: 0.92rem;
}

.space-image-bulk-upload small {
  margin-top: 0.2rem;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.space-image-bulk-button {
  flex: 0 0 auto;
  cursor: pointer;
}

.space-image-bulk-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.space-image-bulk-status {
  min-height: 1.4rem;
  margin: 0 0 0.65rem;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.space-image-bulk-status[data-state="success"] {
  color: var(--color-dark-green);
}

.space-image-bulk-status[data-state="warning"],
.space-image-bulk-status[data-state="error"] {
  color: var(--color-dark-red);
}

.space-image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 170px));
  gap: 1rem;
}

@media (max-width: 600px) {
  .space-image-bulk-upload {
    align-items: stretch;
    flex-direction: column;
  }

  .space-image-bulk-button {
    justify-content: center;
  }
}

.space-image-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: fit-content;
  align-self: start;
  padding: 0.6rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-background) 10%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
  transition: var(--transition-default);
}

.space-image-card:has(.space-image-main-checkbox:checked) {
  border-style: solid;
  border-color: var(--color-primary);
}

.space-image-upload-area {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: var(--eo-radius-card);
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-default);
}

.space-image-upload-area::before {
  content: "\f021";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  color: var(--color-white);
  font-size: 1.15rem;
  opacity: 0;
  transition: var(--transition-default);
  pointer-events: none;
}

.space-image-card:hover .space-image-upload-area::before {
  opacity: 1;
}

.space-image-card[data-empty-slot="true"] .space-image-upload-area::before {
  content: "\f067";
  opacity: 0.85;
  background: transparent;
  color: var(--color-primary);
}

.space-image-upload-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.space-image-upload-area span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.space-image-index {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  z-index: 3;

  padding: 0.22rem 0.48rem;
  border-radius: var(--eo-radius-pill);

  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(4px);

  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.space-image-card:has(.space-image-main-checkbox:checked) .space-image-upload-area::after {
  content: "Principal";
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 3;
  padding: 0.28rem 0.52rem;
  border-radius: var(--eo-radius-pill);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
}

.space-image-input,
.space-image-card .manage-form-grid,
.space-image-card .manage-field,
.space-image-order-input,
.space-image-card .form-help-text {
  display: none;
}

.space-image-options {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-default);
}

.space-image-card:hover .space-image-options {
  opacity: 1;
  pointer-events: auto;
}

.space-image-card:has(.space-image-main-checkbox:checked) .space-image-options,
.space-image-card[data-empty-slot="true"] .space-image-options {
  display: none;
}

.space-image-main-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: unset;
  width: auto;
  padding: 0.26rem 0.5rem;
  border: 1px dashed var(--color-white);
  border-radius: var(--eo-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(5px);
  color: var(--color-white);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0.82;
  transition: var(--transition-default);
}

.space-image-main-option:hover {
  border-style: solid;
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}

.space-image-main-option input[type="checkbox"] {
  display: none;
}


.space-image-delete {
  position: absolute;
  left: 1.05rem;
  bottom: 1.05rem;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-default);
}

.space-image-card:hover .space-image-delete {
  opacity: 1;
  pointer-events: auto;
}

.space-image-card[data-empty-slot="true"] .space-image-delete {
  display: none;
}

.space-image-delete-button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--eo-radius-pill);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(5px);

  color: var(--color-white);
  font-size: 0.62rem;

  cursor: pointer;
  transition: var(--transition-default);
}

.space-image-delete-button:hover,
.space-image-delete input[type="checkbox"]:checked + .space-image-delete-button {
  border-color: rgba(192, 57, 43, 0.95);
  background: rgba(192, 57, 43, 0.95);
  color: var(--color-white);
}


.space-image-delete input[type="checkbox"] {
  display: none !important;
}

.space-image-delete-warning {
  display: none !important;
}
/* =============================
   Space Availability Form
============================= */

.space-availability-list,
.space-discount-list {
  display: grid;
  gap: 1rem;
}

.space-availability-card,
.space-discount-card {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-background) 12%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
}

.space-availability-card .manage-form-grid,
.space-discount-card .manage-form-grid {
  margin-top: 1rem;
}

.space-discount-scope-field {
  grid-column: span 2;
}

.space-discount-scope-switch {
  justify-content: flex-start;
  padding: 0.65rem 0;
}

.space-discount-scope-switch > span:last-child {
  display: grid;
}

.space-discount-scope-switch small,
.booking-inline-discount-scope {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.space-discount-card {
  position: relative;
  overflow: hidden;
  padding: 1.15rem;
  background: linear-gradient(145deg, var(--color-surface), color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)));
}

.space-discount-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--color-primary);
}

.space-discount-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.space-discount-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}

.space-discount-card-title,
.space-discount-card-summary {
  display: block;
}

.space-discount-card-title {
  color: var(--color-text);
  font-size: 0.98rem;
}

.space-discount-card-summary {
  margin-top: 0.15rem;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.space-discount-card input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-primary);
}

.space-discount-add {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
}

.space-discount-temp-delete button {
  font: inherit;
}

.booking-recurring-preview-label {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.booking-payment-card {
  margin-top: 1.25rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
}

.booking-form-card {
  display: flex;
  flex-direction: column;
}

.booking-payment-card {
  order: -1;
}

.booking-compact-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-background);
}

.booking-compact-summary strong,
.booking-compact-summary small {
  display: block;
  margin-top: 0.2rem;
}

.booking-client-pending-summary { justify-content: flex-start; padding: 1.15rem 1.25rem; background: var(--color-surface); }
.booking-client-pending-date { display: grid; width: 4.4rem; flex: 0 0 4.4rem; place-items: center; padding: 0.55rem; border-radius: 0.9rem; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); text-transform: uppercase; }
.booking-client-pending-date > span,
.booking-client-pending-date > small { margin: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; }
.booking-client-pending-date > strong { margin: 0.05rem 0; font-size: 1.75rem; line-height: 1; }
.booking-client-pending-main { min-width: 0; }
.booking-client-pending-main > strong { margin: 0.25rem 0 0.5rem; font-size: 1.05rem; }
.booking-client-pending-details { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; color: var(--color-muted); font-size: 0.82rem; }
.booking-client-pending-details span { display: inline-flex; align-items: center; gap: 0.35rem; }
.booking-client-pending-details i { color: var(--color-primary); }
.booking-manager-summary-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.booking-manager-summary-identity h2 { margin: 0.2rem 0 0.35rem; }
.booking-manager-summary-identity p { margin: 0.15rem 0; }
.booking-manager-summary-identity p > i { margin-right: 0.25rem; color: var(--color-primary); }

.booking-edit-collapsed .booking-section-card,
.booking-edit-collapsed .booking-form-conflicts,
.booking-edit-collapsed .booking-recurring-info,
.booking-edit-collapsed .booking-form-actions {
  display: none;
}

.booking-payment-header,
.booking-payment-totals > div,
.booking-pix-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.booking-payment-header h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.2rem 0 0;
}

.booking-payment-header h2 > i {
  color: var(--color-primary);
  font-size: 0.88em;
}

.booking-payment-header .booking-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.booking-payment-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 700;
}

.booking-payment-totals {
  display: grid;
  gap: 0.55rem;
  margin: 1.25rem 0;
  padding: 1rem;
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
}

.booking-payment-totals span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.booking-payment-totals span > i {
  width: 1rem;
  color: var(--color-primary);
  font-size: 0.8rem;
  text-align: center;
}

.booking-payment-total {
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
  font-size: 1.08rem;
}

.booking-pix-content {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 1.25rem 0;
}

.booking-pix-qr {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: #fff;
}

.booking-pix-qr img {
  display: block;
  width: 100%;
  height: auto;
}

.booking-pix-instructions h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
}

.booking-pix-instructions h3 i,
.booking-pix-instructions label i,
.booking-proof-form > label i {
  color: var(--color-primary);
}

.booking-pix-copy input {
  min-width: 0;
  flex: 1;
  padding: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
}

.booking-pix-copy button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--eo-radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.booking-proof-form,
.booking-payment-review-actions,
.booking-payment-reject-form {
  display: grid;
  gap: 0.75rem;
}

.booking-proof-form {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.booking-proof-upload-row {
  display: grid;
  grid-template-columns: minmax(220px, 420px) auto;
  gap: 0.65rem;
  align-items: center;
  justify-content: start;
}

.booking-proof-form input[type="file"] {
  width: 100%;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
  color: var(--color-text);
}

.booking-proof-submit {
  width: auto;
  white-space: nowrap;
}

.booking-payment-reject-form textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
  color: var(--color-text);
}

.booking-payment-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
}

.booking-payment-alert > div {
  min-width: 0;
}

.booking-payment-alert-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.82rem;
}

.booking-payment-alert p {
  margin: 0.25rem 0 0;
}

.booking-payment-alert-error {
  border-color: color-mix(in srgb, var(--color-red) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-red) 7%, var(--color-surface));
}

.booking-payment-alert-error .booking-payment-alert-icon {
  background: color-mix(in srgb, var(--color-red) 10%, var(--color-surface));
  color: var(--color-red);
}

.booking-payment-alert-success {
  border-color: color-mix(in srgb, var(--color-green) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-green) 7%, var(--color-surface));
}

.booking-payment-alert-success .booking-payment-alert-icon {
  background: color-mix(in srgb, var(--color-green) 10%, var(--color-surface));
  color: var(--color-green);
}

.booking-payment-review-actions {
  margin-top: 1rem;
}

.booking-payment-review-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: center;
  margin-top: 1rem;
  padding: clamp(1rem, 2vw, 1.3rem);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 32%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface));
}

.booking-payment-review-intro {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  min-width: 0;
}

.booking-payment-review-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-secondary) 15%, var(--color-surface));
  color: var(--color-secondary);
}

.booking-payment-review-kicker {
  display: block;
  color: var(--color-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.booking-payment-review-intro h3 {
  margin: 0.18rem 0 0.3rem;
  color: var(--color-text);
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.booking-payment-review-intro p {
  max-width: 650px;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.booking-payment-review-primary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.booking-payment-review-primary-actions form {
  margin: 0;
}

.booking-review-proof-link,
.booking-review-approve,
.booking-review-reject-trigger,
.booking-review-cancel-rejection,
.booking-review-confirm-rejection {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  min-width: 0;
  padding: 0.72rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--eo-radius-pill);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.booking-review-proof-link {
  padding: 0.82rem 1.05rem;
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.9rem;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 22%, transparent);
  transition: transform var(--transition-default), box-shadow var(--transition-default);
}

.booking-review-proof-link:hover {
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.booking-proof-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  margin: 1rem 0 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  color: var(--color-text);
  text-decoration: none;
  transition:
    border-color var(--transition-default),
    background var(--transition-default),
    transform var(--transition-default);
}

.booking-proof-link:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-text);
  transform: translateY(-1px);
}

.booking-proof-link-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
}

.booking-proof-link-copy,
.booking-proof-link-copy strong,
.booking-proof-link-copy small {
  display: block;
}

.booking-proof-link-copy strong {
  color: var(--color-text);
  font-size: 0.88rem;
}

.booking-proof-link-copy small {
  margin-top: 0.15rem;
  color: var(--color-muted);
  font-size: 0.72rem;
}

.booking-proof-link-arrow {
  color: var(--color-primary);
  font-size: 0.78rem;
}

.booking-review-approve {
  border-color: var(--color-green);
  background: var(--color-green);
  color: var(--color-white);
}

.booking-review-reject-trigger,
.booking-review-confirm-rejection {
  border-color: color-mix(in srgb, var(--color-red) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-red) 6%, var(--color-surface));
  color: var(--color-red);
}

.booking-payment-rejection-panel {
  grid-column: 1 / -1;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-red) 18%, var(--color-border));
}

.booking-payment-rejection-panel[hidden] {
  display: none;
}

.booking-payment-rejection-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.booking-payment-rejection-heading h4 {
  margin: 0.18rem 0 0.2rem;
  color: var(--color-text);
  font-size: 1rem;
}

.booking-payment-rejection-heading p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.booking-payment-rejection-heading > button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto;
  height: 34px;
  padding: 0 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.booking-payment-rejection-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.booking-payment-rejection-reasons button {
  width: auto;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.booking-payment-rejection-reasons button.is-selected {
  border-color: color-mix(in srgb, var(--color-red) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-red) 7%, var(--color-surface));
  color: var(--color-red);
}

.booking-payment-rejection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.booking-review-cancel-rejection {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
}

.booking-payment-reject-form textarea {
  display: block;
  width: 100%;
  min-height: 112px;
  padding: 0.85rem 0.95rem;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  outline: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  transition: border-color var(--transition-default), box-shadow var(--transition-default);
}

.booking-payment-reject-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.booking-payment-reject-form textarea::placeholder {
  color: var(--color-muted);
  font-family: inherit;
  opacity: 0.8;
}

@media (max-width: 700px) {
  .booking-pix-content {
    grid-template-columns: 1fr;
  }

  .booking-pix-qr {
    max-width: 240px;
    margin: 0 auto;
  }

  .booking-pix-copy {
    align-items: flex-start;
    flex-direction: column;
  }

  .booking-pix-copy input {
    width: 100%;
  }

  .booking-pix-copy button {
    width: auto;
  }

  .booking-proof-upload-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .booking-proof-form input[type="file"] {
    max-width: 360px;
  }

  .booking-payment-review-panel {
    grid-template-columns: 1fr;
  }

  .booking-payment-review-primary-actions {
    justify-content: flex-start;
  }

  .booking-payment-review-primary-actions > *,
  .booking-payment-review-primary-actions form,
  .booking-payment-review-primary-actions button {
    width: 100%;
  }
}

.space-availability-weekdays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.55rem 0.85rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.space-availability-weekdays li {
  list-style: none;
}

.space-availability-weekdays label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-default);
}

.space-availability-weekdays label:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.space-availability-weekdays input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.space-availability-card input[type="time"] {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  padding: 0.8rem 0.9rem;
  color: var(--color-text);
  font: inherit;
  transition: var(--transition-default);
}

.space-availability-card input[type="time"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15);
}

.space-availability-delete,
.space-discount-delete {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--color-border);
}

.space-availability-delete input[type="checkbox"],
.space-discount-delete input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.space-availability-delete-button,
.space-discount-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-red) 45%, var(--color-border));
  border-radius: var(--eo-radius-button);
  background: color-mix(in srgb, var(--color-red) 8%, var(--color-surface));
  color: var(--color-red);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-default);
}

.space-availability-delete-button:hover,
.space-availability-delete input[type="checkbox"]:checked + .space-availability-delete-button,
.space-discount-delete-button:hover,
.space-discount-delete input[type="checkbox"]:checked + .space-discount-delete-button {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.space-availability-delete-warning {
  margin-top: 0.5rem;
  color: var(--color-red);
  font-size: 0.85rem;
  font-weight: 500;
}

.space-availability-add {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
}

.space-availability-add .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: var(--eo-radius-button);
  border: 1px dashed var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  transition: var(--transition-default);
}

.space-availability-add .btn i {
  font-size: 0.9rem;
}

.space-availability-add .btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-style: solid;
}

@media (max-width: 768px) {
  .space-form-inline-actions {
    width: 100%;
  }

  .space-form-inline-actions .btn {
    width: 100%;
  }
}

/* =============================
   Space booking rules
============================= */

.space-rules-page {
  display: grid;
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
}

.space-rules-header,
.space-rules-section-heading,
.space-rules-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.space-rules-header h1 {
  margin: 0.25rem 0 0.4rem;
  color: var(--color-text);
}

.space-rules-header p {
  max-width: 700px;
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5;
}

.space-rules-eyebrow {
  color: var(--color-primary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.space-rule-form-error {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
}

.space-rule-form-error {
  border-color: color-mix(in srgb, var(--color-red) 30%, var(--color-border));
  background: color-mix(in srgb, var(--color-red) 6%, var(--color-surface));
  color: var(--color-red);
}

.space-rules-section {
  margin-bottom: 1.25rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-sm);
}

.space-rules-section-heading {
  align-items: center;
  margin-bottom: 1rem;
}

.space-rules-section-heading > div {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.space-rules-section-heading h2 {
  margin: 0 0 0.22rem;
  color: var(--color-text);
  font-size: 1.12rem;
}

.space-rules-section-heading p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.86rem;
}

.space-rule-list {
  display: grid;
  gap: 0.85rem;
}

.organization-term-selection {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-background);
}

.organization-term-selection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.organization-term-selection-heading strong,
.organization-term-selection-heading small,
.space-specific-terms-heading strong,
.space-specific-terms-heading small {
  display: block;
}

.organization-term-selection-heading small,
.space-specific-terms-heading small {
  margin-top: 0.15rem;
  color: var(--color-muted);
  font-size: 0.78rem;
}

.organization-term-options {
  display: grid;
  gap: 0.55rem;
}

.organization-term-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.organization-term-option > i {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  color: var(--color-primary);
  font-size: 0.85rem;
}

.organization-term-empty {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.space-specific-terms-heading {
  margin: 1rem 0 0.7rem;
}

.space-unavailable-summary-list {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.space-unavailable-summary {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(140px, auto) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
}

.space-unavailable-summary-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-red) 8%, var(--color-surface));
  color: var(--color-red);
}

.space-unavailable-summary-period strong,
.space-unavailable-summary-period small {
  display: block;
}

.space-unavailable-summary-period strong {
  color: var(--color-text);
  font-size: 0.86rem;
}

.space-unavailable-summary-period small {
  margin-top: 0.12rem;
  color: var(--color-muted);
  font-size: 0.72rem;
}

.space-unavailable-summary-reason {
  overflow: hidden;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-unavailable-summary-pending {
  color: var(--color-red);
  font-size: 0.74rem;
  font-weight: 700;
}

.space-unavailable-summary.is-pending-removal {
  border-color: color-mix(in srgb, var(--color-red) 30%, var(--color-border));
  background: color-mix(in srgb, var(--color-red) 5%, var(--color-surface));
}

.space-unavailable-summary.is-pending-removal
  .space-unavailable-summary-reason {
  display: none;
}

.space-unavailable-summary.is-pending-removal
  > :not(.space-unavailable-summary-remove, .space-unavailable-summary-pending) {
  opacity: 0.48;
}

.space-unavailable-summary-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  padding: 0.42rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--color-red) 24%, var(--color-border));
  border-radius: var(--eo-radius-button);
  background: var(--color-surface);
  color: var(--color-red);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.space-unavailable-summary-remove.is-undo {
  border-color: var(--color-border);
  color: var(--color-text);
}

.space-unavailable-empty {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
  color: var(--color-muted);
  font-size: 0.82rem;
}

.space-unavailable-new-heading {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.9rem 0 0.55rem;
}

.space-unavailable-new-heading strong {
  color: var(--color-text);
  font-size: 0.85rem;
}

.space-unavailable-new-heading small {
  color: var(--color-muted);
  font-size: 0.74rem;
}

.space-rule-card {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-background) 45%, var(--color-surface));
}

.space-rule-card[hidden] {
  display: none;
}

.space-rule-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.space-rule-card-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
}

.space-rule-card-icon-unavailable {
  background: color-mix(in srgb, var(--color-red) 8%, var(--color-surface));
  color: var(--color-red);
}

.space-rule-card-header strong,
.space-rule-card-header small {
  display: block;
}

.space-rule-card-header strong {
  color: var(--color-text);
}

.space-rule-card-header small {
  margin-top: 0.14rem;
  color: var(--color-muted);
  font-size: 0.78rem;
}

.space-rule-card-unavailable-form {
  padding: 0.8rem;
}

.space-rule-card-unavailable-form .space-rule-card-header {
  display: none;
}

.space-rule-card-unavailable-form .space-rule-card-actions {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
}

.space-rule-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.space-unavailable-form-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(390px, 1.7fr) minmax(210px, 0.85fr);
  align-items: start;
  gap: 0.65rem;
}

.space-unavailable-form-grid .manage-field label {
  margin-bottom: 0.28rem;
  font-size: 0.76rem;
}

.space-unavailable-form-grid .form-control {
  min-height: 40px;
  padding: 0.55rem 0.65rem;
}

.space-rule-card [data-time-field][hidden],
.space-rule-card [data-end-date-field][hidden] {
  display: none;
}

.space-rule-date-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  flex: 0 0 auto;
  min-height: 40px;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  color: var(--color-primary);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.space-rule-date-toggle.is-expanded {
  color: var(--color-muted);
}

.space-rule-date-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.space-rule-date-input {
  flex: 1 1 145px;
  min-width: 135px;
}

.space-rule-time-range {
  display: flex;
  grid-column: 2 / -1;
  align-items: end;
  gap: 0.55rem;
  width: fit-content;
  padding: 0.55rem 0.65rem;
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
}

.space-rule-time-range-label {
  align-self: center;
  margin-right: 0.15rem;
  color: var(--color-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.space-rule-time-range .manage-field {
  width: 145px;
}

.space-rule-time-range > i {
  align-self: center;
  margin-top: 1.15rem;
  color: var(--color-muted);
  font-size: 0.72rem;
}

.space-unavailable-form-grid .space-rule-toggle {
  min-height: 40px;
  padding: 0.55rem 0.65rem;
}

.space-unavailable-form-grid .space-rule-toggle small {
  display: block;
}

.space-term-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}

.space-term-form-grid > .manage-field {
  grid-column: 1 / -1;
}

.space-rule-card-term-form {
  padding: 0.8rem;
}

.space-rule-card-term-form .space-rule-card-header {
  display: none;
}

.space-rule-card-term-form .form-control {
  min-height: 132px;
  padding: 0.55rem 0.7rem;
  resize: vertical;
}

.space-term-text-label {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.space-term-active-toggle {
  min-height: 42px;
  padding: 0.45rem 0.55rem;
  border-color: transparent;
  background: transparent;
  white-space: nowrap;
}

.space-term-active-toggle:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.space-term-active-toggle strong {
  font-size: 0.8rem;
}

.space-term-inline-action {
  display: flex;
  align-items: center;
  min-height: 42px;
}

.space-rule-field-full {
  grid-column: 1 / -1;
}

.space-rule-form-grid textarea {
  min-height: 76px;
  resize: vertical;
}

.space-rule-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  cursor: pointer;
}

.space-rule-toggle input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.1rem;
  accent-color: var(--color-primary);
}

.space-rule-toggle strong,
.space-rule-toggle small {
  display: block;
}

.space-rule-toggle strong {
  color: var(--color-text);
  font-size: 0.86rem;
}

.space-rule-toggle small {
  margin-top: 0.12rem;
  color: var(--color-muted);
  font-size: 0.75rem;
}

.space-rule-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.space-rule-delete,
.space-rule-remove-new {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  padding: 0.5rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-red) 28%, var(--color-border));
  border-radius: var(--eo-radius-button);
  background: transparent;
  color: var(--color-red);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.space-rule-delete input {
  display: none;
}

.space-rule-delete:has(input:checked) {
  background: color-mix(in srgb, var(--color-red) 8%, var(--color-surface));
}

.space-rules-actions {
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 700px) {
  .space-rules-header,
  .space-rules-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .space-rules-header .btn,
  .space-rules-section-heading .btn {
    width: fit-content;
  }

  .space-rule-form-grid {
    grid-template-columns: 1fr;
  }

  .space-unavailable-form-grid,
  .space-term-form-grid {
    grid-template-columns: 1fr;
  }

  .space-rule-date-controls {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .space-rule-date-input {
    flex: 1 1 150px;
  }

  .space-rule-time-range {
    grid-column: auto;
    width: 100%;
  }

  .space-unavailable-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .space-unavailable-summary-reason {
    grid-column: 2 / -1;
    justify-self: start;
    max-width: 100%;
  }

  .space-unavailable-summary-remove {
    grid-column: 3;
    grid-row: 1;
  }

  .space-rule-field-full {
    grid-column: auto;
  }
}

.space-form-status-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
  user-select: none;
  width: fit-content;
}

.space-form-status-section {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.space-form-preview--default,
.space-form-calendar-account {
  display: block;
  margin-bottom: 1rem;
}

.space-form-secondary-section {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-border));
}

.space-form-status-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.space-form-status-switch-track {
  position: relative;
  width: 56px;
  height: 30px;
  border-radius: var(--eo-radius-pill);
  background: rgba(192, 57, 43, 0.18);
  border: 1px solid rgba(192, 57, 43, 0.25);
  transition: var(--transition-default);
  flex-shrink: 0;
}

.space-form-status-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: var(--transition-default);
}

.space-form-status-switch-labels {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.space-form-status-switch-label {
  transition: var(--transition-default);
}

.space-form-status-switch-label-active {
  color: var(--color-muted);
}

.space-form-status-switch-label-inactive {
  color: var(--color-red);
}

.space-form-status-switch input[type="checkbox"]:checked + .space-form-status-switch-track {
  background: rgba(76, 175, 80, 0.18);
  border-color: rgba(76, 175, 80, 0.3);
}

.space-form-status-switch input[type="checkbox"]:checked + .space-form-status-switch-track .space-form-status-switch-thumb {
  transform: translateX(26px);
}

.space-form-status-switch input[type="checkbox"]:checked ~ .space-form-status-switch-labels .space-form-status-switch-label-active {
  color: var(--color-green);
}

.space-form-status-switch input[type="checkbox"]:checked ~ .space-form-status-switch-labels .space-form-status-switch-label-inactive {
  color: var(--color-muted);
}

.space-form-status-switch input[type="checkbox"]:focus-visible + .space-form-status-switch-track {
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.18);
}

/* Esconde ambos por padrão (controle fino) */
.space-form-status-switch-label-active,
.space-form-status-switch-label-inactive {
  display: none;
}

/* Quando estiver ATIVO (checked) → mostra "Ativo" */
.space-form-status-switch input[type="checkbox"]:checked ~ .space-form-status-switch-labels .space-form-status-switch-label-active {
  display: inline;
  color: var(--color-green);
}

/* Quando estiver INATIVO → mostra "Inativo" */
.space-form-status-switch input[type="checkbox"]:not(:checked) ~ .space-form-status-switch-labels .space-form-status-switch-label-inactive {
  display: inline;
  color: var(--color-red);
}

/* =============================
Bookings
booking_form.html
============================= */

.booking-form-page {
  padding: 2rem 1rem;
}

.booking-form-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.booking-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.booking-form-title {
  margin: 0 0 0.35rem;
  color: var(--color-primary);
  font-size: 1.9rem;
}

.booking-form-subtitle {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
}

.booking-form-organization {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.booking-form-status-wrapper {
  display: flex;
  align-items: center;
}

.booking-form-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.8rem;
  border-radius: var(--eo-radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.booking-form-status-pending {
  background: rgba(242, 201, 76, 0.16);
  color: var(--color-dark-yellow);
}

.booking-form-status-confirmed {
  background: rgba(76, 175, 80, 0.12);
  color: var(--color-green);
}

.booking-form-status-cancelled,
.booking-form-status-rejected {
  background: rgba(192, 57, 43, 0.12);
  color: var(--color-red);
}

.booking-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  box-shadow: var(--shadow-default);
  padding: 1.5rem;
}

.booking-form {
  display: flex;
  flex-direction: column;
}

.booking-form-errors {
  padding: 0.95rem 1rem;
  border-radius: var(--eo-radius-card);
  font-size: 0.95rem;
}

.booking-form-errors {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.18);
  color: var(--color-red);
}

.booking-form-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.booking-form-summary-item {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.booking-form-summary-label {
  font-size: 0.82rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


.booking-form-summary-value {
  color: var(--color-text);
  font-weight: 600;
}

/* =============================
   Recurring Booking Info
   (booking_form.html)
============================= */
.booking-recurring-info {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem;
  /* margin-top: 1rem;
  margin-bottom: 1.25rem; */
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}

.booking-recurring-info-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--eo-radius-pill);
  background: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface));
  color: var(--color-primary);
  flex-shrink: 0;
}

.booking-recurring-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.booking-recurring-info-content strong {
  color: var(--color-text);
  font-size: 0.98rem;
}

.booking-recurring-info-content p,
.booking-recurring-info-content span {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.booking-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.booking-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.booking-form-field label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}

.booking-form-field input,
.booking-form-field select,
.booking-form-field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  padding: 0.8rem 0.9rem;
  color: var(--color-text);
  outline: none;
  font: inherit;
}

.booking-form-field input:focus,
.booking-form-field select:focus,
.booking-form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15);
}


.booking-form-field-error {
  font-size: 0.85rem;
  color: var(--color-red);
}

.booking-form-conflicts {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(242, 201, 76, 0.35);
  background: rgba(242, 201, 76, 0.1);
  border-radius: var(--eo-radius-card);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking-form-conflicts > strong {
  color: var(--color-dark-yellow);
  font-size: 0.98rem;
}

.booking-form-conflicts p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.93rem;
  line-height: 1.45;
}

.booking-recurring-preview-table-wrapper {
  overflow-x: auto;
  margin-top: 1rem;
}

.booking-recurring-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.booking-recurring-preview-table th,
.booking-recurring-preview-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.booking-recurring-preview-table th {
  color: var(--color-muted);
  font-weight: 700;
}

.booking-recurring-preview-conflict td {
  background: rgba(192, 57, 43, 0.08);
  color: var(--color-red);
}

.booking-form-conflicts-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.booking-form-conflict-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
}

.booking-form-conflict-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.booking-form-conflict-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}

.booking-form-conflict-link:hover {
  color: var(--color-secondary);
}

.booking-form-conflict-status {
  flex-shrink: 0;
}

.booking-form-extra-actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.booking-form-extra-actions-header {
  margin-bottom: 0.85rem;
}

.booking-form-extra-actions-label {
  display: inline-block;
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.booking-form-extra-actions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.booking-form-inline-action {
  margin: 0;
}

.booking-form-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  min-width: 0;
  padding: 0.72rem 1rem;
  border-radius: var(--eo-radius-pill);
  border: 1px solid transparent;
  background: var(--color-surface);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-default);
  box-shadow: none;
}

.booking-form-action-button i {
  font-size: 0.95em;
}

.booking-form-action-button:hover {
  transform: translateY(-1px);
}

.booking-form-action-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.booking-form-action-button:disabled:hover {
  transform: none;
}

.booking-form-action-button-confirm {
  color: var(--color-green);
  border-color: color-mix(in srgb, var(--color-green) 24%, var(--color-border));
  background: color-mix(in srgb, var(--color-green) 8%, white);
}

.booking-form-action-button-confirm:hover {
  background: color-mix(in srgb, var(--color-green) 14%, white);
}

.booking-form-action-button-reject,
.booking-form-action-button-cancel {
  color: var(--color-red);
  border-color: color-mix(in srgb, var(--color-red) 22%, var(--color-border));
  background: color-mix(in srgb, var(--color-red) 6%, white);
}

.booking-form-action-button-reject:hover,
.booking-form-action-button-cancel:hover {
  background: color-mix(in srgb, var(--color-red) 10%, white);
}

.booking-form-action-button-cancel-series {
  color: var(--color-red);
  border-color: color-mix(in srgb, var(--color-dark-red) 22%, var(--color-border));
  background: color-mix(in srgb, var(--color-dark-red) 6%, white);
}

.booking-form-action-button-cancel-series:hover {
  background: color-mix(in srgb, var(--color-dark-red) 10%, white);
}

.booking-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.booking-form-cancel {
  color: var(--color-muted);
  font-weight: 500;
  transition: var(--transition-default);
}

.booking-form-cancel:hover {
  color: var(--color-text);
}

.booking-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.2rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--eo-radius-button);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-default);
}

.booking-form-submit:hover {
  background: var(--color-secondary);
}

.booking-terms-section {
  display: grid;
  gap: 1rem;
}

.booking-terms-section--divided {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.booking-terms-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.booking-terms-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-yellow) 18%, var(--color-surface));
  color: var(--color-dark-yellow);
}

.booking-terms-heading h2 {
  margin: 0.18rem 0 0.25rem;
  color: var(--color-text);
  font-size: 1.05rem;
}

.booking-terms-heading p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.86rem;
}

.booking-terms-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-terms-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--color-text);
  font-size: 0.88rem;
  line-height: 1.45;
}

.booking-terms-list li i {
  margin-top: 0.22rem;
  color: var(--color-green);
  font-size: 0.72rem;
}

.booking-term-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.booking-terms-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.booking-terms-acceptance input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.08rem;
  accent-color: var(--color-primary);
}

.booking-accepted-terms {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
}

.booking-accepted-terms-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.booking-accepted-terms-heading > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-green) 10%, var(--color-surface));
  color: var(--color-green);
}

.booking-accepted-terms-heading strong,
.booking-accepted-terms-heading small {
  display: block;
}

.booking-accepted-terms-heading small {
  margin-top: 0.12rem;
  color: var(--color-muted);
}

.booking-accepted-terms-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-background));
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.booking-accepted-terms-note i {
  flex: 0 0 auto;
  margin-top: 0.16rem;
  color: var(--color-primary);
}

.booking-accepted-terms ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.booking-accepted-terms li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.booking-accepted-terms li i {
  flex: 0 0 auto;
  margin-top: 0.22rem;
  color: var(--color-green);
  font-size: 0.68rem;
}

@media (max-width: 768px) {
  .booking-form-summary-grid,
  .booking-form-row {
    grid-template-columns: 1fr;
  }

  .booking-form-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .booking-form-cancel,
  .booking-form-submit {
    width: auto;
    text-align: center;
  }

  .booking-form-conflict-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .booking-form-conflict-status {
    align-self: flex-start;
  }
}

.booking-section-card {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--eo-radius-card);
  padding: 1.35rem;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
  margin-bottom: 1.15rem;
}

.booking-request-guide {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.booking-request-guide__icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  place-items: center;
  border-radius: 0.72rem;
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
  color: var(--color-primary);
}

.booking-policy-summary h2 {
  margin: 0.16rem 0 0;
  color: var(--color-text);
  font-size: 1rem;
}

.booking-request-guide ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  counter-reset: booking-guide;
  list-style: none;
}

.booking-request-guide li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.45rem;
  counter-increment: booking-guide;
}

.booking-request-guide li::before {
  content: counter(booking-guide);
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}

.booking-request-guide li strong {
  color: var(--color-text);
  font-size: 0.82rem;
}

.booking-request-guide li span {
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.booking-policy-summary {
  margin: 0.1rem 0 1.15rem;
  padding: 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
}

.booking-policy-summary__heading {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  margin-bottom: 0.9rem;
}

.booking-policy-summary__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-blue) 9%, var(--color-surface));
  color: var(--color-blue);
}

.booking-policy-summary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.booking-policy-summary__grid > div {
  padding: 0.85rem;
  border-radius: var(--eo-radius-panel);
  background: color-mix(in srgb, var(--color-muted) 5%, var(--color-surface));
}

.booking-policy-summary__grid strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-text);
  font-size: 0.82rem;
}

.booking-policy-summary__grid strong i {
  width: 1rem;
  margin-right: 0.18rem;
  color: var(--color-primary);
  text-align: center;
}

.booking-policy-summary__grid p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.booking-observation-card {
  margin: 1.5rem 0 1rem;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}

.booking-observation-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.booking-observation-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  place-items: center;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
  color: var(--color-primary);
}

.booking-observation-heading > div { min-width: 0; flex: 1; }
.booking-observation-heading h2 { margin: 0.12rem 0 0.2rem; color: var(--color-text); font-size: 1rem; line-height: 1.3; }
.booking-observation-heading p { margin: 0; color: var(--color-muted); font-size: 0.82rem; line-height: 1.45; }
.booking-observation-optional { padding: 0.28rem 0.52rem; border-radius: var(--eo-radius-pill); background: var(--color-background); color: var(--color-muted); font-size: 0.68rem; font-weight: 750; }
.booking-observation-readonly-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.52rem; border-radius: var(--eo-radius-pill); background: var(--color-background); color: var(--color-muted); font-size: 0.68rem; font-weight: 750; white-space: nowrap; }
.booking-observation-card--readonly { border-color: var(--color-border); background: var(--color-surface); }
.booking-observation-card--readonly .booking-observation-icon { background: var(--color-background); color: var(--color-muted); }
.booking-observation-content { min-height: 3rem; padding: 0.9rem 1rem; border-left: 3px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); border-radius: 0 var(--eo-radius-input) var(--eo-radius-input) 0; background: var(--color-background); color: var(--color-text); line-height: 1.55; overflow-wrap: anywhere; }
.booking-observation-content span { color: var(--color-muted); font-style: italic; }
.booking-form-actions--observation {
  justify-content: flex-end;
  margin-top: -1.25rem;
  padding: 1rem clamp(1rem, 2vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-top-color: var(--color-border);
  border-radius: 0 0 var(--eo-radius-card) var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
  box-shadow: var(--eo-shadow-sm);
}
.booking-form-actions--observation[hidden] { display: none !important; }
.booking-manager-price-warning { display: flex; gap: 0.65rem; margin-bottom: 0.9rem; padding: 0.8rem 0.9rem; border-radius: var(--eo-radius-input); background: color-mix(in srgb, #d99a00 10%, var(--color-surface)); color: var(--color-text); }
.booking-manager-price-warning i { margin-top: 0.15rem; color: #b77900; }
.booking-manager-price-warning p { margin: 0; font-size: 0.78rem; line-height: 1.45; }
.booking-manager-price-warning strong { display: block; margin-bottom: 0.1rem; }
.booking-observation-field textarea { width: 100%; min-height: 112px; padding: 0.85rem 0.95rem; border: 1px solid var(--color-border); border-radius: var(--eo-radius-input); background: var(--color-surface); color: var(--color-text); font: inherit; line-height: 1.5; resize: vertical; }
.booking-observation-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); }
.booking-observation-field textarea::placeholder { color: var(--color-muted); }

@media (max-width: 900px) {
  .booking-request-guide ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-policy-summary__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .booking-request-guide {
    align-items: flex-start;
  }

  .booking-request-guide ol {
    grid-template-columns: 1fr;
  }

  .booking-observation-heading { flex-wrap: wrap; }
  .booking-observation-optional { margin-left: 3rem; }
  .booking-observation-readonly-badge { margin-left: 3rem; }
}

.booking-section-card-primary {
  border-color: rgba(17, 24, 39, 0.1);
}

.booking-section-heading,
.booking-recurrence-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.1rem;
}

.booking-section-heading h2,
.booking-recurrence-toggle-copy h2 {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #111827;
}

.booking-section-heading p,
.booking-recurrence-toggle-copy p {
  margin: 0.25rem 0 0;
  color: #6b7280;
  font-size: 0.92rem;
}

.booking-section-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.booking-form-row-datetime {
  align-items: stretch;
}

.booking-native-datetime-fields {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.booking-date-picker-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: end;
  margin-bottom: 1rem;
}

.booking-date-field small {
  display: block;
  margin-top: 0.45rem;
  color: #6b7280;
  font-size: 0.84rem;
}

.booking-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.booking-date-control,
.booking-time-control {
  position: relative;
  min-width: 0;
}

.booking-date-control i,
.booking-time-control i {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
  z-index: 1;
}

.booking-date-control input,
.booking-time-control input,
.booking-time-control select {
  padding-left: 2.65rem;
}

.booking-datetime-error {
  margin-top: 0.9rem;
}

.booking-summary-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(17, 24, 39, 0.1);
  background: #ffffff;
}

.booking-summary-card[hidden] {
  display: none;
}

.booking-summary-heading {
  margin-bottom: 0.95rem;
}

.booking-summary-heading h2 {
  margin-bottom: 0;
}

.booking-summary-empty {
  display: none;
}

.booking-summary-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.booking-summary-row {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--eo-radius-panel);
  padding: 0.95rem;
  background: #fafafa;
}

.booking-summary-row[hidden] {
  display: none;
}

.booking-summary-row-featured,
.booking-summary-row:hover {
  background: #ffffff;
}

.booking-summary-recurrence-row {
  grid-column: 1 / -1;
}

.booking-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--eo-radius-input);
  background: #f3f4f6;
  color: #111827;
}

.booking-summary-label {
  display: block;
  margin-bottom: 0.24rem;
  color: #6b7280;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.booking-summary-row strong {
  display: block;
  color: #111827;
  font-size: 0.96rem;
  line-height: 1.35;
}

.booking-form-field-enhanced input,
.booking-form-field-enhanced select,
.booking-datetime-control input,
.booking-date-control input,
.booking-time-control input,
.booking-time-control select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: var(--eo-radius-input);
  background: #ffffff;
  color: #111827;
  font-size: 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.booking-form-field-enhanced input:focus,
.booking-form-field-enhanced select:focus,
.booking-datetime-control input:focus,
.booking-date-control input:focus,
.booking-time-control input:focus,
.booking-time-control select:focus {
  outline: none;
  border-color: rgba(17, 24, 39, 0.34);
  box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.06);
}

.booking-datetime-control {
  position: relative;
}

.booking-datetime-control i {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
  z-index: 1;
}

.booking-datetime-control input {
  padding-left: 2.65rem;
}

.booking-form-field-narrow {
  max-width: 360px;
}

.booking-recurrence-card {
  background: #ffffff;
}

.booking-recurrence-toggle-row {
  margin-bottom: 0;
}

.booking-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  user-select: none;
  padding-top: 0.15rem;
}

.booking-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.booking-switch-track {
  position: relative;
  width: 48px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--eo-radius-pill);
  background: #e5e7eb;
  transition: background 0.18s ease;
}

.booking-switch-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.16);
  transition: transform 0.18s ease;
}

.booking-switch input:checked + .booking-switch-track {
  background: #111827;
}

.booking-switch input:checked + .booking-switch-track .booking-switch-thumb {
  transform: translateX(20px);
}

.booking-switch-label {
  color: #374151;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.booking-recurrence-options {
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  margin-top: 1.15rem;
  padding-top: 1.25rem;
  display: grid;
  gap: 1rem;
}

.booking-recurrence-options[hidden] {
  display: none;
}

.booking-recurrence-progress {
  display: grid;
  gap: 0.65rem;
}

.booking-recurrence-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.booking-recurrence-progress-copy span {
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 750;
}

.booking-recurrence-progress-copy strong {
  color: #111827;
  font-size: 0.78rem;
}

.booking-recurrence-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: var(--eo-radius-pill);
  background: #e5e7eb;
}

.booking-recurrence-progress-track span {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: width 0.28s ease;
}

.booking-recurrence-step {
  display: block;
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  border-radius: calc(var(--eo-radius-card) + 4px);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 42%),
    #ffffff;
  box-shadow: 0 14px 38px rgba(17, 24, 39, 0.07);
  animation: booking-recurrence-step-in 0.24s ease both;
}

.booking-recurrence-step[hidden] {
  display: none;
}

@keyframes booking-recurrence-step-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.booking-recurrence-step-content {
  min-width: 0;
}

.booking-recurrence-step-eyebrow {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--color-primary);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
}

/* .booking-recurrence-step h3 {
  margin: 0 0 1.15rem;
  color: #111827;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  line-height: 1.25;
} */

.booking-recurrence-step-description {
  color: #6b7280;
  font-size: 0.86rem;
}

.booking-recurrence-sentence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  color: #111827;
  font-size: 1rem;
  font-weight: 700;
}

.booking-recurrence-sentence .booking-form-field {
  margin: 0;
}

.booking-recurrence-interval-field {
  width: 112px;
}

.booking-recurrence-type-field {
  width: min(190px, 100%);
}

.booking-recurrence-sentence-until .booking-form-field {
  width: min(260px, 100%);
}

.booking-recurrence-example {
  display: block;
  margin-top: 0.55rem;
  color: #6b7280;
  font-size: 0.8rem;
}

.booking-recurrence-primary-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 50px;
  margin-top: 1.25rem;
  border: 0;
  border-radius: var(--eo-radius-button);
  background: #111827;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

.booking-recurrence-primary-action:not(:disabled):hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, #111827 88%, var(--color-primary));
}

.booking-recurrence-primary-action:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.booking-recurrence-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}

.booking-discount-guide {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 38%),
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--color-primary) 3%, #fff) 100%);
}

.booking-hourly-rate-badge {
  min-width: 142px;
  padding: 0.75rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-radius: var(--eo-radius-panel);
  background: #fff;
  text-align: right;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
}

.booking-hourly-rate-badge span,
.booking-hourly-rate-badge strong {
  display: block;
}

.booking-hourly-rate-badge span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.booking-hourly-rate-badge strong {
  margin-top: 0.2rem;
  color: #111827;
  font-size: 1.08rem;
}

.booking-discount-guide-intro {
  margin: -0.35rem 0 1rem;
  color: #6b7280;
  font-size: 0.9rem;
}

.booking-discount-tier-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.booking-discount-tier {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  min-height: 112px;
  padding: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: var(--eo-radius-panel);
  background: rgba(255, 255, 255, 0.82);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.booking-discount-tier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
}

.booking-discount-tier strong,
.booking-discount-tier span {
  display: block;
}

.booking-discount-tier strong {
  color: #111827;
  font-size: 0.9rem;
}

.booking-discount-tier div span {
  margin-top: 0.15rem;
  color: #6b7280;
  font-size: 0.78rem;
}

.booking-discount-tier b {
  color: var(--color-primary);
  font-size: 0.9rem;
  white-space: nowrap;
}

.booking-discount-tier small {
  grid-column: 2 / -1;
  color: #6b7280;
  font-size: 0.74rem;
  font-weight: 600;
}

.booking-discount-tier.is-eligible {
  border-color: color-mix(in srgb, var(--color-green) 35%, var(--color-border));
}

.booking-discount-tier.is-applied {
  transform: translateY(-2px);
  border-color: var(--color-green);
  background: color-mix(in srgb, var(--color-green) 7%, #fff);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-green) 12%, transparent);
}

.booking-discount-tier.is-applied::after {
  content: 'MELHOR OPÇÃO';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0 0 0 var(--eo-radius-input);
  background: var(--color-green);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.booking-discount-tier.is-applied .booking-discount-tier-icon {
  background: color-mix(in srgb, var(--color-green) 14%, #fff);
  color: var(--color-green);
}

.booking-discount-tier.is-applied small {
  color: var(--color-green);
}

.booking-discount-guide-empty {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem;
  border-radius: var(--eo-radius-panel);
  background: #f9fafb;
  color: #4b5563;
  font-size: 0.9rem;
}

.booking-quote-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--eo-radius-pill);
  background: #ecfdf3;
  color: #16794a;
  font-size: 0.76rem;
  font-weight: 700;
}

.booking-quote-feedback {
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--eo-radius-input);
  font-size: 0.86rem;
}

.booking-quote-feedback[hidden] {
  display: none;
}

.booking-quote-feedback-loading,
.booking-quote-feedback-info {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
}

.booking-quote-feedback-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #16794a;
}

.booking-quote-feedback-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b42318;
}

.booking-quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  gap: 1rem;
  align-items: start;
}

.booking-quote-layout[hidden] {
  display: none;
}

.booking-quote-reservation {
  min-width: 0;
}

.booking-quote-panel {
  position: sticky;
  top: 1rem;
  overflow: hidden;
  padding: 1.15rem;
  border-radius: var(--eo-radius-card);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 34%),
    #172033;
  color: #fff;
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.2);
}

.booking-quote-panel-heading h3 {
  margin: 0.25rem 0 1rem;
  color: #fff;
  font-size: 1.12rem;
}

.booking-quote-panel .booking-section-kicker {
  color: #aeb8ca;
}

.booking-quote-lines {
  display: grid;
  gap: 0.65rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.booking-quote-lines > div,
.booking-quote-series > div,
.booking-quote-unit-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.booking-quote-discount-line[hidden] {
  display: none;
}

.booking-quote-lines span,
.booking-quote-series span,
.booking-quote-unit-total span {
  color: #c7cfdd;
  font-size: 0.83rem;
}

.booking-quote-lines strong,
.booking-quote-series strong {
  color: #fff;
  font-size: 0.9rem;
}

.booking-quote-discount-line strong,
.booking-quote-series > div:last-child strong {
  color: #7ee2aa;
}

.booking-applied-rule {
  display: grid;
  gap: 0.2rem;
  margin: 0.9rem 0;
  padding: 0.8rem;
  border: 1px solid rgba(126, 226, 170, 0.28);
  border-radius: var(--eo-radius-input);
  background: rgba(126, 226, 170, 0.09);
}

.booking-applied-rule[hidden] {
  display: none;
}

.booking-applied-rule span,
.booking-applied-rule small {
  color: #b9eccc;
  font-size: 0.74rem;
}

.booking-applied-rule strong {
  color: #fff;
  font-size: 0.94rem;
}

.booking-quote-unit-total {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.booking-quote-unit-total strong {
  color: #fff;
  font-size: 1.05rem;
}

.booking-quote-series {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.booking-quote-series[hidden] {
  display: none;
}

.booking-quote-grand-total {
  padding-top: 1rem;
}

.booking-quote-grand-total span,
.booking-quote-grand-total strong,
.booking-quote-grand-total small {
  display: block;
}

.booking-quote-grand-total span {
  color: #c7cfdd;
  font-size: 0.78rem;
}

.booking-quote-grand-total strong {
  margin-top: 0.2rem;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.15;
}

.booking-quote-grand-total small {
  margin-top: 0.35rem;
  color: #9ca8bc;
  font-size: 0.72rem;
}

.booking-occurrence-preview {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: var(--eo-radius-card);
  background: #fff;
}

.booking-occurrence-preview[hidden] {
  display: none;
}

.booking-occurrence-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  background: #f9fafb;
}

.booking-occurrence-preview-heading h3 {
  margin: 0.15rem 0 0;
  color: #111827;
  font-size: 0.98rem;
}

.booking-occurrence-preview-heading > span {
  padding: 0.35rem 0.55rem;
  border-radius: var(--eo-radius-pill);
  background: #fff;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 700;
}

.booking-occurrence-list {
  max-height: 390px;
  overflow-y: auto;
}

.booking-occurrence-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.07);
}

.booking-occurrence-item:last-child {
  border-bottom: 0;
}

.booking-occurrence-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ecfdf3;
  color: #16794a;
  font-size: 0.68rem;
}

.booking-occurrence-details strong,
.booking-occurrence-details span,
.booking-occurrence-details small {
  display: block;
}

.booking-occurrence-details strong {
  color: #111827;
  font-size: 0.86rem;
}

.booking-occurrence-details span {
  margin-top: 0.12rem;
  color: #6b7280;
  font-size: 0.78rem;
}

.booking-occurrence-item > b {
  color: #111827;
  font-size: 0.86rem;
  white-space: nowrap;
}

.booking-occurrence-item.has-conflict {
  background: #fff7f7;
}

.booking-occurrence-item.has-conflict .booking-occurrence-marker {
  background: #fee2e2;
  color: #b42318;
}

.booking-occurrence-details small {
  margin-top: 0.25rem;
  color: #b42318;
  font-size: 0.72rem;
}

.booking-financial-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1.15rem;
}

.booking-financial-snapshot > div {
  padding: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
}

.booking-financial-snapshot span,
.booking-financial-snapshot strong {
  display: block;
}

.booking-financial-snapshot span {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.booking-financial-snapshot span > i {
  width: 1rem;
  margin-right: 0.3rem;
  color: var(--color-primary);
  text-align: center;
}

.booking-financial-snapshot strong {
  margin-top: 0.25rem;
  color: var(--color-text);
  font-size: 0.9rem;
}

.booking-payment-rule {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-green) 30%, var(--color-border));
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-green) 6%, var(--color-surface));
}

.booking-payment-rule span,
.booking-payment-rule small {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.booking-payment-rule strong {
  color: var(--color-green);
  font-size: 0.94rem;
}

.booking-payment-rule-neutral {
  border-color: var(--color-border);
  background: var(--color-background);
}

.booking-payment-rule-neutral strong {
  color: var(--color-text);
}

.booking-form-submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Checkout de agendamento */
.booking-form-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.booking-edit-collapsed .booking-checkout-layout {
  display: none;
}

.booking-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: var(--eo-card-gap);
  align-items: start;
  margin-bottom: 1rem;
}

.booking-checkout-main {
  min-width: 0;
}

.booking-form-card-manager .booking-payment-card {
  order: initial;
}

.booking-payment-card-priority {
  order: -1;
}

.booking-form-card-client > .booking-form {
  order: -2;
}

.booking-payment-card-manager-priority {
  order: -1 !important;
}

.booking-form-card-manager > .booking-payment-card.booking-payment-card-manager-priority {
  margin-top: 0;
  margin-bottom: var(--eo-card-gap);
}

.booking-form-card-manager {
  display: flex;
  flex-direction: column;
}

.booking-form-card-manager > .booking-form,
.booking-form-card-manager > .booking-payment-card {
  min-width: 0;
  width: 100%;
}

.booking-form-card-manager .booking-manager-overview {
  margin: 0;
}

.booking-form-card-manager > .booking-payment-card {
  margin-top: var(--eo-card-gap);
}

.booking-form-card-manager .booking-form:not(.booking-edit-collapsed) .booking-checkout-layout {
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-bottom: 0;
  border-radius: var(--eo-radius-card) var(--eo-radius-card) 0 0;
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
  box-shadow: var(--eo-shadow-sm);
}

.booking-form-card-manager .booking-form:not(.booking-edit-collapsed) .booking-form-actions {
  justify-content: flex-end;
  margin-top: -1.25rem;
  padding: 1rem clamp(1rem, 2vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-top-color: var(--color-border);
  border-radius: 0 0 var(--eo-radius-card) var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
  box-shadow: var(--eo-shadow-sm);
}

.booking-edit-close-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  padding: 0.72rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-button);
  background: var(--color-surface);
  color: var(--color-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.booking-edit-close-action:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.booking-manager-overview {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-sm);
}

.booking-manager-overview-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 1.25rem;
  align-items: center;
}

.booking-manager-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.booking-manager-overview-header h2 {
  margin: 0.18rem 0 0.3rem;
  color: var(--color-text);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.booking-manager-overview-header p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.86rem;
}

.booking-manager-overview-header p strong {
  color: var(--color-text);
}

.booking-compact-action {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

.booking-manager-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.booking-manager-overview-grid > div {
  padding: 0.75rem 0.85rem;
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
}

.booking-manager-overview-grid span,
.booking-manager-overview-grid strong {
  display: block;
}

.booking-manager-overview-grid span {
  margin-bottom: 0.2rem;
  color: var(--color-muted);
  font-size: 0.7rem;
}

.booking-manager-overview-grid strong {
  color: var(--color-text);
  font-size: 0.86rem;
}

.booking-manager-series {
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}

.booking-manager-series-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.booking-manager-series-heading strong,
.booking-manager-series-heading span {
  display: block;
}

.booking-manager-series-heading strong {
  color: var(--color-text);
  font-size: 0.9rem;
}

.booking-manager-series-heading span {
  margin-top: 0.15rem;
  color: var(--color-muted);
  font-size: 0.74rem;
}

.booking-manager-series-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  max-height: 310px;
  overflow-y: auto;
}

.booking-manager-series-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
}

.booking-manager-series-marker {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-green) 10%, var(--color-surface));
  color: var(--color-green);
  font-size: 0.68rem;
}

.booking-manager-series-item strong,
/* .booking-manager-series-item span, */
.booking-manager-series-item small {
  display: block;
}

.booking-manager-series-item strong {
  color: var(--color-text);
  font-size: 0.82rem;
}

.booking-manager-series-item span,
.booking-manager-series-item small {
  color: var(--color-muted);
  font-size: 0.72rem;
}

.booking-manager-series-item > b {
  color: var(--color-text);
  font-size: 0.82rem;
}

.booking-manager-series-item.has-conflict {
  border-color: color-mix(in srgb, var(--color-red) 30%, var(--color-border));
}

.booking-manager-series-item.has-conflict .booking-manager-series-marker {
  background: color-mix(in srgb, var(--color-red) 8%, var(--color-surface));
  color: var(--color-red);
}

.booking-client-request-date {
  margin: 0 0 0.8rem;
  color: var(--color-muted);
  font-size: 0.78rem;
}

.booking-client-overview {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-sm);
}

.booking-client-overview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.booking-client-overview-heading h2 {
  margin: 0.18rem 0 0;
  color: var(--color-text);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.booking-client-space-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-primary);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.booking-client-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr);
  gap: 0.75rem;
}

.booking-client-overview-grid > div {
  padding: 0.9rem 1rem;
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
}

.booking-client-overview-grid span,
.booking-client-overview-grid strong,
.booking-client-overview-grid small {
  display: block;
}

.booking-client-overview-grid span {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.booking-client-overview-grid strong {
  margin-top: 0.3rem;
  color: var(--color-text);
}

.booking-client-overview-grid small {
  margin-top: 0.2rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.booking-client-payment-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1rem;
}

.booking-client-payment-summary {
  min-width: 0;
  padding-right: 1.25rem;
  border-right: 1px solid var(--color-border);
}

.booking-client-payment-action {
  min-width: 0;
}

.booking-client-payment-layout-summary {
  grid-template-columns: 1fr;
}

.booking-client-payment-layout-summary .booking-client-payment-summary {
  padding-right: 0;
  border-right: 0;
}

.booking-payment-card-secondary {
  order: initial;
  padding-block: 1rem;
}

.booking-payment-card-secondary .booking-payment-header h2 {
  font-size: 1.15rem;
}

.booking-payment-card-secondary .booking-client-payment-context {
  margin-bottom: 0.75rem;
}

.booking-payment-card-secondary .booking-payment-totals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 0.75rem;
  padding: 0;
  background: transparent;
}

.booking-payment-card-secondary .booking-payment-totals > div {
  display: grid;
  gap: 0.2rem;
  justify-content: stretch;
  padding: 0.15rem 1rem;
  border-right: 1px solid var(--color-border);
}

.booking-payment-card-secondary .booking-payment-totals > div:first-child {
  padding-left: 0;
}

.booking-payment-card-secondary .booking-payment-totals > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.booking-payment-card-secondary .booking-payment-total {
  padding-top: 0.15rem;
  border-top: 0;
}

.booking-payment-state-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.82rem;
}

.booking-payment-state-note-success {
  color: var(--color-green);
}

.booking-manager-payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1rem;
}

.booking-payment-card-under_review .booking-manager-payment-layout {
  margin-top: 1.25rem;
}

.booking-manager-payment-summary,
.booking-manager-payment-details {
  min-width: 0;
}

.booking-manager-payment-summary {
  padding-right: 1.25rem;
  border-right: 1px solid var(--color-border);
}

.booking-manager-payment-summary .booking-financial-snapshot {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.booking-manager-payment-details .booking-payment-totals {
  margin: 0;
}

.booking-manager-payment-details .booking-payment-alert:first-child {
  margin-top: 0;
}

.booking-client-payment-summary .booking-client-payment-context {
  margin-top: 0;
}

.booking-client-payment-summary .booking-payment-totals {
  margin: 0.85rem 0 0;
}

.booking-client-payment-action .booking-pix-content {
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
}

.booking-client-payment-action .booking-proof-form {
  margin-top: 1rem;
  padding-top: 1rem;
}

.booking-page-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.booking-repeat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-left: auto;
  padding: 0.72rem 1rem;
  border-radius: var(--eo-radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.booking-repeat-action:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.booking-address-link {
  display: inline-block;
  margin-top: .18rem;
  color: var(--color-muted);
  font-size: .78rem;
  line-height: 1.45;
  text-decoration: none;
}

.booking-address-link:hover { color: var(--color-primary); text-decoration: underline; }
.booking-address-link i { margin-left: .2rem; font-size: .62rem; }

.organization-address--link {
  color: inherit;
  text-decoration: none;
}

.organization-address--link:hover { color: var(--color-primary); text-decoration: underline; }

.space-location { text-decoration: none; }
.space-location:hover span { color: var(--color-primary); text-decoration: underline; }

/* Reusable action confirmation modal */
.action-confirmation-open { overflow: hidden; }
.action-confirmation-modal[hidden] { display: none; }

.action-confirmation-modal {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.action-confirmation-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 37, 43, .58);
  backdrop-filter: blur(4px);
}

.action-confirmation-modal__dialog {
  position: relative;
  display: grid;
  width: min(430px, 100%);
  justify-items: center;
  gap: .9rem;
  padding: 1.55rem;
  border: 1px solid color-mix(in srgb, var(--color-red) 18%, var(--color-border));
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 0 24px 75px rgba(20, 32, 38, .28);
  text-align: center;
  animation: action-confirmation-enter .18s ease-out;
}

@keyframes action-confirmation-enter {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.action-confirmation-modal__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}

.action-confirmation-modal__close:hover { background: var(--color-background); color: var(--color-text); }

.action-confirmation-modal__icon {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-red) 11%, var(--color-surface));
  color: var(--color-red);
  font-size: 1.25rem;
}

.action-confirmation-modal__content { max-width: 340px; }
.action-confirmation-modal__eyebrow { color: var(--color-red); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.action-confirmation-modal__content h2 { margin: .28rem 0 .45rem; color: var(--color-text); font-size: 1.25rem; }
.action-confirmation-modal__content p { margin: 0; color: var(--color-muted); font-size: .86rem; line-height: 1.55; }

.action-confirmation-modal__actions {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-top: .25rem;
}

.action-confirmation-modal__actions button {
  min-height: 2.7rem;
  padding: .65rem .8rem;
  border-radius: var(--eo-radius-button);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}

.action-confirmation-modal__cancel { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.action-confirmation-modal__confirm { border: 1px solid var(--color-red); background: var(--color-red); color: var(--color-white); }
.action-confirmation-modal__cancel:hover { background: var(--color-background); }
.action-confirmation-modal__confirm:hover { filter: brightness(.94); }

.action-confirmation-modal[data-variant="primary"] .action-confirmation-modal__dialog { border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); }
.action-confirmation-modal[data-variant="primary"] .action-confirmation-modal__icon { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); }
.action-confirmation-modal[data-variant="primary"] .action-confirmation-modal__eyebrow { color: var(--color-primary); }
.action-confirmation-modal[data-variant="primary"] .action-confirmation-modal__confirm { border-color: var(--color-primary); background: var(--color-primary); }

.booking-payment-deadline-grace {
  border-color: color-mix(in srgb, var(--color-dark-yellow) 38%, var(--color-border));
  background: color-mix(in srgb, var(--color-dark-yellow) 8%, var(--color-surface));
}

.booking-late-payment-form,
.booking-sensitive-action-card {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}

.booking-late-payment-form p,
.booking-sensitive-action-card p { margin: .2rem 0 0; color: var(--color-muted); font-size: .8rem; line-height: 1.5; }

.booking-late-payment-unavailable {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--color-dark-yellow) 34%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-dark-yellow) 8%, var(--color-surface));
}

.booking-late-payment-unavailable > span {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 2.2rem;
  place-items: center;
  border-radius: .6rem;
  background: color-mix(in srgb, var(--color-dark-yellow) 14%, var(--color-surface));
  color: var(--color-dark-yellow);
}

.booking-late-payment-unavailable strong { color: var(--color-text); font-size: .86rem; }
.booking-sensitive-action-card summary { color: var(--color-primary); font-weight: 750; cursor: pointer; }
.booking-sensitive-action-card form { display: grid; gap: .55rem; }
.booking-sensitive-action-card input,
.booking-sensitive-action-card textarea { width: 100%; padding: .7rem; border: 1px solid var(--color-border); border-radius: var(--eo-radius-input); background: var(--color-surface); }
.booking-sensitive-action-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: start; }

.booking-late-review-card {
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.3rem);
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background: linear-gradient(145deg, var(--color-surface), color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)));
}

.booking-late-review-card__header {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}

.booking-late-review-card__header h3 { margin: .2rem 0 .25rem; color: var(--color-text); font-size: 1.08rem; }
.booking-late-review-card__header p { max-width: 720px; }

.booking-late-review-card__icon {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  place-items: center;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
}

.booking-late-review-card__proof {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: min(100%, 420px);
  padding: .7rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  color: var(--color-primary);
  text-decoration: none;
}

.booking-late-review-card__proof > span:first-child {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 2.15rem;
  place-items: center;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
}

.booking-late-review-card__proof > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.booking-late-review-card__proof strong { font-size: .8rem; }
.booking-late-review-card__proof small { margin-top: .08rem; color: var(--color-muted); font-size: .67rem; }
.booking-late-review-card__proof > i { font-size: .68rem; }
.booking-late-review-card__proof:hover { border-color: var(--color-secondary); color: var(--color-secondary); }

.booking-late-review-card .booking-sensitive-action-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.booking-late-review-card .booking-sensitive-action-card__actions > * {
  width: auto;
  flex: 0 1 auto;
}

.booking-late-review-card__approve button,
.booking-late-review-card__open-rejection {
  width: auto;
  min-height: 2.65rem;
  padding-inline: 1rem;
}

.booking-late-review-card__rejection-panel[hidden] { display: none; }

.booking-late-review-card__rejection-panel {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-red) 22%, var(--color-border));
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-red) 3%, var(--color-surface));
}

.booking-late-review-card__rejection-panel form { width: min(100%, 680px); }

.booking-late-review-card__rejection-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.booking-late-review-card__rejection-heading strong,
.booking-late-review-card__rejection-heading small { display: block; }
.booking-late-review-card__rejection-heading strong { color: var(--color-text); font-size: .84rem; }
.booking-late-review-card__rejection-heading small { margin-top: .12rem; color: var(--color-muted); font-size: .7rem; }
.booking-late-review-card__rejection-heading > button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .5rem; background: transparent; color: var(--color-muted); cursor: pointer; }
.booking-late-review-card__rejection-heading > button:hover { background: var(--color-background); color: var(--color-text); }
.booking-late-review-card__rejection-panel textarea { min-height: 90px; resize: vertical; }

.booking-action-rejection-panel {
  margin-top: .75rem;
  width: min(100%, 640px);
  padding: 1rem;
}

.booking-action-rejection-form {
  display: grid;
  width: 100%;
  gap: .85rem;
}

.booking-action-rejection-form__field {
  display: grid;
  gap: .38rem;
}

.booking-action-rejection-form__field label {
  color: var(--color-text);
  font-size: .74rem;
  font-weight: 700;
}

.booking-action-rejection-form__field textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: .75rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: .82rem;
  line-height: 1.45;
  resize: vertical;
}

.booking-action-rejection-form__field textarea:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 11%, transparent);
}

.booking-action-rejection-panel .booking-late-review-card__rejection-actions {
  padding-top: .15rem;
}

.booking-action-rejection-panel .booking-late-review-card__rejection-actions .btn,
.booking-action-rejection-panel .booking-late-review-card__rejection-actions button {
  min-height: 2.5rem;
  padding: .6rem .85rem;
  font-size: .76rem;
}

.booking-late-review-card__rejection-actions {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
}

.booking-late-review-card__rejection-actions button { width: auto; min-height: 2.55rem; }

.booking-late-review-card__decision {
  align-content: start;
  min-height: 100%;
  padding: .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
}

.booking-late-review-card__decision > div { min-height: 2.75rem; }
.booking-late-review-card__decision > div strong,
.booking-late-review-card__decision > div small { display: block; }
.booking-late-review-card__decision > div strong { color: var(--color-text); font-size: .82rem; }
.booking-late-review-card__decision > div small { margin-top: .15rem; color: var(--color-muted); font-size: .7rem; line-height: 1.4; }
.booking-late-review-card__decision label { color: var(--color-text); font-size: .72rem; font-weight: 700; }
.booking-late-review-card__decision textarea { min-height: 84px; resize: vertical; }
.booking-late-review-card__decision button { width: 100%; min-height: 2.65rem; justify-content: center; }
.booking-late-review-card__decision--approve { border-color: color-mix(in srgb, var(--color-green) 24%, var(--color-border)); }
.booking-late-review-card__decision--reject { border-color: color-mix(in srgb, var(--color-red) 20%, var(--color-border)); }

@media (max-width: 700px) {
  .booking-sensitive-action-card__actions { grid-template-columns: 1fr; }
  .booking-late-review-card .booking-sensitive-action-card__actions { display: grid; }
  .booking-late-review-card .booking-sensitive-action-card__actions > *,
  .booking-late-review-card__approve button,
  .booking-late-review-card__open-rejection { width: 100%; }
  .booking-late-review-card__rejection-actions { flex-direction: column-reverse; }
  .booking-late-review-card__rejection-actions button { width: 100%; }
}

@media (max-width: 480px) {
  .action-confirmation-modal__dialog { padding: 1.35rem 1rem 1rem; }
  .action-confirmation-modal__actions { grid-template-columns: 1fr; }
  .action-confirmation-modal__confirm { grid-row: 1; }
}

.booking-page-footer-actions .booking-form-cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: auto;
  margin: 0;
}

@media (max-width: 600px) {
  .booking-page-footer-actions {
    flex-wrap: wrap;
  }

  .booking-repeat-action {
    width: 100%;
    margin-left: 0;
  }
}

.booking-checkout-layout:not(:has(.booking-summary-card)) {
  grid-template-columns: 1fr;
}

.booking-checkout-main .booking-section-card {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.booking-checkout-main > .booking-section-card:first-child {
  margin-top: 0;
}

.booking-inline-discounts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: -0.35rem 0 1.15rem;
  padding: 0.75rem 0.85rem;
  border: var(--eo-border-subtle);
  border-radius: var(--eo-radius-card);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)), var(--color-surface));
}

.booking-inline-discounts-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0 0 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  color: var(--color-primary);
}

.booking-inline-discounts-label-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  color: var(--color-background) !important;
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  font-size: 0.78rem !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.booking-inline-discounts-label strong,
.booking-inline-discounts-label span {
  display: block;
}

.booking-inline-discounts-label strong {
  color: var(--color-text);
  font-size: 0.9rem;
}

.booking-inline-discounts-label span {
  margin-top: 0.12rem;
  color: var(--color-muted);
  font-size: 0.72rem;
}

.booking-discount-rails {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.booking-discount-rail:last-child {
  order: -1;
}

.booking-discount-rail {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.4rem;
  min-width: 0;
}

.booking-discount-rail:not(:has(.booking-inline-discount)) {
  display: none;
}

.booking-discount-rail-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.booking-discount-rail-label > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  font-size: 0.72rem;
}

.booking-discount-rail:first-child .booking-discount-rail-label > span {
  color: var(--color-background);
  background: var(--color-primary);
}

.booking-recurrence-discount-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  color: var(--color-muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.booking-recurrence-discount-hint i {
  flex: 0 0 auto;
  color: var(--color-secondary);
}

.booking-discount-rail-label strong,
.booking-discount-rail-label small {
  display: block;
}

.booking-discount-rail-label strong {
  color: var(--color-text);
  font-size: 0.76rem;
  line-height: 1.1;
}

.booking-discount-rail-label small {
  margin-top: 0.1rem;
  color: var(--color-muted);
  font-size: 0.64rem;
  line-height: 1.15;
}

.booking-inline-discount-options {
  display: flex;
  gap: 0.45rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 1px;
}

.booking-inline-discount {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.2rem 0.45rem;
  min-width: 190px;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-input);
  background: var(--color-background);
  font-style: normal;
  transition: var(--eo-transition-fast);
}

.booking-inline-discount[hidden] {
  display: none;
}

.booking-inline-discount-heading {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.booking-inline-discount b,
.booking-inline-discount em {
  color: var(--color-text);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.2;
}

.booking-inline-discount b {
  font-weight: 650;
  white-space: nowrap;
}

.booking-inline-discount em {
  color: var(--color-secondary);
  font-size: 0.78rem;
  font-weight: 800;
}

.booking-inline-discount small {
  grid-column: 1 / -1;
  color: var(--color-muted);
  font-size: 0.64rem;
  line-height: 1.2;
  white-space: nowrap;
}

.booking-inline-discount-progress {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: var(--eo-radius-pill);
  background: color-mix(in srgb, var(--color-border) 75%, transparent);
}

.booking-inline-discount-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transition: width 0.25s ease;
}

.booking-inline-discount.is-eligible {
  border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-background));
}

.booking-inline-discount.is-applied {
  border-color: var(--color-secondary);
  background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface));
}

@media (min-width: 721px) {
  .booking-inline-discounts {
    grid-template-columns: 225px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }

  .booking-inline-discounts-label {
    align-self: stretch;
    padding: 0.35rem 1rem 0.35rem 0;
    border-right: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
    border-bottom: 0;
  }

  .booking-discount-rail {
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
  }
}


.booking-inline-discount.is-applied em,
.booking-inline-discount.is-applied small {
  color: color-mix(in srgb, var(--color-secondary) 72%, var(--color-text));
}

.booking-summary-card {
  position: sticky;
  top: 1rem;
  align-self: start;
  margin: 0;
  padding: 1.1rem;
  overflow: visible;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-sm);
}

.booking-summary-heading {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-border);
}

.booking-summary-heading h2 {
  color: var(--color-text);
  font-size: 1.05rem;
}

.booking-summary-rate {
  display: block;
  margin-top: 0.12rem;
  color: var(--color-muted);
  font-size: 0.78rem;
}

.booking-summary-checkout[hidden] {
  display: none;
}

.booking-summary-placeholder {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 1.3rem 0.5rem 0.8rem;
  color: var(--color-muted);
  text-align: center;
}

.booking-summary-placeholder[hidden] {
  display: none;
}

.booking-summary-placeholder i {
  color: var(--color-primary);
  font-size: 1.25rem;
}

.booking-summary-placeholder p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
}

.booking-summary-card .booking-summary-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.booking-summary-card .booking-summary-row {
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.booking-summary-card .booking-summary-row:last-child {
  border-bottom: 0;
}

.booking-summary-card .booking-summary-icon {
  width: 30px;
  height: 30px;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-primary);
}

.booking-summary-card .booking-summary-label {
  margin-bottom: 0.1rem;
  color: var(--color-muted);
  font-size: 0.65rem;
}

.booking-summary-card .booking-summary-row strong {
  color: var(--color-text);
  font-size: 0.84rem;
}

.booking-quote-panel {
  position: static;
  margin-top: 0.7rem;
  padding: 0.8rem 0 0;
  overflow: visible;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  box-shadow: none;
}

.booking-quote-lines {
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}

.booking-quote-lines span,
.booking-quote-series span,
.booking-quote-unit-total span {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.booking-quote-lines strong,
.booking-quote-series strong,
.booking-quote-unit-total strong {
  color: var(--color-text);
  font-size: 0.84rem;
}

.booking-quote-discount-line strong,
.booking-quote-series > div:last-child strong {
  color: var(--color-dark-green);
}

.booking-applied-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 28%, var(--color-border));
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-secondary) 6%, var(--color-surface));
}

.booking-applied-rule span {
  color: var(--color-muted);
  font-size: 0.72rem;
}

.booking-applied-rule strong {
  color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-text));
  font-size: 0.8rem;
}

.booking-quote-unit-total {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}

.booking-quote-series {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}

.booking-quote-grand-total {
  padding-top: 0.85rem;
}

.booking-quote-grand-total span {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.booking-quote-grand-total strong {
  margin-top: 0.12rem;
  color: var(--color-primary);
  font-size: 1.65rem;
}

.booking-quote-grand-total small {
  margin-top: 0.2rem;
  color: var(--color-muted);
  font-size: 0.68rem;
}

.booking-occurrence-preview.booking-section-card {
  margin-top: 0;
  padding: 0;
  border-color: var(--color-border);
  background: var(--color-surface);
}

.booking-occurrence-preview-heading {
  border-color: var(--color-border);
  background: var(--color-background);
}

.booking-occurrence-preview-heading h3,
.booking-occurrence-details strong,
.booking-occurrence-item > b {
  color: var(--color-text);
}

.booking-occurrence-details span {
  color: var(--color-muted);
}

.booking-client-payment-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.booking-client-payment-context span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--eo-radius-pill);
  background: var(--color-background);
  color: var(--color-muted);
  font-size: 0.78rem;
}

.booking-client-payment-context .booking-client-discount {
  background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface));
  color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-text));
}

@media (max-width: 720px) {
  .booking-section-heading,
  .booking-recurrence-toggle-row {
    flex-direction: column;
  }

  .booking-switch {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-background);
  }

  .booking-form-field-narrow {
    max-width: none;
  }

  .booking-recurrence-step {
    padding: 1.15rem;
  }

  .booking-recurrence-sentence {
    align-items: stretch;
  }

  .booking-recurrence-sentence > span,
  .booking-recurrence-sentence > label {
    width: 100%;
  }

  .booking-recurrence-interval-field {
    width: 90px;
  }

  .booking-recurrence-type-field {
    flex: 1;
    width: auto;
  }

  .booking-date-picker-shell {
    grid-template-columns: 1fr;
  }

  .booking-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .booking-time-grid label {
    font-size: 0.78rem;
  }

  .booking-time-control select {
    padding-right: 0.5rem;
    padding-left: 2.15rem;
    font-size: 0.82rem;
  }

  .booking-time-control i {
    left: 0.75rem;
  }

  .booking-summary-content {
    grid-template-columns: 1fr;
  }

  .booking-financial-snapshot {
    grid-template-columns: 1fr;
  }

  .booking-checkout-layout {
    grid-template-columns: 1fr;
  }

  .booking-summary-card {
    position: static;
  }

  .booking-inline-discounts {
    grid-template-columns: 1fr;
  }

  .booking-inline-discounts-label {
    min-width: 0;
  }

  .booking-inline-discount-options {
    width: 100%;
  }


  .booking-manager-overview-header {
    flex-direction: column;
  }

  .booking-manager-overview-main,
  .booking-client-overview-grid {
    grid-template-columns: 1fr;
  }

  .booking-client-overview-heading {
    flex-direction: column;
  }

  .booking-manager-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-manager-overview-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .booking-manager-series-heading {
    flex-direction: column;
    gap: 0.25rem;
  }

  .booking-manager-series-list {
    grid-template-columns: 1fr;
  }

  .booking-payment-card-secondary .booking-payment-totals {
    grid-template-columns: 1fr;
  }

  .booking-payment-card-secondary .booking-payment-totals > div,
  .booking-payment-card-secondary .booking-payment-totals > div:first-child,
  .booking-payment-card-secondary .booking-payment-totals > div:last-child {
    padding: 0.55rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .booking-payment-card-secondary .booking-payment-totals > div:last-child {
    border-bottom: 0;
  }

  .booking-form-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .booking-form-cancel,
  .booking-form-submit {
    width: auto;
    text-align: center;
  }
}

@media (max-width: 700px) {
  .booking-client-payment-action {
    order: -1;
  }

  .booking-client-payment-action .booking-pix-content {
    grid-template-columns: 1fr;
  }

  .booking-client-payment-action .booking-pix-instructions {
    order: -1;
  }

  .booking-client-payment-action .booking-pix-qr {
    order: 2;
    max-width: 200px;
  }
}

@media (max-width: 900px) {
  .booking-manager-overview-main,
  .booking-manager-payment-layout {
    grid-template-columns: 1fr;
  }

  .booking-manager-payment-summary {
    padding-right: 0;
    padding-bottom: 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .booking-client-payment-layout {
    grid-template-columns: 1fr;
  }

  .booking-client-payment-summary {
    padding-right: 0;
    padding-bottom: 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
}

@media (min-width: 721px) and (max-width: 960px) {
  .booking-checkout-layout {
    grid-template-columns: 1fr;
  }

  .booking-summary-card {
    position: static;
  }

  .booking-financial-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =============================
Bookings
components/bookings_table.html
============================= */

.bookings-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  box-shadow: var(--shadow-default);
  padding: 1.5rem;
}

.bookings-table-wrapper {
  overflow-x: auto;
}

.bookings-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.bookings-table th,
.bookings-table td {
  text-align: left;
  padding: 0.95rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.bookings-table th {
  color: var(--color-primary);
  font-size: 0.92rem;
}

.bookings-table td {
  color: var(--color-text);
  font-size: 0.94rem;
}

.bookings-table-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  border-radius: var(--eo-radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
}

.bookings-table-status-pending {
  background: rgba(242, 201, 76, 0.16);
  color: var(--color-dark-yellow);
}

.bookings-table-status-confirmed {
  background: rgba(76, 175, 80, 0.12);
  color: var(--color-green);
}

.bookings-table-status-cancelled,
.bookings-table-status-rejected {
  background: rgba(192, 57, 43, 0.12);
  color: var(--color-red);
}

.bookings-table-actions {
  text-align: right;
}

.bookings-table-action-link {
  font-weight: 600;
  color: var(--color-primary);
}

.bookings-table-action-link:hover {
  color: var(--color-secondary);
}

.bookings-table-empty {
  text-align: center;
  color: var(--color-muted);
  padding: 2rem 1rem;
}

/* =============================
Bookings
space_booking_list.html
============================= */

.space-booking-list-page {
  padding: 2rem 1rem;
}

.space-booking-list-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.space-booking-list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.space-booking-list-title {
  margin: 0 0 0.35rem;
  color: var(--color-primary);
  font-size: 1.9rem;
}

.space-booking-list-subtitle {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
}

.space-booking-list-organization {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.space-booking-list-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.space-booking-list-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-button);
  color: var(--color-text);
  background: var(--color-surface);
  transition: var(--transition-default);
}

.space-booking-list-back-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .space-booking-list-header {
    align-items: stretch;
  }

  .space-booking-list-header-actions {
    width: 100%;
  }

  .space-booking-list-back-link {
    width: 100%;
  }
}

/* =============================
Bookings
user_booking_list.html
============================= */

.user-booking-list-page {
  padding: 2rem 1rem;
}

.user-booking-list-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.user-booking-list-header {
  margin-bottom: 1.75rem;
}

.user-booking-list-title {
  margin: 0 0 0.4rem;
  color: var(--color-primary);
  font-size: 2rem;
}

.user-booking-list-subtitle {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
  max-width: 720px;
}

.user-booking-list-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.user-booking-list-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.user-booking-list-section-secondary {
  margin-top: 0.5rem;
}

.user-booking-list-section-action {
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--color-yellow) 42%, var(--color-border));
  border-radius: var(--eo-radius-panel);
  background: color-mix(in srgb, var(--color-yellow) 6%, var(--color-surface));
}

.user-booking-list-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.user-booking-list-section-eyebrow {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.user-booking-list-section-title {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.35rem;
}

.user-booking-list-section-description {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
  font-size: 0.86rem;
}

.user-booking-list-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: var(--eo-radius-pill);
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-primary);
  font-weight: 700;
}

.user-booking-list-section-count-action {
  background: color-mix(in srgb, var(--color-yellow) 22%, var(--color-surface));
  color: var(--color-dark-yellow);
}

.user-booking-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1rem;
}

.user-booking-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem;
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-default);
  transition: transform var(--eo-transition-fast), box-shadow var(--eo-transition-fast), border-color var(--eo-transition-fast);
}

.user-booking-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--eo-shadow-md);
}

.user-booking-card-upcoming {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background: linear-gradient(145deg, var(--color-surface), color-mix(in srgb, var(--color-primary) 4%, white));
}

.user-booking-card-upcoming-highlight {
  border-color: color-mix(in srgb, var(--color-green) 40%, var(--color-border));
}

.user-booking-card-action {
  gap: 1rem;
  border-color: color-mix(in srgb, var(--color-yellow) 48%, var(--color-border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-yellow) 10%, transparent);
}

.user-booking-card-action-message {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem;
  border-radius: var(--eo-radius-panel);
  background: color-mix(in srgb, var(--color-yellow) 8%, var(--color-surface));
}

.user-booking-card-action-message > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-yellow) 22%, var(--color-surface));
  color: var(--color-dark-yellow);
}

.user-booking-card-action-message strong {
  display: block;
  color: var(--color-text);
  font-size: 0.88rem;
}

.user-booking-card-action-message p {
  margin: 0.16rem 0 0;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.user-booking-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: fit-content;
  max-width: 100%;
  align-self: flex-end;
  margin-top: auto;
  padding: 0.72rem 1rem;
  border-radius: var(--eo-radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.86rem;
  font-weight: 750;
  text-decoration: none;
}

.user-booking-primary-action:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.user-booking-card-pending-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: auto;
  font-size: 0.78rem;
  color: var(--color-muted);
  font-weight: 500;
}

.user-booking-card-pending-note i {
  color: var(--color-yellow);
}

.user-booking-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.user-booking-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.user-booking-card-title {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.25rem;
  line-height: 1.3;
}

.user-booking-card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.7rem;
  border-radius: var(--eo-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.user-booking-card-status-pending {
  background: rgba(242, 201, 76, 0.16);
  color: var(--color-dark-yellow);
}

.user-booking-card-status-confirmed {
  background: rgba(76, 175, 80, 0.12);
  color: var(--color-green);
}

.user-booking-card-status-action {
  background: color-mix(in srgb, var(--color-yellow) 18%, var(--color-surface));
  color: var(--color-dark-yellow);
}

.user-booking-card-status-cancelled,
.user-booking-card-status-rejected,
.user-booking-card-status-expired {
  background: rgba(192, 57, 43, 0.12);
  color: var(--color-red);
}

.user-booking-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-panel);
  background: color-mix(in srgb, var(--color-primary) 2.5%, var(--color-surface));
}

.user-booking-card-detail-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.1rem 0.75rem 0.1rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

.user-booking-card-details > .user-booking-card-detail-item:nth-child(2) {
  padding-left: 0.85rem;
  border-left: 1px solid var(--color-border);
}

.user-booking-card-detail-item i {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 1.65rem;
  margin-top: 0;
  place-items: center;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.75rem;
}

.user-booking-card-detail-label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--color-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.user-booking-card-detail-item strong {
  display: block;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.35;
  white-space: nowrap;
}

.user-booking-card-detail-item small {
  display: block;
  margin-top: 0.12rem;
  color: var(--color-muted);
  font-size: 0.72rem;
}

.user-booking-card-detail-location {
  grid-column: 1 / -1;
  align-items: center;
  margin-top: 0.15rem;
  padding: 0.75rem 1.8rem 0 0;
  border-top: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
}

.user-booking-card-detail-location:hover {
  color: var(--color-primary);
}

.user-booking-card-detail-location .user-booking-location-external {
  position: absolute;
  top: 1rem;
  right: 0;
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: 0.65rem;
}

.user-booking-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}

.user-booking-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0.62rem 0.82rem;
  border: 1px solid transparent;
  border-radius: var(--eo-radius-button);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background var(--eo-transition-fast), border-color var(--eo-transition-fast), color var(--eo-transition-fast);
}

.user-booking-card-button-secondary {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
}

.user-booking-card-button-secondary:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.user-booking-card-button-calendar {
  border-color: color-mix(in srgb, var(--color-green) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-green) 7%, var(--color-surface));
  color: var(--color-dark-green);
}

.user-booking-card-button-calendar:hover {
  border-color: var(--color-green);
  background: color-mix(in srgb, var(--color-green) 12%, var(--color-surface));
}

.user-booking-card-button-calendar-connect {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-primary);
  cursor: pointer;
  font-family: inherit;
}

.user-booking-card-button-calendar-connect:hover {
  background: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface));
}

.user-booking-calendar-synced {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 0.78rem;
  color: var(--color-dark-green);
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.user-booking-calendar-synced i {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-green) 18%, var(--color-surface));
  color: var(--color-green);
  font-size: 0.68rem;
}

.calendar-promo-modal[hidden] { display: none; }
.calendar-promo-modal { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 1rem; }
.calendar-promo-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 30, 36, .56); backdrop-filter: blur(4px); }
.calendar-promo-modal__dialog { position: relative; width: min(490px, 100%); padding: 1.65rem; border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: var(--eo-radius-card); background: var(--color-surface); box-shadow: 0 24px 70px rgba(20, 35, 42, .26); }
.calendar-promo-modal__close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 50%; background: var(--color-background); color: var(--color-muted); cursor: pointer; }
.calendar-promo-modal__icon { display: grid; width: 3rem; height: 3rem; margin-bottom: 1rem; place-items: center; border-radius: .9rem; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); font-size: 1.3rem; }
.calendar-promo-modal__eyebrow { color: var(--color-primary); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.calendar-promo-modal__dialog h2 { margin: .3rem 2rem .55rem 0; color: var(--color-text); font-size: 1.35rem; }
.calendar-promo-modal__dialog > p { margin: 0; color: var(--color-muted); font-size: .88rem; line-height: 1.55; }
.calendar-promo-modal__dialog ul { display: grid; gap: .62rem; margin: 1.15rem 0; padding: 1rem; border-radius: var(--eo-radius-panel); background: var(--color-background); list-style: none; }
.calendar-promo-modal__dialog li { display: flex; align-items: center; gap: .55rem; color: var(--color-text); font-size: .82rem; }
.calendar-promo-modal__dialog li i { color: var(--color-green); }
.calendar-promo-modal__actions { display: grid; gap: .65rem; }
.calendar-promo-modal__connect,
.calendar-promo-modal__ics { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .78rem 1rem; border-radius: var(--eo-radius-button); font-size: .84rem; font-weight: 750; text-decoration: none; }
.calendar-promo-modal__connect { background: var(--color-primary); color: var(--color-white); }
.calendar-promo-modal__connect:hover { background: var(--color-secondary); color: var(--color-white); }
.calendar-promo-modal__ics { border: 1px solid var(--color-border); color: var(--color-text); }
.calendar-promo-modal__ics:hover { background: var(--color-background); }
.calendar-promo-modal__dialog > small { display: block; margin-top: .8rem; color: var(--color-muted); font-size: .7rem; line-height: 1.45; text-align: center; }
body.calendar-promo-modal-open { overflow: hidden; }

.user-booking-card-button-repeat {
  border-color: color-mix(in srgb, var(--color-secondary) 32%, var(--color-border));
  background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface));
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-secondary));
}

.user-booking-card-button-repeat:hover {
  border-color: var(--color-secondary);
  background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-surface));
}

.user-booking-list-empty {
  padding: 2rem 1.5rem;
  border-radius: var(--eo-radius-panel);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  text-align: center;
  color: var(--color-muted);
}

.user-booking-list-empty h3 {
  margin: 0 0 0.4rem;
  color: var(--color-primary);
}

.user-booking-list-empty p {
  margin: 0;
}

.user-booking-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--eo-radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.84rem;
  font-weight: 700;
}

.user-booking-empty-action:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.user-booking-list-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 94, 60, 0.08);
  color: var(--color-primary);
  font-size: 1.5rem;
}

.user-booking-list-history {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.user-booking-history-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  box-shadow: var(--eo-shadow-xs);
  transition: border-color var(--eo-transition-fast), box-shadow var(--eo-transition-fast);
}

.user-booking-history-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
  box-shadow: var(--eo-shadow-sm);
}

.user-booking-history-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.user-booking-history-title {
  margin: 0 0 0.25rem;
  color: var(--color-primary);
  font-size: 1.08rem;
}

.user-booking-history-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.user-booking-history-location {
  display: flex;
  width: fit-content;
  max-width: 34rem;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  text-decoration: none;
}

.user-booking-history-location:hover {
  color: var(--color-primary);
}

.user-booking-history-location i:last-child {
  font-size: 0.58rem;
}

.user-booking-history-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  color: var(--color-text);
  white-space: nowrap;
}

.user-booking-history-time span {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.user-booking-history-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-booking-list-empty-secondary {
  background: rgba(0, 0, 0, 0.015);
}

@media (max-width: 768px) {
  .user-booking-card-top,
  .user-booking-history-card,
  .user-booking-history-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-booking-card-details {
    grid-template-columns: 1fr;
  }

  .user-booking-card-details > .user-booking-card-detail-item:nth-child(2) {
    padding-top: 0.7rem;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .user-booking-card-footer,
  .user-booking-history-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .user-booking-primary-action {
    align-self: flex-start;
  }

  .user-booking-card-detail-item strong {
    white-space: normal;
  }

  .user-booking-history-time {
    align-items: flex-start;
    white-space: normal;
  }
}
.user-credit-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  gap: 1.1rem;
  margin: 0 0 2rem;
}

.user-credit-strip {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.5rem;
  padding: .65rem .85rem;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 22%, var(--color-border));
  border-radius: 14px;
  color: inherit;
  text-align: left;
  background: linear-gradient(90deg, rgba(8, 196, 187, .09), rgba(255, 255, 255, .96) 55%);
  box-shadow: 0 7px 22px rgba(55, 80, 92, .05);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.user-credit-strip:hover { transform: translateY(-1px); border-color: rgba(8, 196, 187, .48); box-shadow: 0 10px 26px rgba(55, 80, 92, .09); }
.user-credit-strip__icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; color: #fff; background: var(--color-secondary); }
.user-credit-strip__copy { display: block; min-width: 0; flex: 1; }
.user-credit-strip__copy strong, .user-credit-strip__copy small { display: block; }
.user-credit-strip__copy strong { color: var(--color-primary); font-size: .86rem; }
.user-credit-strip__copy small { margin-top: .05rem; color: var(--color-muted); font-size: .7rem; }
.user-credit-strip__action { display: flex; align-items: center; gap: .4rem; color: var(--color-dark-green); font-size: .72rem; font-weight: 700; white-space: nowrap; }

.credit-modal-open { overflow: hidden; }
.user-credit-modal[hidden] { display: none; }
.user-credit-modal { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 1rem; }
.user-credit-modal__backdrop { position: absolute; inset: 0; background: rgba(30, 42, 48, .52); backdrop-filter: blur(3px); }
.user-credit-modal__dialog { position: relative; width: min(620px, 100%); max-height: min(760px, calc(100vh - 2rem)); overflow: hidden; border-radius: 20px; background: var(--color-surface); box-shadow: 0 24px 70px rgba(20, 35, 42, .24); }
.user-credit-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--color-border); background: linear-gradient(135deg, rgba(8, 196, 187, .11), rgba(79, 109, 122, .05)); }
.user-credit-modal__header span { color: var(--color-muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.user-credit-modal__header h2 { margin: .05rem 0 0; color: var(--color-primary); font-size: 1.25rem; }
.user-credit-modal__header button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 10px; color: var(--color-primary); background: rgba(255, 255, 255, .74); cursor: pointer; }
.user-credit-modal__content { display: grid; gap: .85rem; max-height: calc(100vh - 130px); overflow-y: auto; padding: 1rem 1.2rem 1.2rem; }
.user-credit-modal__wallet { padding: 1rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.user-credit-modal__wallet-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.user-credit-modal__wallet-heading span { color: var(--color-muted); font-size: .68rem; }
.user-credit-modal__wallet-heading h3 { margin: .05rem 0 0; color: var(--color-primary); font-size: .95rem; }
.user-credit-modal__wallet-heading > strong { color: var(--color-primary); font-size: 1.3rem; }

@media (max-width: 600px) {
  .user-credit-strip__action { font-size: 0; }
  .user-credit-strip__action i { font-size: .75rem; }
  .user-credit-modal__wallet-heading { align-items: flex-start; flex-direction: column; gap: .4rem; }
}

.user-credit-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 24%, var(--color-border));
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 12px 30px rgba(55, 80, 92, .08);
}

.user-credit-card__header {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(8, 196, 187, .12), rgba(79, 109, 122, .06));
}

.user-credit-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--color-secondary);
  box-shadow: 0 8px 18px rgba(8, 196, 187, .24);
}

.user-credit-card__eyebrow {
  display: block;
  color: var(--color-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.user-credit-card__header h2 { margin: .08rem 0 0; color: var(--color-primary); font-size: 1rem; }
.user-credit-card__body { padding: 1rem 1.1rem 1.1rem; }
.user-credit-card__balance span { display: block; color: var(--color-muted); font-size: .74rem; }
.user-credit-card__balance strong { display: block; margin-top: .1rem; color: var(--color-primary); font-size: 1.65rem; line-height: 1.15; }

.user-credit-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .8rem;
}

.user-credit-card__meta span {
  padding: .35rem .55rem;
  border-radius: 999px;
  color: var(--color-primary);
  background: var(--color-background);
  font-size: .7rem;
  font-weight: 600;
}

.user-credit-history { margin-top: .85rem; border-top: 1px solid var(--color-border); padding-top: .75rem; }
.user-credit-history summary { display: flex; cursor: pointer; align-items: center; justify-content: space-between; color: var(--color-dark-green); font-size: .78rem; font-weight: 700; list-style: none; }
.user-credit-history summary::-webkit-details-marker { display: none; }
.user-credit-history[open] summary i { transform: rotate(180deg); }
.user-credit-history summary i { transition: transform .2s ease; }
.user-credit-history ul { display: grid; gap: .55rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.user-credit-history li { padding: .65rem; border-radius: 10px; background: var(--color-background); font-size: .74rem; }
.user-credit-history li > strong { color: var(--color-primary); }
.user-credit-history li span, .user-credit-history li small { display: block; margin-top: .15rem; color: var(--color-muted); font-size: .68rem; }

.booking-payment-deadline {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .8rem .9rem;
  border: 1px solid rgba(230, 126, 34, .24);
  border-radius: 12px;
  background: rgba(230, 126, 34, .08);
}

.booking-payment-deadline-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; color: #fff; background: var(--color-orange); }
.booking-payment-deadline small, .booking-payment-deadline strong { display: block; }
.booking-payment-deadline small { color: var(--color-muted); font-size: .72rem; }
.booking-payment-deadline strong { margin-top: .08rem; color: #a65013; font-size: .95rem; font-variant-numeric: tabular-nums; }
.booking-payment-deadline.is-expired { border-color: rgba(192, 57, 43, .25); background: rgba(192, 57, 43, .08); }
.booking-payment-deadline.is-expired .booking-payment-deadline-icon { background: var(--color-red); }
.booking-payment-deadline.is-expired strong { color: var(--color-dark-red); }

.booking-payment-alert[hidden],
[data-payment-expired-content][hidden],
[data-payment-active-content][hidden] {
  display: none !important;
}

.booking-credit-checkout {
  margin-top: .8rem;
  padding: .8rem;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 35%, var(--color-border));
  border-radius: .75rem;
  background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface));
}

.booking-credit-choice {
  display: flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
}

.booking-credit-choice input { width: 1rem; height: 1rem; accent-color: var(--color-secondary); }
.booking-credit-choice span, .booking-credit-choice strong, .booking-credit-choice small { display: block; }
.booking-credit-choice strong { color: var(--color-text); font-size: .82rem; }
.booking-credit-choice small { margin-top: .12rem; color: var(--color-muted); font-size: .7rem; }

.booking-credit-preview-lines {
  display: grid;
  gap: .35rem;
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid var(--color-border);
}

.booking-credit-preview-lines > div { display: flex; justify-content: space-between; gap: 1rem; }
.booking-credit-preview-lines span { color: var(--color-muted); font-size: .74rem; }
.booking-credit-preview-lines strong { color: var(--color-secondary); font-size: .78rem; }

.booking-rejection-form {
  display: grid;
  gap: .5rem;
  width: min(100%, 420px);
}

.booking-rejection-form textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
}

/* Compact proof upload and organization payment support */
.booking-proof-heading {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.booking-proof-heading > span {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .6rem;
  background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface));
  color: var(--color-secondary);
}

.booking-proof-heading strong,
.booking-proof-heading small {
  display: block;
}

.booking-proof-heading strong {
  color: var(--color-text);
  font-size: .92rem;
}

.booking-proof-heading small {
  margin-top: .1rem;
  color: var(--color-muted);
  font-size: .76rem;
}

.booking-proof-upload-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: stretch;
}

.booking-proof-input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  padding: 0 !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0 !important;
  opacity: 0;
}

.booking-proof-picker {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  border-radius: var(--eo-radius-input);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.booking-proof-picker:hover,
.booking-proof-input:focus-visible + .booking-proof-picker {
  border-color: var(--color-secondary);
  background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 12%, transparent);
}

.booking-proof-picker.has-file {
  border-style: solid;
  border-color: color-mix(in srgb, var(--color-green) 48%, var(--color-border));
  background: color-mix(in srgb, var(--color-green) 6%, var(--color-surface));
}

.booking-proof-picker__icon {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .55rem;
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.booking-proof-picker__copy {
  min-width: 0;
  flex: 1;
}

.booking-proof-picker__copy strong,
.booking-proof-picker__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-proof-picker__copy strong { font-size: .82rem; color: var(--color-text); }
.booking-proof-picker__copy small { margin-top: .08rem; font-size: .7rem; color: var(--color-muted); }
.booking-proof-picker__action { color: var(--color-primary); font-size: .74rem; font-weight: 700; white-space: nowrap; }

.booking-proof-submit {
  display: inline-flex;
  width: auto;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem .9rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--eo-radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.booking-proof-submit:hover { filter: brightness(.94); }

.booking-payment-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: color-mix(in srgb, var(--color-primary) 2%, var(--color-surface));
}

.booking-payment-support__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .55rem;
}

.booking-payment-support__heading > span { color: var(--color-primary); }
.booking-payment-support__heading strong,
.booking-payment-support__heading small { display: block; }
.booking-payment-support__heading strong { color: var(--color-text); font-size: .78rem; }
.booking-payment-support__heading small { margin-top: .08rem; color: var(--color-muted); font-size: .68rem; }

.booking-payment-support__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
}

.booking-payment-support__links a {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .38rem .55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: .7rem;
  font-weight: 700;
  text-decoration: none;
}

.booking-payment-support__links a:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

@media (max-width: 700px) {
  .booking-proof-upload-card { grid-template-columns: 1fr; }
  .booking-proof-submit { width: 100%; min-height: 2.65rem; }
  .booking-proof-picker__action { display: none; }
  .booking-payment-support { align-items: flex-start; flex-direction: column; }
  .booking-payment-support__links { justify-content: flex-start; }
}

/* Mobile width and form usability */
@media (max-width: 640px) {
  .container {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .organization-portfolio-page .container {
    gap: 1.25rem;
  }

  .organization-hero {
    padding: 0.85rem;
  }

  .organization-portfolio-page .organization-contact-links {
    justify-content: flex-start;
    max-width: calc(100vw - 3rem);
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }

  .organization-portfolio-page .organization-contact-link {
    min-width: 3.5rem;
    flex: 0 0 auto;
    font-size: 0.7rem;
  }

  .organization-portfolio-page .organization-contact-link i {
    width: 2.65rem;
    height: 2.65rem;
    font-size: 1.05rem;
  }

  .calendar-space-section {
    padding: 0.85rem;
    border-radius: 1rem;
  }

  .calendar-gallery-stage {
    border-radius: 0.85rem;
  }

  .booking-form-page {
    padding: 1rem 0.5rem;
  }

  .booking-section-card {
    padding: 1rem 0.85rem;
  }

  .booking-date-picker-shell,
  .booking-date-field,
  .booking-date-control,
  .booking-date-control input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .booking-date-control {
    overflow: hidden;
  }

  .booking-date-control input {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    -webkit-appearance: none;
    appearance: none;
  }

  .booking-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.65rem;
    padding-top: 0.75rem;
  }

  .booking-form-cancel,
  .booking-form-submit {
    width: 100%;
    min-height: 3rem;
    justify-content: center;
    text-align: center;
  }

  .booking-form-cancel {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1rem;
  }
}

/* Consistent page headings */
.booking-form-header,
.user-booking-list-header,
.space-booking-list-header,
.manage-header {
  margin-bottom: 1.25rem;
}

.booking-form-title,
.user-booking-list-title,
.space-booking-list-title,
.manage-header .title {
  margin-top: 0;
  margin-bottom: 0.35rem;
  color: var(--color-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.booking-form-header-copy {
  min-width: 0;
}

.booking-form-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  color: var(--color-muted);
}

.booking-form-subtitle,
.booking-form-organization,
.user-booking-list-subtitle,
.space-booking-list-subtitle,
.manage-header .subtitle {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.booking-form-subtitle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.booking-form-subtitle span {
  color: color-mix(in srgb, var(--color-text) 78%, var(--color-muted));
  font-weight: 520;
}

.booking-form-organization {
  display: inline-flex;
  align-items: center;
}

.booking-form-organization::before {
  content: "•";
  margin-right: 0.65rem;
  color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}

.booking-space-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-card);
  background: var(--color-surface);
  box-shadow: var(--eo-shadow-xs);
}

.calendar-selection-hint {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.calendar-selection-steps {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.calendar-selection-steps span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-pill);
  color: var(--color-muted);
  background: var(--color-background);
  font-size: 0.7rem;
  font-weight: 700;
}

.calendar-selection-steps span b {
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-muted);
  font-size: 0.62rem;
}

.calendar-selection-steps > i {
  color: var(--color-border);
  font-size: 0.65rem;
}

.calendar-selection-steps span.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}

.calendar-selection-steps span.is-active b,
.calendar-selection-steps span.is-complete b {
  background: var(--color-primary);
  color: var(--color-white);
}

.calendar-selection-steps span.is-complete {
  color: var(--color-primary);
}

.calendar-mobile-selection {
  display: none;
}

.booking-space-summary__image {
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-background));
  color: var(--color-primary);
}

.booking-space-summary__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booking-space-summary__content,
.booking-space-summary__price {
  min-width: 0;
}

.booking-space-summary__link {
  display: inline-grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--eo-radius-button);
  color: var(--color-primary);
  text-decoration: none;
}

.booking-space-summary__link:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
}

.booking-space-summary__content > span,
.booking-space-summary__price > span {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.booking-space-summary__content > strong {
  display: block;
  overflow: hidden;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-space-summary__content > small {
  display: block;
  margin-top: 0.15rem;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-space-summary__price {
  padding-left: 0.9rem;
  border-left: 1px solid var(--color-border);
  text-align: right;
}

.booking-space-summary__price > strong {
  color: var(--color-primary);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .booking-form-page,
  .user-booking-list-page {
    padding-top: 1.15rem;
  }

  .booking-form-header,
  .user-booking-list-header,
  .space-booking-list-header,
  .manage-header {
    margin-bottom: 1rem;
  }

  .booking-form-title,
  .user-booking-list-title,
  .space-booking-list-title,
  .manage-header .title {
    font-size: 1.6rem;
    font-weight: 680;
    line-height: 1.15;
  }

  .booking-form-subtitle,
  .booking-form-organization,
  .user-booking-list-subtitle,
  .space-booking-list-subtitle,
  .manage-header .subtitle {
    font-size: 0.9rem;
  }

  .booking-form-header-meta {
    gap: 0.2rem 0.5rem;
  }

  .booking-form-organization::before {
    margin-right: 0.5rem;
  }

  .booking-space-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    padding: 0.65rem;
  }

  .booking-space-summary__image {
    width: 3.5rem;
    height: 3.5rem;
  }

  .booking-space-summary__price {
    grid-column: 2;
    padding: 0;
    border-left: 0;
    text-align: left;
  }

  .booking-space-summary__price > span,
  .booking-space-summary__price > strong {
    display: inline;
    font-size: 0.82rem;
  }

  .booking-space-summary__price > span::after {
    content: ": ";
  }

  .calendar-space-section {
    gap: 1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .calendar-space-section::before {
    display: none;
  }

  .calendar-space-header {
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
  }

  .calendar-space-title {
    font-size: 2rem;
    font-weight: 720;
    letter-spacing: -0.03em;
  }

  .calendar-space-description {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .calendar-space-price-card {
    display: flex;
    width: fit-content;
    min-width: 0;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .calendar-space-price-label {
    display: none;
  }

  .calendar-space-price,
  .calendar-space-price-period {
    display: inline;
    margin: 0;
  }

  .calendar-space-price {
    font-size: 1.15rem;
  }

  .calendar-location-card {
    padding: 0 0.9rem;
  }

  .calendar-gallery-section,
  .calendar-availability-section,
  .calendar-features-section {
    padding: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
  }

  .calendar-gallery-stage {
    aspect-ratio: 4 / 3;
  }

  .calendar-gallery-thumbnails {
    display: none;
  }

  .calendar-wrapper {
    gap: 0.85rem;
  }

  .calendar-sidebar {
    padding: 0.85rem;
    border-radius: 1rem;
  }

  .calendar-main {
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
  }

  .calendar-main-header {
    gap: 0.75rem;
  }

  .calendar-selection-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100%;
  }

  .calendar-selection-steps span {
    justify-content: center;
    padding: 0.55rem 0.4rem;
    text-align: center;
  }

  .calendar-booking-button {
    min-height: 2.75rem;
  }

  .calendar-container {
    position: relative;
    height: 64vh;
    min-height: 520px;
    padding: 0.35rem;
    border-radius: 0.85rem;
    touch-action: none;
  }

  .calendar-mobile-selection {
    position: fixed;
    right: 0.65rem;
    bottom: calc(5.7rem + env(safe-area-inset-bottom));
    left: 0.65rem;
    z-index: 80;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
  }

  .calendar-mobile-selection[hidden] {
    display: none;
  }

  .calendar-mobile-selection .calendar-selected-slot-button {
    width: auto;
  }

  .calendar-mobile-selection-warning {
    grid-template-columns: 1fr;
    border-color: color-mix(in srgb, var(--color-yellow) 45%, var(--color-border));
  }

  .calendar-mobile-selection-progress {
    grid-template-columns: 1fr;
    border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
  }
}

/* Space detail experience */
.space-detail-page {
  max-width: 1240px;
}

.calendar-space-price-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.62rem 0.8rem;
  border-radius: var(--eo-radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.calendar-space-price-action:hover {
  background: color-mix(in srgb, var(--color-primary) 88%, black);
  color: var(--color-white);
}

.calendar-datepicker-control {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin-top: 0.55rem;
}

.calendar-datepicker-control > i {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--color-primary);
  pointer-events: none;
}

.calendar-datepicker-control .flatpickr-wrapper {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.calendar-datepicker-control .datepicker-custom,
.calendar-datepicker-control .flatpickr-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  padding-right: 0.9rem;
  padding-left: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: 0.75rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.calendar-datepicker-help {
  display: block;
  margin-top: 0.4rem;
  color: var(--color-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.calendar-day-navigation {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.calendar-day-navigation .btn {
  min-height: 2.6rem;
  padding: 0.5rem;
}

.calendar-day-navigation .btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.calendar-booking-rule-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  justify-content: initial;
  text-align: left;
}

.calendar-booking-rule-card > div {
  display: contents;
}

.calendar-booking-rule-card strong {
  text-align: left;
}

.calendar-booking-rule-card span {
  text-align: right;
}

#booking-calendar {
  scroll-margin-top: 1rem;
}

@media (min-width: 901px) {
  .calendar-space-section {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 1rem 1.25rem;
    padding: 1.5rem;
  }

  .calendar-space-header {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
  }

  .calendar-location-card {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .calendar-gallery-section {
    grid-column: 1;
    grid-row: 3 / span 2;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .calendar-gallery-section--single {
    grid-row: 3;
  }

  .calendar-gallery-section .calendar-section-header {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .calendar-gallery-stage {
    height: clamp(320px, 38vw, 460px);
    aspect-ratio: auto;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-background));
  }

  .calendar-gallery-slide img {
    max-width: 100%;
    max-height: 100%;
  }

  .calendar-gallery-thumbnails {
    justify-content: flex-start;
  }

  .calendar-availability-section {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    padding: 1rem;
  }

  .calendar-space-section.no-gallery .calendar-availability-section {
    grid-column: 1 / -1;
  }

  .calendar-space-section.no-gallery .calendar-features-section {
    grid-column: 1 / -1;
  }

  .calendar-features-section {
    grid-column: 2;
    grid-row: 4;
    align-self: start;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--eo-radius-card);
    background: var(--color-surface);
  }

  .calendar-availability-section .calendar-section-header,
  .calendar-features-section .calendar-section-header {
    display: block;
    margin-bottom: 0.75rem;
  }

  .calendar-availability-section .calendar-section-description,
  .calendar-features-section .calendar-section-description {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    text-align: left;
  }

  .calendar-booking-rules-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 0 0.75rem;
  }

  .calendar-availability-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .calendar-availability-item {
    padding: 0.65rem 0.75rem;
  }

  .calendar-features-list {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0.45rem;
  }

  .calendar-feature-item {
    width: 100%;
  }

  .calendar-wrapper {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1rem;
  }

  .calendar-container {
    height: min(68vh, 680px);
    min-height: 540px;
  }
}

@media (max-width: 900px) {
  .space-detail-page {
    padding-top: 0.75rem;
  }

  .calendar-space-price-action {
    width: auto;
    margin: 0 0 0 0.35rem;
    padding: 0.5rem 0.7rem;
  }

  .calendar-gallery-section {
    order: -1;
  }

  .calendar-gallery-section .calendar-section-header {
    margin-bottom: 0.65rem;
  }
}

@media (max-width: 640px) {
  .space-detail-page {
    padding-top: 0.5rem;
  }

  .calendar-space-header {
    order: -2;
  }

  .calendar-gallery-section {
    order: -1;
  }

  .calendar-organization-link {
    margin-bottom: 0.55rem;
  }

  .calendar-space-price-card {
    width: 100%;
  }

  .calendar-space-price-action {
    margin-left: auto;
  }

  .calendar-section-header {
    margin-bottom: 0.75rem;
  }

  .calendar-section-description {
    font-size: 0.82rem;
  }

  .calendar-availability-list {
    gap: 0.45rem;
  }

  .calendar-availability-item {
    padding: 0.65rem;
  }

  .calendar-features-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .calendar-feature-item {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .calendar-feature-item span {
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.2rem 0.4rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .calendar-feature-item small {
    width: 100%;
    white-space: normal;
    line-height: 1.2;
  }

  .calendar-sidebar label {
    display: block;
    margin-bottom: 0.45rem;
  }
}

/* =============================
About Page
about.html
============================= */

.about-page {
  width: 100%;
}

.about-hero {
  position: relative;
  overflow: hidden;

  padding: clamp(72px, 9vw, 120px) var(--eo-page-x);

  border-bottom: var(--eo-border-subtle);

  background:
      radial-gradient(
          circle at 82% 22%,
          color-mix(in srgb, var(--color-primary) 9%, transparent),
          transparent 30%
      ),
      var(--color-background);
}

.about-hero__container {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  align-items: center;
  gap: clamp(48px, 8vw, 100px);

  max-width: var(--eo-container-lg);
  margin: 0 auto;
  padding: 0;
}

.about-hero__content {
  position: relative;
  z-index: 2;
}

.about-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.45rem 0.75rem;

  border: var(--eo-border-subtle);
  border-radius: var(--eo-radius-pill);

  background: color-mix(
      in srgb,
      var(--color-primary) 7%,
      var(--color-surface)
  );

  color: var(--color-primary);

  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}

.about-label i {
  font-size: 0.75rem;
}

.about-hero__title {
  max-width: 850px;
  margin-top: 1.5rem;

  color: var(--color-text);

  font-size: clamp(2.7rem, 5vw, 4.7rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.about-hero__title span {
  display: block;
  color: var(--color-primary);
}

.about-hero__description {
  max-width: 680px;
  margin-top: 1.75rem;

  color: var(--color-muted);

  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.8;
}

.about-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;

  margin-top: 2rem;
}

.about-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  color: var(--color-muted);

  font-size: 0.84rem;
  font-weight: 500;
}

.about-hero__meta i {
  color: var(--color-primary);
  font-size: 0.8rem;
}


/* Decorative visual */

.about-hero__visual {
  position: relative;

  min-height: 340px;
}

.about-hero__visual-grid {
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  opacity: 0.45;
}

.about-hero__visual-grid span {
  border-left: var(--eo-border-subtle);
}

.about-hero__visual-grid span:last-child {
  border-right: var(--eo-border-subtle);
}

.about-hero__visual-card {
  position: absolute;

  border: var(--eo-border-soft);
  border-radius: var(--eo-radius-panel);

  background: color-mix(
      in srgb,
      var(--color-surface) 94%,
      transparent
  );
}

.about-hero__visual-card--main {
  top: 50%;
  left: 50%;

  width: min(270px, 80%);
  padding: 2rem;

  transform: translate(-50%, -50%);

  box-shadow: var(--eo-shadow-sm);
}

.about-hero__visual-card--main > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  margin-bottom: 2rem;

  border-radius: var(--eo-radius-md);

  background: color-mix(
      in srgb,
      var(--color-primary) 10%,
      var(--color-surface)
  );

  color: var(--color-primary);

  font-size: 1rem;
}

.about-hero__visual-card--main strong,
.about-hero__visual-card--main small {
  display: block;
}

.about-hero__visual-card--main strong {
  color: var(--color-text);

  font-size: 1.2rem;
  font-weight: 600;
}

.about-hero__visual-card--main small {
  margin-top: 0.35rem;

  color: var(--color-muted);

  font-size: 0.85rem;
}

.about-hero__visual-card--floating {
  right: 0;
  bottom: 34px;

  display: flex;
  align-items: center;
  gap: 0.55rem;

  padding: 0.8rem 1rem;

  color: var(--color-text);

  font-size: 0.8rem;
  font-weight: 600;

  box-shadow: var(--eo-shadow-xs);
}

.about-hero__visual-card--floating i {
  color: var(--color-green);
}

.about-label {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border: var(--eo-border-subtle);
    border-radius: var(--eo-radius-pill);

    background: color-mix(
        in srgb,
        var(--color-primary) 7%,
        transparent
    );

    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

.about-hero__title {
    max-width: 850px;
    margin-top: 1.5rem;

    color: var(--color-text);

    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.about-hero__title span {
    display: block;
    color: var(--color-primary);
}

.about-hero__description {
    max-width: 680px;
    margin-top: 1.75rem;

    color: var(--color-muted);

    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.75;
}

.about-section {
    padding: var(--eo-section-gap) var(--eo-page-x);
}

.about-section--surface {
    background-color: var(--color-surface);
    border-top: var(--eo-border-subtle);
    border-bottom: var(--eo-border-subtle);
}

.about-container {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(300px, 1.2fr);
    gap: clamp(40px, 8vw, 120px);

    max-width: var(--eo-container-lg);
    padding: 0;
}

.about-section__intro {
    align-self: start;
}

.about-section__eyebrow {
    display: block;
    margin-bottom: 0.8rem;

    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-section h2 {
    max-width: 500px;

    color: var(--color-text);

    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.about-section__content {
    max-width: 650px;
}

.about-section__content p {
    margin-bottom: 1.2rem;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.8;
}

.about-section__content p:last-child {
    margin-bottom: 0;
}

.about-section__heading {
    max-width: var(--eo-container-md);
    margin: 0 auto 2.5rem;
}

.about-section__heading h2 {
    margin-bottom: 0.8rem;
}

.about-section__heading p {
    max-width: 600px;
    margin: 0;
    text-align: start;
    line-height: 1.7;
}

.about-manifesto__inner {
  max-width: var(--eo-container-lg);
  margin: 0 auto;
}

.about-manifesto__grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(300px, 0.95fr);
  gap: clamp(48px, 9vw, 130px);

  margin-top: 1.2rem;
}

.about-manifesto h2 {
  max-width: 620px;

  font-size: clamp(2rem, 3.8vw, 3.5rem);
  line-height: 1.13;
  letter-spacing: -0.035em;
}

.about-manifesto h2 span {
  display: block;
  margin-top: 0.2em;

  color: var(--color-primary);
}

.about-manifesto__content {
  padding-top: 0.3rem;
}

.about-manifesto__content p {
  margin-bottom: 1.25rem;

  color: var(--color-muted);

  font-size: 1rem;
  line-height: 1.8;
}
.about-features {
  position: relative;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;

  max-width: var(--eo-container-lg);
  margin: 0 auto;

  border: var(--eo-border-subtle);
  border-radius: var(--eo-radius-panel);

  background: var(--color-surface);

  overflow: hidden;
}

.about-feature {
  position: relative;

  min-height: 290px;
  padding: 2rem;

  border: 0;
  border-right: var(--eo-border-subtle);
  border-radius: 0;

  box-shadow: none;

  background: transparent;

  transition:
      background-color var(--eo-transition-base),
      transform var(--eo-transition-base);
}

.about-feature:last-child {
  border-right: 0;
}

.about-feature:hover {
  transform: none;

  border-color: transparent;
  box-shadow: none;

  background: color-mix(
      in srgb,
      var(--color-primary) 4%,
      var(--color-surface)
  );
}

.about-feature__number {
  display: block;
  margin-bottom: 3rem;

  color: color-mix(
      in srgb,
      var(--color-primary) 55%,
      var(--color-muted)
  );

  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.about-feature h3 {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  margin-bottom: 1rem;

  color: var(--color-text);

  font-size: 1.15rem;
  font-weight: 600;
}

.about-feature p {
  max-width: 290px;

  color: var(--color-muted);

  font-size: 0.94rem;
  line-height: 1.75;
}

.about-trust {
  background: var(--color-surface);

  border-top: var(--eo-border-subtle);
  border-bottom: var(--eo-border-subtle);
}

.about-trust__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);

  max-width: var(--eo-container-lg);
  margin: 0 auto;
}

.about-trust__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 72px;
  height: 72px;

  border: var(--eo-border-subtle);
  border-radius: var(--eo-radius-panel);

  background: color-mix(
      in srgb,
      var(--color-primary) 7%,
      var(--color-surface)
  );

  color: var(--color-primary);

  font-size: 1.3rem;
}

.about-trust__content h2 {
  max-width: 620px;
  margin-bottom: 0.8rem;
}

.about-trust__content p {
  max-width: 700px;
  margin: 0;

  color: var(--color-muted);

  line-height: 1.8;
}

.about-trust__stamp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  min-width: 130px;

  color: var(--color-muted);

  font-size: 0.72rem;
  line-height: 1.25;
}

.about-trust__stamp strong {
  margin-top: 0.15rem;

  color: var(--color-text);

  font-size: 1.05rem;
  font-weight: 600;
}

.about-trust__stamp i {
  margin-top: 0.75rem;

  color: var(--color-green);
}

.about-story {
  background: color-mix(
      in srgb,
      var(--color-primary) 3%,
      var(--color-background)
  );
}

.about-story__inner {
  max-width: var(--eo-container-lg);
  margin: 0 auto;
}

.about-story__heading {
  max-width: 720px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.about-story__heading h2 {
  max-width: 700px;
}

.about-storyline {
  position: relative;
}

.about-storyline::before {
  content: "";

  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;

  width: 1px;

  background: color-mix(
      in srgb,
      var(--color-primary) 24%,
      var(--color-border)
  );
}

.about-storyline__item {
  position: relative;

  display: grid;
  grid-template-columns: 32px 130px minmax(0, 1fr);
  gap: 1.5rem;

  padding-bottom: 3rem;
}

.about-storyline__item:last-child {
  padding-bottom: 0;
}

.about-storyline__marker {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: flex-start;

  padding-top: 2px;
}

.about-storyline__marker span {
  width: 15px;
  height: 15px;

  border: 4px solid var(--color-background);
  border-radius: 50%;

  background: var(--color-primary);

  box-shadow:
      0 0 0 1px color-mix(
          in srgb,
          var(--color-primary) 30%,
          var(--color-border)
      );
}

.about-storyline__year {
  padding-top: 1px;

  color: var(--color-primary);

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.about-storyline__content {
  max-width: 700px;
  padding-bottom: 2rem;

  border-bottom: var(--eo-border-subtle);
}

.about-storyline__item:last-child .about-storyline__content {
  padding-bottom: 0;
  border-bottom: 0;
}

.about-storyline__content h3 {
  margin-bottom: 0.65rem;

  color: var(--color-text);

  font-size: 1.15rem;
  font-weight: 600;
}

.about-storyline__content p {
  margin: 0;

  color: var(--color-muted);

  font-size: 0.95rem;
  line-height: 1.75;
}

.about-storyline__item--current .about-storyline__marker span {
  background: var(--color-secondary);
}

.about-storyline__item--current .about-storyline__content h3 {
  color: var(--color-primary);
}

.about-audience__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--eo-card-gap);

  max-width: var(--eo-container-lg);
  margin: 0 auto;
}

.about-audience__item {
  padding: clamp(28px, 4vw, 48px);

  border: var(--eo-border-subtle);
  border-radius: var(--eo-radius-panel);

  background: var(--color-surface);
}

.about-audience__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  margin-bottom: 2rem;

  border-radius: var(--eo-radius-md);

  background: color-mix(
      in srgb,
      var(--color-primary) 8%,
      var(--color-surface)
  );

  color: var(--color-primary);
}

.about-audience__label {
  display: block;
  margin-bottom: 0.65rem;

  color: var(--color-primary);

  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-audience__item h3 {
  max-width: 420px;
  margin-bottom: 1rem;

  color: var(--color-text);

  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.about-audience__item > p {
  max-width: 500px;

  color: var(--color-muted);

  line-height: 1.75;
}

.about-audience__item ul {
  display: grid;
  gap: 0.8rem;

  margin-top: 1.75rem;
  padding: 1.5rem 0 0;

  border-top: var(--eo-border-subtle);

  list-style: none;
}

.about-audience__item li {
  display: flex;
  align-items: center;
  gap: 0.65rem;

  color: var(--color-text);

  font-size: 0.88rem;
}

.about-audience__item li i {
  color: var(--color-primary);

  font-size: 0.7rem;
}

.about-integration {
  padding: 0 var(--eo-page-x);
}

.about-integration__inner {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 1rem 1.25rem;

  max-width: var(--eo-container-lg);
  margin: 0 auto;
  padding: 1.4rem 1.6rem;

  border: var(--eo-border-subtle);
  border-radius: var(--eo-radius-panel);

  background: var(--color-surface);
}

.about-integration__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: var(--eo-radius-md);

  background: color-mix(
      in srgb,
      var(--color-primary) 7%,
      var(--color-surface)
  );

  color: var(--color-primary);
}

.about-integration span,
.about-integration strong {
  display: block;
}

.about-integration span {
  color: var(--color-muted);

  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-integration strong {
  margin-top: 0.15rem;

  color: var(--color-text);

  font-size: 0.92rem;
  font-weight: 600;
}

.about-integration p {
  justify-self: end;

  margin: 0;

  color: var(--color-muted);

  font-size: 0.88rem;
}

.about-final {
  padding:
      clamp(64px, 8vw, 100px)
      var(--eo-page-x);
}

.about-final__inner {
  position: relative;
  overflow: hidden;

  max-width: var(--eo-container-lg);
  margin: 0 auto;
  padding: clamp(44px, 7vw, 84px);

  border: var(--eo-border-subtle);
  border-radius: var(--eo-radius-panel);

  background:
      linear-gradient(
          120deg,
          color-mix(
              in srgb,
              var(--color-primary) 7%,
              var(--color-surface)
          ),
          var(--color-surface) 65%
      );
}

.about-final__inner::after {
  content: "";

  position: absolute;
  top: -130px;
  right: -100px;

  width: 320px;
  height: 320px;

  border: 1px solid
      color-mix(
          in srgb,
          var(--color-primary) 12%,
          transparent
      );

  border-radius: 50%;
}

.about-final h2 {
  position: relative;
  z-index: 1;

  max-width: 760px;
  margin-top: 1.35rem;

  color: var(--color-text);

  font-size: clamp(2.2rem, 4.3vw, 3.7rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.about-final p {
  position: relative;
  z-index: 1;

  max-width: 610px;
  margin-top: 1.25rem;

  color: var(--color-muted);

  font-size: 1rem;
  line-height: 1.75;
}

@media (max-width: 768px) {

  /* =============================
     Base / overflow protection
  ============================= */

  .about-page {
      width: 100%;
      overflow-x: hidden;
  }

  .about-section {
      padding:
          clamp(48px, 8vw, 64px)
          var(--eo-page-x);
  }

  .about-section h2 {
      max-width: none;

      font-size: clamp(1.75rem, 7vw, 2.35rem);
      line-height: 1.18;
  }

  .about-section__heading {
      max-width: none;
      margin-bottom: 2rem;
  }

  .about-section__heading p {
      max-width: none;
  }


  /* =============================
     Hero
  ============================= */

  .about-hero {
      padding:
          clamp(56px, 10vw, 72px)
          var(--eo-page-x);
  }

  .about-hero__container {
      grid-template-columns: minmax(0, 1fr);
      gap: 3rem;

      width: 100%;
  }

  .about-hero__content {
      min-width: 0;
      width: 100%;
  }

  .about-hero__title {
      max-width: none;

      font-size: clamp(2.35rem, 10vw, 3.3rem);
      line-height: 1.08;
      letter-spacing: -0.035em;
  }

  .about-hero__description {
      max-width: none;

      font-size: 1rem;
      line-height: 1.75;
  }

  .about-hero__meta {
      gap: 0.8rem 1.25rem;
  }

  .about-hero__visual {
      width: 100%;
      min-height: 260px;
  }

  .about-hero__visual-card--main {
      width: min(280px, 78%);
      padding: 1.6rem;
  }

  .about-hero__visual-card--main > i {
      margin-bottom: 1.5rem;
  }

  .about-hero__visual-card--floating {
      right: 4%;
      bottom: 18px;
  }


  /* =============================
     Generic two-column sections
  ============================= */

  .about-container {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.75rem;

      width: 100%;
      max-width: none;
      margin: 0 auto;
  }

  .about-section__intro,
  .about-section__content {
      min-width: 0;
      width: 100%;
      max-width: none;
  }

  .about-section__content p {
      font-size: 0.98rem;
      line-height: 1.75;
  }


  /* =============================
     Manifesto
  ============================= */

  .about-manifesto__inner {
      width: 100%;
  }

  .about-manifesto__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.75rem;

      width: 100%;
      margin-top: 1rem;
  }

  .about-manifesto h2 {
      max-width: none;

      font-size: clamp(2rem, 8vw, 2.65rem);
      line-height: 1.15;
  }

  .about-manifesto__content {
      min-width: 0;
      padding-top: 0;
  }

  .about-manifesto__content p {
      font-size: 0.98rem;
      line-height: 1.75;
  }


  /* =============================
     How it works
  ============================= */

  .about-features {
      grid-template-columns: minmax(0, 1fr);

      width: 100%;
  }

  .about-feature {
      min-width: 0;
      min-height: auto;
      padding: 1.75rem;

      border-right: 0;
      border-bottom: var(--eo-border-subtle);
  }

  .about-feature:last-child {
      border-bottom: 0;
  }

  .about-feature__number {
      margin-bottom: 1.4rem;
  }

  .about-feature p {
      max-width: none;
  }


  /* =============================
     Selected spaces / Trust
  ============================= */

  .about-trust__inner {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      gap: 1.5rem;

      width: 100%;
  }

  .about-trust__icon {
      width: 56px;
      height: 56px;

      font-size: 1.1rem;
  }

  .about-trust__content {
      min-width: 0;
      width: 100%;
  }

  .about-trust__content h2 {
      max-width: none;
  }

  .about-trust__content p {
      max-width: none;
  }

  .about-trust__stamp {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 0.4rem;

      min-width: 0;
      width: fit-content;

      padding: 0.65rem 0.85rem;

      border: var(--eo-border-subtle);
      border-radius: var(--eo-radius-pill);

      background: color-mix(
          in srgb,
          var(--color-primary) 5%,
          var(--color-surface)
      );
  }

  .about-trust__stamp span,
  .about-trust__stamp strong {
      margin: 0;
  }

  .about-trust__stamp strong {
      color: var(--color-primary);

      font-size: 0.82rem;
  }

  .about-trust__stamp i {
      margin: 0 0 0 0.15rem;

      font-size: 0.72rem;
  }


  /* =============================
     Story
  ============================= */

  .about-story__inner {
      width: 100%;
  }

  .about-story__heading {
      max-width: none;
      margin-bottom: 2.75rem;
  }

  .about-story__heading h2 {
      max-width: none;
  }

  .about-storyline {
      width: 100%;
  }

  .about-storyline::before {
      top: 5px;
      bottom: 5px;
      left: 6px;
  }

  .about-storyline__item {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 0 0.85rem;

      width: 100%;
      padding-bottom: 2.5rem;
  }

  .about-storyline__marker {
      grid-column: 1;
      grid-row: 1 / span 2;

      padding-top: 2px;
  }

  .about-storyline__marker span {
      width: 13px;
      height: 13px;

      border-width: 3px;
  }

  .about-storyline__year {
      grid-column: 2;
      grid-row: 1;

      min-width: 0;
      padding: 0;
      margin-bottom: 0.55rem;

      font-size: 0.7rem;
  }

  .about-storyline__content {
      grid-column: 2;
      grid-row: 2;

      min-width: 0;
      width: 100%;
      max-width: none;

      padding-bottom: 2rem;
  }

  .about-storyline__content h3 {
      font-size: 1.1rem;
      line-height: 1.35;
  }

  .about-storyline__content p {
      font-size: 0.94rem;
      line-height: 1.7;
  }


  /* =============================
     Audience
     "Quero um espaço / Tenho um espaço"
  ============================= */

  .about-audience__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;

      width: 100%;
  }

  .about-audience__item {
      min-width: 0;
      width: 100%;
      padding: 1.75rem;

      border-color: color-mix(
          in srgb,
          var(--color-primary) 15%,
          var(--color-border)
      );
  }

  .about-audience__icon {
      width: 42px;
      height: 42px;
      margin-bottom: 1.4rem;
  }

  .about-audience__label {
      display: inline-flex;
      align-items: center;

      width: fit-content;
      margin-bottom: 0.9rem;
      padding: 0.45rem 0.7rem;

      border: 1px solid
          color-mix(
              in srgb,
              var(--color-primary) 18%,
              var(--color-border)
          );

      border-radius: var(--eo-radius-pill);

      background: color-mix(
          in srgb,
          var(--color-primary) 7%,
          var(--color-surface)
      );

      font-size: 0.72rem;
      line-height: 1;
  }

  .about-audience__item h3 {
      max-width: none;

      font-size: 1.4rem;
  }

  .about-audience__item > p {
      max-width: none;

      font-size: 0.95rem;
  }

  .about-audience__item ul {
      gap: 0.9rem;

      margin-top: 1.5rem;
      padding-top: 1.25rem;
  }

  .about-audience__item li {
      align-items: flex-start;

      line-height: 1.5;
  }

  .about-audience__item li i {
      margin-top: 0.3rem;
  }


  /* =============================
     Google Calendar
  ============================= */

  .about-integration {
      padding:
          0
          var(--eo-page-x);
  }

  .about-integration__inner {
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.2rem 0.9rem;

      width: 100%;
      padding: 1.4rem;

      align-items: center;
  }

  .about-integration__icon {
      grid-column: 1;
      grid-row: 1;

      width: 42px;
      height: 42px;
  }

  .about-integration__inner > div:nth-child(2) {
      grid-column: 2;
      grid-row: 1;

      min-width: 0;
  }

  .about-integration p {
      grid-column: 1 / -1;

      justify-self: stretch;

      width: 100%;
      margin-top: 1rem;
      padding-top: 1rem;

      border-top: var(--eo-border-subtle);

      font-size: 0.88rem;
      line-height: 1.65;
  }


  /* =============================
     Final
  ============================= */

  .about-final {
      padding:
          clamp(48px, 8vw, 64px)
          var(--eo-page-x);
  }

  .about-final__inner {
      padding: 2rem;
  }

  .about-final h2 {
      max-width: none;

      font-size: clamp(2rem, 8vw, 2.7rem);
      line-height: 1.14;
  }

  .about-final p {
      max-width: none;
  }
}


@media (max-width: 480px) {

  /* =============================
     Hero
  ============================= */

  .about-hero {
      padding-top: 48px;
      padding-bottom: 52px;
  }

  .about-hero__title {
      margin-top: 1.25rem;

      font-size: clamp(2.1rem, 10.5vw, 2.8rem);
  }

  .about-hero__description {
      margin-top: 1.35rem;

      font-size: 0.96rem;
      line-height: 1.7;
  }

  .about-hero__meta {
      display: grid;
      gap: 0.75rem;

      margin-top: 1.6rem;
  }

  .about-hero__visual {
      min-height: 220px;
  }

  .about-hero__visual-card--main {
      width: min(250px, 82%);
      padding: 1.4rem;
  }

  .about-hero__visual-card--main > i {
      width: 38px;
      height: 38px;

      margin-bottom: 1.2rem;
  }

  .about-hero__visual-card--floating {
      right: 0;
      bottom: 0;

      padding: 0.7rem 0.85rem;
  }


  /* =============================
     Sections
  ============================= */

  .about-section {
      padding-top: 44px;
      padding-bottom: 44px;
  }

  .about-section__eyebrow {
      margin-bottom: 0.65rem;
  }

  .about-container {
      gap: 1.4rem;
  }


  /* =============================
     Manifesto
  ============================= */

  .about-manifesto__grid {
      gap: 1.4rem;
  }

  .about-manifesto h2 {
      font-size: clamp(1.85rem, 8.5vw, 2.3rem);
  }


  /* =============================
     Features
  ============================= */

  .about-feature {
      padding: 1.5rem;
  }


  /* =============================
     Trust
  ============================= */

  .about-trust__icon {
      width: 50px;
      height: 50px;
  }

  .about-trust__stamp {
      flex-wrap: wrap;
  }


  /* =============================
     Storyline
  ============================= */

  .about-story__heading {
      margin-bottom: 2.25rem;
  }

  .about-storyline__item {
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 0 0.7rem;

      padding-bottom: 2.2rem;
  }

  .about-storyline::before {
      left: 5px;
  }

  .about-storyline__marker span {
      width: 11px;
      height: 11px;

      border-width: 3px;
  }

  .about-storyline__content {
      padding-bottom: 1.6rem;
  }

  .about-storyline__content h3 {
      font-size: 1.05rem;
  }

  .about-storyline__content p {
      font-size: 0.92rem;
  }


  /* =============================
     Audience
  ============================= */

  .about-audience__item {
      padding: 1.5rem;
  }

  .about-audience__icon {
      margin-bottom: 1.25rem;
  }

  .about-audience__label {
      margin-bottom: 0.8rem;
  }

  .about-audience__item h3 {
      font-size: 1.3rem;
  }


  /* =============================
     Google Calendar
  ============================= */

  .about-integration__inner {
      padding: 1.2rem;
  }

  .about-integration__icon {
      width: 40px;
      height: 40px;
  }

  .about-integration strong {
      font-size: 0.9rem;
  }

  .about-integration p {
      font-size: 0.85rem;
  }


  /* =============================
     Final
  ============================= */

  .about-final {
      padding-top: 44px;
      padding-bottom: 44px;
  }

  .about-final__inner {
      padding: 1.75rem 1.5rem;
  }

  .about-final h2 {
      font-size: clamp(1.85rem, 9vw, 2.4rem);
  }
}