/* ── Detail layout ── */
    .detail-page { display:flex; flex-direction:column; height:100%; }
    .detail-scroll { flex:1; overflow-y:auto; }
    .detail-scroll::-webkit-scrollbar { display:none; }
    .review-card { background:var(--bg); border-radius:var(--radius-md); padding:14px; margin-bottom:10px; }
    .review-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    .reviewer-avatar { width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1rem;color:white;flex-shrink:0; }
    .reviewer-name { font-size:.85rem;font-weight:700; }
    .reviewer-date { font-size:.72rem;color:var(--text-muted); }
    .review-text { font-size:.82rem;color:var(--text-muted);line-height:1.7; }
    .review-reply { margin-top:8px;padding:8px 10px;background:rgba(61,107,79,.06);border-radius:8px;font-size:.78rem;color:var(--text); }
    .review-reply b { color:var(--accent); }
    .review-form { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; margin-bottom:14px; }
    .review-form-title { font-size:.85rem;font-weight:800;margin-bottom:10px; }
    .star-pick { display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin-bottom:10px; }
    .star-pick span { font-size:1.5rem;cursor:pointer;filter:grayscale(1);opacity:.45;transition:.12s; }
    .star-pick span.on, .star-pick span:hover, .star-pick span:hover ~ span { filter:grayscale(0);opacity:1; }
    .review-form textarea { width:100%;border:1px solid var(--border);border-radius:8px;padding:10px;font-family:inherit;font-size:.82rem;resize:vertical;min-height:64px;background:var(--card,#fff);color:var(--text); }
    .review-submit-btn { margin-top:10px;width:100%;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:10px;font-weight:800;font-size:.85rem;cursor:pointer; }
    .review-submit-btn:disabled { opacity:.5;cursor:not-allowed; }
    .review-photo-label { display:block;font-size:.76rem;color:var(--text-muted);margin-top:10px;cursor:pointer; }
    .review-photo-label input { display:block;margin-top:6px;font-size:.76rem; }
    .review-photo-preview, .review-photos { display:flex;flex-wrap:wrap;gap:8px;margin-top:8px; }
    .review-photo-preview img, .review-photos img { width:64px;height:64px;object-fit:cover;border-radius:8px;cursor:pointer; }
    .review-note { font-size:.74rem;color:var(--text-muted);background:var(--bg);border-radius:8px;padding:10px 12px;margin-bottom:12px;text-align:center; }
    .map-placeholder { width:100%;height:160px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-warm) 100%);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1rem;color:white;font-weight:700;gap:8px; }
    .share-btn { width:44px;height:44px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:var(--ease); }
    .share-btn:hover { background:var(--accent); }

    /* ── Booking Panel ── */
    .booking-panel {
      background: var(--bg-card);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0,0,0,.1);
      overflow: hidden;
      margin-bottom: 24px;
    }
    .booking-panel__head {
      background: linear-gradient(135deg,var(--accent) 0%,var(--accent-warm) 100%);
      padding: 18px 20px;
      color: #fff;
    }
    .booking-panel__head h3 { font-size:.95rem;font-weight:900;margin:0 0 2px; }
    .booking-panel__head p  { font-size:.76rem;opacity:.85;margin:0; }
    .booking-panel__body { padding: 18px 20px; }

    /* ── Calendar ── */
    .cal-nav {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom: 12px;
    }
    .cal-nav button {
      width:32px;height:32px;border-radius:50%;background:var(--bg);
      border:1px solid var(--border);font-size:1rem;cursor:pointer;
      display:flex;align-items:center;justify-content:center;transition:.2s;
    }
    .cal-nav button:hover { background:var(--accent);color:#fff;border-color:var(--accent); }
    .cal-month { font-size:.9rem;font-weight:800; }
    .cal-grid {
      display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px;
    }
    .cal-day-label {
      text-align:center; font-size:.65rem; font-weight:700;
      color:var(--text-muted); padding:4px 0;
      min-width: 0;
    }
    .cal-day {
      position:relative; aspect-ratio:1;
      display:flex; flex-direction:column; align-items:center; justify-content:space-between;
      border-radius:10px; cursor:pointer; transition:.15s; font-size:.78rem;
      user-select:none;
      min-width: 0;
    }
    .cal-day-num { line-height: 1; }
    .cal-day:hover:not(.cal-day--disabled):not(.cal-day--booked) {
      background: rgba(61,107,79,.12);
    }
    .cal-day--today { font-weight:900; color:var(--accent); }
    .cal-day--booked {
      background: rgba(239,68,68,.08);
      color: #ef4444;
      cursor: not-allowed;
      text-decoration: line-through;
      opacity: .6;
    }
    .cal-day--disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }
    .cal-day--checkin  { background:var(--accent)!important;color:#fff!important;border-radius:10px 0 0 10px; }
    .cal-day--checkout { background:var(--accent)!important;color:#fff!important;border-radius:0 10px 10px 0; }
    .cal-day--in-range { background:rgba(61,107,79,.12);border-radius:0; }
    .cal-day--peak {
      position:relative;
      background: rgba(201,152,46,.14);
      color: var(--accent-warm);
      font-weight: 800;
      box-shadow: inset 0 0 0 1.5px rgba(201,152,46,.35);
    }
    .cal-day--peak .cal-price-dot { color: var(--accent-warm); font-weight:700; }
    .cal-day--peak:hover:not(.cal-day--disabled):not(.cal-day--booked) {
      background: rgba(201,152,46,.24);
    }
    .cal-day--peak::after {
      content:'';
      position:absolute; top:4px; left:4px;
      width:6px;height:6px;border-radius:50%;
      background:var(--accent-warm);
      box-shadow:0 0 0 2px rgba(201,152,46,.25);
    }
    /* وقتی روز پیک انتخاب شده، رنگ انتخاب اولویت دارد */
    .cal-day--peak.cal-day--checkin,
    .cal-day--peak.cal-day--checkout,
    .cal-day--peak.cal-day--in-range {
      color:#fff;
      box-shadow:none;
    }
    .cal-day--peak.cal-day--checkin::after,
    .cal-day--peak.cal-day--checkout::after,
    .cal-day--peak.cal-day--in-range::after {
      background:#fff;
      box-shadow:none;
    }

    /* راهنمای رنگ‌های تقویم */
    .cal-legend {
      display:flex; flex-wrap:wrap; gap:14px;
      margin-top:12px; padding-top:12px;
      border-top:1px solid var(--border);
      font-size:.7rem; color:var(--text-muted);
    }
    .cal-legend-item { display:flex; align-items:center; gap:6px; }
    .cal-legend-swatch {
      width:14px; height:14px; border-radius:5px; flex-shrink:0;
    }
    .cal-legend-swatch--peak {
      background: rgba(201,152,46,.18);
      box-shadow: inset 0 0 0 1.5px rgba(201,152,46,.45);
    }
    .cal-legend-swatch--booked {
      background: rgba(239,68,68,.12);
      box-shadow: inset 0 0 0 1.5px rgba(239,68,68,.35);
    }
    .cal-price-dot {
      font-size:.4rem; color:var(--text-muted); line-height:1;
      margin-top:2px; pointer-events:none;
      white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
      letter-spacing:-.2px;
    }
    .cal-day--checkin .cal-price-dot,
    .cal-day--checkout .cal-price-dot { color:rgba(255,255,255,.8); }

    /* ── Guest selector ── */
    .guest-row {
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 0; border-bottom:1px solid var(--border);
    }
    .guest-row:last-child { border-bottom:none; }
    .guest-info h4 { font-size:.85rem;font-weight:700;margin:0 0 1px; }
    .guest-info p  { font-size:.72rem;color:var(--text-muted);margin:0; }
    .counter {
      display:flex; align-items:center; gap:10px;
    }
    .counter button {
      width:30px;height:30px;border-radius:50%;
      border:1.5px solid var(--border);background:var(--bg-card);
      font-size:1.1rem;line-height:1;cursor:pointer;
      display:flex;align-items:center;justify-content:center;transition:.15s;
      font-family:var(--font);
    }
    .counter button:hover:not(:disabled) { border-color:var(--accent);color:var(--accent); }
    .counter button:disabled { opacity:.3;cursor:not-allowed; }
    .counter span { font-weight:800;font-size:.95rem;min-width:18px;text-align:center; }

    /* ── Price breakdown ── */
    .price-breakdown {
      background:var(--bg); border-radius:14px; padding:14px 16px; margin:14px 0;
    }
    .pb-row {
      display:flex; justify-content:space-between; align-items:center;
      font-size:.82rem; padding:5px 0;
    }
    .pb-row .lbl { color:var(--text-muted); }
    .pb-row .val { font-weight:700; }
    .pb-row.pb-peak .lbl { color:var(--accent-warm); }
    .pb-row.pb-total {
      border-top:1px solid var(--border); margin-top:8px; padding-top:10px;
      font-size:.95rem;
    }
    .pb-row.pb-total .lbl { font-weight:800; }
    .pb-row.pb-total .val { font-size:1.05rem;color:var(--accent); }

    /* ── Gateway ── */
    .gw-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 16px;
    }
    .gw-btn {
      border:2px solid var(--border); border-radius:12px; padding:10px 12px;
      cursor:pointer; transition:.15s; background:var(--bg-card);
      display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
    }
    .gw-btn:hover { border-color:var(--accent); }
    .gw-btn.selected { border-color:var(--accent); background:rgba(61,107,79,.06); }
    .gw-btn input { display:none; }
    .gw-logo { font-size:1.2rem; }

    /* ── Reserve button ── */
    .reserve-btn-main {
      width:100%; padding:14px; border:none; border-radius:14px;
      background:linear-gradient(135deg,var(--accent) 0%,var(--accent-warm) 100%);
      color:#fff; font-size:.95rem; font-weight:800; cursor:pointer;
      font-family:var(--font); transition:.2s;
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .reserve-btn-main:hover { filter:brightness(1.07);transform:translateY(-1px); }
    .reserve-btn-main:disabled {
      background:var(--border); color:var(--text-muted); cursor:not-allowed; transform:none; filter:none;
    }
    .conflict-msg {
      text-align:center; font-size:.78rem; color:#ef4444; margin-top:8px;
      display:none;
    }
    .conflict-msg.show { display:block; }

    /* ── Alert ── */
    .booking-alert {
      background:rgba(61,107,79,.1); border:1px solid var(--accent);
      border-radius:12px; padding:12px 14px; font-size:.82rem;
      margin-bottom:14px; color:var(--accent);
    }
    .booking-alert.error {
      background:rgba(239,68,68,.08); border-color:#ef4444; color:#b91c1c;
    }
    .selected-range {
      text-align:center; font-size:.8rem; font-weight:700;
      color:var(--text-muted); margin:8px 0 0; min-height:20px;
    }

    /* ── Desktop booking sidebar ── */
    @media (min-width: 900px) {
      /* استایل‌های اصلی در desktop.css قرار دارند؛ اینجا فقط تنظیمات جزئی */
      #desktopBookingSidebar {
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        overflow-y: auto;
        max-height: calc(100vh - 48px);
        padding-left: 0 !important;
        align-items: stretch !important;
      }
      #desktopBookingSidebar::-webkit-scrollbar { width: 4px; }
      #desktopBookingSidebar::-webkit-scrollbar-track { background: transparent; }
      #desktopBookingSidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

      #desktopBookingPanel { display: block !important; }

      /* پنل رزرو موبایل رو در دسکتاپ مخفی می‌کنیم */
      .detail-body > .booking-panel { display: none; }
      #bookingAnchor { display: none; }

      /* جدا کردن sidebar info از booking panel */
      #sidebarInfo {
        margin-bottom: 0;
        flex-shrink: 0;
      }

      /* پنل رزرو دسکتاپ */
      #desktopBookingPanel .booking-panel {
        display: block !important;
        border-radius: var(--radius-lg);
        box-shadow: 0 4px 24px rgba(0,0,0,.08);
        overflow: hidden;
        margin: 0;
      }
      #desktopBookingPanel .booking-panel__body {
        padding: 16px 18px;
      }
      /* تقویم کمی فشرده‌تر */
      #desktopBookingPanel .cal-day {
        font-size: .72rem;
        border-radius: 8px;
      }
      #desktopBookingPanel .cal-price-dot {
        font-size: .55rem;
      }
      #desktopBookingPanel .booking-panel__head {
        padding: 16px 18px;
      }
    }

    /* ─── Chat Trigger Button ─── */
    .chat-trigger-btn {
      width: 100%; padding: 11px; border-radius: 12px; margin-top: 8px;
      border: 1.5px solid var(--accent); background: transparent;
      color: var(--accent); font-size: .88rem; font-weight: 700;
      cursor: pointer; font-family: var(--font); transition: .2s;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .chat-trigger-btn:hover { background: rgba(61,107,79,.08); }

    /* ─── Chat Drawer ─── */
    .chat-drawer {
      position: fixed; inset: 0; z-index: 500;
      display: flex; align-items: flex-end; justify-content: center;
      pointer-events: none;
    }
    .chat-drawer.open { pointer-events: all; }
    .chat-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.45);
      opacity: 0; transition: opacity .25s;
    }
    .chat-drawer.open .chat-backdrop { opacity: 1; }

    .chat-sheet {
      position: relative; z-index: 1;
      background: var(--bg-card);
      border-radius: 22px 22px 0 0;
      width: 100%; max-width: 500px;
      height: 75vh; max-height: 600px;
      display: flex; flex-direction: column;
      box-shadow: 0 -8px 40px rgba(0,0,0,.18);
      transform: translateY(100%);
      transition: transform .3s cubic-bezier(.32,1,.23,1);
    }
    .chat-drawer.open .chat-sheet { transform: translateY(0); }

    /* Desktop: به صورت floating panel */
    @media (min-width:900px) {
      .chat-drawer { align-items: center; }
      .chat-sheet {
        border-radius: 18px;
        height: 520px;
        max-width: 420px;
        transform: scale(.94) translateY(12px);
        opacity: 0;
        transition: transform .25s cubic-bezier(.32,1,.23,1), opacity .2s;
      }
      .chat-drawer.open .chat-sheet {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }

    /* ─── Chat Header ─── */
    .chat-header {
      padding: 16px 18px 12px;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 12px;
      flex-shrink: 0;
    }
    .chat-header-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: #fff; flex-shrink: 0; overflow: hidden;
    }
    .chat-header-info h4 { font-size:.88rem; font-weight:800; margin:0 0 1px; }
    .chat-header-info p  { font-size:.72rem; color:var(--text-muted); margin:0; }
    .chat-header-close {
      margin-right: auto; background: none; border: none;
      font-size: 1.2rem; cursor: pointer; color: var(--text-muted);
      line-height: 1; padding: 4px;
    }

    /* ─── Messages ─── */
    .chat-messages {
      flex: 1; overflow-y: auto; padding: 14px 16px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .chat-messages::-webkit-scrollbar { width: 3px; }
    .chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .chat-bubble {
      max-width: 78%; padding: 9px 13px; border-radius: 14px;
      font-size: .83rem; line-height: 1.55; word-break: break-word;
    }
    .chat-bubble.out {
      align-self: flex-end;
      background: var(--accent); color: #fff;
      border-bottom-left-radius: 4px;
    }
    .chat-bubble.in {
      align-self: flex-start;
      background: var(--bg); border: 1px solid var(--border);
      color: var(--text);
      border-bottom-right-radius: 4px;
    }
    .chat-bubble-time {
      font-size: .6rem; opacity: .65; margin-top: 3px; text-align: left;
    }
    .chat-bubble.out .chat-bubble-time { color: rgba(255,255,255,.7); }

    /* ─── Input ─── */
    .chat-input-row {
      display: flex; gap: 8px; padding: 12px 14px;
      border-top: 1px solid var(--border); flex-shrink: 0;
      background: var(--bg-card);
    }
    .chat-input {
      flex: 1; border: 1.5px solid var(--border); border-radius: 22px;
      padding: 9px 14px; font-family: var(--font); font-size: .85rem;
      background: var(--bg); color: var(--text); outline: none;
      resize: none; max-height: 80px; line-height: 1.4;
    }
    .chat-input:focus { border-color: var(--accent); }
    .chat-send-btn {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      background: var(--accent); border: none; color: #fff;
      font-size: 1rem; cursor: pointer; transition: .15s;
      display: flex; align-items: center; justify-content: center;
    }
    .chat-send-btn:hover { filter: brightness(1.1); }
    .chat-send-btn:disabled { opacity: .4; cursor: not-allowed; }

    /* ─── Empty / Loading ─── */
    .chat-empty {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      color: var(--text-muted); gap: 8px;
    }
    .chat-empty-icon { font-size: 2.5rem; opacity: .5; }
    .chat-empty-text { font-size: .8rem; }

    /* ─── Cancellation policy ─── */
    .cancel-box{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--card,rgba(0,0,0,.02));}
    .cancel-box .cb-icon{font-size:1.4rem;line-height:1}
    .cancel-box .cb-main{flex:1}
    .cancel-box .cb-name{font-size:.86rem;font-weight:900;margin-bottom:3px}
    .cancel-box .cb-desc{font-size:.76rem;color:var(--text-muted);line-height:1.6}
    .cancel-box .cb-link{margin-top:8px;font-size:.74rem;font-weight:700;color:var(--accent);background:none;border:none;padding:0;cursor:pointer}
    .cancel-box .cb-link:hover{text-decoration:underline}
    .cp-pill{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:99px;margin-bottom:4px}
    .cp-pill.strict{background:rgba(239,68,68,.12);color:#dc2626}
    .cp-pill.moderate{background:rgba(245,158,11,.14);color:#d97706}
    .cp-pill.flexible{background:rgba(22,163,74,.14);color:#16a34a}
    .cp-lb2{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:.2s}
    .cp-lb2.open{opacity:1;pointer-events:all}
    .cp-lb2-box{background:var(--bg,#fff);border-radius:18px;border:1px solid var(--border);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;transform:translateY(10px);transition:.2s}
    .cp-lb2.open .cp-lb2-box{transform:translateY(0)}
    .cp-lb2-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg,#fff)}
    .cp-lb2-title{font-size:.95rem;font-weight:900}
    .cp-lb2-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;font-size:.9rem}
    .cp-lb2-body{padding:20px;display:flex;flex-direction:column;gap:14px}
    .cp-lb2-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px}
    .cp-lb2-card.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(26,107,74,.12)}
    .cp-lb2-card h4{font-size:.85rem;font-weight:900;margin:0 0 7px;display:flex;align-items:center;gap:7px}
    .cp-lb2-card ul{margin:0;padding-right:18px;font-size:.76rem;color:var(--text-muted);line-height:1.7}

    /* ═══════════════ WEATHER — پیش‌بینی ۱۰ روزه ═══════════════ */
    .wx-section:empty { display: none; }
    .wx-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      margin-bottom: 6px;
    }

    /* ── وضعیت فعلی (هدر رنگی بر اساس آسمان) ── */
    .wx-now {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas: "ico main" "meta meta";
      align-items: center;
      gap: 4px 14px;
      padding: 16px 18px 14px;
      color: #fff;
      background: linear-gradient(135deg, #4a86b8 0%, #7fb6dd 100%);
      overflow: hidden;
    }
    .wx-now::after {   /* هالهٔ نرم گوشهٔ کارت */
      content: ''; position: absolute; top: -60px; left: -40px;
      width: 190px; height: 190px; border-radius: 50%;
      background: rgba(255,255,255,.14); pointer-events: none;
    }
    .wx-sky--sun        { background: linear-gradient(135deg,#3f8ecb 0%,#79c8ec 55%,#ffcf7a 140%); }
    .wx-sky--sun-cloud  { background: linear-gradient(135deg,#4a86b8 0%,#8dc2e2 100%); }
    .wx-sky--cloud,
    .wx-sky--fog        { background: linear-gradient(135deg,#5b6b7d 0%,#8fa2b4 100%); }
    .wx-sky--drizzle,
    .wx-sky--rain       { background: linear-gradient(135deg,#3f5a72 0%,#6d90ab 100%); }
    .wx-sky--snow       { background: linear-gradient(135deg,#63788e 0%,#a8bfd2 100%); }
    .wx-sky--storm      { background: linear-gradient(135deg,#33404f 0%,#5d6f84 100%); }
    .wx-sky--moon,
    .wx-sky--moon-cloud { background: linear-gradient(135deg,#1e2a44 0%,#42597f 100%); }

    .wx-now-ico  { grid-area: ico; position: relative; z-index: 1; }
    .wx-now-main { grid-area: main; position: relative; z-index: 1; }
    .wx-now-temp { font-size: 2.1rem; font-weight: 900; line-height: 1.1; }
    .wx-now-cond { font-size: .84rem; font-weight: 700; opacity: .95; }
    .wx-now-place{ font-size: .72rem; opacity: .8; margin-top: 2px; }
    .wx-now-meta {
      grid-area: meta; position: relative; z-index: 1;
      display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
    }
    .wx-now-meta span {
      font-size: .7rem; font-weight: 600;
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 99px; padding: 4px 10px;
      backdrop-filter: blur(4px);
    }

    /* ── فهرست روزها ── */
    .wx-days { padding: 6px 10px 8px; }
    .wx-day {
      display: grid;
      grid-template-columns: 4.4rem 2rem 2.9rem 2.1rem minmax(40px,1fr) 2.1rem;
      align-items: center;
      gap: 6px;
      padding: 7px 8px;
      border-radius: 12px;
      transition: background .15s;
    }
    .wx-day + .wx-day { box-shadow: inset 0 1px 0 var(--border); }
    .wx-day:hover { background: rgba(125,125,125,.06); }
    .wx-day.is-today .wx-day-name { color: var(--accent); }
    .wx-day.is-stay {
      background: rgba(61,107,79,.09);
      box-shadow: inset 0 0 0 1.5px var(--accent);
    }
    .wx-day.is-stay + .wx-day { box-shadow: none; }
    .wx-day-when { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
    .wx-day-name { font-size: .78rem; font-weight: 800; }
    .wx-day-date { font-size: .64rem; color: var(--text-muted); }
    .wx-day-ico  { display: flex; justify-content: center; }
    .wx-day-pop  { font-size: .66rem; color: var(--text-light); text-align: center; }
    .wx-day-pop.is-wet { color: #3b82f6; font-weight: 700; }
    .wx-day-min  { font-size: .76rem; color: var(--text-muted); text-align: center; }
    .wx-day-max  { font-size: .78rem; font-weight: 800; text-align: center; }

    /* نوار دما: سمت راست = سردترین، سمت چپ = گرم‌ترین روز هفته */
    .wx-bar {
      position: relative; height: 6px; border-radius: 99px;
      background: rgba(125,125,125,.16);
    }
    /* رنگ هر نوار در جاوااسکریپت بر اساس دمای همان روز ساخته می‌شود */
    .wx-bar i { position: absolute; top: 0; height: 100%; border-radius: 99px; }

    .wx-foot {
      display: flex; justify-content: space-between; gap: 10px;
      padding: 9px 16px 11px;
      border-top: 1px solid var(--border);
      font-size: .66rem; color: var(--text-light);
    }

    /* ── خلاصهٔ هوای روزهای اقامت، داخل پنل رزرو ── */
    .wx-hint {
      display: flex; align-items: center; gap: 8px;
      margin-top: 8px; padding: 8px 10px;
      border: 1px solid var(--border); border-radius: 12px;
      background: rgba(90,148,112,.08);
    }
    .wx-hint-ico { flex: 0 0 auto; display: flex; color: var(--accent); }
    .wx-hint-txt { flex: 1; font-size: .72rem; line-height: 1.6; color: var(--text); }
    .wx-hint .wx-wet { color: #2563eb; }
    .wx-hint-link {
      flex: 0 0 auto; background: none; border: none; cursor: pointer;
      font-family: inherit; font-size: .7rem; font-weight: 800; color: var(--accent);
    }
    .wx-hint-link:hover { text-decoration: underline; }

    /* ── آیکن‌های SVG ── */
    .wx-svg { display: block; overflow: visible; }
    .wx-svg--sm { width: 26px; height: 26px; }
    .wx-svg--md { width: 34px; height: 34px; }
    .wx-svg--lg { width: 62px; height: 62px; }
    .wx-svg .wx-sun    { fill: #ffc93c; }
    .wx-svg .wx-rays   { stroke: #ffc93c; stroke-width: 2.1; stroke-linecap: round; fill: none;
                         transform-origin: 16px 16px; animation: wx-spin 14s linear infinite; }
    .wx-svg .wx-sun--sm .wx-rays { stroke-width: 1.8; transform-origin: 11.5px 11px; }
    .wx-svg .wx-moon   { fill: #ffe9a8; }
    .wx-svg .wx-cloud  { fill: #ffffff; }
    .wx-svg .wx-drops  { stroke: #8ecbff; stroke-width: 2.2; stroke-linecap: round; fill: none; }
    .wx-svg .wx-drops path { animation: wx-fall 1.35s ease-in infinite; }
    .wx-svg .wx-flakes { fill: #dff0ff; }
    .wx-svg .wx-flakes circle { animation: wx-fall 2s ease-in-out infinite; }
    .wx-svg .wx-bolt   { fill: #ffd23f; animation: wx-flash 2.6s ease-in-out infinite; }
    .wx-svg .wx-fog    { stroke: rgba(255,255,255,.75); stroke-width: 2.2; stroke-linecap: round; fill: none; }

    /* آیکن‌های داخل فهرست روزها روی زمینهٔ روشن هستند، پس ابر باید تیره‌تر باشد */
    .wx-days .wx-svg .wx-cloud,
    .wx-hint .wx-svg .wx-cloud { fill: #b9c6d4; }
    .wx-days .wx-svg .wx-fog,
    .wx-hint .wx-svg .wx-fog   { stroke: #b9c6d4; }
    [data-theme="dark"] .wx-days .wx-svg .wx-cloud,
    [data-theme="dark"] .wx-hint .wx-svg .wx-cloud { fill: #7f8ea0; }

    @keyframes wx-spin  { to { transform: rotate(360deg); } }
    @keyframes wx-fall  { 0% { opacity: 0; transform: translateY(-3px); }
                          35% { opacity: 1; }
                          100% { opacity: 0; transform: translateY(5px); } }
    @keyframes wx-flash { 0%,72%,100% { opacity: 1; } 78% { opacity: .25; } 84% { opacity: 1; } 90% { opacity: .4; } }

    @media (prefers-reduced-motion: reduce) {
      .wx-svg .wx-rays, .wx-svg .wx-drops path,
      .wx-svg .wx-flakes circle, .wx-svg .wx-bolt { animation: none; }
    }

    /* ── اسکلتون بارگذاری ── */
    .wx-card--loading .wx-now { background: linear-gradient(135deg,#5b6b7d 0%,#8fa2b4 100%); }
    .wx-sk {
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(125,125,125,.14) 25%, rgba(125,125,125,.26) 37%, rgba(125,125,125,.14) 63%);
      background-size: 400% 100%;
      animation: wx-shimmer 1.3s ease-in-out infinite;
    }
    .wx-sk--icon { width: 56px; height: 56px; border-radius: 50%; background-color: rgba(255,255,255,.25); }
    .wx-sk--line { height: 14px; margin: 6px 0; }
    .wx-sk--row  { height: 26px; margin: 8px 6px; }
    @keyframes wx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

    /* ── دسکتاپ: کمی بازتر ── */
    @media (min-width: 900px) {
      .wx-now-temp { font-size: 2.4rem; }
      .wx-day { grid-template-columns: 5rem 2.2rem 3.1rem 2.3rem minmax(70px,1fr) 2.3rem; padding: 8px 10px; }
    }
    @media (max-width: 380px) {
      .wx-day { grid-template-columns: 3.8rem 1.8rem 2.5rem 1.9rem minmax(28px,1fr) 1.9rem; gap: 4px; }
      .wx-day-name { font-size: .72rem; }
    }