/* ============================================================
   VIEW-BUSINESS PAGE STYLES  (style/viewcss.css)
   Fully responsive: small phones (320px) → large laptops (1600px+)

   Sizing strategy: clamp(MIN, FLUID, MAX) — text & spacing scale
   smoothly with screen width, so nothing looks oversized on
   mobile or undersized on big laptop screens.
   Breakpoints:
     ≤ 380px   very small phones (extra compact)
     ≤ 600px   phones
     601–1023  tablets
     ≥ 1024px  laptops
     ≥ 1440px  large laptops / desktops
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#1976d2; --primary-dk:#0d47a1; --primary-lt:#e3f2fd;
  --accent:#ff5722; --green:#10b981; --yellow:#f59e0b; --muted:#64748b;
  --line:#e2e8f0; --bg:#f0f4f8; --shadow:0 2px 12px rgba(0,0,0,.07); --radius:14px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{font-family:'Poppins',sans-serif;background:var(--bg);color:#1e293b;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ===== HEADER ===== */
.topnav{
  position:sticky;top:0;z-index:50;background:#0d47a1;border-bottom:1px solid var(--line);
  box-shadow:0 1px 6px rgba(0,0,0,.04);
}
.topnav-inner{
  max-width:1040px;margin:0 auto;display:flex;align-items:center;
  gap:clamp(8px,2vw,12px);
  padding:clamp(8px,2vw,12px) clamp(10px,3vw,16px);
}
.back-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:clamp(34px,9vw,40px);height:clamp(34px,9vw,40px);
  border-radius:10px;border:1.5px solid var(--line);
  background:#fff;color:#475569;cursor:pointer;transition:.15s;
}
.back-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-lt)}
.back-btn:active{transform:scale(.94)}
.back-btn .material-icons-outlined{font-size:clamp(18px,5vw,22px)}
.brand{font-size:clamp(18px,5vw,25px);font-weight:800;color:#fff;white-space:nowrap}
.brand span{color:white;font-size:inherit}

/* ===== LAYOUT ===== */
.wrap{
  max-width:1040px;margin:0 auto;
  padding:clamp(10px,2.5vw,16px) clamp(10px,3vw,16px) clamp(72px,16vw,84px);
}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:clamp(11px,3vw,14px);
  box-shadow:var(--shadow);margin-bottom:clamp(10px,2.5vw,14px);overflow:hidden;
}
.panel-pad{padding:clamp(13px,3.5vw,18px)}
.sec-title{
  font-size:clamp(13.5px,3.8vw,16px);font-weight:700;
  margin-bottom:clamp(9px,2.5vw,12px);display:flex;align-items:center;gap:8px;
}
.sec-title .material-icons-outlined{font-size:clamp(17px,4.5vw,20px);color:var(--primary)}

/* ===== HERO GALLERY ===== */
/* object-fit:contain + dark backdrop = FULL photo always visible,
   never awkwardly cropped, on every screen size. */
