/* ============================================================================
       SEDONA TRIP PLANNER v4: Sedona iOS visual reface
       ============================================================================ */

    :root {
      --obsidian: #211713;
      --canyon-night: #FFF3E6;
      --red-rock: #9A3F24;
      --terracotta: #C45F35;
      --sunset: #E78C61;
      --sedona-gold: #D6A642;
      --creek-teal: #2F6F73;
      --desert-sand: #F7EFE3;
      --warm-white: #FFFDF8;
      --muted-brown: #6F5A4A;
      --soft-border: rgba(154, 63, 36, 0.16);
      --panel-shadow: 0 28px 80px rgba(70, 36, 18, 0.22);
      --control-shadow: 0 12px 30px rgba(154, 63, 36, 0.10);

      --sandstone: var(--desert-sand);
      --clay: var(--terracotta);
      --night: var(--obsidian);

      --spacing-xs: 8px;
      --spacing-sm: 12px;
      --spacing-md: 16px;
      --spacing-lg: 24px;
      --spacing-xl: 32px;
      --spacing-2xl: 48px;
    }

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

    html, body {
      width: 100%;
      height: 100%;
      color: var(--obsidian);
      font-family: 'DM Sans', sans-serif;
      overflow: hidden;
    }

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at 18% 18%, rgba(214, 166, 66, 0.26), transparent 26%),
        radial-gradient(circle at 82% 4%, rgba(47, 111, 115, 0.18), transparent 30%),
        linear-gradient(145deg, rgba(247, 239, 227, 0.92), rgba(255, 253, 248, 0.84)),
        linear-gradient(120deg, #F7EFE3 0%, #EBC9AF 46%, #C45F35 100%);
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(155deg, transparent 0 50%, rgba(154, 63, 36, 0.10) 50% 51%, transparent 51%),
        linear-gradient(20deg, transparent 0 57%, rgba(47, 111, 115, 0.08) 57% 58%, transparent 58%);
      opacity: 0.8;
    }

    .widget-container {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: min(1180px, 100%);
      height: min(820px, calc(100vh - 48px));
      min-height: 620px;
      overflow: hidden;
      background: rgba(255, 253, 248, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 24px;
      box-shadow: var(--panel-shadow);
      backdrop-filter: blur(18px);
    }

    .widget-container::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(196, 95, 53, 0.12), transparent 30%);
    }

    .progress-bar {
      position: relative;
      z-index: 2;
      height: 7px;
      background: rgba(154, 63, 36, 0.12);
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--terracotta), var(--sedona-gold), var(--creek-teal));
      border-radius: 999px;
      transition: width 0.4s ease;
    }

    .main-content {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: clamp(24px, 4vw, 56px);
      animation: fadeIn 0.3s ease;
      scrollbar-color: rgba(154, 63, 36, 0.34) transparent;
    }

    .main-content::-webkit-scrollbar {
      width: 10px;
    }

    .main-content::-webkit-scrollbar-thumb {
      background: rgba(154, 63, 36, 0.28);
      border-radius: 999px;
      border: 3px solid transparent;
      background-clip: padding-box;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .step-header {
      max-width: 880px;
      margin-bottom: clamp(24px, 4vw, 44px);
    }

    .overline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--red-rock);
      margin-bottom: var(--spacing-sm);
    }

    .overline::before {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--creek-teal);
      box-shadow: 16px 0 0 var(--sedona-gold);
      margin-right: 16px;
    }

    .step-title {
      max-width: 980px;
      margin-bottom: var(--spacing-md);
      color: var(--obsidian);
      font-size: clamp(30px, 5vw, 48px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .step-subtitle {
      max-width: 760px;
      color: var(--muted-brown);
      font-size: clamp(16px, 2vw, 19px);
      line-height: 1.6;
    }

    .form-group {
      margin-bottom: clamp(28px, 4vw, 46px);
      animation: slideUp 0.36s ease;
    }

    .tile-grid,
    .category-tiles {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: var(--spacing-md);
    }

    .tile,
    .list-item {
      position: relative;
      min-height: 64px;
      padding: 18px 20px;
      background: rgba(255, 253, 248, 0.86);
      border: 1px solid var(--soft-border);
      border-radius: 16px;
      box-shadow: var(--control-shadow);
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      color: var(--obsidian);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
      user-select: none;
    }

    .list-item {
      display: flex;
      align-items: center;
      text-align: left;
      font-size: 16px;
    }

    .tile:hover,
    .list-item:hover {
      transform: translateY(-2px);
      border-color: rgba(196, 95, 53, 0.45);
      background: #FFFFFF;
      box-shadow: 0 16px 34px rgba(154, 63, 36, 0.16);
    }

    .tile.selected,
    .list-item.selected {
      border-color: var(--terracotta);
      background: linear-gradient(180deg, #FFF8F1, #FBE8D8);
      color: var(--red-rock);
      box-shadow: 0 18px 38px rgba(196, 95, 53, 0.22);
    }

    .tile.selected::after {
      content: '✓';
      position: absolute;
      top: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--terracotta);
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 800;
    }

    .list-item.selected::before {
      content: '✓';
      width: 26px;
      height: 26px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      margin-right: 12px;
      border-radius: 999px;
      background: var(--terracotta);
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 800;
    }

    .tile.disabled {
      opacity: 0.48;
      cursor: not-allowed;
      box-shadow: none;
    }

    .tile.disabled:hover {
      transform: none;
      border-color: var(--soft-border);
      background: rgba(255, 253, 248, 0.72);
    }

    .vertical-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
      max-width: 900px;
    }

    .category-group {
      margin-bottom: clamp(26px, 4vw, 44px);
    }

    .category-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: var(--spacing-sm);
      margin-bottom: var(--spacing-md);
      border-bottom: 1px solid rgba(154, 63, 36, 0.18);
      color: var(--red-rock);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .category-header::before {
      content: '';
      width: 28px;
      height: 3px;
      border-radius: 999px;
      background: currentColor;
    }

    .category-header.outdoor { color: var(--terracotta); }
    .category-header.wellness { color: var(--creek-teal); }
    .category-header.food { color: var(--sedona-gold); }

    .max-selected-message {
      margin-top: var(--spacing-md);
      padding: 14px 16px;
      border: 1px solid rgba(196, 95, 53, 0.24);
      border-radius: 14px;
      background: rgba(196, 95, 53, 0.08);
      color: var(--red-rock);
      font-size: 14px;
      font-weight: 800;
      text-align: center;
    }

    .button-group {
      display: flex;
      gap: var(--spacing-md);
      margin-top: auto;
      padding-top: var(--spacing-xl);
      align-items: center;
      justify-content: space-between;
    }

    button {
      min-height: 56px;
      padding: 0 24px;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
    }

    .btn-back {
      min-width: 128px;
      background: rgba(255, 253, 248, 0.78);
      color: var(--red-rock);
      border-color: rgba(154, 63, 36, 0.22);
      box-shadow: var(--control-shadow);
    }

    .btn-back:hover:not(:disabled) {
      transform: translateY(-1px);
      background: #FFFFFF;
      border-color: rgba(154, 63, 36, 0.38);
    }

    .btn-primary,
    .btn-send {
      background: linear-gradient(135deg, var(--terracotta), var(--red-rock));
      color: #FFFFFF;
      box-shadow: 0 14px 30px rgba(154, 63, 36, 0.28);
    }

    .btn-primary {
      flex: 1;
    }

    .btn-primary:hover:not(:disabled),
    .btn-send:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(154, 63, 36, 0.34);
    }

    .btn-primary:disabled,
    .btn-send:disabled {
      background: rgba(154, 63, 36, 0.16);
      color: rgba(33, 23, 19, 0.42);
      cursor: not-allowed;
      box-shadow: none;
    }

    .btn-primary.build {
      min-height: 60px;
      padding: 0 32px;
      font-size: 15px;
    }

    .email-gate-form,
    .text-input-group,
    .email-form {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
      max-width: 540px;
    }

    .form-input-group {
      display: flex;
      gap: var(--spacing-md);
    }

    input[type="email"],
    input[type="text"],
    input[type="tel"],
    .email-gate-input,
    .form-text-input {
      width: 100%;
      min-height: 58px;
      padding: 0 18px;
      background: rgba(255, 253, 248, 0.92);
      border: 1px solid rgba(154, 63, 36, 0.20);
      border-radius: 16px;
      color: var(--obsidian);
      box-shadow: var(--control-shadow);
      font-family: 'DM Sans', sans-serif;
      font-size: 16px;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    input[type="email"]:focus,
    input[type="text"]:focus,
    input[type="tel"]:focus,
    .email-gate-input:focus,
    .form-text-input:focus {
      outline: none;
      background: #FFFFFF;
      border-color: var(--terracotta);
      box-shadow: 0 0 0 4px rgba(196, 95, 53, 0.14), var(--control-shadow);
    }

    input[type="email"]::placeholder,
    input[type="text"]::placeholder,
    input[type="tel"]::placeholder,
    .email-gate-input::placeholder,
    .form-text-input::placeholder {
      color: rgba(111, 90, 74, 0.74);
    }

    .email-gate-helper,
    .text-input-helper,
    .email-capture-subtitle,
    .resend-link {
      color: var(--muted-brown);
      font-size: 14px;
      line-height: 1.55;
    }

    .text-input-helper {
      padding: var(--spacing-md);
      border: 1px solid rgba(47, 111, 115, 0.20);
      border-left: 4px solid var(--creek-teal);
      border-radius: 14px;
      background: rgba(47, 111, 115, 0.08);
    }


    .realtor-contact-layout {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: clamp(20px, 4vw, 40px);
      max-width: 980px;
    }

    .realtor-contact-fields {
      flex: 1 1 280px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-lg);
    }

    .realtor-field-label {
      display: block;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--red-rock);
    }

    .realtor-contact-aside {
      flex: 0 0 min(280px, 34vw);
      max-width: 320px;
    }

    .realtor-contact-figure {
      margin: 0;
    }

    .realtor-contact-img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 18px;
      object-fit: cover;
      border: 1px solid var(--soft-border);
      box-shadow: var(--control-shadow);
    }

    .realtor-contact-visual {
      position: relative;
      width: 100%;
    }

    .realtor-contact-visual--has-url .realtor-contact-fallback {
      display: none;
    }

    .realtor-contact-visual--broken .realtor-contact-fallback,
    .realtor-contact-visual--nofile .realtor-contact-fallback {
      display: grid;
      place-items: center;
      gap: 8px;
      padding: var(--spacing-lg);
      min-height: 200px;
      border-radius: 18px;
      border: 1px solid var(--soft-border);
      box-shadow: var(--control-shadow);
      background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(247, 239, 227, 0.92));
    }

    .realtor-contact-initials {
      display: grid;
      place-items: center;
      width: 72px;
      height: 72px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--terracotta), var(--red-rock));
      color: #fff;
      font-weight: 800;
      font-size: 22px;
      letter-spacing: 0.04em;
    }

    .realtor-contact-fallback-name {
      font-weight: 800;
      color: var(--obsidian);
      font-size: 16px;
      text-align: center;
    }

    .realtor-contact-fallback-sub {
      font-size: 13px;
      font-weight: 700;
      color: var(--muted-brown);
      text-align: center;
    }

    .realtor-contact-img.realtor-contact-img--hidden {
      display: none !important;
    }

    .realtor-contact-caption {
      margin-top: 12px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.45;
      color: var(--muted-brown);
      text-align: center;
    }

    @media (max-width: 768px) {
      .realtor-contact-layout {
        flex-direction: column;
      }

      .realtor-contact-aside {
        order: -1;
        max-width: none;
        flex-basis: auto;
        align-self: center;
        width: min(320px, 100%);
      }
    }

    .post-plan-email-cta .btn-send {
      margin-top: var(--spacing-md);
      width: fit-content;
    }

    .post-plan-email-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-md);
      margin-top: var(--spacing-md);
      align-items: end;
    }

    .post-plan-email-label {
      display: block;
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--red-rock);
    }

    @media (max-width: 768px) {
      .post-plan-email-grid {
        grid-template-columns: 1fr;
      }
    }
    .loading-screen {
      background: transparent;
      color: var(--obsidian);
    }

    .loading-spinner {
      width: 62px;
      height: 62px;
      border: 4px solid rgba(154, 63, 36, 0.14);
      border-top-color: var(--terracotta);
      border-right-color: var(--creek-teal);
      border-radius: 50%;
      animation: spin 1.1s linear infinite;
      margin-bottom: var(--spacing-xl);
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .loading-text {
      color: var(--obsidian);
      font-size: 18px;
      font-weight: 800;
      text-align: center;
      margin-bottom: var(--spacing-sm);
    }

    .loading-subtext {
      color: var(--red-rock);
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      animation: pulse 1.8s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 0.65; }
      50% { opacity: 1; }
    }

    .itinerary-container {
      width: min(860px, 100%);
      margin: 0 auto;
      animation: fadeIn 0.4s ease;
    }

    .itinerary-header {
      margin-bottom: var(--spacing-xl);
      padding-bottom: var(--spacing-xl);
      border-bottom: 1px solid rgba(154, 63, 36, 0.18);
    }

    .itinerary-overline,
    .day-label {
      margin-bottom: var(--spacing-md);
      color: var(--terracotta);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .itinerary-title,
    .day-title {
      color: var(--obsidian);
      font-family: 'Cormorant Garamond', serif;
      line-height: 1.08;
      letter-spacing: 0;
    }

    .itinerary-title {
      margin-bottom: var(--spacing-lg);
      font-size: clamp(22px, 3.4vw, 36px);
      font-style: italic;
    }

    .itinerary-tags,
    .activity-badges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
    }

    .tag,
    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(196, 95, 53, 0.10);
      color: var(--red-rock);
      font-size: 12px;
      font-weight: 800;
    }

    .day-section {
      margin-bottom: var(--spacing-2xl);
    }

    .day-header {
      margin-bottom: var(--spacing-lg);
    }

    .day-title {
      font-size: clamp(30px, 5vw, 42px);
      font-style: italic;
    }

    .activity,
    .local-tips,
    .email-capture {
      background: rgba(255, 253, 248, 0.88);
      border: 1px solid var(--soft-border);
      border-radius: 18px;
      box-shadow: var(--control-shadow);
    }

    .activity {
      margin-bottom: var(--spacing-md);
      padding: var(--spacing-lg);
    }

    .activity-time {
      margin-bottom: var(--spacing-xs);
      color: var(--terracotta);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .activity-name {
      margin-bottom: var(--spacing-sm);
      color: var(--obsidian);
      font-size: 20px;
      font-weight: 800;
    }

    .activity-description,
    .local-tips-list {
      color: var(--muted-brown);
      font-size: 15px;
      line-height: 1.65;
    }

    .badge.mustdo {
      background: rgba(214, 166, 66, 0.20);
      color: #7B5710;
      border: 1px solid rgba(214, 166, 66, 0.34);
    }

    .badge.local-tip {
      background: rgba(47, 111, 115, 0.12);
      color: var(--creek-teal);
    }

    .local-tips,
    .email-capture {
      margin-top: var(--spacing-xl);
      padding: var(--spacing-lg);
      border-left: 5px solid var(--terracotta);
    }

    .local-tips-title,
    .email-capture-title {
      margin-bottom: var(--spacing-sm);
      color: var(--obsidian);
      font-size: 17px;
      font-weight: 800;
    }

    .local-tips-list {
      list-style: none;
    }

    .local-tips-list li {
      position: relative;
      margin-bottom: var(--spacing-sm);
      padding-left: var(--spacing-md);
    }

    .local-tips-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.75em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--terracotta);
    }

    .itinerary-footer {
      display: flex;
      justify-content: center;
      gap: var(--spacing-lg);
      margin-top: var(--spacing-xl);
      padding-top: var(--spacing-lg);
      border-top: 1px solid rgba(154, 63, 36, 0.16);
      font-size: 14px;
    }

    .itinerary-footer a,
    .resend-link a {
      color: var(--red-rock);
      font-weight: 800;
      text-decoration: none;
      border-bottom: 1px solid rgba(154, 63, 36, 0.28);
      cursor: pointer;
    }

    .email-confirmed {
      border-left-color: var(--sedona-gold) !important;
    }

    .email-confirmed .email-capture-title,
    .email-success-message {
      color: #8A6413;
    }

    .resend-inline-form {
      display: none;
      flex-direction: column;
      gap: var(--spacing-sm);
      margin-top: var(--spacing-md);
    }

    .resend-inline-form.active {
      display: flex;
    }

    .itinerary-container > div[style*="padding:1.5rem"] > div[style*="padding: 16px"] > p[style] {
      color: var(--muted-brown) !important;
    }

    @media (max-width: 900px) {
      body {
        padding: 0;
        place-items: stretch;
      }

      .widget-container {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
      }
    }

    @media (max-width: 768px) {
      .main-content {
        padding: 22px 16px 18px;
        scroll-padding-bottom: 170px;
      }

      .step-header {
        margin-bottom: var(--spacing-lg);
      }

      .step-title {
        font-size: clamp(28px, 8vw, 36px);
      }

      .step-subtitle {
        font-size: 16px;
      }

      .tile-grid,
      .category-tiles {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .tile,
      .list-item {
        min-height: 58px;
        padding: 16px 18px;
        background: #FFFDF8;
        color: var(--obsidian);
        border-color: rgba(154, 63, 36, 0.20);
        font-size: 15px;
      }


      .button-group {
        position: static;
        flex-direction: column-reverse;
        gap: 10px;
        margin-top: var(--spacing-xl);
        padding: 0;
        background: transparent;
      }

      .btn-back,
      .btn-primary,
      .btn-send {
        width: 100%;
      }

      .form-input-group,
      .itinerary-footer {
        flex-direction: column;
      }
    }

    @media (max-width: 480px) {
      .main-content {
        padding: 20px 16px 16px;
      }

      .overline {
        font-size: 11px;
      }

      .step-title {
        font-size: 29px;
      }

      .itinerary-title {
        font-size: clamp(24px, 7vw, 30px);
      }

      .day-title {
        font-size: 30px;
      }
    }
    /* ============================================================================
       VISUAL REFACE PASS 2: typography, grids, buttons, page scroll
       ============================================================================ */

    html,
    body {
      height: auto;
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    body {
      align-items: start;
    }

    .widget-container {
      height: auto;
      min-height: min(760px, calc(100vh - 48px));
      overflow: visible;
    }

    .main-content {
      min-height: min(700px, calc(100vh - 55px));
      overflow: visible;
      padding: clamp(24px, 3.5vw, 48px);
    }

    .step-header {
      margin-bottom: clamp(20px, 3vw, 34px);
    }

    .step-title {
      max-width: 920px;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(27px, 3.7vw, 42px);
      font-weight: 700;
      line-height: 1.12;
    }

    .step-subtitle {
      font-size: clamp(15px, 1.6vw, 18px);
    }

    .tile-grid,
    .category-tiles {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
    }

    .tile-grid-nights {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .tile-grid-month {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .tile,
    .list-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 70px;
      padding: 16px 18px;
      text-align: center;
    }

    .list-item.selected::before {
      position: absolute;
      left: 18px;
      margin-right: 0;
    }

    .button-group {
      gap: 14px;
    }

    .button-group.first-step .btn-primary {
      flex: 1 1 100%;
      width: 100%;
    }

    .vertical-list {
      width: 100%;
      max-width: none;
    }

    .vertical-list .list-item {
      width: 100%;
      justify-content: center;
    }

    .step-subtitle {
      max-width: 680px;
    }

    .category-header {
      display: inline-flex;
      width: fit-content;
      padding: 10px 16px;
      margin-bottom: 18px;
      border: 0;
      border-radius: 999px;
      background: var(--red-rock);
      color: #FFFDF8;
      box-shadow: 0 12px 26px rgba(154, 63, 36, 0.20);
    }

    .category-header.outdoor {
      background: var(--red-rock);
      color: #FFFDF8;
    }

    .category-header.wellness {
      background: var(--creek-teal);
      color: #FFFDF8;
    }

    .category-header.food {
      background: #8A6413;
      color: #FFFDF8;
    }

    .category-header::before {
      width: 20px;
      background: rgba(255, 253, 248, 0.78);
    }

    button {
      min-height: 54px;
      letter-spacing: 0.04em;
    }

    .btn-back {
      min-width: 112px;
    }

    .btn-primary,
    .btn-send {
      font-size: 13px;
    }

    .itinerary-title,
    .day-title {
      font-family: 'Playfair Display', Georgia, serif;
    }

    @media (max-width: 1100px) {
      .tile-grid,
      .category-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .tile-grid-nights {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .tile-grid-month {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      body {
        display: block;
        padding: 0;
      }

      .widget-container {
        min-height: 100dvh;
        border-radius: 0;
      }

      .main-content {
        min-height: calc(100dvh - 7px);
      }
    }

    @media (max-width: 768px) {
      .step-title {
        font-size: clamp(25px, 7vw, 32px);
      }

      .tile-grid,
      .tile-grid-nights,
      .tile-grid-month,
      .category-tiles {
        grid-template-columns: 1fr;
      }

      .button-group {
        position: static;
        margin-top: var(--spacing-xl);
      }
    }