/* =============================================================================
   THE SIGNED-IN CUSTOMER PORTAL  (/my and /my/order/:id)
   -----------------------------------------------------------------------------
   Written in the tracking page's language, because that page is the one customers
   actually like: the garland (बेल), the marigold riding the progress bar, sage
   ticks, the warm blush ground. Signing in used to show LESS than the public
   tracking link — order number, a status word, a payments table. This makes the
   signed-in view the richer one, which is the only way round that makes sense.

   Loaded only by the portal views, so it can never disturb the storefront.
   Palette is deliberately local (matching track.ejs) rather than site-tokens:
   these two pages are the warm, personal corner of the site.
   ============================================================================= */

.pt{
  --pt-cream:#FBF4F6;
  --pt-card:#FFFFFF;
  --pt-ink:#2E2740;
  --pt-ink2:#4b433c;
  --pt-sec:#7A4E58;
  --pt-muted:#8a7f74;
  --pt-muted2:#b3a89d;
  --pt-sage:#7C8B6E;
  --pt-sage-lt:#9FB487;
  --pt-rose:#C58A7A;
  --pt-rose-lt:#D7A093;
  --pt-rose-deep:#8A5B72;
  --pt-peach:#FBEDE6;
  --pt-peach-line:#F3DED5;
  --pt-line:#EFE2DC;
  --pt-shadow:rgba(61,54,48,0.08);
  --pt-r:20px;

  background:var(--pt-cream);
  color:var(--pt-ink2);
  font-size:16px;
  line-height:1.68;
  letter-spacing:.004em;
  position:relative;
  /* Every ornament sits at a negative offset so it appears to grow from behind the card.
     Without this, those overhangs widen the document and the whole page scrolls sideways
     on a phone — which is where nearly all of these customers read it. */
  overflow-x:hidden;
}

/* ---------- motion vocabulary (matches track.ejs so the two pages move alike) ---------- */
@keyframes pt-sway { 0%,100%{ transform:rotate(-2.4deg); } 50%{ transform:rotate(2.4deg); } }
@keyframes pt-curl { 0%,100%{ transform:rotate(-3deg) scale(1); } 50%{ transform:rotate(3deg) scale(1.045); } }
@keyframes pt-rise { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes pt-pulse{ 0%{ transform:scale(1); opacity:.55; } 70%{ transform:scale(2.1); opacity:0; } 100%{ opacity:0; } }
@keyframes pt-grow { from{ stroke-dashoffset:220; } to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .pt *, .pt *::before, .pt *::after{ animation:none !important; transition:none !important; }
}

/* ---------- the ground: a faint tiling बेल so the page is never bare ---------- */
.pt::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.30;
  background-size:132px 132px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23C58A7A' stroke-width='1.05' opacity='.5'%3E%3Cpath d='M12 22c10-8 22-6 28 4'/%3E%3Cpath d='M104 96c10-8 22-6 28 4'/%3E%3Cpath d='M66 60c-8 6-9 18-2 26'/%3E%3C/g%3E%3Cg fill='%23C58A7A' opacity='.42'%3E%3Cellipse cx='40' cy='26' rx='3.1' ry='5.4'/%3E%3Cellipse cx='46.4' cy='30.2' rx='5.4' ry='3.1'/%3E%3Cellipse cx='33.6' cy='30.2' rx='5.4' ry='3.1'/%3E%3Cellipse cx='40' cy='34.4' rx='3.1' ry='5.4'/%3E%3Ccircle cx='40' cy='30.2' r='1.7'/%3E%3C/g%3E%3Cg fill='%23DD9C46' opacity='.38'%3E%3Cellipse cx='98' cy='72' rx='2.5' ry='4.4'/%3E%3Cellipse cx='103.2' cy='75.4' rx='4.4' ry='2.5'/%3E%3Cellipse cx='92.8' cy='75.4' rx='4.4' ry='2.5'/%3E%3Cellipse cx='98' cy='78.8' rx='2.5' ry='4.4'/%3E%3Ccircle cx='98' cy='75.4' r='1.4'/%3E%3C/g%3E%3Cg fill='%239FB487' opacity='.45'%3E%3Cpath d='M18 92c5-4 6-12 0-16-6 4-5 12 0 16Z'/%3E%3Cpath d='M118 34c5-4 6-12 0-16-6 4-5 12 0 16Z'/%3E%3Cpath d='M64 112c4-3 5-10 0-13-5 3-4 10 0 13Z'/%3E%3C/g%3E%3C/svg%3E");
}
.pt > *{ position:relative; z-index:1; }

