/* Wartip public channel | centered desktop header contents + calm donation UI polish.
   This stylesheet only changes presentation; checkout, tabs and browser navigation
   continue to use the existing PHP/JS handlers. */
:root{
  --wt-polish-violet:#7531e5;
  --wt-polish-border:#e8e0f5;
  --wt-polish-shadow:0 12px 34px rgba(47,26,102,.055);
}

/* Full-width sticky navigation; inner content lines up with the original PC container. */
body > .container > header.top{
  padding:0!important;
  min-height:78px;
  height:78px;
  background:#fff;
  border:0!important;
  border-bottom:1px solid var(--wt-polish-border)!important;
  border-radius:0!important;
  box-shadow:0 6px 20px rgba(46,28,87,.04);
}
body > .container > header.top > .top-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  width:min(1120px,calc(100% - 40px));
  max-width:1120px;
  height:100%;
  margin:0 auto;
  min-width:0;
}
body > .container > header.top .logo,
body > .container > header.top .home-link{position:relative;flex-shrink:0}
body > .container > header.top .logo img{display:block;width:108px;height:auto;max-height:65px;object-fit:contain;object-position:left center}
body > .container > header.top .home-link{
  min-height:40px;padding:9px 16px;gap:9px;
  border:1px solid #e7dcf4;border-radius:999px;
  background:#fff;color:#603392!important;
  box-shadow:0 2px 8px rgba(55,27,91,.035);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
body > .container > header.top .home-link:hover{
  background:#f6f0ff;border-color:#c8aff0;color:#6c24cf!important;
  box-shadow:0 4px 13px rgba(97,43,176,.1);transform:none;
}

/* Gentle hierarchy: accent the channel's actual cover without changing its crop. */
body{background:#faf9ff}
body > .container > .cover{
  border-color:#e5d9f1;
  border-radius:21px;
  box-shadow:0 14px 34px rgba(43,24,83,.095);
}
body > .container > .cover::after{
  background:linear-gradient(180deg,rgba(14,8,31,.02),rgba(15,9,32,.05) 42%,rgba(15,9,31,.8) 100%)!important;
}
body > .container > .cover .avatar{border-radius:18px;box-shadow:0 7px 21px rgba(12,6,26,.28)}
body > .container > .cover .channel h1{letter-spacing:.005em;text-shadow:0 2px 12px #100c1e55}

/* Tabs look like a single intuitive control, without growing or moving on hover. */
body > .container > .tabs{
  gap:7px;
  padding:6px;
  margin:16px 0 20px;
  background:#fff;
  border:1px solid var(--wt-polish-border);
  border-radius:16px;
  box-shadow:0 4px 13px rgba(45,25,89,.025);
}
body > .container > .tabs a{
  min-height:45px;border-radius:11px;
  font-size:14px;font-weight:600;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
body > .container > .tabs a:hover{background:#f5edff;color:#6925c8;transform:none}
body > .container > .tabs a.active,
body > .container > .tabs a[aria-current="page"]{
  color:#6925c8;background:#f2eaff;
  border-color:#e4d3fe;box-shadow:inset 0 0 0 1px #ffffffa8;
}

/* Main donation form: tidy spacing, clearer checkpoints and accessible controls. */
body > .container .layout,
body > .container .order-layout{gap:18px;align-items:start}
body > .container .card{
  border:1px solid var(--wt-polish-border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--wt-polish-shadow);
}
body > .container .support-card{padding:28px 28px 30px}
body > .container .support-intro{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #eee7f6}
body > .container .support-heading{gap:13px;margin-bottom:10px}
body > .container .support-heading .icon{
  width:43px;height:43px;border-radius:14px;
  background:linear-gradient(145deg,#eee3ff,#f8f4ff);
  color:#762edc;font-size:19px;
}
body > .container .support-heading h2{font-size:clamp(22px,2.25vw,25px);line-height:1.3}
body > .container .support-intro>.muted{font-size:14px;line-height:1.75;color:#766a86}
body > .container .checkout-progress{margin:0 0 15px}
body > .container .checkout-progress-item{font-size:13px}
body > .container .step-label{
  padding:5px 11px;border-radius:999px;
  color:#6c2cc6;background:#f4ecff;border:1px solid #e8d9ff;
  font-size:12px;font-weight:600;
}
body > .container .field{gap:8px;margin-top:19px}
body > .container .field label{font-size:15px;line-height:1.5;color:#34234d;font-weight:600}
body > .container .input,
body > .container textarea,
body > .container select{
  min-height:49px;padding:12px 14px;border:1px solid #e4dbee;border-radius:12px;
  background:#fcfbff;font-size:16px;color:#261b3e;
  box-shadow:none;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
body > .container .input:hover,
body > .container textarea:hover,
body > .container select:hover{border-color:#c9b4e9}
body > .container .input:focus,
body > .container textarea:focus,
body > .container select:focus{outline:none;background:#fff;border-color:#9659e9;box-shadow:0 0 0 3px #8e48e719}
body > .container .amounts{gap:9px;margin-top:10px}
body > .container .amounts button{
  min-height:43px;border-radius:11px;
  background:#fff;border:1px solid #e6daf5;
  color:#6d36b8;font-size:14px;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
body > .container .amounts button:hover,
body > .container .amounts button.chosen{background:#f2eaff;border-color:#a77cea;color:#6426b9;box-shadow:0 0 0 2px #8143e70c;transform:none}
body > .container .donate-next{margin-top:20px}
body > .container .btn-primary{
  border-radius:12px;background:linear-gradient(115deg,#722add,#8a40e7);
  border-color:#7930de;color:#fff;
  box-shadow:0 6px 16px rgba(91,41,178,.13);
}
body > .container .btn-primary:hover{
  background:linear-gradient(115deg,#6823d4,#8038e0);
  border-color:#6925ce;box-shadow:0 8px 18px rgba(91,41,178,.17);
}
body > .container .btn:focus-visible,
body > .container .tabs a:focus-visible,
body > .container .amounts button:focus-visible{
  outline:3px solid #b491f1;outline-offset:3px;
}

/* Side content: distinct but unobtrusive; names and amounts remain easy to scan. */
body > .container .support-side{gap:15px}
body > .container .support-side .card{padding:24px}
body > .container .goal-card{background:linear-gradient(130deg,#fff,#fdfaff);border-color:#e8dcf7}
body > .container .goal-card .gratitude-icon{
  width:42px;height:42px;border-radius:13px;
  background:#f1e7ff;color:#7a34d7;
}
body > .container .goal-card .gratitude-icon i{font-size:18px}
body > .container .goal-card h2{font-size:clamp(18px,2vw,21px);line-height:1.45}
body > .container .recent-heading{gap:11px}
body > .container .recent-heading h2{font-size:19px}
body > .container .recent{display:flex;align-items:flex-start;gap:10px}
body > .container .recent>div{min-width:0;flex:1}
body > .container .recent .kicker{flex:none;white-space:nowrap;color:#7531de;font-size:14px}
body > .container .recent b{font-size:14px}
body > .container .recent small{font-size:13px;line-height:1.6}

/* Shop and About inherit the same visual rhythm without changing their data. */
body > .container .product{overflow:hidden}
body > .container .product .product-body{padding:19px}
body > .container .product h3{font-size:17px}
body > .container .product .btn{min-height:43px}
body > .container .about{max-width:850px}

@media(max-width:900px){
  body > .container .layout,
  body > .container .order-layout{grid-template-columns:1fr}
}
@media(max-width:620px){
  /* Mobile navbar stays square and edge-to-edge. Only desktop header contents
     are constrained by the reading-width container. */
  body > .container > header.top{height:70px;min-height:70px;margin-bottom:12px;border-radius:0!important}
  body > .container > header.top > .top-inner{width:100%;max-width:none;padding:0 14px;gap:12px}
  body > .container > header.top .logo img{width:90px;max-height:55px}
  body > .container > header.top .home-link{padding:8px 11px;min-height:38px;font-size:12px}
  body > .container > .cover{border-radius:15px}
  body > .container > .tabs{margin:11px 0 16px;padding:5px;gap:4px;border-radius:13px}
  body > .container > .tabs a{min-height:43px;font-size:12px;padding:9px 6px}
  body > .container .support-card{padding:20px 18px 24px}
  body > .container .support-side .card{padding:19px}
  body > .container .support-heading h2{font-size:21px}
  body > .container .support-intro>.muted{font-size:13px}
  body > .container .field label{font-size:14px}
  body > .container .amounts{gap:7px}
  body > .container .amounts button{min-height:43px;font-size:13px}
  body > .container .recent .kicker{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  body > .container .tabs a,
  body > .container .btn,
  body > .container .amounts button,
  body > .container .input{transition:none}
}