/* ==========================================================================
   KeHarbor PWA — Add to Home Screen surfaces (v1.0.0)
   Loaded only on /checkout/, /my-account/ (dashboard), order received, /app/.
   Brand: wine #6E1F3D / rose #933254 / rose gold #B76E79 / cream #FFF7F4
   NOTE: keharbor.css:2469 applies `button{...!important}` globally, so every
   button property below needs the !important flag and a higher specificity.
   ========================================================================== */

.kh-pwa,
.kh-pwa *,
.kh-pwa-done,
.kh-pwa-done *{ box-sizing:border-box; }

.kh-pwa[hidden],
.kh-pwa [hidden],
.kh-pwa .kh-pwa-btn[hidden],
.kh-pwa .kh-pwa-steps[hidden],
.kh-pwa .kh-pwa-note[hidden],
.kh-pwa-done[hidden]{ display:none !important; }

/* ---------- card / bar shell ---------- */
.kh-pwa{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:980px;
  margin:0 auto 24px;
  padding:18px 22px 18px 24px;
  border-radius:18px;
  border:1px solid rgba(147,50,84,.18);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF6FA 60%,#FFEEF5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(232,78,138,.10),
    0 18px 38px -20px rgba(210,60,120,.30);
  color:#7A4A5E;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  overflow:hidden;
}
.kh-pwa::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:linear-gradient(180deg,#B76E79 0%,#933254 55%,#6E1F3D 100%);
}

