/* Pure Nature Design — account / auth pages */

/* split auth layout */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 74px);}
@media(max-width:860px){.auth{grid-template-columns:1fr;}.auth .auth-vis{display:none;}}
.auth-vis{position:relative;background:var(--cream-deep);overflow:hidden;}
.auth-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.auth-vis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,10,.15),rgba(20,15,10,.55));}
.auth-vis .q{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(32px,4vw,56px);color:#fff;max-width:440px;}
.auth-vis .q p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.32;margin:0 0 10px;}
.auth-vis .q span{font-size:13px;color:rgba(255,255,255,.8);}

.auth-form{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,72px) clamp(24px,5vw,80px);max-width:560px;width:100%;margin:0 auto;}
.auth-form .eyebrow{margin-bottom:14px;}
.auth-form h1{font-size:clamp(30px,3.4vw,42px);margin-bottom:10px;}
.auth-form .sub{font-size:15px;color:var(--ink-soft);margin-bottom:30px;}
.auth-form .sub a{color:var(--oak-deep);font-weight:600;}

.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;}
.field input{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 15px;transition:.2s;}
.field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(33,28,22,.07);}
.field .pwd-wrap{position:relative;}
.field .pwd-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;}
.field .pwd-wrap button:hover{color:var(--ink);background:var(--cream);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:480px){.frow{grid-template-columns:1fr;}}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px;flex-wrap:wrap;}
.check-row{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer;}
.check-row input{appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;display:grid;place-content:center;flex:none;margin-top:1px;transition:.15s;}
.check-row .check-txt{flex:1;min-width:0;}
.check-row a{color:var(--oak-deep);font-weight:600;}
.check-row a:hover{text-decoration:underline;}
.check-row input:checked{background:var(--ink);border-color:var(--ink);}
.check-row input:checked::after{content:"✓";color:#fff;font-size:11px;font-weight:700;}
.auth-row .forgot{font-size:13.5px;color:var(--oak-deep);font-weight:600;}
.auth-form .btn{width:100%;justify-content:center;}
.auth-divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--muted);font-size:13px;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);}
.social-auth{display:flex;flex-direction:column;gap:10px;}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:13px;font-size:14px;font-weight:600;background:#fff;transition:.2s;color:var(--ink);}
.social-btn:hover{border-color:var(--ink);background:var(--cream);}
.field-error{font-size:12.5px;color:#b23b3b;margin-top:6px;display:none;}
.field-error.on{display:block;}

/* ===== account dashboard ===== */
.acc-head{padding:26px 0 8px;}
.acc-head h1{font-size:clamp(28px,3.4vw,42px);}
.acc-head .hi{font-size:14px;color:var(--muted);margin-top:6px;}
.acc-layout{display:grid;grid-template-columns:250px 1fr;gap:48px;align-items:start;padding-top:30px;}
@media(max-width:860px){.acc-layout{grid-template-columns:1fr;gap:24px;}}
.acc-nav{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;position:sticky;top:96px;}
/* mobilni: nav nije lepljiv (u 1 koloni sticky bi lebdeo preko sadržaja) — mora POSLE baznog pravila */
@media(max-width:860px){.acc-nav{position:static;top:auto;}}
.acc-nav a{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:.18s;}
.acc-nav a:hover{background:var(--cream);color:var(--ink);}
.acc-nav a.active{background:var(--ink);color:#fff;}
.acc-nav a.active svg{color:#fff;}
.acc-nav svg{color:var(--muted);flex:none;}
.acc-nav .sep{height:1px;background:var(--line-soft);margin:8px 12px;}
.acc-nav a.logout{color:#b23b3b;}
.acc-nav a.logout:hover{background:#fbeeee;}

.acc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px;}
@media(max-width:620px){.acc-cards{grid-template-columns:1fr;}}
.acc-stat{border:1px solid var(--line);border-radius:14px;padding:22px;}
.acc-stat .ic{width:40px;height:40px;border-radius:999px;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--oak-deep);margin-bottom:14px;}
.acc-stat .n{font-family:var(--serif);font-size:30px;line-height:1;}
.acc-stat .l{font-size:13px;color:var(--muted);margin-top:5px;}

.acc-panel{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:24px;}
.acc-panel .ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line-soft);background:var(--cream);}
.acc-panel .ph h3{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0;}
.acc-panel .ph a{font-size:13px;color:var(--oak-deep);font-weight:600;}

/* order list */
.order-item{display:grid;grid-template-columns:1fr auto;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line-soft);align-items:center;}
.order-item:last-child{border-bottom:none;}
.order-item .oid{font-weight:700;font-size:14.5px;}
.order-item .ometa{font-size:13px;color:var(--muted);margin-top:3px;}
.order-item .ostatus{font-size:12px;font-weight:600;letter-spacing:.04em;padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;}
.ostatus.proc{background:#fff5e6;color:#9a6a1a;}
.ostatus.izrada{background:#eef2ea;color:var(--moss-deep);}
.ostatus.transit{background:#e9f0f7;color:#2e5a82;}
.ostatus.done{background:var(--moss);color:#fff;}
.ostatus.cancel{background:#fdecea;color:#a23b3b;}
.ostatus.onhold{background:#f3f0ea;color:#7a6a4f;}
.order-item .oright{display:flex;align-items:center;gap:16px;}
.order-item .oprice{font-weight:600;font-size:14.5px;}
@media(max-width:560px){.order-item{grid-template-columns:1fr;}.order-item .oright{justify-content:space-between;}}

/* profile form */
.acc-body-pad{padding:24px 22px;}

/* ===== order tracking ===== */
.track-hero{max-width:680px;padding:30px 0 8px;}
.track-hero h1{margin:14px 0 14px;}
.track-box{display:flex;gap:10px;max-width:520px;margin-top:8px;}
.track-box input{flex:1;border:1px solid var(--line);border-radius:999px;padding:14px 20px;font-family:inherit;font-size:15px;background:#fff;}
.track-box input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(33,28,22,.06);}

.track-result{border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:8px;}
.track-result .th{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 26px;background:var(--cream);border-bottom:1px solid var(--line);flex-wrap:wrap;}
.track-result .th .oid{font-family:var(--serif);font-size:24px;}
.track-result .th .ometa{font-size:13px;color:var(--muted);margin-top:4px;}
.track-eta{text-align:right;}
.track-eta .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
.track-eta .d{font-family:var(--serif);font-size:20px;color:var(--ink);}

/* timeline */
.tl-track{padding:30px 26px;}
.tl-step{display:grid;grid-template-columns:40px 1fr;gap:18px;position:relative;padding-bottom:30px;}
.tl-step:last-child{padding-bottom:0;}
.tl-step::before{content:"";position:absolute;left:19px;top:34px;bottom:-4px;width:2px;background:var(--line);}
.tl-step:last-child::before{display:none;}
.tl-step.done::before{background:var(--moss);}
.tl-dot{width:40px;height:40px;border-radius:999px;border:2px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--muted);z-index:1;}
.tl-step.done .tl-dot{background:var(--moss);border-color:var(--moss);color:#fff;}
.tl-step.current .tl-dot{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 4px rgba(33,28,22,.08);}
.tl-step .tl-info h4{font-size:17px;margin:8px 0 4px;}
.tl-step.done .tl-info h4,.tl-step.current .tl-info h4{color:var(--ink);}
.tl-step:not(.done):not(.current) .tl-info h4{color:var(--muted);}
.tl-step .tl-info p{font-size:13.5px;color:var(--ink-soft);margin:0;}
.tl-step .tl-info .when{font-size:12.5px;color:var(--muted);margin-top:4px;}
.track-items{border-top:1px solid var(--line-soft);padding:20px 26px;display:flex;flex-direction:column;gap:14px;}
.track-items .ti{display:flex;align-items:center;gap:14px;}
.track-items .ti .timg{width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--cream-deep);flex:none;}
.track-items .ti .timg img{width:100%;height:100%;object-fit:cover;}
.track-items .ti .tn{font-family:var(--serif);font-size:16px;}
.track-items .ti .ta{font-size:12.5px;color:var(--muted);}
.track-help{font-size:13.5px;color:var(--muted);text-align:center;margin-top:24px;}
.track-help a{color:var(--oak-deep);font-weight:600;}

/* ---- poruke + confirm stanje (forgot / reset / izmena podataka / lozinka) ---- */
.auth-msg{border-radius:10px;padding:12px 14px;margin-bottom:18px;font-size:14px;line-height:1.45;}
.auth-msg.ok{background:#e8f5e9;color:#2e7d32;border:1px solid #c3e6c5;}
.auth-msg.err{background:#fdecea;color:#a23b3b;border:1px solid #f3c5c0;}
.auth-confirm{padding:8px 0 6px;}
.auth-confirm-ic{width:64px;height:64px;border-radius:999px;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--oak-deep);margin-bottom:20px;}
.auth-confirm h2{font-size:26px;margin-bottom:10px;}
.auth-confirm p{color:var(--ink-soft);line-height:1.6;margin-bottom:8px;}
.auth-confirm .auth-confirm-sub{font-size:13.5px;color:var(--muted);margin-bottom:22px;}
/* readonly identity polje (npr. trenutni e-mail) */
.field input[readonly]{background:var(--cream);color:var(--muted);cursor:not-allowed;}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:6px;}
/* hint za jačinu lozinke */
.pwd-hint{font-size:12.5px;color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:6px;transition:.15s;}
.pwd-hint.ok{color:var(--moss);font-weight:600;}
.acc-form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;}
.acc-form-actions .saved-ok{font-size:13.5px;color:var(--moss);font-weight:600;}
.acc-divider{height:1px;background:var(--line-soft);margin:24px 0;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;}
@media(max-width:480px){.info-grid{grid-template-columns:1fr;}}
.info-item{display:flex;flex-direction:column;gap:4px;}
.info-label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.info-value{font-size:15.5px;color:var(--ink);}
.acc-empty{text-align:center;padding:48px 20px;}
.acc-empty-ic{width:56px;height:56px;border-radius:999px;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--muted);margin:0 auto 16px;}
.acc-empty-h{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:6px;}
.acc-empty-p{font-size:14px;color:var(--muted);margin-bottom:18px;}