/* ───────────────────────────────────────────────────────────────
   PescaYa Charters widget — front-end styles.
   Ported from the design mockup (listing widget). All [data-*] hooks
   are scoped to .pcw-root (not body) so multiple widget instances on
   one page stay independent.
─────────────────────────────────────────────────────────────── */

@property --pyw-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.pcw-root {
  --blue:#1c9ee0; --gold:#f7b71d; --green:#1faa54;
  --ink:#1c2c39; --body:#5a6c79; --soft:#eef5fa; --line:#e3ecf2;
  --head:"Poppins",system-ui,sans-serif; --text:"Nunito Sans",system-ui,sans-serif;
  /* set per-instance by the widget; safe defaults here */
  --accent:#1c9ee0; --accent-deep:#1683bd; --cta:#f7b71d; --cta-ink:#1c2c39;
  --card-radius:16px; --card-shadow:0 13px 30px rgba(19,56,74,.13); --img-ratio:4 / 3;
  font-family:var(--text); color:var(--ink); box-sizing:border-box;
}
.pcw-root *, .pcw-root *::before, .pcw-root *::after { box-sizing:border-box; }

/* header */
.pcw-root .clw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 18px;}
.pcw-root .clw-eyebrow{font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 5px;}
.pcw-root .clw-h2{font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:-.4px;color:var(--ink);margin:0;line-height:1.15;}
.pcw-root .clw-nav{display:flex;gap:8px;flex:none;}
/* width/min-width/padding/color forced with !important to defend against
   themes that skin every <button> (the chevrons inherit currentColor). */
