/* ============================================================================
   Circulate customer pages - the 2026-09-29 look (sea-teal, sage, sand).
   Loaded AFTER lib.php's own <style>, so it only re-colours and re-shapes what
   is already there; no page markup depends on it.
   ========================================================================== */
:root{--navy:#006880;--navy2:#00546a;--orange:#c98a3e;--ink:#1c2a31;--muted:#5d6e75;--line:#d1e3e9;--bg:#ffffff}
body{font-family:'Plus Jakarta Sans','Segoe UI',system-ui,Arial,sans-serif;background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--navy)}
.top{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:12px 24px;position:sticky;top:0;z-index:5}
.top .brand{display:inline-block;width:180px;height:47px;background:url(/img/circulate-logo-v4.png) left center/contain no-repeat;color:transparent;font-size:0;overflow:hidden}
.top a.act,.top span.act{color:#34454d;font-weight:600;font-size:14px;padding:7px 12px;border-radius:2px;margin-left:4px}
.top a.act:hover{background:#eef5f8;color:var(--navy)}
.wrap{margin:38px auto}
.card{border-radius:2px;border-color:var(--line);box-shadow:0 2px 4px rgba(0,104,128,.08),0 14px 36px rgba(0,104,128,.18);padding:30px}
h1{font-weight:800;letter-spacing:-.02em;font-size:26px}
h2{font-weight:800;letter-spacing:-.01em}
label{color:#34454d;font-weight:700}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{border:1.5px solid var(--line);border-radius:2px;padding:12px 14px;font-family:inherit;transition:border-color .2s,box-shadow .2s;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px #d6eaf0}
.btn{border-radius:2px;padding:12px 22px;font-weight:700;background:var(--navy);box-shadow:0 4px 8px rgba(0,104,128,.18),0 12px 28px rgba(0,104,128,.38);transition:background .2s,transform .2s}
.btn:hover{background:var(--navy2);transform:translateY(-1px)}
.btn.orange{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(201,138,62,.25)}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line);box-shadow:none}
.err{background:#f6e6e3;border-color:#ecc9c2;color:#a55a4c;border-radius:2px}
.ok{background:#d6eaf0;border-color:#b5d6e0;color:#00546a;border-radius:2px}
table.grid th{background:#eef5f8;color:#5d6e75}
table.grid td{border-bottom-color:var(--line)}
.pill.paid{background:#d6eaf0;color:#00546a}.pill.pending{background:#e6eef7;color:#3f6a92}
code.key{color:#00546a;background:#eef5f8;border-color:#c8e0e8;border-radius:2px}
.price{color:var(--ink)}
/* no yellow tints (owner, 2026-09-29): account.php paints its download icon and
   buttons gold inline, so these overrides need !important to win */
.pill2.pending{background:#e6eef7!important;color:#3f6a92!important;border-color:#c9dbeb!important}
.sec-ic[style*="#e3a008"]{background:linear-gradient(135deg,#006880,#2f8ea6)!important;border-color:#006880!important}
.dl-btn[style*="#e3a008"]{background:linear-gradient(135deg,#006880,#00546a)!important;box-shadow:0 8px 20px rgba(0,104,128,.28)!important}
.btn.orange{background:var(--navy)!important;box-shadow:0 6px 18px rgba(0,104,128,.25)!important}

/* owner, 2026-09-29: buttons have 2px corners */
.btn,.dl-btn{border-radius:2px!important}

/* ---------- phones (owner, 2026-09-29) ---------- */
/* buttons and fields use the page font, not the browser's default */
button,input,select,textarea,.btn{font-family:inherit}
/* small text links get a real tap area */
.linkrow a,.muted a{display:inline-block;padding:7px 2px}
@media(max-width:760px){
  /* header stays on one line: smaller logo, no greeting (the name is on the page) */
  .top{flex-wrap:nowrap;padding:10px 14px;gap:4px}
  .top .brand{width:128px;height:34px;flex-shrink:0}
  .top span.act{display:none}
  .top a.act{white-space:nowrap;padding:8px 7px;margin-left:0;font-size:13px}
  /* My Account tables become one card per order - no sideways swiping to reach
     the download button or the licence key */
  table.mtbl thead{display:none}
  table.mtbl,table.mtbl tbody,table.mtbl tr,table.mtbl td{display:block;width:100%}
  table.mtbl tr{border:1px solid var(--line);border-radius:2px;padding:4px 16px;margin:0 0 14px;background:#fff;box-shadow:0 2px 4px rgba(0,104,128,.06),0 10px 24px rgba(0,104,128,.12)}
  table.mtbl tbody tr:hover{background:#fff}
  table.mtbl td{padding:11px 0;border-bottom:1px dashed #d1e3e9;white-space:normal!important}
  table.mtbl tr td:last-child{border-bottom:0}
  table.mtbl td::before{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7c8798;margin-bottom:5px}
  table.mtbl td:nth-child(1)::before{content:"Order"}
  table.mtbl td:nth-child(2)::before{content:"Date & time"}
  table.mtbl td:nth-child(3)::before{content:"Software"}
  /* purchases table: 5 cells a row */
  table.mtbl td:nth-child(4):nth-last-child(2)::before{content:"Setup file"}
  table.mtbl td:nth-child(5):nth-last-child(1)::before{content:"Licence key"}
  /* payment table: 10 cells a row */
  table.mtbl td:nth-child(4):nth-last-child(7)::before{content:"List price"}
  table.mtbl td:nth-child(5):nth-last-child(6)::before{content:"Coupon"}
  table.mtbl td:nth-child(6):nth-last-child(5)::before{content:"Discount"}
  table.mtbl td:nth-child(7):nth-last-child(4)::before{content:"Amount paid"}
  table.mtbl td:nth-child(8):nth-last-child(3)::before{content:"Payment mode"}
  table.mtbl td:nth-child(9):nth-last-child(2)::before{content:"Channel partner"}
  table.mtbl td:nth-child(10):nth-last-child(1)::before{content:"Status"}
  table.mtbl tr:has(td:nth-child(10)){display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .dt-main{white-space:normal}
  .keywrap{max-width:none}
  .dl-btn{width:100%;justify-content:center}
}

/* owner, 2026-09-29: every corner 2px (lib.php and the pages set their own radii inline) */
.card,.btn,.err,.ok,.pill,.pill2,code.key,.sec-card,.sec-ic,.acct-avatar,.acct-chip,.keywrap,.key2,.copy-btn,.dl-btn,.info-box,.cart-banner,table.grid th:first-child,table.grid th:last-child,table.mtbl th:first-child,table.mtbl th:last-child,table.mtbl tr,input,select,textarea,button,.pinbox input,.cart-scroll tr,.c,[style*="border-radius"]{border-radius:2px!important}
.step-n{border-radius:50%!important}