/*
  PrimeCare Customer Portal
  Loaded after adminlte.css + primecare-theme.css, so it reuses the brand
  tokens (--pc-green-*) and the shared pcs- components (pcs-card, pcs-input,
  pcs-btn ...). Only portal-specific pieces live here, prefixed pp-.
*/
:root{
  --pp-ink:#1f2a24;
  --pp-muted:#6b7a72;
  --pp-line:#e5efe8;
  --pp-soft:#f4faf6;
  --pp-amber-bg:#fff4e0; --pp-amber:#a35f00;
  --pp-blue-bg:#e6eefc;  --pp-blue:#2350a8;
  --pp-red-bg:#fdecec;   --pp-red:#b42323;
  --pp-ok-bg:#e3f6ea;    --pp-ok:#0a7d2c;
}
body{ font-family:'Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--pp-ink); }

/* ================================================================
   Public pages: landing, login, activate
   ================================================================ */
.pp-public{ background:#fff; min-height:100vh; }
.pp-public .container{ padding-left:16px; padding-right:16px; }
.pp-topbar{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--pp-line); backdrop-filter:saturate(1.2) blur(6px);
}
.pp-topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:66px; }
.pp-brand{ display:flex; align-items:center; gap:10px; text-decoration:none !important; }
.pp-brand img{ width:40px; height:40px; object-fit:contain; }
.pp-brand-name{ font-weight:700; font-size:1.1rem; color:var(--pc-green-900); line-height:1.1; }
.pp-brand-sub{ display:block; font-size:.72rem; font-weight:600; color:var(--pp-muted); letter-spacing:.04em; text-transform:uppercase; }
.pp-topnav{ display:flex; align-items:center; gap:22px; }
.pp-topnav a.pp-link{ color:#3d4a43; font-weight:600; font-size:.92rem; }
.pp-topnav a.pp-link:hover{ color:var(--pc-green-900); text-decoration:none; }
@media (max-width:767px){ .pp-topnav a.pp-link{ display:none; } }

.pp-hero{
  background:linear-gradient(135deg,#f4faf6 0%,#eef8f1 45%,#d9f0e2 100%);
  padding:72px 0 80px; overflow:hidden;
}
.pp-eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #cfe6d8;
  color:var(--pc-green-700); font-weight:700; font-size:.78rem; padding:5px 12px; border-radius:999px;
  letter-spacing:.02em;
}
.pp-hero h1{ font-size:2.6rem; font-weight:700; color:var(--pc-green-900); line-height:1.15; margin:18px 0 14px; }
.pp-hero p.lead{ font-size:1.12rem; color:#45534b; max-width:520px; }
.pp-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.pp-hero-cta .pcs-btn{ padding:13px 26px; font-size:.95rem; }
.pp-trust{ display:flex; flex-wrap:wrap; gap:18px; margin-top:28px; color:#45534b; font-size:.88rem; font-weight:600; }
.pp-trust i{ color:var(--pc-green-700); margin-right:6px; }
@media (max-width:767px){
  .pp-hero{ padding:44px 0 52px; }
  .pp-hero h1{ font-size:1.9rem; }
  .pp-hero-cta .pcs-btn{ flex:1 1 100%; }
}

/* Hero preview card (illustrative mini dashboard) */
.pp-preview{
  background:#fff; border-radius:18px; border:1px solid var(--pp-line);
  box-shadow:0 18px 50px rgba(20,83,45,.14); padding:22px; max-width:440px; margin-left:auto;
}
.pp-preview-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.pp-preview-title{ font-weight:700; color:var(--pc-green-900); }
.pp-preview-row{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; background:var(--pp-soft); margin-bottom:10px; }
.pp-preview-row:last-child{ margin-bottom:0; }
.pp-preview-ico{ width:40px; height:40px; border-radius:10px; background:#fff; color:var(--pc-green-900); display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; }
.pp-preview-main{ flex:1; min-width:0; }
.pp-preview-main b{ display:block; font-size:.9rem; }
.pp-preview-main small{ color:var(--pp-muted); }
@media (max-width:991px){ .pp-preview{ margin:40px auto 0; } }

.pp-section{ padding:72px 0; }
.pp-section-alt{ background:var(--pp-soft); }
.pp-section-head{ text-align:center; max-width:620px; margin:0 auto 44px; }
.pp-section-head h2{ font-weight:700; color:var(--pc-green-900); font-size:1.9rem; margin-bottom:10px; }
.pp-section-head p{ color:var(--pp-muted); font-size:1.02rem; margin:0; }
@media (max-width:767px){ .pp-section{ padding:48px 0; } .pp-section-head h2{ font-size:1.5rem; } }

.pp-feature{
  background:#fff; border:1px solid var(--pp-line); border-radius:14px; padding:24px; height:100%;
  box-shadow:0 2px 14px rgba(20,83,45,.05); transition:transform .15s ease, box-shadow .15s ease;
}
.pp-feature:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(20,83,45,.1); }
.pp-feature-ico{
  width:48px; height:48px; border-radius:12px; background:var(--pc-green-100); color:var(--pc-green-900);
  display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:16px;
}
.pp-feature h3{ font-size:1.08rem; font-weight:700; margin-bottom:6px; }
.pp-feature p{ color:var(--pp-muted); font-size:.92rem; margin:0; }

.pp-step{ text-align:center; padding:0 10px; }
.pp-step-num{
  width:52px; height:52px; border-radius:50%; background:var(--pc-green-900); color:#fff; font-weight:700;
  font-size:1.2rem; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px;
  box-shadow:0 0 0 6px var(--pc-green-100);
}
.pp-step h3{ font-size:1.05rem; font-weight:700; }
.pp-step p{ color:var(--pp-muted); font-size:.92rem; }

.pp-cta-band{
  background:var(--pc-green-900); color:#fff; border-radius:18px; padding:40px; display:flex;
  align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.pp-cta-band h2{ font-weight:700; font-size:1.6rem; margin:0 0 6px; }
.pp-cta-band p{ margin:0; opacity:.85; }
.pp-btn-white{ background:#fff; color:var(--pc-green-900) !important; border-color:#fff; }
.pp-btn-white:hover{ background:var(--pc-green-100); }
@media (max-width:767px){ .pp-cta-band{ padding:28px 22px; } .pp-cta-band .pcs-btn{ width:100%; } }


/* Auth (login / activate): brand panel + form */
.pp-auth{ min-height:100vh; display:flex; }
.pp-auth-brand{
  flex:0 0 44%; background:linear-gradient(160deg,var(--pc-green-900) 0%,var(--pc-green-700) 100%);
  color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between;
}
.pp-auth-brand .pp-brand-name{ color:#fff; }
.pp-auth-brand .pp-brand-sub{ color:rgba(255,255,255,.7); }
.pp-auth-brand .pp-brand img{ background:#fff; border-radius:10px; padding:4px; }
.pp-auth-brand h2{ font-size:2rem; font-weight:700; line-height:1.2; margin-bottom:14px; }
.pp-auth-brand ul{ list-style:none; padding:0; margin:22px 0 0; }
.pp-auth-brand li{ margin-bottom:12px; opacity:.92; }
.pp-auth-brand li i{ width:22px; }
.pp-auth-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px; background:linear-gradient(135deg,#f4faf6 0%,#eef8f1 45%,#e9f6ee 100%); }
.pp-auth-card{
  width:100%; max-width:420px; background:#fff; border-radius:16px; border:1px solid var(--pp-line);
  border-top:4px solid var(--pc-green-900); box-shadow:0 10px 34px rgba(20,83,45,.1); padding:32px 30px;
}
.pp-auth-card h1{ font-size:1.5rem; font-weight:700; color:var(--pc-green-900); margin-bottom:4px; }
.pp-auth-card .pp-sub{ color:var(--pp-muted); font-size:.92rem; margin-bottom:24px; }
.pp-auth-mobile-brand{ display:none; justify-content:center; margin-bottom:22px; }
.pp-auth-links{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.88rem; margin-top:18px; }
.pp-auth-links a{ font-weight:600; }
.pp-divider{ display:flex; align-items:center; gap:10px; color:#a3afa9; font-size:.8rem; margin:22px 0; }
.pp-divider:before,.pp-divider:after{ content:''; flex:1; height:1px; background:var(--pp-line); }
.pp-hint{ font-size:.78rem; color:var(--pp-muted); margin-top:6px; }
.pp-stepper{ display:flex; gap:8px; margin-bottom:20px; }
.pp-stepper span{ flex:1; height:5px; border-radius:5px; background:var(--pp-line); }
.pp-stepper span.on{ background:var(--pc-green-700); }
@media (max-width:991px){
  .pp-auth-brand{ display:none; }
  .pp-auth-mobile-brand{ display:flex; }
}
@media (max-width:420px){ .pp-auth-card{ padding:26px 20px; } }

/* Shared form bits */
.pp-field{ margin-bottom:16px; }
.pp-pass-wrap{ position:relative; }
.pp-pass-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent;
  color:#8a978f; padding:6px 8px; cursor:pointer;
}
.pp-pass-wrap .pcs-input{ padding-right:40px; }
.pcs-input:disabled,.pcs-input[readonly]{ background:#f6f8f7; color:#6b7a72; }
select.pcs-input{ height:40px; }

/* Flash alerts */
.pp-alert{
  display:flex; align-items:flex-start; gap:10px; border-radius:10px; padding:11px 14px; font-size:.9rem;
  font-weight:600; margin-bottom:18px; border:1px solid transparent;
}
.pp-alert i{ margin-top:3px; }
.pp-alert-error{ background:var(--pp-red-bg); border-color:#f3c2c2; color:var(--pp-red); }
.pp-alert-success{ background:var(--pp-ok-bg); border-color:#bfe5cc; color:var(--pp-ok); }
.pp-alert-warning{ background:var(--pp-amber-bg); border-color:#f3dcb0; color:var(--pp-amber); }
.pp-alert a{ color:inherit; text-decoration:underline; }

/* ================================================================
   Logged-in app (AdminLTE layout)
   ================================================================ */
.pp-app .content-wrapper{ min-height:calc(100vh - 57px); }
.pp-page{ padding:18px 8px 30px; }
.pp-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.pp-page-head h1{ font-size:1.5rem; font-weight:700; color:var(--pc-green-900); margin:0; }
.pp-page-head p{ color:var(--pp-muted); margin:2px 0 0; font-size:.92rem; }
.pp-back{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.88rem; margin-bottom:10px; }

/* navbar extras */
.pp-app .main-header .navbar-nav .nav-link{ height:auto; }
.pp-avatar{
  width:34px; height:34px; border-radius:50%; background:#fff; color:var(--pc-green-900); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; flex:0 0 auto;
}
.pp-avatar-lg{ width:64px; height:64px; font-size:1.4rem; background:var(--pc-green-100); }
.pp-user-toggle{ display:flex !important; align-items:center; gap:8px; }
.pp-user-toggle .pp-user-name{ font-weight:600; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:576px){ .pp-user-toggle .pp-user-name{ display:none; } }
.pp-bell-menu{ width:340px; max-width:calc(100vw - 24px); padding:0; overflow:hidden; border-radius:12px; }
.pp-bell-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--pp-line); font-weight:700; }
.pp-bell-head a{ font-size:.8rem; font-weight:600; }
.pp-bell-foot{ display:block; text-align:center; padding:10px; font-weight:600; font-size:.85rem; border-top:1px solid var(--pp-line); }
.pp-bell-menu .pp-notif{ border-radius:0; border:0; border-bottom:1px solid var(--pp-line); margin:0; padding:11px 16px; }
.pp-bell-menu .pp-notif:last-of-type{ border-bottom:0; }
.pp-bell-empty{ padding:24px 16px; text-align:center; color:var(--pp-muted); font-size:.88rem; }

/* sidebar extras */
.pp-side-user{ display:flex; align-items:center; gap:10px; padding:16px 12px 14px; border-bottom:1px solid var(--pp-line); margin-bottom:6px; }
.pp-side-user .pp-avatar{ background:var(--pc-green-100); }
.pp-side-user b{ display:block; font-size:.92rem; line-height:1.2; color:var(--pp-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.pp-side-user small{ color:var(--pp-muted); }
.sidebar-mini.sidebar-collapse .pp-side-user{ display:none; }
.pp-app .nav-sidebar .nav-link .badge{ margin-top:2px; }
.pp-app .main-sidebar .brand-link .brand-image{ margin-left:.4rem; }

/* Mobile bottom navigation */
.pp-bottom-nav{ display:none; }
@media (max-width:767px){
  .pp-bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1040; background:#fff;
    border-top:1px solid var(--pp-line); box-shadow:0 -4px 16px rgba(20,83,45,.08);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .pp-bottom-nav a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 7px;
    color:#7c8b83; font-size:.68rem; font-weight:600; text-decoration:none; position:relative;
  }
  .pp-bottom-nav a i{ font-size:1.15rem; }
  .pp-bottom-nav a.active{ color:var(--pc-green-900); }
  .pp-bottom-nav a.active:before{ content:''; position:absolute; top:0; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px; background:var(--pc-green-900); }
  .pp-bottom-nav .pp-dot{ position:absolute; top:5px; left:calc(50% + 6px); min-width:16px; height:16px; border-radius:8px; background:#dc2626; color:#fff; font-size:.6rem; line-height:16px; padding:0 4px; }
  .pp-app .content-wrapper{ padding-bottom:70px; }
  .pp-app .main-footer{ margin-bottom:62px; }
}

/* Stat tiles */
.pp-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
@media (max-width:991px){ .pp-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pp-stat{
  background:#fff; border:1px solid var(--pp-line); border-radius:14px; padding:16px 18px;
  box-shadow:0 2px 14px rgba(20,83,45,.06); display:flex; align-items:center; gap:14px; color:inherit !important;
  text-decoration:none !important; transition:border-color .15s ease;
}
a.pp-stat:hover{ border-color:#bfe0cb; }
.pp-stat-ico{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto; background:var(--pc-green-100); color:var(--pc-green-900); }
.pp-stat-ico.amber{ background:var(--pp-amber-bg); color:var(--pp-amber); }
.pp-stat-ico.blue{ background:var(--pp-blue-bg); color:var(--pp-blue); }
.pp-stat-val{ font-size:1.55rem; font-weight:700; line-height:1; color:var(--pp-ink); }
.pp-stat-lbl{ font-size:.8rem; color:var(--pp-muted); font-weight:600; margin-top:4px; }
@media (max-width:420px){ .pp-stat{ padding:13px; gap:10px; } .pp-stat-ico{ width:38px; height:38px; font-size:16px; } .pp-stat-val{ font-size:1.3rem; } }

/* Welcome banner */
.pp-welcome{
  background:linear-gradient(120deg,var(--pc-green-900) 0%,var(--pc-green-700) 100%); color:#fff;
  border-radius:16px; padding:22px 24px; margin-bottom:20px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap; box-shadow:0 8px 24px rgba(20,83,45,.18);
}
.pp-welcome h1{ font-size:1.45rem; font-weight:700; margin:0 0 4px; }
.pp-welcome p{ margin:0; opacity:.85; }

/* Section card header (light variant of pcs-card-header) */
.pp-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 20px; border-bottom:1px solid var(--pp-line); }
.pp-card-head h2{ font-size:1rem; font-weight:700; color:var(--pc-green-900); margin:0; }
.pp-card-head h2 i{ margin-right:6px; }
.pp-card-head a{ font-size:.85rem; font-weight:600; white-space:nowrap; }
.pp-card-body{ padding:18px 20px; }
@media (max-width:576px){ .pp-card-head,.pp-card-body{ padding:14px 16px; } }

/* Pills */
.pp-pill{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.pp-pill-active,.pp-pill-done{ background:var(--pp-ok-bg); color:var(--pp-ok); }
.pp-pill-expiring,.pp-pill-pending{ background:var(--pp-amber-bg); color:var(--pp-amber); }
.pp-pill-expired{ background:#eef1ef; color:#5c6b64; }
.pp-pill-progress{ background:var(--pp-blue-bg); color:var(--pp-blue); }
.pp-pill-danger{ background:var(--pp-red-bg); color:var(--pp-red); }

/* Warranty cards */
.pp-plans{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr)); gap:16px; }
.pp-plan{
  background:#fff; border:1px solid var(--pp-line); border-radius:14px; padding:18px; display:flex; flex-direction:column;
  box-shadow:0 2px 14px rgba(20,83,45,.06); color:inherit !important; text-decoration:none !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
a.pp-plan:hover{ border-color:#bfe0cb; box-shadow:0 8px 22px rgba(20,83,45,.1); }
.pp-plan-top{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.pp-plan-ico{ width:44px; height:44px; border-radius:12px; background:var(--pc-green-100); color:var(--pc-green-900); display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 auto; }
.pp-plan.is-expired .pp-plan-ico{ background:#eef1ef; color:#7c8b83; }
.pp-plan-name{ font-weight:700; font-size:1rem; line-height:1.25; word-break:break-word; }
.pp-plan-sub{ font-size:.8rem; color:var(--pp-muted); }
.pp-plan-top .pp-pill{ margin-left:auto; }
.pp-plan-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; font-size:.85rem; margin-bottom:14px; }
.pp-k{ font-size:.7rem; color:#7c8b83; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.pp-v{ font-weight:600; color:var(--pp-ink); word-break:break-word; }
.pp-cover{ margin-top:auto; }
.pp-cover-bar{ height:7px; border-radius:7px; background:#edf3ef; overflow:hidden; }
.pp-cover-bar span{ display:block; height:100%; border-radius:7px; background:var(--pc-green-700); }
.pp-plan.is-expiring .pp-cover-bar span{ background:#e09a2b; }
.pp-plan.is-expired .pp-cover-bar span{ background:#b5c0ba; }
.pp-cover-txt{ display:flex; justify-content:space-between; font-size:.76rem; color:var(--pp-muted); margin-top:6px; font-weight:600; }

/* Claim rows */
.pp-claim{
  display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--pp-line);
  color:inherit !important; text-decoration:none !important; transition:background .12s ease;
}
.pp-claim:last-child{ border-bottom:0; }
a.pp-claim:hover{ background:var(--pp-soft); }
.pp-claim-ico{ width:42px; height:42px; border-radius:11px; background:var(--pp-blue-bg); color:var(--pp-blue); display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; }
.pp-claim-ico.done{ background:var(--pp-ok-bg); color:var(--pp-ok); }
.pp-claim-ico.pending{ background:var(--pp-amber-bg); color:var(--pp-amber); }
.pp-claim-ico.danger{ background:var(--pp-red-bg); color:var(--pp-red); }
.pp-claim-main{ flex:1; min-width:0; }
.pp-claim-title{ font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pp-claim-sub{ font-size:.82rem; color:var(--pp-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-claim-side{ text-align:right; flex:0 0 auto; }
.pp-claim-side small{ display:block; color:var(--pp-muted); font-size:.76rem; margin-top:4px; }
.pp-mini-steps{ display:flex; gap:3px; margin-top:8px; max-width:220px; }
.pp-mini-steps span{ flex:1; height:4px; border-radius:4px; background:#e5ece8; }
.pp-mini-steps span.on{ background:var(--pc-green-700); }
.pp-mini-steps.danger span.on{ background:#dc2626; }
.pp-chev{ color:#b5c0ba; }
@media (max-width:576px){
  .pp-claim{ padding:13px 16px; align-items:flex-start; }
  .pp-claim-side .pp-pill{ display:none; }
  .pp-claim-side small{ margin-top:0; }
}

/* Claim progress stepper (horizontal on desktop, vertical on mobile) */
.pp-track{ display:flex; list-style:none; margin:0; padding:0; }
.pp-track li{ flex:1; text-align:center; position:relative; padding:0 4px; }
.pp-track li:before{ content:''; position:absolute; top:17px; left:-50%; width:100%; height:3px; background:#e2ece5; z-index:0; }
.pp-track li:first-child:before{ display:none; }
.pp-track li.done:before{ background:var(--pc-green-700); }
.pp-track-dot{
  position:relative; z-index:1; width:36px; height:36px; border-radius:50%; background:#fff; border:2px solid #d5e1da;
  color:#a3afa9; display:inline-flex; align-items:center; justify-content:center; font-size:14px;
}
.pp-track li.done .pp-track-dot{ background:var(--pc-green-700); border-color:var(--pc-green-700); color:#fff; }
.pp-track li.current .pp-track-dot{ box-shadow:0 0 0 5px var(--pc-green-100); }
.pp-track-lbl{ font-size:.8rem; font-weight:700; margin-top:8px; color:var(--pp-ink); line-height:1.25; }
.pp-track li:not(.done) .pp-track-lbl{ color:#a3afa9; }
.pp-track-date{ font-size:.74rem; color:var(--pp-muted); margin-top:2px; }
@media (max-width:767px){
  .pp-track{ flex-direction:column; }
  .pp-track li{ display:flex; align-items:flex-start; gap:12px; text-align:left; padding:0 0 18px; }
  .pp-track li:last-child{ padding-bottom:0; }
  .pp-track li:before{ top:-18px; left:17px; width:3px; height:18px; }
  .pp-track li > div{ padding-top:6px; }
  .pp-track-lbl{ margin-top:0; }
}

/* Key-value grid (detail pages) */
.pp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr)); gap:16px 22px; }
.pp-grid .pp-full{ grid-column:1 / -1; }
.pp-text{ font-weight:400; white-space:pre-line; }

.pp-photos{ display:flex; flex-wrap:wrap; gap:10px; }
.pp-photos a{ display:block; width:110px; height:110px; border-radius:10px; overflow:hidden; border:1px solid var(--pp-line); }
.pp-photos img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:420px){ .pp-photos a{ width:calc(33.33% - 7px); height:auto; aspect-ratio:1/1; } }

/* Notifications */
.pp-notif{
  display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--pp-line); color:inherit !important;
  text-decoration:none !important; position:relative; transition:background .12s ease;
}
.pp-notif:last-child{ border-bottom:0; }
a.pp-notif:hover{ background:var(--pp-soft); }
.pp-notif.unread{ background:#f6fbf8; }
.pp-notif.unread .pp-notif-title{ font-weight:700; }
.pp-notif.unread:after{ content:''; position:absolute; right:16px; top:20px; width:9px; height:9px; border-radius:50%; background:var(--pc-green-700); }
.pp-notif-ico{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; background:var(--pp-blue-bg); color:var(--pp-blue); }
.pp-notif-ico.success{ background:var(--pp-ok-bg); color:var(--pp-ok); }
.pp-notif-ico.warning{ background:var(--pp-amber-bg); color:var(--pp-amber); }
.pp-notif-ico.danger{ background:var(--pp-red-bg); color:var(--pp-red); }
.pp-notif-main{ flex:1; min-width:0; padding-right:16px; }
.pp-notif-title{ font-size:.92rem; font-weight:600; color:var(--pp-ink); }
.pp-notif-msg{ font-size:.85rem; color:#4f5d55; margin-top:1px; }
.pp-notif-time{ font-size:.75rem; color:#8a978f; margin-top:4px; }

/* Filter tabs */
.pp-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.pp-tabs a{
  padding:7px 14px; border-radius:999px; font-size:.85rem; font-weight:600; color:#4b5a53 !important;
  background:#fff; border:1px solid #d7e2dc; text-decoration:none !important;
}
.pp-tabs a.on{ background:var(--pc-green-900); border-color:var(--pc-green-900); color:#fff !important; }
.pp-tabs a .pp-count{ opacity:.7; margin-left:4px; }

/* History timeline */
.pp-month{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pp-muted); margin:22px 0 10px; }
.pp-month:first-child{ margin-top:0; }
.pp-tl{ list-style:none; margin:0; padding:0; }
.pp-tl li{ position:relative; padding:0 0 18px 50px; }
.pp-tl li:before{ content:''; position:absolute; left:17px; top:36px; bottom:0; width:2px; background:#e2ece5; }
.pp-tl li:last-child:before{ display:none; }
.pp-tl .pp-notif-ico{ position:absolute; left:0; top:0; }
.pp-tl-card{ background:#fff; border:1px solid var(--pp-line); border-radius:12px; padding:11px 14px; display:block; color:inherit !important; text-decoration:none !important; }
a.pp-tl-card:hover{ border-color:#bfe0cb; }
.pp-tl-head{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* Empty states */
.pp-empty{ text-align:center; padding:40px 20px; color:var(--pp-muted); }
.pp-empty i{ font-size:34px; color:#b8cfc1; margin-bottom:10px; display:block; }
.pp-empty b{ display:block; color:var(--pp-ink); font-size:1rem; margin-bottom:4px; }

/* Profile */
.pp-profile-head{ display:flex; align-items:center; gap:16px; }
.pp-profile-head h2{ font-size:1.2rem; font-weight:700; margin:0; }
.pp-profile-head p{ margin:0; color:var(--pp-muted); font-size:.88rem; }
.pp-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.pp-form-grid .pp-full{ grid-column:1 / -1; }
@media (max-width:576px){ .pp-form-grid{ grid-template-columns:1fr; } }
.pp-form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
@media (max-width:576px){ .pp-form-actions .pcs-btn{ width:100%; } }
.pp-info-list{ list-style:none; margin:0; padding:0; }
.pp-info-list li{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--pp-line); font-size:.88rem; }
.pp-info-list li:last-child{ border-bottom:0; }
.pp-info-list span{ color:var(--pp-muted); }
.pp-info-list b{ text-align:right; word-break:break-word; }

/* "Powered by Pocketlite" credit */
.pp-powered{ font-size:.78rem; color:var(--pp-muted); letter-spacing:.01em; }
.pp-powered b{ color:var(--pc-green-900); font-weight:700; }
.pp-auth-main{ flex-direction:column; }
.pp-powered a, .pp-auth-brand small a{ color:inherit; text-decoration:none; }
.pp-powered a:hover, .pp-auth-brand small a:hover{ text-decoration:underline; }

/* Phones: the bell dropdown is anchored to the bell's right edge and would run
   off the left of the screen - pin it to the viewport edges instead */
@media (max-width:576px){
  .pp-app .main-header .pp-bell-menu{
    position:fixed !important; top:60px !important; left:8px !important; right:8px !important;
    width:auto; max-width:none; transform:none !important; margin:0;
    max-height:calc(100vh - 140px); overflow-y:auto;
  }
}

/* ================================================================
   Responsive refinements (standalone portal)
   ================================================================ */
html{ -webkit-text-size-adjust:100%; }
body.pp-app, body.pp-public{ overflow-x:hidden; }
img{ max-width:100%; }

/* Warranty detail: cover start / status / end */
.pp-cover-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; font-size:.85rem; }
.pp-cover-end{ text-align:right; }
@media (max-width:420px){
  .pp-cover-head{ flex-wrap:wrap; }
  .pp-cover-pill{ order:3; flex:1 1 100%; justify-content:center; }
}

/* Header logo: the theme hides it on phones; keep a compact one so the
   portal stays branded next to the menu / bell / avatar */
@media (max-width:576px){
  .pp-app .navbar-center-logo-wrap{ display:flex; }
  .pp-app .navbar-center-logo{ padding:3px 8px; }
  .pp-app .navbar-center-logo img{ height:28px; max-width:120px; }
  .pp-app .main-header .nav-link{ padding-left:.6rem; padding-right:.6rem; }
  .pp-app .pp-user-toggle .fa-angle-down{ display:none; }
  .pp-page{ padding:12px 2px 24px; }
  .pp-page-head h1{ font-size:1.3rem; }
  .pp-welcome{ padding:18px; border-radius:14px; }
  .pp-welcome h1{ font-size:1.2rem; }
  .pp-welcome .pcs-btn{ width:100%; justify-content:center; }
  .pcs-card-header{ padding:16px; }
  .pcs-card-header .pcs-btn{ width:100%; justify-content:center; }
  .pp-tabs{ width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .pp-tabs a{ white-space:nowrap; }
  .pp-notif{ padding:12px 14px; }
  .pp-tl li{ padding-left:44px; }
}

/* Very narrow phones (320px) */
@media (max-width:360px){
  .pp-stats{ gap:10px; }
  .pp-stat{ flex-direction:column; align-items:flex-start; }
  .pp-plan-meta{ grid-template-columns:1fr; }
  .pp-brand-name{ font-size:1rem; }
  .pp-topbar .pp-brand-sub{ display:none; }
  .pp-topnav .pcs-btn{ padding:8px 12px; }
  .pp-info-list li{ flex-direction:column; gap:2px; }
  .pp-info-list b{ text-align:left; }
}

/* Comfortable tap targets on touch screens */
@media (pointer:coarse){
  .pp-tabs a{ padding:9px 15px; }
  .pp-pass-toggle{ padding:10px 12px; }
}

/* Inputs at 16px stop iOS Safari zooming into the form on focus */
@media (max-width:767px){ .pcs-input{ font-size:16px; } }

/* Tablets: sidebar is overlaid, keep content full width */
@media (min-width:768px) and (max-width:991px){
  .pp-page{ padding:16px 6px 28px; }
}

/* ================================================================
   Larger type + wider public pages
   Everything is sized in rem, so the root size scales the whole UI.
   ================================================================ */
html{ font-size:16px; }
@media (min-width:768px){ html{ font-size:17px; } }
@media (min-width:1400px){ html{ font-size:18px; } }

/* the smallest labels were hard to read - lift them a step */
.pp-pill{ font-size:.78rem; }
.pp-k{ font-size:.76rem; }
.pp-hint, .pp-powered{ font-size:.84rem; }
.pp-plan-sub, .pp-claim-sub, .pp-claim-side small, .pp-notif-time, .pp-cover-txt, .pp-stat-lbl{ font-size:.86rem; }
.pcs-label{ font-size:.86rem; }
.pcs-input{ font-size:.95rem; }
.pcs-btn{ font-size:.93rem; }
@media (max-width:767px){ .pp-bottom-nav a{ font-size:.74rem; } .pcs-input{ font-size:16px; } }

/* Public pages fill more of wide screens instead of a narrow 1140px column */
.pp-wide, .pp-public .container{
  width:100%; max-width:1640px; margin-left:auto; margin-right:auto;
  padding-left:clamp(16px, 4vw, 64px); padding-right:clamp(16px, 4vw, 64px);
}
.pp-section-head{ max-width:780px; }
.pp-hero p.lead{ max-width:640px; }
.pp-preview{ max-width:520px; }
.pp-auth-card{ max-width:500px; padding:36px 34px; }
.pp-auth-brand{ padding:56px clamp(40px, 4vw, 72px); }
@media (min-width:1400px){ .pp-auth-brand h2{ font-size:2.3rem; } }
@media (max-width:420px){ .pp-auth-card{ padding:26px 20px; } }

/* ================================================================
   Home page banner slider (slides: application/config/banners.php)
   ================================================================ */
.pp-slider{ position:relative; overflow:hidden; background:var(--pc-green-900); }
.pp-slider-track{ display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.pp-slide{
  flex:0 0 100%; position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:clamp(400px, 36vw, 600px); color:#fff;
  background:linear-gradient(120deg,var(--pc-green-900) 0%,var(--pc-green-700) 100%);
}
/* soft decorative shapes on text-only slides */
.pp-slide:not(.has-image):after{
  content:''; position:absolute; right:-10%; top:-40%; width:min(62vw, 900px); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 68%); pointer-events:none;
}
.pp-slide:not(.has-image):before{
  content:''; position:absolute; right:8%; bottom:-30%; width:min(30vw, 420px); aspect-ratio:1/1; border-radius:50%;
  border:2px solid rgba(255,255,255,.1); pointer-events:none;
}
.pp-slide-media{ position:absolute; inset:0; }
.pp-slide-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* readable text over a photo */
.pp-slide.has-image:not(.is-picture):not(.is-dark-text) .pp-slide-media:after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,40,24,.78) 0%, rgba(10,40,24,.35) 55%, rgba(10,40,24,0) 85%);
}
/* picture-only banner: show the whole artwork at 3:1 */
.pp-slide.is-picture{ min-height:0; aspect-ratio:3/1; background:#f4faf6; }
.pp-slide-link{ position:absolute; inset:0; z-index:2; }
.pp-slide-body{ position:relative; z-index:3; padding-top:64px; padding-bottom:84px; pointer-events:none; }
.pp-slide-body a{ pointer-events:auto; }
.pp-slide-copy{ max-width:760px; }
.pp-slide-eyebrow{
  display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  font-weight:700; font-size:.85rem; letter-spacing:.03em; padding:6px 14px; border-radius:999px;
}
.pp-slide-title{ font-size:clamp(2rem, 3.6vw, 3.4rem); font-weight:700; line-height:1.12; margin:20px 0 14px; color:inherit; }
.pp-slide-text{ font-size:1.18rem; line-height:1.55; opacity:.9; max-width:640px; margin:0; }
.pp-slide-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.pp-slide-cta .pcs-btn{ padding:14px 28px; font-size:1rem; }
.pp-btn-ghost{ background:transparent; border:2px solid rgba(255,255,255,.7); color:#fff !important; }
.pp-btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.pp-slide.is-dark-text{ color:var(--pc-green-900); }
.pp-slide.is-dark-text .pp-slide-eyebrow{ background:#fff; border-color:#cfe6d8; }
.pp-slide.is-dark-text .pp-btn-white{ background:var(--pc-green-900); border-color:var(--pc-green-900); color:#fff !important; }
.pp-slide.is-dark-text .pp-btn-ghost{ border-color:var(--pc-green-900); color:var(--pc-green-900) !important; }

.pp-slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:50px; height:50px; border-radius:50%;
  border:0; background:rgba(255,255,255,.9); color:var(--pc-green-900); font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.18);
  opacity:0; transition:opacity .2s ease, background .2s ease;
}
.pp-slider:hover .pp-slider-arrow, .pp-slider-arrow:focus-visible{ opacity:1; }
.pp-slider-arrow:hover{ background:#fff; }
.pp-slider-arrow.prev{ left:clamp(10px, 1.6vw, 28px); }
.pp-slider-arrow.next{ right:clamp(10px, 1.6vw, 28px); }
.pp-slider-dots{ position:absolute; left:0; right:0; bottom:24px; z-index:4; display:flex; justify-content:center; gap:8px; }
.pp-slider-dots button{
  width:10px; height:10px; padding:0; border:0; border-radius:10px; background:rgba(255,255,255,.5);
  box-shadow:0 0 0 1px rgba(0,0,0,.08); cursor:pointer; transition:width .25s ease, background .25s ease;
}
.pp-slider-dots button.on{ width:30px; background:#fff; }
@media (max-width:767px){
  .pp-slide{ min-height:460px; align-items:flex-end; }
  .pp-slide.is-picture{ min-height:0; aspect-ratio:4/3; }
  .pp-slide-body{ padding-top:48px; padding-bottom:64px; }
  .pp-slide-text{ font-size:1.05rem; }
  .pp-slide-cta .pcs-btn{ flex:1 1 100%; }
  .pp-slider-arrow{ display:none; }
  .pp-slide.has-image:not(.is-picture):not(.is-dark-text) .pp-slide-media:after{
    background:linear-gradient(0deg, rgba(10,40,24,.85) 0%, rgba(10,40,24,.4) 60%, rgba(10,40,24,.1) 100%);
  }
}
@media (pointer:coarse){ .pp-slider-arrow{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .pp-slider-track, .pp-slider-dots button{ transition:none; } }

/* ================================================================
   Site footer with store locations (stores: application/config/stores.php)
   ================================================================ */
.pp-site-footer{ background:#0f3d24; color:rgba(255,255,255,.8); font-size:.95rem; text-align:left; }
.pp-sf-top{ display:grid; grid-template-columns:minmax(220px, 300px) minmax(0, 1fr); gap:40px 64px; padding-top:56px; padding-bottom:48px; }
.pp-site-footer .pp-brand-name{ color:#fff; }
.pp-site-footer .pp-brand-sub{ color:rgba(255,255,255,.6); }
.pp-site-footer .pp-brand img{ background:#fff; border-radius:10px; padding:4px; }
.pp-sf-about p{ margin:16px 0 28px; line-height:1.55; }
.pp-sf-head{ font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin:0 0 16px; }
.pp-sf-head i{ margin-right:6px; color:#9fe0b9; }
.pp-sf-links{ list-style:none; margin:0; padding:0; }
.pp-sf-links li{ margin-bottom:9px; }
.pp-site-footer a{ color:rgba(255,255,255,.82); }
.pp-site-footer a:hover{ color:#fff; }
.pp-sf-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap:16px; }
.pp-store{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:18px 20px;
  display:flex; flex-direction:column;
}
.pp-store-name{ display:block; color:#fff; font-size:1.04rem; margin-bottom:6px; }
.pp-store-addr{ font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.74); margin:0 0 14px; }
.pp-store-line{ font-size:.88rem; margin:-6px 0 14px; color:rgba(255,255,255,.74); }
.pp-store-actions{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px 18px; }
.pp-site-footer .pp-store-actions a{ color:#9fe0b9; font-weight:600; font-size:.9rem; white-space:nowrap; }
.pp-site-footer .pp-store-actions a:hover{ color:#fff; text-decoration:none; }
.pp-store-actions i{ margin-right:4px; }
/* store photo cards (9:16): 5 across on wide screens, 3 on tablets, 2 on phones; a short last row is centred */
.pp-sf-photos{ --cols:5; --gap:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap); }
.pp-sf-photos + .pp-sf-grid{ margin-top:16px; }
.pp-store-card{ flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); display:flex; flex-direction:column; gap:10px; min-width:0; }
.pp-store-photo{
  display:block; border-radius:14px; overflow:hidden; aspect-ratio:9/16;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pp-store-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.pp-store-photo:hover, .pp-store-photo:focus-visible{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.pp-store-card .pp-store-actions{ justify-content:center; gap:6px 16px; }
@media (max-width:1199px){ .pp-sf-photos{ --cols:3; } }
@media (max-width:640px){ .pp-sf-photos{ --cols:2; --gap:12px; } }
@media (max-width:340px){ .pp-store-card .pp-store-actions{ flex-direction:column; align-items:center; } }
@media (prefers-reduced-motion:reduce){ .pp-store-photo{ transition:none; } .pp-store-photo:hover{ transform:none; } }
.pp-sf-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:16px 0; font-size:.88rem; }
.pp-sf-bottom .pp-wide{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 16px; }
.pp-site-footer .pp-powered{ color:rgba(255,255,255,.7); font-size:.88rem; }
.pp-site-footer .pp-powered b{ color:#fff; }
@media (max-width:991px){ .pp-sf-top{ grid-template-columns:minmax(0, 1fr); gap:32px; padding-top:44px; } }
@media (max-width:576px){ .pp-sf-bottom .pp-wide{ justify-content:center; text-align:center; } }

/* inside the signed-in layout the footer sits in AdminLTE's .main-footer */
.pp-app .main-footer.pp-app-footer{ display:block; padding:0; border-top:0; background:transparent; font-size:inherit; color:inherit; }
.pp-app .pp-site-footer .pp-wide{ max-width:none; padding-left:clamp(16px, 2.4vw, 32px); padding-right:clamp(16px, 2.4vw, 32px); }