.pcw-root .clw-nav button{flex:0 0 38px !important;width:38px !important;height:38px !important;min-width:0 !important;min-height:0 !important;max-width:38px !important;padding:0 !important;margin:0 !important;border-radius:50% !important;border:1px solid var(--line);background:#fff !important;cursor:pointer;display:flex !important;align-items:center;justify-content:center;color:var(--ink) !important;line-height:0;box-shadow:0 4px 12px rgba(19,56,74,.08);transition:background .15s,transform .15s,opacity .15s;}
.pcw-root .clw-nav button:hover{background:var(--soft) !important;transform:translateY(-1px);}
.pcw-root .clw-nav button.off{opacity:.34;pointer-events:none;}
.pcw-root .clw-nav button svg{display:block;width:18px;height:18px;}
.pcw-root .clw-nav button svg path{stroke:currentColor;}

/* layout wrappers */
.pcw-root .clw-wrap.is-carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 16px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:#cfdce6 transparent;}
.pcw-root .clw-wrap.is-carousel::-webkit-scrollbar{height:8px;}
.pcw-root .clw-wrap.is-carousel::-webkit-scrollbar-thumb{background:#cfdce6;border-radius:4px;}
.pcw-root .clw-wrap.is-carousel .clw-card{flex:0 0 300px;scroll-snap-align:start;}
.pcw-root .clw-wrap.is-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;padding:6px 2px;}

@media (max-width:600px){
  .pcw-root .clw-wrap.is-carousel .clw-card{flex-basis:286px;}
  .pcw-root .clw-wrap.is-grid{grid-template-columns:1fr;}
}

/* card */
.pcw-root .clw-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--card-shadow);transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;}
.pcw-root .clw-card:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(19,56,74,.20);}
/* signature conic glow on hover */
.pcw-root .clw-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;
  background:conic-gradient(from var(--pyw-a,0deg),transparent 0 62%,var(--accent) 78%,#7fd4ff 86%,var(--gold) 93%,transparent 99% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 6px rgba(28,158,224,.45));}
.pcw-root .clw-card:hover::after{opacity:1;}

@media (prefers-reduced-motion:no-preference){
  .pcw-root .clw-card:hover::after{animation:pcwSpin 4.5s linear infinite;}
  @keyframes pcwSpin{to{--pyw-a:360deg;}}
  @keyframes pcwBreathe{0%{transform:scale(.985);opacity:.7;}60%{opacity:1;}100%{transform:scale(1);opacity:1;}}
  .pcw-root .clw-card.clw-breathe{animation:pcwBreathe .55s ease-out;}
}

/* image area */
.pcw-root .clw-imgwrap{position:relative;aspect-ratio:var(--img-ratio);overflow:hidden;background:var(--soft);}
.pcw-root .clw-cover{position:absolute;inset:0;}
.pcw-root .clw-slides{position:absolute;inset:0;display:flex;transition:transform .35s cubic-bezier(.4,.1,.2,1);}
.pcw-root .clw-slide{position:relative;flex:0 0 100%;height:100%;}
.pcw-root .clw-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.pcw-root .clw-cnav{position:absolute;top:50%;transform:translateY(-50%);width:30px !important;height:30px !important;min-width:0 !important;max-width:30px !important;padding:0 !important;margin:0 !important;border-radius:50% !important;border:none;background:rgba(255,255,255,.92) !important;cursor:pointer;display:flex !important;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(19,56,74,.22);opacity:0;transition:opacity .2s;z-index:2;color:#1c2c39 !important;line-height:0;}
.pcw-root .clw-cnav svg{display:block;}
.pcw-root .clw-cnav svg path{stroke:currentColor;}
.pcw-root .clw-cnav.prev{left:9px;} .pcw-root .clw-cnav.next{right:9px;}
.pcw-root .clw-imgwrap:hover .clw-cnav{opacity:1;}
.pcw-root .clw-dots{position:absolute;bottom:9px;left:0;right:0;display:flex;gap:5px;justify-content:center;z-index:2;}
.pcw-root .clw-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;transition:background .2s,width .2s;}
.pcw-root .clw-dots span.on{background:#fff;width:16px;border-radius:999px;}

/* badge */
.pcw-root .clw-badge{position:absolute;top:11px;left:11px;z-index:2;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:var(--head);font-weight:600;font-size:11px;color:var(--cta-ink);background:var(--cta);padding:5px 11px 5px 9px;border-radius:999px;box-shadow:0 5px 14px rgba(247,183,29,.45);}
.pcw-root .clw-badge b{font-weight:800;}
.pcw-root[data-badge="subtle"] .clw-badge{background:rgba(255,255,255,.94);color:var(--accent-deep);box-shadow:0 3px 10px rgba(19,56,74,.16);}
.pcw-root[data-badge="subtle"] .clw-badge b{color:var(--accent-deep);}
.pcw-root[data-badge="off"] .clw-badge{display:none;}

/* fish/species tag */
.pcw-root .clw-fish{position:absolute;top:11px;right:11px;z-index:2;white-space:nowrap;font-family:var(--head);font-weight:600;font-size:10.5px;letter-spacing:.02em;color:#fff;background:rgba(19,56,74,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:4px 9px;border-radius:999px;}

/* body */
.pcw-root .clw-body{padding:14px 16px 15px;display:flex;flex-direction:column;gap:4px;flex:1;}
.pcw-root .clw-row{display:flex;align-items:center;gap:7px;line-height:1.2;}
.pcw-root .clw-title{font-family:var(--head);font-weight:700;font-size:16px;line-height:1.2;color:var(--ink);margin:0 0 1px;letter-spacing:-.2px;}
.pcw-root .clw-loc{font-size:13px;color:var(--body);}
.pcw-root .clw-pin{color:var(--accent);display:flex;flex:none;}
.pcw-root .clw-loc span:last-child{font-weight:600;}

.pcw-root .clw-rating{font-size:13px;color:var(--body);gap:5px;}
.pcw-root .clw-rating b{font-family:var(--head);font-weight:700;color:var(--ink);font-size:13.5px;}
.pcw-root .clw-rlabel{font-weight:700;color:var(--ink);}
.pcw-root .clw-muted{color:#90a1ae;}
.pcw-root .clw-new{font-family:var(--head);font-weight:700;font-size:11px;color:var(--green);background:rgba(31,170,84,.12);padding:2px 8px;border-radius:999px;}

.pcw-root .clw-meta{display:flex;flex-wrap:wrap;gap:7px 14px;margin:1px 0;}
.pcw-root .clw-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;color:var(--body);}
.pcw-root .clw-cancel{font-size:13px;color:var(--green);font-weight:600;white-space:nowrap;}
.pcw-root .clw-avail{font-size:12.5px;color:var(--body);gap:7px;white-space:nowrap;}
.pcw-root .clw-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,170,84,.16);flex:none;}

/* info-row visibility */
.pcw-root[data-rating="0"] .clw-rating{display:none;}
.pcw-root[data-duration="0"] .clw-row-dur{display:none;}
.pcw-root[data-capacity="0"] .clw-row-cap{display:none;}
.pcw-root[data-cancel="0"] .clw-cancel{display:none;}
.pcw-root[data-avail="0"] .clw-avail{display:none;}

/* footer */
.pcw-root .clw-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:11px;border-top:1px solid #eef2f5;}
.pcw-root .clw-boat{flex:none;color:var(--accent-deep);width:36px;height:36px;border-radius:9px;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pcw-root .clw-boat img{width:26px;height:26px;object-fit:contain;display:block;}
.pcw-root .clw-price{display:flex;flex-direction:column;line-height:1.05;}
.pcw-root .clw-price small{font-size:10.5px;color:#90a1ae;text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-family:var(--head);}
.pcw-root .clw-price strong{font-family:var(--head);font-weight:800;font-size:18px;color:var(--ink);}
.pcw-root .clw-cta{margin-left:auto;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--head);font-weight:600;font-size:13px;color:var(--cta-ink);background:var(--cta);border-radius:999px;padding:10px 15px;white-space:nowrap;box-shadow:0 5px 14px rgba(247,183,29,.36);transition:transform .18s,filter .18s;}
.pcw-root .clw-cta:hover{transform:scale(1.04);filter:brightness(1.04);}

/* ── BOLD style variant ───────────────────────────────────── */
.pcw-root[data-style="bold"] .clw-card{border-top:none;}
.pcw-root[data-style="bold"] .clw-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--cta),var(--accent));z-index:2;}
.pcw-root[data-style="bold"] .clw-title{font-size:17px;font-weight:800;}
.pcw-root[data-style="bold"] .clw-chip{background:var(--soft);padding:5px 10px;border-radius:8px;font-weight:600;font-size:12px;color:var(--ink);}
.pcw-root[data-style="bold"] .clw-price strong{font-size:20px;}
.pcw-root[data-style="bold"] .clw-foot{flex-wrap:wrap;}
.pcw-root[data-style="bold"] .clw-cta{margin-left:auto;order:3;flex:1 1 100%;justify-content:center;padding:12px;margin-top:4px;font-size:14px;}