.hero-media{position:relative;background:#111827;height:clamp(200px,52vw,340px)}
.hero-media .ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:clamp(44px,14vw,72px);font-weight:800;
}
.gallery{position:absolute;inset:0;overflow:hidden;touch-action:pan-y}
.gallery-track{display:flex;height:100%;width:100%;transition:transform .35s ease;cursor:grab}
.gallery-track:active{cursor:grabbing}
.gallery-slide{flex:0 0 100%;height:100%;position:relative;background:#111827}
.gallery-slide img{
  width:100%;height:100%;object-fit:contain;position:absolute;inset:0;pointer-events:none;
}
.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:clamp(28px,7vw,34px);height:clamp(28px,7vw,34px);
  border:none;border-radius:50%;
  background:rgba(15,23,42,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.gallery-nav .material-icons-outlined{font-size:clamp(18px,4.5vw,22px)}
.gallery-nav:hover{background:rgba(15,23,42,.8)}
.gallery-prev{left:8px}
.gallery-next{right:8px}
.gallery-dots{position:absolute;bottom:9px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2}
.gallery-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.gallery-dot.active{background:#fff}
.photo-count{
  position:absolute;bottom:9px;right:9px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  background:rgba(15,23,42,.75);color:#fff;
  font-size:clamp(10px,2.6vw,11.5px);font-weight:600;padding:3px 8px;border-radius:20px;
}
.photo-count .material-icons-outlined{font-size:clamp(12px,3vw,14px)}
.verified{
  position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:4px;
  background:rgba(15,23,42,.82);color:#fff;
  font-size:clamp(9.5px,2.6vw,11px);font-weight:600;
  padding:4px 9px;border-radius:20px;z-index:2;
}
.verified .material-icons-outlined{font-size:clamp(12px,3vw,14px);color:#38bdf8}

/* ===== HERO INFO ===== */
.biz-head{padding:clamp(13px,3.5vw,18px)}
.biz-name{
  font-size:clamp(16.5px,4.6vw,23px);font-weight:800;line-height:1.25;
  margin-bottom:clamp(5px,1.5vw,8px);word-break:break-word;
}
.rating-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:clamp(5px,1.5vw,8px)}
.rating-pill{
  display:inline-flex;align-items:center;gap:3px;background:var(--green);color:#fff;
  font-size:clamp(11px,3vw,13px);font-weight:700;padding:2px 8px;border-radius:6px;
}
.rating-pill .material-icons-outlined{font-size:clamp(12px,3.2vw,15px)}
.rating-count{font-size:clamp(11px,3vw,13px);color:var(--muted);font-weight:500}
.exp-tag{
  font-size:clamp(10px,2.7vw,11.5px);font-weight:600;color:var(--primary);
  background:var(--primary-lt);padding:2px 8px;border-radius:6px;
}
.biz-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:clamp(11.5px,3.1vw,13px);color:#475569;margin-bottom:clamp(5px,1.5vw,8px);
}
.biz-meta .material-icons-outlined{font-size:clamp(14px,3.6vw,16px);color:var(--muted)}
.biz-meta .dot{width:3px;height:3px;border-radius:50%;background:#cbd5e1}
.cat-link{color:var(--primary);font-weight:600}
.open-status{display:inline-flex;align-items:center;gap:6px;font-size:clamp(11.5px,3.1vw,13px);font-weight:600}
.open-status .led{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.open-status.open{color:var(--green)}
.open-status.open .led{background:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.open-status.closed{color:#dc2626}
.open-status.closed .led{background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.15)}

/* ===== ACTION BUTTONS ===== */
.action-row{
  display:flex;gap:clamp(6px,1.6vw,8px);
  padding:0 clamp(13px,3.5vw,18px) clamp(13px,3.5vw,18px);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.action-row::-webkit-scrollbar{display:none}
.act{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:clamp(62px,16vw,82px);
  padding:clamp(8px,2.2vw,12px) clamp(6px,1.6vw,10px);
  border-radius:clamp(10px,2.6vw,12px);border:1.5px solid var(--line);
  background:#fff;font-size:clamp(10px,2.7vw,12px);font-weight:600;color:#334155;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:.15s;flex:1;
}
.act .material-icons-outlined{font-size:clamp(17px,4.6vw,22px)}
.act:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-lt)}
.act.primary{background:var(--green);border-color:var(--green);color:#fff}
.act.primary:hover{filter:brightness(.95)}
.act.wa{background:#25d366;border-color:#25d366;color:#fff}
.act.wa:hover{filter:brightness(.95)}
.act.enq{background:#fff;border-color:var(--accent);color:var(--accent)}
.act.enq:hover{background:#fff5f2}

/* ===== SECTION TABS ===== */
.tabs{
  position:sticky;top:clamp(52px,13vw,64px);z-index:40;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);margin-bottom:clamp(10px,2.5vw,14px);
  display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  flex:1;text-align:center;
  padding:clamp(9px,2.6vw,13px) clamp(10px,2.6vw,16px);
  font-size:clamp(11.5px,3.1vw,13.5px);font-weight:600;color:#475569;
  border-bottom:3px solid transparent;white-space:nowrap;
}
.tabs a.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ===== OVERVIEW ===== */
.summary-text{font-size:clamp(12px,3.2vw,13.5px);color:#334155;line-height:1.7}
.addr-box{display:flex;gap:10px;align-items:flex-start;margin-top:4px}
.addr-box .material-icons-outlined{font-size:clamp(17px,4.4vw,20px);color:var(--primary);flex-shrink:0;margin-top:2px}
.addr-box p{font-size:clamp(12px,3.2vw,13.5px);color:#334155;line-height:1.6;flex:1;word-break:break-word}
.addr-actions{display:flex;gap:8px;margin-top:clamp(9px,2.4vw,12px);flex-wrap:wrap}
.mini-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:clamp(6px,1.8vw,8px) clamp(11px,2.8vw,14px);border-radius:9px;
  border:1.5px solid var(--line);background:#fff;
  font-size:clamp(11px,2.9vw,12.5px);font-weight:600;color:#475569;
  cursor:pointer;font-family:inherit;transition:.15s;
}
.mini-btn:hover{border-color:var(--primary);color:var(--primary)}
.mini-btn .material-icons-outlined{font-size:clamp(14px,3.4vw,16px)}

/* ===== QUICK INFO ===== */
.qi-row{display:flex;align-items:flex-start;gap:clamp(9px,2.4vw,12px);padding:clamp(8px,2.4vw,11px) 0;border-bottom:1px solid #f1f5f9}
.qi-row:last-child{border-bottom:none}
.qi-row .material-icons-outlined{font-size:clamp(17px,4.4vw,20px);color:var(--primary);flex-shrink:0;margin-top:1px}
.qi-row .lbl{font-size:clamp(10px,2.6vw,11.5px);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.qi-row .val{font-size:clamp(12px,3.2vw,13.5px);color:#1e293b;font-weight:500;margin-top:2px;word-break:break-word}

/* ===== REVIEWS ===== */
.rev-summary{display:flex;gap:clamp(14px,4vw,22px);align-items:center;flex-wrap:wrap;margin-bottom:clamp(12px,3vw,16px)}
.rev-big{text-align:center}
.rev-big .num{font-size:clamp(30px,8.5vw,42px);font-weight:800;color:#1e293b;line-height:1}
.rev-big .stars{color:var(--yellow);font-size:clamp(13px,3.6vw,16px);margin:4px 0}
.rev-big .cnt{font-size:clamp(10.5px,2.8vw,12px);color:var(--muted)}
.rev-bars{flex:1;min-width:min(200px,100%)}
.rbar{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.rbar .s{font-size:clamp(10.5px,2.8vw,12px);font-weight:600;color:#475569;width:26px}
.rbar .track{flex:1;height:7px;background:#f1f5f9;border-radius:5px;overflow:hidden}
.rbar .fill{height:100%;background:var(--green);border-radius:5px}
.rbar .c{font-size:clamp(10px,2.7vw,11.5px);color:var(--muted);width:28px;text-align:right}
.write-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:clamp(9px,2.5vw,11px) clamp(14px,3.6vw,18px);border-radius:10px;
  background:var(--primary);color:#fff;border:none;
  font-size:clamp(12px,3.2vw,13.5px);font-weight:600;
  cursor:pointer;font-family:inherit;
}
.write-btn:hover{background:var(--primary-dk)}
.write-btn .material-icons-outlined{font-size:clamp(15px,4vw,18px)}
.review-item{padding:clamp(10px,2.8vw,14px) 0;border-top:1px solid #f1f5f9}
.review-item .rhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.review-item .ravatar{
  width:clamp(32px,8.5vw,38px);height:clamp(32px,8.5vw,38px);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:clamp(13px,3.6vw,16px);flex-shrink:0;
}
.review-item .rname{font-size:clamp(12px,3.2vw,13.5px);font-weight:600}
.review-item .rdate{font-size:clamp(10px,2.7vw,11.5px);color:var(--muted)}
.review-item .rstars{
  display:inline-flex;align-items:center;gap:2px;background:var(--green);color:#fff;
  font-size:clamp(10px,2.7vw,11.5px);font-weight:700;padding:1px 7px;border-radius:5px;
}
.review-item .rstars .material-icons-outlined{font-size:clamp(10px,2.8vw,12px)}
.review-item .rtext{font-size:clamp(11.5px,3.1vw,13px);color:#334155;line-height:1.6;margin-top:4px;word-break:break-word}
.rreply{
  margin-top:10px;margin-left:clamp(8px,2.4vw,12px);
  padding:clamp(8px,2.2vw,10px) clamp(9px,2.5vw,12px);background:#f8fafc;
  border-left:3px solid var(--primary);border-radius:0 8px 8px 0;
}
.rreply-label{
  display:inline-flex;align-items:center;gap:5px;
  font-size:clamp(10px,2.7vw,11.5px);font-weight:700;
  color:var(--primary);margin-bottom:4px;
}
.rreply-label .material-icons-outlined{font-size:clamp(12px,3vw,14px)}
.rreply p{font-size:clamp(11px,2.9vw,12.5px);color:#475569;line-height:1.6;word-break:break-word}
.no-reviews{font-size:clamp(11.5px,3.1vw,13px);color:var(--muted);padding:8px 0}

/* star picker in review form */
.star-picker{display:flex;gap:6px;margin-top:4px}
.star-picker button{background:none;border:none;cursor:pointer;padding:2px;color:#cbd5e1}
.star-picker button .material-icons-outlined{font-size:clamp(26px,7vw,32px)}
.star-picker button.on{color:var(--yellow)}

/* ===== SIMILAR ===== */
.sim-scroll{display:flex;gap:clamp(9px,2.4vw,12px);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none}
.sim-scroll::-webkit-scrollbar{display:none}
.sim-card{
  flex:0 0 clamp(148px,40vw,180px);
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:.15s;
}
.sim-card:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.sim-media{height:clamp(84px,22vw,100px);background:#eef2f7;position:relative}
.sim-media img{width:100%;height:100%;object-fit:cover}
.sim-media .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(26px,7vw,32px);font-weight:800}
.sim-body{padding:clamp(8px,2.2vw,10px) clamp(9px,2.5vw,12px)}
.sim-name{
  font-size:clamp(11.5px,3.1vw,13px);font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sim-meta{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.sim-rate{
  display:inline-flex;align-items:center;gap:2px;background:var(--green);color:#fff;
  font-size:clamp(9.5px,2.5vw,10.5px);font-weight:700;padding:1px 6px;border-radius:5px;
}
.sim-rate .material-icons-outlined{font-size:clamp(10px,2.6vw,11px)}
.sim-area{font-size:clamp(10px,2.6vw,11px);color:var(--muted)}

/* ===== FAQ ===== */
.faq-item{border-top:1px solid #f1f5f9}
.faq-item:first-of-type{border-top:none}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:clamp(10px,2.8vw,13px) 0;background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:clamp(12px,3.2vw,13.5px);font-weight:600;color:#1e293b;text-align:left;line-height:1.4;
}
.faq-q .material-icons-outlined{font-size:clamp(17px,4.4vw,20px);color:var(--muted);transition:.2s;flex-shrink:0}
.faq-item.open .faq-q .material-icons-outlined{transform:rotate(180deg);color:var(--primary)}
.faq-a{display:none;font-size:clamp(11.5px,3.1vw,13px);color:#475569;line-height:1.65;padding-bottom:clamp(10px,2.8vw,14px)}
.faq-item.open .faq-a{display:block}

/* ===== STICKY BOTTOM BAR (mobile) ===== */
.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.08);
  display:flex;gap:clamp(8px,2vw,10px);
  padding:clamp(8px,2vw,10px) clamp(10px,3vw,14px);
  padding-bottom:calc(clamp(8px,2vw,10px) + env(safe-area-inset-bottom));
}
.bb-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:clamp(10px,2.8vw,13px);border-radius:10px;
  font-size:clamp(12.5px,3.4vw,14px);font-weight:700;border:none;
  cursor:pointer;font-family:inherit;
}
.bb-btn .material-icons-outlined{font-size:clamp(16px,4.2vw,19px)}
.bb-call{background:var(--green);color:#fff}
.bb-enq{background:#fff;color:var(--accent);border:1.5px solid var(--accent)}

/* ===== MODAL ===== */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:100;
  align-items:flex-end;justify-content:center;padding:0;
}
.modal-overlay.open{display:flex}
.modal{
  background:#fff;width:100%;max-width:440px;border-radius:16px 16px 0 0;
  padding:clamp(15px,4vw,20px);animation:slideup .22s ease;max-height:90vh;overflow-y:auto;
}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:4px}
.modal-head h3{font-size:clamp(15px,4vw,17px);font-weight:700}
.modal-head p{font-size:clamp(11px,3vw,12.5px);color:var(--muted);margin-top:2px}
.modal-close{background:none;border:none;cursor:pointer;color:var(--muted)}
.modal-close .material-icons-outlined{font-size:clamp(21px,5.4vw,24px)}
.fld{margin-top:clamp(9px,2.5vw,12px)}
.fld label{display:block;font-size:clamp(11px,2.9vw,12px);font-weight:600;color:#475569;margin-bottom:5px}
.fld input,.fld textarea{
  width:100%;padding:clamp(9px,2.5vw,11px) clamp(11px,3vw,13px);
  border:1.5px solid #cbd5e1;border-radius:9px;
  font-size:max(14px,1rem);font-family:inherit;outline:none;color:#1e293b;
}
/* NOTE: input font stays ≥16px equivalent via max(14px,1rem) so iOS
   doesn't auto-zoom when the keyboard opens. Do not shrink further. */
.fld input:focus,.fld textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(25,118,210,.08)}
.modal-alert{display:none;margin-top:12px;padding:10px 12px;border-radius:8px;font-size:clamp(11.5px,3.1vw,13px)}
.modal-alert.err{display:block;background:#ffebee;color:#c62828}
.modal-alert.ok{display:block;background:#e8f5e9;color:#1b5e20}
.modal-submit{
  width:100%;margin-top:14px;padding:clamp(11px,3vw,13px);
  background:var(--primary);color:#fff;border:none;
  border-radius:10px;font-size:clamp(13.5px,3.7vw,15px);font-weight:600;cursor:pointer;font-family:inherit;
}
.modal-submit:hover{background:var(--primary-dk)}
.modal-submit:disabled{background:#b0bec5;cursor:not-allowed}

/* toast for copy/share */
.toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);
  background:#1e293b;color:#fff;font-size:clamp(11.5px,3.1vw,13px);font-weight:500;
  padding:9px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:120;
  max-width:88vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* ---- Very small phones (≤380px): extra compact ---- */
@media (max-width:380px){
  .hero-media{height:180px}
  .act{min-width:58px}
  .rev-summary{gap:12px}
  .sim-card{flex-basis:138px}
}

/* ---- Phones (≤600px) ---- */
@media (max-width:600px){
  .tabs{top:52px}
  .modal{max-width:100%}
  /* action buttons: equal-width row, no overflow feel */
  .action-row{gap:6px}
}

/* ---- Tablets (601–1023px) ---- */
@media (min-width:601px){
  .modal-overlay{align-items:center;padding:20px}
  .modal{border-radius:16px}
}
@media (min-width:601px) and (max-width:1023px){
  .hero-media{height:320px}
}

/* ---- Laptops (≥768px): hide mobile bottom bar ---- */
@media (min-width:768px){
  .bottom-bar{display:none}
  .wrap{padding-bottom:40px}
}

/* ---- Laptops (≥1024px) ---- */
@media (min-width:1024px){
  .hero-media{height:380px}
  .tabs{top:68px}
  .tabs a{padding:14px 18px;font-size:14px}
  .panel-pad{padding:20px 24px}
  .biz-head{padding:20px 24px}
  .action-row{padding:0 24px 20px}
  .act{flex:0 1 130px;min-width:110px}
  .sec-title{font-size:16.5px}
  .summary-text,.addr-box p,.qi-row .val{font-size:14px}
  .faq-q{font-size:14px}
  .faq-a{font-size:13.5px}
  .review-item .rtext{font-size:13.5px}
  .sim-card{flex-basis:200px}
  .sim-media{height:112px}
}

/* ---- Large laptops / desktops (≥1440px) ---- */
@media (min-width:1440px){
  .wrap,.topnav-inner{max-width:1160px}
  .hero-media{height:420px}
  .biz-name{font-size:26px}
  .summary-text,.addr-box p,.qi-row .val{font-size:14.5px}
  .sim-card{flex-basis:210px}
}