/* compact checkout bar */
.kh-pwa--bar{
  padding:12px 18px 12px 20px;
  border-radius:14px;
  margin-bottom:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,241,247,.97));
}
.kh-pwa--bar::before{ width:3px; }
.kh-pwa--bar .kh-pwa-media,
.kh-pwa--bar .kh-pwa-media img{ width:38px; height:38px; border-radius:9px; }
.kh-pwa--bar .kh-pwa-kicker,
.kh-pwa--bar .kh-pwa-desc{ display:none; }
.kh-pwa--bar .kh-pwa-title{
  font-size:15px !important;
  margin:0 !important;
}
.kh-pwa--bar .kh-pwa-steps{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  list-style:none;
  margin:8px 0 0 !important;
  padding:0 !important;
  font-size:12.5px !important;
}
.kh-pwa--bar .kh-pwa-steps li{ padding:0 !important; }
.kh-pwa--bar .kh-pwa-steps li::before{ content:"›"; color:#B76E79; margin-right:4px; }
.kh-pwa--bar .kh-pwa-note{ margin:6px 0 0 !important; font-size:12.5px !important; }

/* ---------- media / copy ---------- */
.kh-pwa-media{
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 8px 18px -8px rgba(110,31,61,.45);
}
.kh-pwa-media img{
  display:block;
  width:52px; height:52px;
  border-radius:13px;
  object-fit:cover;
}

.kh-pwa-copy{ flex:1 1 auto; min-width:0; }

.kh-pwa-kicker{
  display:block;
  margin:0 0 3px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  color:#B76E79 !important;
  line-height:1 !important;
}
.kh-pwa-title{
  margin:0 0 4px !important;
  padding:0 !important;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif !important;
  font-size:18px !important;
  font-weight:600 !important;
  line-height:1.32 !important;
  color:#6E1F3D !important;
}
.kh-pwa-desc{
  margin:0 !important;
  padding:0 !important;
  font-size:13.5px !important;
  line-height:1.6 !important;
  color:#7A4A5E !important;
}
.kh-pwa-steps{
  margin:9px 0 0 !important;
  padding-left:18px !important;
  font-size:13px !important;
  line-height:1.65 !important;
  color:#7A4A5E !important;
}
.kh-pwa-steps li{
  margin:0 0 2px !important;
  padding:0 !important;
  color:#7A4A5E !important;
}
.kh-pwa-steps strong{ color:#6E1F3D; font-weight:600; }
.kh-pwa-note{
  margin:8px 0 0 !important;
  padding:0 !important;
  font-size:12.5px !important;
  line-height:1.6 !important;
  color:#8A5A6C !important;
}
.kh-pwa-note strong{ color:#6E1F3D; font-weight:600; }

/* ---------- actions / buttons ---------- */
.kh-pwa-actions{
  flex:0 0 auto;
  margin-left:auto;
  display:flex;
  align-items:center;
}

.kh-pwa .kh-pwa-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:46px;
  padding:12px 22px !important;
  border:none !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#FF86AE 0%,#F8437F 46%,#D62D6C 94%,#C22862 100%) !important;
  background-color:#F8437F !important;
  color:#fff !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  line-height:1.1 !important;
  text-transform:none !important;
  white-space:nowrap;
  cursor:pointer;
  text-shadow:0 1px 2px rgba(140,10,60,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -7px 16px rgba(140,10,60,.28),
    0 12px 24px -8px rgba(214,45,108,.60) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.kh-pwa .kh-pwa-btn:hover{
  background:linear-gradient(180deg,#FF9ABE 0%,#FF6B9F 46%,#E33176 94%,#D62D6C 100%) !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -7px 16px rgba(140,10,60,.20),
    0 18px 34px -8px rgba(214,45,108,.66) !important;
}
.kh-pwa .kh-pwa-btn:focus-visible{
  outline:3px solid rgba(110,31,61,.45) !important;
  outline-offset:3px;
}
.kh-pwa .kh-pwa-btn:disabled{ opacity:.55 !important; cursor:default; transform:none; }

.kh-pwa .kh-pwa-close{
  position:absolute;
  top:8px; right:8px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:30px !important; height:30px !important;
  min-height:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#933254 !important;
  font-size:20px !important;
  font-weight:400 !important;
  line-height:1 !important;
  cursor:pointer;
  box-shadow:none !important;
  text-shadow:none !important;
  transition:background .16s ease;
}
.kh-pwa .kh-pwa-close:hover{
  background:rgba(147,50,84,.10) !important;
  color:#6E1F3D !important;
  transform:none;
  box-shadow:none !important;
}
.kh-pwa .kh-pwa-close:focus-visible{
  outline:2px solid rgba(110,31,61,.45) !important;
  outline-offset:2px;
}

/* ---------- /app/ page ---------- */
.kh-pwa-wrap{
  max-width:980px;
  margin:0 auto;
}

/* Icon + copy act as the install affordance on the standalone page. */
.kh-pwa[data-surface="app"] .kh-pwa-media,
.kh-pwa[data-surface="app"] .kh-pwa-copy{ cursor:pointer; }
.kh-pwa[data-surface="app"] .kh-pwa-media img{ transition:transform .18s ease; }
.kh-pwa[data-surface="app"] .kh-pwa-media:hover img{ transform:scale(1.06); }
.kh-pwa[data-surface="app"] .kh-pwa-title:hover{ color:#933254 !important; }

/* Click with no native prompt: highlight the manual steps. */
.kh-pwa .kh-pwa-steps.is-flash,
.kh-pwa .kh-pwa-note.is-flash{
  animation:kh-pwa-flash 1.2s ease 2;
  border-radius:10px;
  box-shadow:0 0 0 5px rgba(248,67,127,.12);
}
@keyframes kh-pwa-flash{
  0%,100%{ background:rgba(248,67,127,.10); }
  50%{ background:rgba(248,67,127,.24); }
}

.kh-pwa-done{
  max-width:980px;
  margin:0 auto 22px;
  padding:22px 24px;
  border-radius:18px;
  border:1px solid rgba(183,110,121,.30);
  background:linear-gradient(180deg,#FFFDF9 0%,#FFF4EC 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 18px 38px -24px rgba(183,110,121,.40);
}
.kh-pwa-done p{
  margin:0 !important;
  font-size:14px !important;
  line-height:1.6 !important;
  color:#7A4A5E !important;
}
.kh-pwa-done .kh-pwa-done-title{
  margin:0 0 6px !important;
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:20px !important;
  font-weight:600 !important;
  color:#6E1F3D !important;
}

/* ---------- install-instructions dialog (no native prompt) ---------- */
html.kh-pwa-hint-open,
html.kh-pwa-hint-open body{ overflow:hidden; }

.kh-pwa-hint{
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  z-index:1000001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
  background:rgba(58,16,32,.58);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.kh-pwa-hint[hidden]{ display:none !important; }

.kh-pwa-hint-card{
  position:relative;
  width:100%;
  max-width:430px;
  padding:28px 26px 24px;
  border-radius:20px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF7FA 70%,#FFEEF4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 34px 70px -24px rgba(80,10,40,.60);
  text-align:left;
}

.kh-pwa-hint .kh-pwa-hint-x{
  position:absolute;
  top:8px; right:8px;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px !important; height:34px !important;
  min-height:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#933254 !important;
  font-size:22px !important;
  line-height:1 !important;
  cursor:pointer;
  box-shadow:none !important;
  text-shadow:none !important;
}
.kh-pwa-hint .kh-pwa-hint-x:hover{ background:rgba(147,50,84,.10) !important; color:#6E1F3D !important; }

.kh-pwa-hint .kh-pwa-hint-kicker{
  display:block;
  margin:0 0 6px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  color:#B76E79 !important;
}
.kh-pwa-hint .kh-pwa-hint-t{
  margin:0 0 14px !important;
  padding:0 !important;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif !important;
  font-size:21px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:#6E1F3D !important;
}
.kh-pwa-hint .kh-pwa-hint-steps{
  margin:0 0 12px !important;
  padding-left:20px !important;
  font-size:14px !important;
  line-height:1.7 !important;
  color:#7A4A5E !important;
}
.kh-pwa-hint .kh-pwa-hint-steps li{
  margin:0 0 8px !important;
  padding:0 !important;
  color:#7A4A5E !important;
}
.kh-pwa-hint .kh-pwa-hint-steps strong{ color:#6E1F3D; font-weight:700; }
.kh-pwa-hint .kh-pwa-hint-note{
  margin:0 0 18px !important;
  font-size:12.5px !important;
  line-height:1.6 !important;
  color:#8A5A6C !important;
}
.kh-pwa-hint .kh-pwa-hint-alt{
  display:block;
  margin:0 0 12px !important;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid rgba(147,50,84,.30);
  background:rgba(255,255,255,.72);
  color:#933254 !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  line-height:1.2 !important;
  text-align:center;
  text-decoration:none !important;
}
.kh-pwa-hint .kh-pwa-hint-alt:hover{
  background:#FFFFFF !important;
  border-color:rgba(147,50,84,.55);
  color:#6E1F3D !important;
}
.kh-pwa-hint .kh-pwa-hint-alt:focus-visible{
  outline:3px solid rgba(110,31,61,.45) !important;
  outline-offset:2px;
}
.kh-pwa-hint .kh-pwa-hint-ok{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100%;
  min-height:46px;
  padding:12px 22px !important;
  border:none !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#FF86AE 0%,#F8437F 46%,#D62D6C 94%,#C22862 100%) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  line-height:1.1 !important;
  cursor:pointer;
  text-shadow:0 1px 2px rgba(140,10,60,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 12px 24px -8px rgba(214,45,108,.60) !important;
}
.kh-pwa-hint .kh-pwa-hint-ok:focus-visible{
  outline:3px solid rgba(110,31,61,.45) !important;
  outline-offset:3px;
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .kh-pwa{
    flex-wrap:wrap;
    gap:12px;
    padding:16px 16px 16px 20px;
    border-radius:16px;
  }
  .kh-pwa-media,
  .kh-pwa-media img{ width:44px; height:44px; border-radius:11px; }
  .kh-pwa-copy{ flex:1 1 190px; }
  .kh-pwa-title{ font-size:16.5px !important; }
  .kh-pwa-actions{ width:100%; margin-left:0; }
  .kh-pwa .kh-pwa-btn{ width:100%; }
  .kh-pwa--bar .kh-pwa-actions{ width:auto; }
  .kh-pwa--bar .kh-pwa-btn{ width:auto; padding:10px 16px !important; font-size:12.5px !important; min-height:40px; }
}

@media (prefers-reduced-motion:reduce){
  .kh-pwa .kh-pwa-btn,
  .kh-pwa .kh-pwa-close{ transition:none; }
  .kh-pwa .kh-pwa-btn:hover{ transform:none; }
  .kh-pwa .kh-pwa-steps.is-flash,
  .kh-pwa .kh-pwa-note.is-flash{ animation:none; background:rgba(248,67,127,.14); }
}