/* ---------- brandbar + garland ---------- */
.pt-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 0 16px; }
.pt-garland{ display:block; margin-bottom:6px; overflow:visible;
             transform-origin:center bottom; animation:pt-sway 6s ease-in-out infinite; }
.pt-bname{ font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:18px;
           letter-spacing:.2em; color:var(--pt-ink); }
.pt-btag{ font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:12px;
          color:var(--pt-rose-deep); margin-top:3px; letter-spacing:.05em; }

/* ---------- greeting ---------- */
.pt-greet{ text-align:center; padding:.4rem 1.1rem 0; animation:pt-rise .5s ease both; }
.pt-greet h1{ font-family:'Playfair Display',Georgia,serif; font-weight:600; color:var(--pt-ink);
              font-size:clamp(25px,5vw,31px); line-height:1.18; letter-spacing:-.01em;
              margin:0; text-wrap:balance; }
.pt-greet p{ margin:10px auto 0; max-width:38ch; font-size:15.5px; line-height:1.66; color:var(--pt-sec); }
.pt-code{ margin-top:12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
          color:var(--pt-muted2); font-weight:700; }

/* ---------- layout ---------- */
.pt-stack{ max-width:640px; margin:0 auto; padding:1.1rem 1.1rem 2.6rem;
           display:flex; flex-direction:column; gap:1rem; }

.pt-c{ background:var(--pt-card); border-radius:var(--pt-r); padding:1.15rem;
       box-shadow:0 2px 10px -4px var(--pt-shadow); position:relative; overflow:hidden; }
.pt-c > *:not(.pt-curl){ position:relative; z-index:1; }
.pt-c h2{ font-family:'Playfair Display',Georgia,serif; font-weight:600; color:var(--pt-ink);
          margin:.25rem 0 0; font-size:1.28rem; letter-spacing:-.008em; }
.pt-c h3{ font-family:'Playfair Display',Georgia,serif; font-weight:600; color:var(--pt-ink);
          margin:0 0 .85rem; font-size:1.08rem; letter-spacing:-.006em; }
.pt-c p{ font-size:15px; line-height:1.66; margin:0 0 .55rem; }
.pt-c p:last-child{ margin-bottom:0; }
.pt-kicker{ font-size:11px; letter-spacing:.11em; text-transform:uppercase;
            color:var(--pt-muted2); font-weight:700; }

/* the बेल curling out of a card corner */
.pt-curl{ position:absolute; pointer-events:none; opacity:.42; z-index:0;
          animation:pt-curl 9s ease-in-out infinite; }
.pt-curl.tl{ left:-12px; top:-12px; transform-origin:top left; }
.pt-curl.tr{ right:-12px; top:-12px; transform-origin:top right; animation-duration:7.5s; animation-delay:-1.5s; }
.pt-curl.bl{ left:-14px; bottom:-14px; transform-origin:bottom left; animation-duration:10.5s; animation-delay:-3s; }
.pt-curl.br{ right:-14px; bottom:-16px; transform-origin:bottom right; animation-duration:8.5s; animation-delay:-4.5s; }
.pt-curl path{ stroke-dasharray:220; animation:pt-grow 2.4s ease-out both; }

/* ---------- progress bar + marigold ---------- */
.pt-bar{ position:relative; margin:.85rem 0 .8rem; }
.pt-bar-t{ height:8px; border-radius:99px; background:var(--pt-peach-line); overflow:hidden; }
.pt-bar-f{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--pt-rose-lt),var(--pt-rose)); }
.pt-bloom{ position:absolute; top:50%; transform:translate(-50%,-50%); }
.pt-bloom svg{ display:block; overflow:visible; transform-origin:center; animation:pt-sway 4.5s ease-in-out infinite; }

.pt-about{ background:var(--pt-peach); border:1px solid var(--pt-peach-line); border-radius:14px;
           padding:.85rem .95rem; margin-top:.85rem; }
.pt-about b{ display:block; color:var(--pt-sec); font-size:14.5px; margin-bottom:.25rem; font-weight:600; }
.pt-about p{ margin:0; font-size:14.5px; line-height:1.64; }

/* ---------- journey ---------- */
.pt-step{ display:flex; gap:14px; position:relative; padding-bottom:18px; }
.pt-step:last-child{ padding-bottom:0; }
.pt-rail{ position:relative; width:24px; flex:none; display:flex; justify-content:center; }
.pt-rail .ln{ position:absolute; top:24px; bottom:-18px; width:2px; background:var(--pt-line); }
.pt-step:last-child .pt-rail .ln{ display:none; }
.pt-halo{ position:absolute; top:0; width:24px; height:24px; border-radius:50%;
          background:var(--pt-rose); animation:pt-pulse 2.4s ease-out infinite; }
