/* ============================================================
   App shell redesign — re-themes the logged-in experience (listings,
   listing detail, my listings, new/edit listing, saved homes, messaging,
   roommates) to match the cream / Cormorant Garamond + Inter / olive
   brand established on the landing page and auth pages.

   How this works: static/css/styles.css already routes almost every
   rule through CSS custom properties (--forest, --lime, --mint, --fd,
   --fb, --border, --sh-sm, --r-lg, …) instead of hardcoded values —
   including inline style="...var(--forest)..." attributes baked into
   the templates. Redefining those properties once, scoped under
   .app-redesign (the new body class), re-themes the entire shell —
   sidebar, cards, buttons, badges, chat bubbles, forms — without
   touching a single template. Only the handful of truly hardcoded
   values (#fff, literal hex) below need a direct selector override.
   ============================================================ */

.app-redesign{
  --white:#f8f6ef; --bg:#f2eee5; --surface:#f8f6ef; --surface-alt:#ede8dd;
  --mint:#ede8dd; --mint-soft:#f2eee5;
  --lime:#8e9c75; --lime-dark:#7c8a64;
  --forest:#1c2016; --forest-800:#12140f; --forest-600:#2a3322;
  --green:#7c8a64;
  --text:#171512; --text-2:rgba(23,21,18,.62); --text-3:rgba(23,21,18,.42);
  --on-dark:#f2eee5; --on-dark-2:rgba(242,238,229,.62); --on-lime:#171512;
  --border:rgba(23,21,18,.08); --border-2:rgba(23,21,18,.16);
  --danger:#b3543f; --warning:#a8702f; --star:#c9a227;
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-xl:28px; --pill:999px;
  --sh-sm:0 4px 14px rgba(23,21,18,.07);
  --sh:0 14px 34px rgba(23,21,18,.10);
  --sh-lg:0 30px 70px rgba(23,21,18,.16);
  --fd:'Inter',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
}

/* ---------- Display type — Cormorant Garamond for headings, prices,
   stat values and the sidebar wordmark; everything else (buttons,
   nav, badges, card titles) stays Inter, matching the landing page. ---------- */
.app-redesign h1,
.app-redesign h2,
.app-redesign h3,
.app-redesign h4{
  font-family:'Cormorant Garamond', serif; font-weight:500; letter-spacing:-.01em;
}
.app-redesign .logo .wm{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:21px; }
.app-redesign .prop-card .price{ font-family:'Cormorant Garamond', serif; font-weight:600; font-size:17px; }
.app-redesign .stat .v{ font-family:'Cormorant Garamond', serif; font-weight:500; }

/* ---------- Buttons: one filled style (ink/cream), matching the
   landing page — there is no separate "lime" primary button in this
   brand, so .btn-primary and .btn-dark render identically. ---------- */
