/* PRH STORE DARK v3 - scheme variables from website; logged-in pages only. Sirf styling. */
html{--prh-ink:#070c18;--prh-panel:#0c1a2e;--prh-panel2:#102239;--prh-hairline:#1b2c45;--prh-azure:#2e7bff;--prh-azure-dark:#1a56cc;--prh-glow:#5fe3ff}
html[data-color-scheme="evergreen"]{--prh-ink:#0c1912;--prh-panel:#17251d;--prh-panel2:#102017;--prh-hairline:#304234;--prh-azure:#194b33;--prh-azure-dark:color-mix(in srgb,#194b33 70%,#000);--prh-glow:#b5d9ac}
html[data-color-scheme="ocean"]{--prh-ink:hsl(218 25% 8%);--prh-panel:hsl(218 22% 13%);--prh-panel2:hsl(218 24% 17%);--prh-hairline:hsl(218 20% 29%);--prh-azure:#0055cc;--prh-azure-dark:hsl(218 65% 28%);--prh-glow:hsl(218 80% 78%)}
html[data-color-scheme="cloud"]{--prh-ink:hsl(194 25% 8%);--prh-panel:hsl(194 22% 13%);--prh-panel2:hsl(194 24% 17%);--prh-hairline:hsl(194 20% 29%);--prh-azure:#08738a;--prh-azure-dark:hsl(194 65% 28%);--prh-glow:hsl(194 80% 78%)}
html[data-color-scheme="violet"]{--prh-ink:hsl(262 25% 8%);--prh-panel:hsl(262 22% 13%);--prh-panel2:hsl(262 24% 17%);--prh-hairline:hsl(262 20% 29%);--prh-azure:#6941c6;--prh-azure-dark:hsl(262 65% 28%);--prh-glow:hsl(262 80% 78%)}
html[data-color-scheme="slate"]{--prh-ink:hsl(215 25% 8%);--prh-panel:hsl(215 22% 13%);--prh-panel2:hsl(215 24% 17%);--prh-hairline:hsl(215 20% 29%);--prh-azure:#344054;--prh-azure-dark:hsl(215 65% 28%);--prh-glow:hsl(215 80% 78%)}
html[data-color-scheme="bright"]{--prh-ink:#101923;--prh-panel:#172535;--prh-panel2:#203449;--prh-hairline:#354e65;--prh-azure:#005bd6;--prh-azure-dark:#0043a3;--prh-glow:#65d4ff}
html[data-color-scheme="apple"]{--prh-ink:#111113;--prh-panel:#1c1c1e;--prh-panel2:#2c2c2e;--prh-hairline:#48484a;--prh-azure:#0066cc;--prh-azure-dark:#004f9e;--prh-glow:#70b7ff}

/* logo (all pages) */
html body > nav a[href="https://pixelrackhost.com/"]{gap:12px !important}
html body > nav a[href="https://pixelrackhost.com/"] img{height:2.5rem !important}
html body > nav a[href="https://pixelrackhost.com/"] span.text-xl{font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif !important;font-size:1.5rem !important;font-weight:700 !important;letter-spacing:-.01em;color:#fff !important;white-space:nowrap}
@media (max-width:480px){html body > nav a[href="https://pixelrackhost.com/"] span.text-xl{font-size:1.2rem !important}}

/* picker */
.prh-scheme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-right:8px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:transparent;cursor:pointer;transition:border-color .15s}
.prh-scheme-btn:hover{border-color:var(--prh-glow)}
html body:not(:has(#main-aside)) .prh-scheme-btn{display:none}
#prhSchemePanel{position:fixed;top:68px;right:16px;z-index:60;width:280px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 90px);overflow-y:auto;padding:16px;background:var(--prh-panel);border:1px solid var(--prh-hairline);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);color:#e6efff;font-family:"IBM Plex Sans",system-ui,sans-serif;text-align:left}
#prhSchemePanel h2{margin:0 0 6px;font-size:16px;font-weight:600;color:#fff;font-family:"Space Grotesk",system-ui,sans-serif}
#prhSchemePanel p{margin:0 0 12px;font-size:12px;color:rgba(230,239,255,.65)}
.prhSchemeOpt{display:flex;width:100%;align-items:center;gap:10px;margin:6px 0;padding:10px;border-radius:10px;border:1px solid var(--prh-hairline);background:var(--prh-panel);color:#e6efff;font-size:13px;cursor:pointer;text-align:left}
.prhSchemeOpt:hover{background:var(--prh-panel2)}
.prhSchemeOpt.on{border-color:var(--prh-glow);background:var(--prh-panel2)}
.prhSchemeOpt i{display:block;width:28px;height:22px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.25)}
.prhSchemeOpt em{margin-left:auto;font-style:normal;color:var(--prh-glow);visibility:hidden}
.prhSchemeOpt.on em{visibility:visible}

/* dark layer (pages with sidebar) */
html:has(#main-aside){background:var(--prh-ink) !important;color-scheme:dark}
html body:has(#main-aside){
  --color-neutral:216 30% 22%;--color-base:214 50% 92%;--color-muted:216 22% 68%;--color-inverted:0 0% 100%;
  --color-background:222 45% 8%;--color-background-secondary:219 42% 13%;
  color-scheme:dark !important;color:#dbe6f5;
  background-color:var(--prh-ink) !important;
  background-image:radial-gradient(900px 380px at 85% -80px,color-mix(in srgb,var(--prh-azure) 18%,transparent),transparent 70%),linear-gradient(to right,color-mix(in srgb,var(--prh-azure) 6%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--prh-azure) 6%,transparent) 1px,transparent 1px) !important;
  background-size:auto,68px 68px,68px 68px !important;
  background-repeat:no-repeat,repeat,repeat !important;
  background-attachment:fixed !important;
}
html body:has(#main-aside) > div,
html body:has(#main-aside) > div > div:not(#main-aside),
html body:has(#main-aside) main{background:transparent !important;color:#dbe6f5}
html body:has(#main-aside) > nav{background:radial-gradient(420px 90px at 85% 0%,color-mix(in srgb,var(--prh-azure) 30%,transparent),transparent 70%),linear-gradient(90deg,var(--prh-ink),var(--prh-panel) 55%,var(--prh-panel2)) !important;border-bottom:1px solid color-mix(in srgb,var(--prh-glow) 22%,transparent) !important}
html body:has(#main-aside) #main-aside[data-prh-cloud-sidebar="1"]{background:linear-gradient(180deg,var(--prh-panel2) 0%,var(--prh-panel) 55%,var(--prh-ink) 100%) !important;border-right:1px solid color-mix(in srgb,var(--prh-glow) 16%,transparent) !important}
html body:has(#main-aside) #main-aside[data-prh-cloud-sidebar="1"] svg{color:var(--prh-glow) !important}
html body:has(#main-aside) #main-aside[data-prh-cloud-sidebar="1"] a:hover{background:color-mix(in srgb,var(--prh-glow) 10%,transparent) !important}
html body:has(#main-aside) #main-aside[data-prh-cloud-sidebar="1"] a[aria-current="page"]{background:linear-gradient(90deg,color-mix(in srgb,var(--prh-azure) 45%,transparent),color-mix(in srgb,var(--prh-azure) 8%,transparent)) !important}
html body:has(#main-aside) .bg-primary{background:linear-gradient(135deg,var(--prh-azure) 0%,var(--prh-azure-dark) 100%) !important}
html body:has(#main-aside) main :is(h1,h2,h3,h4){color:#f1f6ff}
html body:has(#main-aside) main label{color:#b9c9e2}
html body:has(#main-aside) main :is(div,section,article,a,li).bg-background-secondary:not(.justify-center){
  background:var(--prh-panel) !important;border:1px solid color-mix(in srgb,var(--prh-glow) 20%,var(--prh-hairline));box-shadow:0 16px 40px -26px rgba(0,0,0,.8)}
html body:has(#main-aside) main :is(.bg-white,.bg-primary-800,.bg-background){background:var(--prh-panel) !important;color:#dbe6f5}
html body:has(#main-aside) main :is(.text-black,.text-gray-900,.text-gray-800,.text-slate-900){color:#eaf2ff !important}
html body:has(#main-aside) main :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]){
  background:var(--prh-ink) !important;color:#eaf2ff;border-color:color-mix(in srgb,var(--prh-glow) 28%,var(--prh-hairline))}
html body:has(#main-aside) main :is(input,select,textarea)::placeholder{color:#6f86a8}
html body:has(#main-aside) main thead th{color:#92a4c0}
html body:has(#main-aside) main tbody tr:hover{background:color-mix(in srgb,var(--prh-azure) 14%,transparent) !important}
html body:has(#main-aside) main .text-primary{color:var(--prh-glow)}
html body:has(#main-aside) main a.text-primary:hover{color:#fff}
html body:has(#main-aside) main a.prh-continue{background:var(--prh-panel) !important;color:#dbe6f5}
html body:has(#main-aside) main a.prh-continue:hover{background:var(--prh-panel2) !important}
html body:has(#main-aside) #prh-premium-overview .space-y-3 > div{background:var(--prh-panel) !important;border-color:var(--prh-hairline) !important;color:#dbe6f5}
html body:has(#main-aside) #prh-premium-overview .space-y-3 > div:hover{background:var(--prh-panel2) !important}
html body:has(#main-aside) footer{background:var(--prh-ink) !important;border-top:1px solid var(--prh-hairline) !important;color:#92a4c0}
html body:has(#main-aside) > nav [x-ref="dropdown"]{background:var(--prh-panel) !important;border:1px solid var(--prh-hairline) !important}
html body:has(#main-aside) > nav [x-ref="dropdown"] :is(a,button,span,div,p,svg){color:#e6efff !important}
html body:has(#main-aside) > nav [x-ref="dropdown"] a:hover,html body:has(#main-aside) > nav [x-ref="dropdown"] button:hover{background:color-mix(in srgb,var(--prh-glow) 12%,transparent) !important}
html body:has(#main-aside) > nav [x-ref="dropdown"] a:hover :is(span,svg){color:var(--prh-glow) !important}

/* PRH INPUT TEXT FIX: inline style (color:#111827) ko override karta hai */
html body:has(#main-aside) main :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]){
  color:#eaf2ff !important;-webkit-text-fill-color:#eaf2ff !important;caret-color:#eaf2ff !important}
html body:has(#main-aside) main :is(input,select,textarea):-webkit-autofill,
html body:has(#main-aside) main :is(input,select,textarea):-webkit-autofill:focus{
  -webkit-text-fill-color:#eaf2ff !important;caret-color:#eaf2ff !important;
  -webkit-box-shadow:0 0 0 1000px var(--prh-ink) inset !important;transition:background-color 9999s ease-in-out 0s}

/* PRH CHECKOUT LIGHT v1 : cart + checkout = website "Build your deployment" look */
html:has(.prh-pg){background:#f2f5fa !important;color-scheme:light}
html body:has(.prh-pg){background:#f2f5fa !important;color-scheme:light !important}

/* left white card (checkout) */
html body main .prh-card{
  background:#fff !important;border:1px solid #d3dded !important;border-radius:2px !important;
  padding:2rem !important;box-shadow:0 40px 90px -60px rgba(12,26,46,.55) !important}
html body main .prh-card h1{letter-spacing:-.03em;color:#070c18}

/* cart item cards */
html body:has(.prh-pg) main .bg-background-secondary:not(.prh-os){
  background:#fff !important;border:1px solid #d3dded !important;border-radius:2px !important;
  box-shadow:0 30px 70px -56px rgba(12,26,46,.5) !important}

/* Order Summary = dark card with grid + glow */
html body main .prh-os{
  position:relative;overflow:hidden;
  background-color:var(--prh-ink,#070c18) !important;
  background-image:
    radial-gradient(190px 190px at 100% 0,color-mix(in srgb,var(--prh-glow,#5fe3ff) 22%,transparent),transparent 72%),
    linear-gradient(to right,color-mix(in srgb,var(--prh-azure,#2e7bff) 14%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--prh-azure,#2e7bff) 14%,transparent) 1px,transparent 1px) !important;
  background-size:auto,68px 68px,68px 68px !important;
  border:1px solid rgba(255,255,255,.06) !important;border-radius:2px !important;
  padding:1.75rem !important;color:#dbe6f5;
  box-shadow:0 40px 90px -60px rgba(12,26,46,.7) !important}
html body main .prh-os :is(h2,h4,label,.text-lg){color:#eaf2ff !important}
html body main .prh-os > h2{font-size:1.65rem;letter-spacing:-.03em;padding-bottom:14px;margin-bottom:4px !important;
  border-bottom:1px solid rgba(255,255,255,.12)}
html body main .prh-os div.flex.justify-between{
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.10);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;color:#eaf2ff}
html body main .prh-os div.flex.justify-between h4{
  font-family:inherit;font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55) !important}
html body main .prh-os .text-lg{font-size:2.1rem !important;font-weight:600;line-height:1.1;border-bottom:0}
html body main .prh-os .text-lg h4{font-size:.72rem !important}

/* inputs inside summary (coupon) stay light like website .field */
html body main .prh-os :is(input,select,textarea):not([type=checkbox]):not([type=radio]){
  background:#fff !important;color:#070c18 !important;-webkit-text-fill-color:#070c18 !important;
  border:1px solid #d3dded !important;border-radius:2px !important}

/* Continue shopping = ghost on dark */
html body main .prh-os a.prh-continue{
  background:rgba(255,255,255,.03) !important;color:#eaf2ff !important;
  border:1px solid rgba(255,255,255,.28) !important;border-radius:2px !important}
html body main .prh-os a.prh-continue:hover{border-color:var(--prh-glow,#5fe3ff) !important;color:var(--prh-glow,#5fe3ff) !important}

/* Checkout button = amber like website btn-primary */
html body main .prh-os button[wire\:click="checkout"]{
  background:#ffb020 !important;color:#1a1200 !important;border:0 !important;border-radius:2px !important;
  font-weight:700;box-shadow:0 10px 26px -12px rgba(255,176,32,.75) !important}
html body main .prh-os button[wire\:click="checkout"]:hover{background:#ffc44d !important}

/* PRH CHECKOUT POLISH v1 : symmetry + balance */
@media(min-width:768px){
  html body main .prh-cart-grid,
  html body main .prh-pg.md\:grid{display:grid !important;grid-template-columns:minmax(0,1fr) 400px !important;gap:32px !important;align-items:start !important}
  html body main .prh-cart-grid > *,
  html body main .prh-pg.md\:grid > *{grid-column:auto !important}
}
html body main .prh-os{position:sticky !important;top:96px;
  background-image:
    radial-gradient(190px 190px at 100% 0,color-mix(in srgb,var(--prh-glow,#5fe3ff) 20%,transparent),transparent 72%),
    linear-gradient(to right,color-mix(in srgb,var(--prh-azure,#2e7bff) 7%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--prh-azure,#2e7bff) 7%,transparent) 1px,transparent 1px) !important;
  background-size:auto,48px 48px,48px 48px !important}

/* summary: coupon row + buttons */
html body main .prh-os :is(input):not([type=checkbox]):not([type=radio]){min-height:44px}
html body main .prh-os button{border-radius:2px !important;min-height:44px;font-weight:700}
html body main .prh-os button[wire\:click="applyCoupon"],
html body main .prh-os button[wire\:click="removeCoupon"]{
  background:transparent !important;color:#eaf2ff !important;border:1px solid rgba(255,255,255,.28) !important;box-shadow:none !important}
html body main .prh-os button[wire\:click="checkout"]{width:100% !important;min-height:48px}
html body main .prh-os div.justify-end{flex-direction:column-reverse !important;gap:10px !important;margin-top:10px}
html body main .prh-os div.justify-end > *{width:100% !important;margin:0}
html body main .prh-os a.prh-continue{min-height:44px;width:100%;white-space:nowrap}

/* cart item card */
html body main .prh-item{padding:1.5rem !important;align-items:center;min-height:120px}
html body main .prh-item h2{font-size:1.35rem;letter-spacing:-.02em;color:#070c18 !important}
html body main .prh-item h3{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.4rem;color:#070c18}
html body main .prh-item p{color:#52627a}
html body main .prh-item button{border-radius:2px !important;min-height:40px;min-width:96px;padding:0 20px;font-weight:600;box-shadow:none !important}
html body main .prh-item a button{background:#070c18 !important;color:#fff !important}
html body main .prh-item button[wire\:click^="removeProduct"]{
  background:transparent !important;color:#c33b31 !important;border:1px solid #f0c5c1 !important}

/* footer matches header */
html body:has(.prh-pg) footer{background:#070c18 !important;border-top:1px solid #1b2c45 !important}
html body:has(.prh-pg) footer, html body:has(.prh-pg) footer *{color:#b9c8df !important}