.pt-dot{ position:relative; width:24px; height:24px; border-radius:50%; display:flex;
         align-items:center; justify-content:center; font-size:11px; font-weight:700;
         z-index:1; background:var(--pt-card); }
.pt-dot.done{ background:var(--pt-sage); color:#fff; border:2px solid var(--pt-sage); }
.pt-dot.current{ border:2px solid var(--pt-rose); color:var(--pt-rose); }
.pt-dot.upcoming{ border:2px solid var(--pt-line); color:transparent; }
.pt-step .tx{ flex:1; min-width:0; }
.pt-step .tx b{ font-size:15px; font-weight:600; color:var(--pt-ink); letter-spacing:-.003em; }
.pt-step .tx small{ display:block; color:var(--pt-muted); font-size:14px; line-height:1.58;
                    letter-spacing:.008em; margin-top:.1rem; }
.pt-step .wn{ font-size:13.5px; color:var(--pt-muted2); white-space:nowrap; }
.pt-step.up .tx b, .pt-step.up .tx small{ color:var(--pt-muted2); }

/* ---------- photos ---------- */
.pt-photo{ position:relative; border-radius:var(--pt-r); overflow:hidden; height:220px;
           background:linear-gradient(135deg,#F3DED5,#EAD0C6); box-shadow:0 2px 10px -4px var(--pt-shadow); }
.pt-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pt-photo::after{ content:""; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.5);
                  border-radius:13px; pointer-events:none; }
.pt-photo .cap{ position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem .8rem; color:#fff;
                font-size:13.5px; background:linear-gradient(180deg,rgba(46,39,64,0),rgba(46,39,64,.62)); }

/* ---------- notes ---------- */
.pt-note{ padding-left:.8rem; border-left:2px solid var(--pt-sage-lt); margin-bottom:.85rem; }
.pt-note:last-child{ margin-bottom:0; }
.pt-note.them{ border-left-color:var(--pt-rose-lt); }
.pt-note .w{ font-size:12.5px; color:var(--pt-muted2); }
.pt-note p{ margin:.12rem 0 0; font-size:14.5px; line-height:1.62; }

/* ---------- money ---------- */
.pt-row{ display:flex; justify-content:space-between; gap:.7rem; font-size:15px; padding:.3rem 0; }
.pt-row.tint{ background:var(--pt-peach); margin:.45rem -1.15rem 0; padding:.65rem 1.15rem;
              font-weight:700; color:var(--pt-sec); }
.pt-num{ font-variant-numeric:tabular-nums; letter-spacing:.005em; }
.pt-row.tint .pt-num{ font-size:1.05rem; letter-spacing:-.01em; }

/* ---------- controls ---------- */
.pt-btn{ display:inline-block; text-decoration:none; text-align:center; border-radius:99px;
         padding:.68rem 1.3rem; font-size:14.5px; font-weight:700; border:1px solid transparent;
         cursor:pointer; font-family:inherit; transition:transform .25s ease; }
.pt-btn:active{ transform:scale(.97); }
.pt-btn.p{ background:var(--pt-rose-deep); color:#fff; }
.pt-btn.g{ background:transparent; color:var(--pt-rose-deep); border-color:var(--pt-rose-lt); }
.pt-btn.full{ display:block; width:100%; }
.pt-btn:focus-visible{ outline:2px solid #DD9C46; outline-offset:2px; }

.pt-ask{ display:flex; gap:.45rem; }
.pt-ask input{ flex:1; min-width:0; border:1px solid var(--pt-line); border-radius:99px;
               padding:.58rem .9rem; font:inherit; font-size:14.5px;
               background:var(--pt-cream); color:var(--pt-ink2); }

/* ---------- keepsake list (account home) ---------- */
.pt-keep{ display:flex; gap:.85rem; align-items:center; background:var(--pt-card);
          border-radius:var(--pt-r); padding:.8rem; text-decoration:none; color:inherit;
          box-shadow:0 2px 10px -4px var(--pt-shadow); transition:transform .25s ease, box-shadow .25s ease; }
.pt-keep:hover{ transform:translateY(-2px); box-shadow:0 8px 22px -8px var(--pt-shadow); }
.pt-keep .th{ width:56px; height:56px; border-radius:12px; flex:none; object-fit:cover;
              background:linear-gradient(135deg,#F3DED5,#EAD0C6); }
.pt-keep .mt{ flex:1; min-width:0; }
.pt-keep .mt b{ display:block; font-size:15px; font-weight:600; color:var(--pt-ink); }
.pt-keep .mt small{ color:var(--pt-muted); font-size:13.5px; letter-spacing:.01em; }
.pt-mini{ display:flex; align-items:center; gap:.45rem; margin-top:.3rem; }
.pt-mini .tk{ flex:1; height:4px; border-radius:99px; background:var(--pt-peach-line); overflow:hidden; }
.pt-mini .fl{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--pt-rose-lt),var(--pt-rose)); }
.pt-mini .n{ font-size:12px; color:var(--pt-muted2); white-space:nowrap; font-variant-numeric:tabular-nums; }

.pt-pill{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
          padding:.24rem .6rem; border-radius:99px; white-space:nowrap; }
.pt-pill.done{ background:#EEF3EC; color:#4a7a52; }
.pt-pill.wip{ background:var(--pt-peach); color:var(--pt-sec); }

/* ---------- quiet typographic tiles ---------- */
.pt-quad{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.pt-q{ background:var(--pt-card); border-radius:16px; padding:.9rem; text-decoration:none;
       color:inherit; box-shadow:0 2px 10px -4px var(--pt-shadow); transition:transform .25s ease; }
.pt-q:hover{ transform:translateY(-2px); }
.pt-q::before{ content:""; display:block; width:20px; height:1px; background:var(--pt-sage-lt); margin-bottom:.5rem; }
.pt-q b{ display:block; font-family:'Playfair Display',Georgia,serif; font-weight:600;
         font-size:15px; color:var(--pt-ink); }
.pt-q small{ display:block; color:var(--pt-muted); font-size:13.5px; letter-spacing:.008em; margin-top:.08rem; }

/* ---------- courier ---------- */
.pt-ship{ background:var(--pt-cream); border:1px solid var(--pt-line); border-radius:14px; padding:.8rem .9rem; }
.pt-ship .co{ font-size:15px; font-weight:600; color:var(--pt-ink); }
.pt-ship .awb{ font-size:14px; color:var(--pt-sec); margin-top:.2rem; letter-spacing:.01em; }
.pt-ship a{ display:inline-block; margin-top:.5rem; color:var(--pt-rose-deep);
            font-size:14.5px; font-weight:600; text-decoration:none; }

/* ---------- FAQ ---------- */
.pt-faq{ border-top:1px solid var(--pt-line); }
.pt-faq:first-of-type{ border-top:none; }
.pt-faq summary{ cursor:pointer; padding:.7rem 0; font-size:15px; font-weight:600; color:var(--pt-ink);
                 list-style:none; display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.pt-faq summary::-webkit-details-marker{ display:none; }
.pt-faq summary::after{ content:"+"; color:var(--pt-rose-deep); font-weight:400; font-size:1.15rem; }
.pt-faq[open] summary::after{ content:"\2013"; }
.pt-faq p{ margin:0 0 .8rem; font-size:14.5px; line-height:1.64; color:var(--pt-muted); }

/* ---------- a word from Aastha ---------- */
.pt-aastha{ display:flex; gap:.85rem; align-items:flex-start; }
.pt-aastha .av{ width:44px; height:44px; border-radius:50%; flex:none; object-fit:cover;
                background:linear-gradient(140deg,#E0968A,#C58A7A); }
.pt-aastha .sig{ font-family:'Playfair Display',Georgia,serif; font-style:italic;
                 color:var(--pt-rose-deep); font-size:15px; margin-top:.45rem; }

/* ---------- preview banner (team only) ---------- */
.pt-preview{ background:#2E2740; color:#fff; padding:.7rem 1rem; text-align:center;
             font-size:13.5px; line-height:1.5; }

/* ---------- empty state ---------- */
.pt-empty{ text-align:center; padding:2rem 1rem; }
.pt-empty p{ color:var(--pt-muted); margin:.6rem 0 1.1rem; }

@media (max-width:420px){
  .pt-quad{ grid-template-columns:1fr; }
  .pt-step .wn{ display:none; }
}

/* Photo not taken yet — most orders. Showing nothing leaves the page opening on a blank,
   which reads as broken; this says plainly that a photo is coming. */
.pt-photo-empty{ background:linear-gradient(135deg,#FBEDE6,#F3DED5); display:flex;
                 align-items:center; justify-content:center; height:150px; }
.pt-photo-empty .ph{ display:flex; flex-direction:column; align-items:center; gap:.5rem;
                     color:var(--pt-rose-deep); opacity:.7; text-align:center; padding:0 1.4rem; }
.pt-photo-empty .ph span{ font-size:13.5px; max-width:30ch; line-height:1.5; }