.app-redesign .btn-primary{ background:var(--forest); color:var(--on-dark); }
.app-redesign .btn-primary:hover{ background:#2a2621; }
.app-redesign .btn{ font-weight:500; }

/* ---------- Hardcoded (non-variable) colors in styles.css that need
   a direct override to pick up the cream theme. ---------- */
.app-redesign .topbar{ background:var(--white); border-bottom:1px solid var(--border); }
.app-redesign .msg .list{ background:var(--white); }
.app-redesign .bubble.them{ background:var(--white); border-color:var(--border); }
.app-redesign .prop-card .fav{ background:var(--white); }
.app-redesign .badge-warn{ background:#f3e6da; color:var(--warning); }
.app-redesign .drawer-backdrop{ background:rgba(23,21,18,.5); }
.app-redesign .sidebar.open{ box-shadow:0 0 60px rgba(23,21,18,.4); }

/* ---------- Sidebar polish — subtle depth to match the dark ink
   panels used elsewhere in the brand (auth page, pricing card). ---------- */
.app-redesign .sidebar{
  background:linear-gradient(165deg, #202519 0%, #171a12 100%);
}
.app-redesign .sidebar .snav a{ transition:background .15s ease, color .15s ease; }

/* ---------- Verified badge + focus ring accent ---------- */
.app-redesign :focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

/* ---------- Radio / checkbox groups on Django-rendered forms.
   Django 5's default RadioSelect/CheckboxSelectMultiple render each
   option as <div><label><input>…text</label></div>, not <ul><li> —
   targeting "label with an input as its first child" catches that
   pattern regardless of the widget's own class name, while leaving
   single BooleanField checkboxes (label and input as siblings, per
   partials/formfields.html) untouched. ---------- */
.app-redesign .form .fld label:has(> input[type=radio]),
.app-redesign .form .fld label:has(> input[type=checkbox]){
  display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--text);
  background:var(--surface-alt); border:1px solid var(--border); padding:9px 13px;
  border-radius:var(--pill); cursor:pointer; margin:4px 6px 0 0;
}
.app-redesign .form .fld label:has(> input[type=radio]:checked),
.app-redesign .form .fld label:has(> input[type=checkbox]:checked){
  background:var(--forest); color:var(--on-dark); border-color:var(--forest);
}

/* ---------- Property card: slightly warmer hover lift, matching the
   landing page's card grad-border feel. ---------- */
.app-redesign .prop-card{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.app-redesign .prop-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }

/* ---------- Chat bubble: ink instead of near-black forest, unchanged
   shape — just the themed variable, called out here for clarity. ---------- */
.app-redesign .bubble.me{ background:var(--forest); color:var(--on-dark); }

/* ---------- Note / info banner: sage-tinted, matching the landing
   page's note/info card treatment. ---------- */
.app-redesign .note{ background:#eef1e8; color:var(--forest); }
.app-redesign .note .ic{ color:var(--green); }

/* ============================================================
   Listings page — horizontal filter bar + rich property cards.
   Structure and interaction ported from the reference design at
   drentals.ng/listings/ (dark glassmorphism + emerald accent);
   every color below is re-mapped to the cream/ink/olive brand
   instead. Class names kept identical to the reference on purpose.
   ============================================================ */

/* FILTERS BAR — horizontal, sits above the grid */
.app-redesign .filters-section{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; margin-bottom:32px; box-shadow:var(--sh-sm);
}
.app-redesign .filters-container{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:18px;
}
.app-redesign .filter-group{ display:flex; flex-direction:column; gap:8px; }
.app-redesign .filter-group label{
  font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; color:var(--text-2);
  display:flex; align-items:center; gap:6px;
}
.app-redesign .filter-group label .ic{ width:14px; height:14px; color:var(--green); }
.app-redesign .filter-group select,
.app-redesign .filter-group input{
  padding:12px 14px; background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--text); font-size:14px; font-family:'Inter', sans-serif;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.app-redesign .filter-group select:focus,
.app-redesign .filter-group input:focus{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(142,156,117,.2); }
.app-redesign .filter-actions{ display:flex; gap:12px; align-items:flex-end; }
.app-redesign .apply-filters{
  padding:12px 24px; background:var(--forest); color:var(--on-dark); border:none;
  border-radius:var(--r-md); font-weight:600; font-family:'Inter', sans-serif; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.app-redesign .apply-filters:hover{ background:#2a2621; transform:translateY(-2px); }
.app-redesign .reset-filters{
  padding:12px 24px; background:var(--surface-alt); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-md); font-weight:600; font-family:'Inter', sans-serif; cursor:pointer;
  text-align:center; transition:background .2s ease;
}
.app-redesign .reset-filters:hover{ background:var(--border-2); }

/* LISTINGS HEADER — count + sort */
.app-redesign .listings-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border);
}
.app-redesign .listings-count{ font-size:15px; color:var(--text-2); }
.app-redesign .sort-select{
  padding:10px 14px; background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--text); font-size:14px; font-family:'Inter', sans-serif;
}

/* GRID */
.app-redesign .listings-grid{
  display:grid; grid-template-columns:1fr; gap:26px; margin-bottom:50px;
}
@media(min-width:640px){ .app-redesign .listings-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1080px){ .app-redesign .listings-grid{ grid-template-columns:repeat(3, 1fr); } }
@media(min-width:1400px){ .app-redesign .listings-grid{ grid-template-columns:repeat(4, 1fr); } }

/* PROPERTY CARD */
.app-redesign .property-card{
  position:relative; background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.app-redesign .property-card:hover{
  transform:translateY(-6px); box-shadow:var(--sh); border-color:var(--border-2);
}
.app-redesign .property-image{
  width:100%; height:200px; object-fit:cover; border-bottom:1px solid var(--border); display:block;
}
.app-redesign .property-badge{
  position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  background:var(--green); color:#fff; padding:5px 12px; border-radius:var(--pill);
  font-size:11.5px; font-weight:600; font-family:'Inter', sans-serif;
}
.app-redesign .property-badge .ic{ width:13px; height:13px; }
.app-redesign .property-content{ padding:20px; flex-grow:1; display:flex; flex-direction:column; }
.app-redesign .property-header{ margin-bottom:12px; }
.app-redesign .property-title{
  font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:600; line-height:1.3;
  margin-bottom:4px; color:var(--forest);
}
.app-redesign .property-location{
  color:var(--text-2); font-size:13px; display:flex; align-items:center; gap:5px;
}
.app-redesign .property-location .ic{ color:var(--green); width:14px; height:14px; flex:none; }
.app-redesign .property-description{
  color:var(--text-2); font-size:13.5px; line-height:1.5; margin-bottom:16px; flex-grow:1;
}
.app-redesign .property-features{ display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.app-redesign .feature{ display:flex; align-items:center; gap:5px; color:var(--text-2); font-size:12.5px; }
.app-redesign .feature .ic{ color:var(--green); width:14px; height:14px; }
.app-redesign .property-footer{
  display:flex; justify-content:space-between; align-items:center; margin-top:auto; gap:10px;
}
.app-redesign .property-price{
  font-family:'Cormorant Garamond', serif; font-size:19px; font-weight:600; color:var(--forest);
}
.app-redesign .property-price span{
  font-size:12px; color:var(--text-2); font-weight:400; font-family:'Inter', sans-serif;
}
.app-redesign .view-details{
  padding:9px 18px; background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--pill); color:var(--text); font-weight:600; font-size:12.5px;
  font-family:'Inter', sans-serif; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.app-redesign .view-details:hover{ background:var(--forest); color:var(--on-dark); }

/* THREE-DOT MENU */
.app-redesign .property-more-options{ position:absolute; top:14px; right:14px; z-index:10; }
.app-redesign .more-options-btn{
  width:30px; height:30px; border:none; border-radius:var(--pill); background:rgba(23,21,18,.55);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease; backdrop-filter:blur(4px);
}
.app-redesign .more-options-btn:hover{ background:rgba(23,21,18,.8); transform:scale(1.08); }
.app-redesign .more-options-btn .ic{ width:16px; height:16px; transform:rotate(90deg); }
.app-redesign .options-dropdown{
  position:absolute; top:38px; right:0; background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-md); padding:6px; min-width:170px; opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:all .2s ease; box-shadow:var(--sh);
}
.app-redesign .property-more-options.active .options-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.app-redesign .save-property-btn{
  width:100%; display:flex; align-items:center; gap:9px; padding:9px 12px; background:none;
  border:none; border-radius:var(--r-sm); color:var(--text); font-size:13.5px;
  font-family:'Inter', sans-serif; cursor:pointer; transition:background .15s ease;
}
.app-redesign .save-property-btn:hover{ background:var(--mint); }
.app-redesign .save-property-btn .ic{ width:15px; height:15px; color:var(--green); }
.app-redesign .save-property-btn.saved{ color:var(--green); font-weight:600; }
.app-redesign .save-property-btn.saved .ic{ fill:var(--green); }

/* ============================================================
   Property detail page — structure ported from the reference
   design at drentals.ng/listings/1 (dark glass + emerald), colors
   remapped to the cream/ink/olive brand. Classes prefixed "pd-"
   since the reference reused names (.property-title etc.) that
   already belong to the listing-card CSS above.
   ============================================================ */

/* HEADER */
.app-redesign .pd-header{ margin:0 0 28px; }
.app-redesign .pd-breadcrumb{
  display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:13px; margin-bottom:20px; flex-wrap:wrap;
}
.app-redesign .pd-breadcrumb a{ color:var(--text-2); transition:color .2s ease; }
.app-redesign .pd-breadcrumb a:hover{ color:var(--forest); }
.app-redesign .pd-breadcrumb strong{ color:var(--forest); font-weight:600; }
.app-redesign .pd-title-section{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
}
.app-redesign .pd-title-wrapper{ flex:1; min-width:260px; }
.app-redesign .pd-title{
  font-family:'Cormorant Garamond', serif; font-size:clamp(28px, 4vw, 40px); font-weight:600;
  line-height:1.2; margin-bottom:10px; color:var(--forest);
}
.app-redesign .pd-location{ display:flex; align-items:center; gap:7px; color:var(--text-2); font-size:14px; }
.app-redesign .pd-location .ic{ color:var(--green); width:15px; height:15px; flex:none; }
.app-redesign .pd-status{
  display:inline-flex; align-items:center; gap:6px; background:var(--green); color:#fff;
  padding:6px 14px; border-radius:var(--pill); font-size:12.5px; font-weight:600; margin-top:12px;
}
.app-redesign .pd-price-section{ text-align:right; min-width:200px; }
.app-redesign .pd-price{ font-family:'Cormorant Garamond', serif; font-size:clamp(26px, 3.4vw, 36px); font-weight:600; color:var(--forest); }
.app-redesign .pd-price-period{ font-size:13.5px; color:var(--text-2); }

/* IMAGE CAROUSEL */
.app-redesign .pd-carousel{
  position:relative; width:100%; height:320px; border-radius:var(--r-lg); overflow:hidden;
  margin:26px 0 36px; background:var(--surface-alt); box-shadow:var(--sh-sm);
}
.app-redesign .pd-carousel-container{ width:100%; height:100%; position:relative; }
.app-redesign .pd-slide{
  width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; transition:opacity .5s ease;
}
.app-redesign .pd-slide.active{ opacity:1; }
.app-redesign .pd-slide-image{ width:100%; height:100%; object-fit:cover; display:block; }
.app-redesign .pd-video-overlay{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:rgba(23,21,18,.25); cursor:pointer;
}
.app-redesign .pd-video-overlay .ic{ width:56px; height:56px; color:#fff; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.app-redesign .pd-carousel-nav{
  position:absolute; top:0; left:0; width:100%; height:100%; display:flex;
  justify-content:space-between; align-items:center; padding:0 16px; pointer-events:none;
}
.app-redesign .pd-carousel-btn{
  pointer-events:auto; background:rgba(23,21,18,.55); border:none; color:#fff; width:42px; height:42px;
  border-radius:var(--pill); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .2s ease; z-index:10; backdrop-filter:blur(4px);
}
.app-redesign .pd-carousel-btn:hover{ background:rgba(23,21,18,.8); transform:scale(1.08); }
.app-redesign .pd-carousel-dots{
  position:absolute; bottom:16px; left:0; width:100%; display:flex; justify-content:center; gap:8px; z-index:10;
}
.app-redesign .pd-dot{
  width:9px; height:9px; background:rgba(255,255,255,.55); border-radius:50%; cursor:pointer; transition:all .2s ease;
}
.app-redesign .pd-dot.active{ background:#fff; transform:scale(1.25); }
@media(min-width:900px){ .app-redesign .pd-carousel{ height:460px; } }

/* VIDEO MODAL */
.app-redesign .pd-video-modal{
  display:none; position:fixed; inset:0; z-index:200; background:rgba(23,21,18,.85);
  align-items:center; justify-content:center; padding:20px;
}
.app-redesign .pd-video-modal.active{ display:flex; }
.app-redesign .pd-video-modal-content{ position:relative; width:100%; max-width:860px; }
.app-redesign .pd-video-modal-player{ width:100%; border-radius:var(--r-md); display:block; }
.app-redesign .pd-video-modal-close{
  position:absolute; top:-40px; right:0; background:none; border:none; color:#fff; font-size:30px;
  cursor:pointer; line-height:1;
}

/* CONTENT LAYOUT */
.app-redesign .pd-layout{ display:grid; grid-template-columns:1fr; gap:32px; margin-bottom:60px; }
@media(min-width:900px){ .app-redesign .pd-layout{ grid-template-columns:1fr 380px; } }

/* LEFT COLUMN */
.app-redesign .pd-main{
  background:var(--white); border-radius:var(--r-lg); padding:28px; border:1px solid var(--border); box-shadow:var(--sh-sm);
}
@media(min-width:900px){ .app-redesign .pd-main{ padding:38px; } }
.app-redesign .pd-section-title{
  font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:600; margin-bottom:18px;
  display:flex; align-items:center; gap:10px; color:var(--forest);
}
.app-redesign .pd-section-title .ic{ color:var(--green); width:19px; height:19px; }
.app-redesign .pd-description{ color:var(--text-2); line-height:1.7; margin-bottom:36px; font-size:15px; }

.app-redesign .pd-features-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px; margin-bottom:36px;
}
.app-redesign .pd-feature{
  background:var(--surface-alt); border-radius:var(--r-md); padding:18px; display:flex; flex-direction:column;
  align-items:center; text-align:center; transition:transform .2s ease, background .2s ease;
}
.app-redesign .pd-feature:hover{ background:var(--mint); transform:translateY(-3px); }
.app-redesign .pd-feature-icon{ color:var(--green); margin-bottom:12px; }
.app-redesign .pd-feature-icon .ic{ width:24px; height:24px; }
.app-redesign .pd-feature-name{ font-weight:600; font-size:13.5px; color:var(--forest); margin-bottom:4px; }
.app-redesign .pd-feature-value{ color:var(--text-2); font-size:12.5px; }

.app-redesign .pd-amenities{ margin-bottom:36px; }
.app-redesign .pd-amenities-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.app-redesign .pd-amenity{
  display:flex; align-items:center; gap:9px; padding:11px 14px; background:var(--surface-alt);
  border-radius:var(--r-sm); transition:background .2s ease; font-size:13.5px; color:var(--text);
}
.app-redesign .pd-amenity:hover{ background:var(--mint); }
.app-redesign .pd-amenity .ic{ color:var(--green); width:16px; height:16px; flex:none; }

.app-redesign .pd-rules{
  background:#eef1e8; border-left:4px solid var(--green); padding:20px 22px; border-radius:var(--r-md); margin-top:8px;
}
.app-redesign .pd-rules h3{ font-family:'Inter', sans-serif; font-size:14.5px; font-weight:700; color:var(--forest); display:flex; align-items:center; gap:8px; }
.app-redesign .pd-rules h3 .ic{ color:var(--green); width:16px; height:16px; }
.app-redesign .pd-rules-list{ list-style:none; margin-top:10px; }
.app-redesign .pd-rules-list li{ padding:6px 0; color:var(--text-2); display:flex; align-items:flex-start; gap:9px; font-size:13.5px; }
.app-redesign .pd-rules-list li .ic{ color:var(--green); width:15px; height:15px; margin-top:2px; flex:none; }

/* RIGHT COLUMN */
.app-redesign .pd-side{ display:flex; flex-direction:column; gap:18px; }
.app-redesign .pd-agent-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-sm);
}
.app-redesign .pd-agent-header{
  display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border);
}
.app-redesign .pd-agent-avatar{
  width:52px; height:52px; background:var(--forest); color:var(--on-dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:19px; flex:none;
  font-family:'Cormorant Garamond', serif;
}
.app-redesign .pd-agent-name{ font-size:17px; font-weight:600; color:var(--forest); margin-bottom:3px; }
.app-redesign .pd-agent-role{ color:var(--green); font-size:12.5px; font-weight:600; }
.app-redesign .pd-agent-company{ color:var(--text-2); font-size:13px; display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.app-redesign .pd-agent-company .ic{ color:var(--green); width:14px; height:14px; flex:none; }
.app-redesign .pd-agent-phone{
  margin-bottom:16px; padding:11px; background:#eef1e8; border-radius:var(--r-sm); text-align:center;
}
.app-redesign .pd-agent-phone a{ color:var(--forest); text-decoration:none; font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.app-redesign .pd-agent-phone .ic{ width:15px; height:15px; color:var(--green); }
.app-redesign .pd-contact-buttons{ display:flex; flex-direction:column; gap:12px; }
.app-redesign .pd-contact-btn{
  padding:14px; border-radius:var(--r-md); font-weight:600; font-size:14px; cursor:pointer;
  transition:all .2s ease; border:none; display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
}
.app-redesign .pd-message-btn{ background:var(--forest); color:var(--on-dark); }
.app-redesign .pd-message-btn:hover{ transform:translateY(-2px); box-shadow:var(--sh); }

.app-redesign .pd-actions{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-sm);
}
.app-redesign .pd-actions h3{ font-size:14.5px; font-weight:700; color:var(--forest); margin-bottom:16px; display:flex; align-items:center; gap:8px; font-family:'Inter', sans-serif; }
.app-redesign .pd-actions h3 .ic{ color:var(--green); width:16px; height:16px; }
.app-redesign .pd-action-buttons{ display:flex; flex-direction:column; gap:12px; }
.app-redesign .pd-save-btn{
  padding:14px; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-md);
  color:var(--text); font-weight:600; font-size:14px; cursor:pointer; transition:all .2s ease;
  display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
}
.app-redesign .pd-save-btn:hover{ background:var(--mint); transform:translateY(-2px); }
.app-redesign .pd-save-btn.saved{ background:var(--green); border-color:var(--green); color:#fff; }
.app-redesign .pd-save-btn.saved .ic{ fill:#fff; }
.app-redesign .pd-whatsapp-btn{ background:#25D366; border-color:#25D366; color:#fff; }
.app-redesign .pd-whatsapp-btn:hover{ background:#1fb856; transform:translateY(-2px); }