/* ========================================================================== ECIP.sk - Zákaznícky portál Zdieľané štýly (design tokens + 3 vizuálne témy + komponenty) -------------------------------------------------------------------------- Použitie: Téma sa nastavuje atribútom na ========================================================================== */ /* ---------- Design tokens (predvolená téma: TEAL) ---------- */ :root{ --bg:#f8fafc; --surface:#ffffff; --surface2:#f1f5f9; --border:#e2e8f0; --text:#0f172a; --text2:#475569; --text3:#94a3b8; --primary:#15a34f; --primaryfg:#ffffff; --primsoft:#e8f6ee; --primsoftfg:#10893f; --accent:#3fd183; --sidebg:#0f172a; --sidefg:#cbd5e1; --sidebrand:#ffffff; --sideactivebg:rgba(63,209,131,.14); --sideactivefg:#3fd183; --sidehover:rgba(255,255,255,.06); --sidefootbg:rgba(255,255,255,.05); --sidefootborder:rgba(255,255,255,.08); --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05); --shadow-hover:0 8px 24px rgba(15,23,42,.10); /* stavové farby (nezávislé od témy) */ --st-blue-bg:#dbeafe; --st-blue-fg:#1d4ed8; --st-green-bg:#dcfce7; --st-green-fg:#15803d; --st-amber-bg:#f1f5f9; --st-amber-fg:#475569; /* "čaká sa/pending" - neutral slate (orange only ever with white) */ --st-red-bg:#fee2e2; --st-red-fg:#b91c1c; } /* ---------- Téma: MIDNIGHT (tmavá) ---------- */ html[data-theme="midnight"]{ --bg:#0b1220; --surface:#131c2e; --surface2:#1a2437; --border:#26324c; --text:#f1f5f9; --text2:#cbd5e1; --text3:#7c8aa3; --primary:#3fd183; --primaryfg:#042420; --primsoft:rgba(63,209,131,.12); --primsoftfg:#3fd183; --accent:#3fd183; --sidebg:#080e1a; --sidefg:#94a3b8; --sidebrand:#ffffff; --sideactivebg:rgba(63,209,131,.16); --sideactivefg:#3fd183; --sidehover:rgba(255,255,255,.05); --sidefootbg:rgba(255,255,255,.05); --sidefootborder:rgba(255,255,255,.08); --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.25); --shadow-hover:0 10px 30px rgba(0,0,0,.4); } /* ---------- Téma: WARM (teplá, svetlá minimal) ---------- */ html[data-theme="warm"]{ --bg:#faf8f5; --surface:#ffffff; --surface2:#f4f1ec; --border:#e9e4dc; --text:#1c1917; --text2:#57534e; --text3:#a8a29e; --primary:#15a34f; --primaryfg:#ffffff; --primsoft:#eefaf7; --primsoftfg:#10893f; --accent:#15a34f; --sidebg:#ffffff; --sidefg:#78716c; --sidebrand:#1c1917; --sideactivebg:#eefaf7; --sideactivefg:#10893f; --sidehover:#f4f1ec; --sidefootbg:#f4f1ec; --sidefootborder:#e9e4dc; --radius:16px; --shadow:0 1px 2px rgba(28,25,23,.05),0 1px 3px rgba(28,25,23,.04); } /* ---------- Reset & základ ---------- */ *{box-sizing:border-box} html,body{margin:0} body{ font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; } a{color:var(--primary);text-decoration:none} a:hover{color:var(--primsoftfg)} button{font-family:inherit} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:5px} ::-webkit-scrollbar-track{background:transparent} @keyframes ecfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ========================================================================== LAYOUT - shell / sidebar / topbar ========================================================================== */ .ec-shell{display:flex;min-height:100vh} .ec-side{ width:260px;flex:0 0 260px;background:var(--sidebg); display:flex;flex-direction:column;padding:22px 16px;gap:6px; /* Locked full-height rail: fixed to the viewport so it never scrolls with the page and always fills the screen height. .ec-main is offset by margin-left. */ position:fixed;top:0;left:0;z-index:900;height:100vh;height:100dvh;overflow-y:auto; } .ec-brand{display:flex;align-items:center;gap:11px;padding:4px 10px 22px} .ec-brand-mark{ width:36px;height:36px;border-radius:10px;background:var(--primary); display:flex;align-items:center;justify-content:center; color:#fff;font-weight:800;font-size:17px;letter-spacing:-.03em; } .ec-brand-name{font-size:20px;font-weight:800;color:var(--sidebrand);letter-spacing:-.02em} .ec-brand-name span{color:var(--accent)} .ec-nav{display:flex;flex-direction:column;gap:4px} .ec-nav a{ display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px; font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap; color:var(--sidefg);background:transparent;transition:background .15s,color .15s; } .ec-nav a:hover{background:var(--sidehover)} .ec-nav a.active{color:var(--sideactivefg);background:var(--sideactivebg)} .ec-nav a .label{flex:1} .ec-nav-badge{font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;color:#fff} .ec-nav-badge.teal{background:var(--primary)} .ec-nav-badge.amber{background:#f59e0b} /* Admin-only console entry - stands out from customer items. */ .ec-nav a.ec-nav-admin{background:rgba(21,163,79,.14);color:var(--sideactivefg);font-weight:700;border:1px solid rgba(21,163,79,.35);margin-bottom:6px} .ec-nav a.ec-nav-admin:hover{background:rgba(21,163,79,.22)} .ec-nav-badge.admin-badge{background:var(--primary);text-transform:uppercase;letter-spacing:.04em;font-size:9.5px;padding:2px 7px} .ec-sidefoot{ margin-top:auto;padding:15px;border-radius:13px; background:var(--sidefootbg);border:1px solid var(--sidefootborder); } .ec-sidefoot-title{font-size:13px;font-weight:700;color:var(--sidebrand);margin-bottom:4px} .ec-sidefoot-text{font-size:12px;color:var(--sidefg);line-height:1.5;margin-bottom:10px} .ec-sidefoot a{font-size:12px;font-weight:700;color:var(--accent)} .ec-main{flex:1;min-width:0;margin-left:260px;display:flex;flex-direction:column} .ec-topbar{ display:flex;align-items:center;gap:16px;padding:14px 32px; border-bottom:1px solid var(--border);background:var(--surface); position:sticky;top:0;z-index:20; } .ec-search{ display:flex;align-items:center;gap:9px;background:var(--surface2); border:1px solid var(--border);border-radius:10px;padding:9px 13px;width:320px;max-width:38vw; } .ec-search input{border:none;background:transparent;outline:none;font-size:13.5px;color:var(--text);width:100%;font-family:inherit} .ec-spacer{flex:1} .ec-swatches{display:flex;align-items:center;gap:7px;padding:5px 9px;background:var(--surface2);border:1px solid var(--border);border-radius:20px} .ec-swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);padding:0} .ec-swatch.active{box-shadow:0 0 0 2px var(--primary)} .ec-iconbtn{ position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--border); border-bottom-color:var(--border) !important; /* Astra global button rule zeroes this out */ background:var(--surface);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.04);box-sizing:border-box; } .ec-iconbtn:hover{background:var(--surface2)} .ec-cart-count{ position:absolute;top:-5px;right:-5px;background:var(--primary);color:#fff;font-size:10px;font-weight:700; min-width:17px;height:17px;padding:0 4px;border-radius:20px;display:flex;align-items:center;justify-content:center; } .ec-user{display:flex;align-items:center;gap:10px;padding-left:6px} .ec-avatar{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px} .ec-user-info{display:flex;flex-direction:column;line-height:1.25} .ec-user-name{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.2} .ec-user-mail{font-size:11.5px;color:var(--text3)} .ec-content{padding:32px 40px;width:100%;max-width:none;margin:0;animation:ecfade .28s ease} /* ========================================================================== TYPOGRAFIA ========================================================================== */ .ec-h1{font-size:26px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em} .ec-sub{margin:0;color:var(--text2);font-size:14.5px} .ec-page-head{margin-bottom:22px} .ec-page-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px} .ec-section-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)} /* ========================================================================== KARTY, GRIDY, ŠTATISTIKY ========================================================================== */ .ec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)} .ec-card--pad{padding:22px} .ec-card-head{padding:17px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .ec-card-title{margin:0;font-size:15px;font-weight:700} /* Neutralize content-page heading boxes (ecip-core.css .entry-content h3) leaking into the portal */ .ec-shell h3,.ec-shell h4{background:none!important;border:none!important;border-radius:0!important;padding:0!important;margin:0!important} .ec-shell .ec-card-title{font-size:15px!important;font-weight:700!important;color:var(--text)!important} .ec-shell .ec-modal-head h3{font-size:19px!important;font-weight:800!important} .ec-link{font-size:13px;font-weight:700;color:var(--primary);cursor:pointer} .ec-grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:26px} /* Mobile: 2x2 grid instead of 4 stat boxes stacked in a single column. */ @media(max-width:640px){.ec-grid-stats{grid-template-columns:1fr 1fr;gap:12px}.ec-stat{flex-direction:column;align-items:flex-start;gap:10px;padding:15px}} .ec-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .ec-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px} .ec-grid-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .ec-stat{display:flex;align-items:center;gap:15px;padding:20px} .ec-stat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .ec-stat-icon.teal{background:var(--primsoft);color:var(--primsoftfg)} .ec-stat-icon.amber{background:var(--st-amber-bg);color:var(--st-amber-fg)} .ec-stat-icon.blue{background:var(--st-blue-bg);color:var(--st-blue-fg)} .ec-stat-icon.red{background:var(--st-red-bg);color:var(--st-red-fg)} .ec-stat-num{font-size:26px;font-weight:800;line-height:1} .ec-stat-label{font-size:13px;color:var(--text3);margin-top:3px} /* ========================================================================== TLAČIDLÁ ========================================================================== */ .ec-btn{ display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700; border-radius:10px;padding:11px 18px;font-size:14px; background:var(--surface);color:var(--text);border:1px solid var(--border); } .ec-btn:hover{background:var(--surface2)} .ec-btn-primary{background:var(--primary);color:var(--primaryfg);border:none;box-shadow:var(--shadow)} .ec-btn-primary:hover{filter:brightness(1.06);background:var(--primary)} .ec-btn-soft{background:var(--primsoft);color:var(--primsoftfg);border:1px solid var(--border)} .ec-btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px} .ec-btn-block{width:100%;justify-content:center} .ec-btn-link{background:none;border:none;color:var(--text2);font-size:13.5px;font-weight:700;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px} .ec-btn-link:hover{color:var(--primary)} /* ========================================================================== STAVOVÉ ODZNAKY (pills) ========================================================================== */ .ec-status{display:inline-block;font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px} .ec-status.is-shipped,.ec-status.is-processing,.ec-status.is-new{background:var(--st-blue-bg);color:var(--st-blue-fg)} .ec-status.is-delivered{background:var(--st-green-bg);color:var(--st-green-fg)} .ec-status.is-awaiting{background:var(--st-amber-bg);color:var(--st-amber-fg)} .ec-status.is-complaint{background:var(--st-red-bg);color:var(--st-red-fg)} /* ========================================================================== ZOZNAMOVÉ RIADKY (objednávky, reklamácie) ========================================================================== */ .ec-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--border)} .ec-row:last-child{border-bottom:none} .ec-row-main{flex:1;min-width:200px} .ec-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;color:var(--text2);background:var(--surface2);border:1px solid var(--border);padding:2px 8px;border-radius:6px} .ec-muted{font-size:12.5px;color:var(--text3)} .ec-row-title{font-size:14.5px;font-weight:700} .ec-row-icon{width:44px;height:44px;border-radius:11px;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--primsoftfg,#10893f);flex:0 0 auto;overflow:hidden} .ec-row-icon.has-thumb{background:var(--surface)} .ec-row-thumb-img{width:100%;height:100%;object-fit:cover;display:block} .ec-row-chip{width:27px;height:27px;object-fit:contain;display:block} .ec-row-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto} @media (max-width:560px){ .ec-row-meta{width:100%;margin-left:56px;justify-content:flex-start} .ec-row-meta .ec-btn{margin-left:auto} } .ec-price{font-size:16px;font-weight:800} .ec-price-lg{font-size:20px;font-weight:800;color:var(--primsoftfg)} /* ========================================================================== FILTRE (chip toggle) ========================================================================== */ .ec-filters{display:flex;gap:9px;margin-bottom:20px;flex-wrap:wrap} .ec-filter{font-size:13px;font-weight:700;padding:8px 15px;border-radius:20px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text2)} .ec-filter.active{border-color:var(--primary);background:var(--primary);color:var(--primaryfg)} /* ========================================================================== ULOŽENÉ ČIPY ========================================================================== */ .ec-secure-id{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700; color:var(--primsoftfg);background:var(--primsoft);border:1px solid var(--border); border-radius:6px;padding:3px 8px;display:inline-block; } .ec-chip-card{padding:18px} .ec-chip-card:hover{box-shadow:var(--shadow-hover)} .ec-chip-icon{width:48px;height:48px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;color:var(--text3)} .ec-chip-dot{width:14px;height:14px;border-radius:50%;position:absolute;top:-3px;right:-3px;border:2px solid var(--surface)} /* Info banner o bezpečných kódoch */ .ec-info{background:var(--primsoft);border:1px solid var(--border);border-radius:12px;padding:15px 18px;display:flex;align-items:center;gap:12px;margin-bottom:22px} .ec-info-dark{background:var(--sidebg);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;color:#fff} .ec-info-dark p{margin:0 0 15px;font-size:13px;line-height:1.6;color:var(--sidefg)} .ec-code-line{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:9px 12px;font-size:12.5px;margin-bottom:8px} .ec-code-line b{font-family:ui-monospace,monospace;color:var(--accent)} .ec-code-line span{color:var(--sidefg)} /* ========================================================================== PRODUKTY (obchod) ========================================================================== */ .ec-product{display:flex;flex-direction:column;overflow:hidden} .ec-product:hover{box-shadow:var(--shadow-hover)} .ec-product-img{ height:140px;border-bottom:1px solid var(--border);position:relative; display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(135deg,var(--surface2),var(--surface2) 11px,var(--bg) 11px,var(--bg) 22px); } .ec-product-thumb{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.92} .ec-product-tag{position:absolute;top:11px;left:11px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--text2)} .ec-product-body{padding:15px;display:flex;flex-direction:column;flex:1} .ec-product-name{font-size:14.5px;font-weight:700} .ec-product-sub{font-size:12.5px;color:var(--text3);margin-top:3px;margin-bottom:14px} .ec-product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto} /* ========================================================================== TIMELINE / SLEDOVANIE (detail objednávky) ========================================================================== */ .ec-steps{display:flex;align-items:flex-start;justify-content:space-between;position:relative;max-width:640px;margin-bottom:8px} .ec-steps-track{position:absolute;top:9px;left:5%;right:5%;height:3px;background:var(--border);border-radius:3px} .ec-steps-fill{position:absolute;top:9px;left:5%;height:3px;background:var(--primary);border-radius:3px} .ec-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1;flex:1} .ec-step-dot{width:20px;height:20px;border-radius:50%;border:3px solid var(--border);background:var(--surface);display:block} .ec-step.done .ec-step-dot{border-color:var(--primary);background:var(--primary)} .ec-step-label{font-size:12px;font-weight:600;color:var(--text3);text-align:center} .ec-step.done .ec-step-label{color:var(--text2)} .ec-step.current .ec-step-label{color:var(--primsoftfg)} .ec-track{margin-top:28px;background:#eff6ff;border:1px solid #dbeafe;border-radius:12px;padding:20px} .ec-track-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} .ec-track-title{font-size:15px;font-weight:700;color:#1e293b} .ec-track-sub{font-size:12.5px;color:#64748b} .ec-track-num{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dbeafe;border-radius:9px;padding:7px 12px} .ec-track-num span{font-family:ui-monospace,monospace;font-weight:700;font-size:13px;color:#1e293b} .ec-track-event{display:flex;gap:12px;padding:8px 0} .ec-track-event .dot{width:10px;height:10px;border-radius:50%;margin-top:4px;flex:0 0 auto} .ec-track-event .lbl{font-size:13px;font-weight:700;color:#1e293b} .ec-track-event .time{font-size:12px;color:#64748b} .ec-addr{background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:14px;font-size:13.5px;color:var(--text2);line-height:1.6} .ec-addr b{color:var(--text)} /* ========================================================================== FORMULÁRE ========================================================================== */ .ec-field{margin-bottom:0} .ec-label{font-size:12.5px;font-weight:700;color:var(--text2);display:block;margin-bottom:7px} .ec-input,.ec-select,.ec-textarea{ width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:9px; background:var(--surface2);font-size:13.5px;color:var(--text);font-family:inherit;outline:none; } .ec-input:focus,.ec-select:focus,.ec-textarea:focus{border-color:var(--primary)} .ec-textarea{min-height:88px;resize:vertical} /* ========================================================================== MODÁL ========================================================================== */ .ec-modal-overlay{ position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center;padding:20px;z-index:90; } .ec-modal-overlay.open{display:flex;animation:ecfade .2s ease} .ec-modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.3);width:100%;max-width:500px;padding:26px} .ec-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .ec-modal-head h3{margin:0;font-size:19px;font-weight:800} .ec-modal-close{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px} .ec-modal-body{display:flex;flex-direction:column;gap:16px} .ec-modal-foot{display:flex;gap:11px;margin-top:24px} /* ========================================================================== FLASH / TOAST ========================================================================== */ .ec-flash{ position:fixed;bottom:26px;left:50%;transform:translateX(-50%); background:var(--sidebg);color:#fff;padding:13px 22px;border-radius:11px; font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25); display:none;align-items:center;gap:10px;z-index:80; } .ec-flash.show{display:flex;animation:ecfade .25s ease} /* ========================================================================== UTILITY ========================================================================== */ .ec-mb-26{margin-bottom:26px} .ec-scroll-x{display:flex;gap:14px;overflow-x:auto} .ec-quick-chip{flex:0 0 210px;border:1px solid var(--border);border-radius:12px;padding:14px} /* ========================================================================== RESPONZÍVNE (mobil / tablet) ========================================================================== */ /* Hamburger toggle + drawer overlay (mobile only) */ .ec-menu-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);background:var(--surface);border-radius:11px;color:#0f172a;cursor:pointer;flex:0 0 auto} .ec-menu-toggle svg{stroke:#0f172a;width:22px;height:22px;flex:0 0 auto} .ec-menu-toggle:hover{background:var(--surface2)} .ec-nav-overlay{display:none} @media(max-width:900px){ .ec-shell{flex-direction:column} .ec-main{margin-left:0} .ec-menu-toggle{display:inline-flex} /* Sidebar → slide-in drawer with labels */ .ec-side{ position:fixed;top:0;left:0;bottom:0;z-index:1200;height:100vh;width:274px;max-width:84vw; flex-direction:column;overflow-y:auto;gap:6px;padding:16px 12px; transform:translateX(-106%);transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:0 0 40px rgba(2,6,23,.4); } .ec-shell.ec-nav-open .ec-side{transform:translateX(0)} .ec-side .ec-brand{padding:6px 8px 14px} .ec-side .ec-brand-name{display:inline} .ec-nav{flex-direction:column;gap:3px} .ec-nav a{flex:0 0 auto;padding:12px 14px} .ec-nav a .label{display:inline} .ec-sidefoot{display:block} .ec-nav-overlay{display:block;position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:1100;border:0;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s} .ec-shell.ec-nav-open .ec-nav-overlay{opacity:1;visibility:visible} .ec-topbar{padding:12px 16px;gap:10px} .ec-content{padding:18px 16px} .ec-search{display:none} .ec-user-name,.ec-user-mail{display:none} } /* ===== WooCommerce order detail (view-order / order-received) - portal look ===== */ .woocommerce-order, .woocommerce-MyAccount-content .woocommerce-order { color: var(--text); } /* Force a normal table layout - WooCommerce's responsive stacking mangles the first row into a half-width inset box on mobile. Keep it a clean 2-column table. */ .woocommerce-table--order-details, table.order_details { display: table !important; } .woocommerce-table--order-details thead, table.order_details thead { display: table-header-group !important; } .woocommerce-table--order-details tbody, table.order_details tbody { display: table-row-group !important; } .woocommerce-table--order-details tfoot, table.order_details tfoot { display: table-footer-group !important; } .woocommerce-table--order-details tr, table.order_details tr { display: table-row !important; } .woocommerce-table--order-details td, .woocommerce-table--order-details th, table.order_details td, table.order_details th { display: table-cell !important; width: auto !important; } .woocommerce-table--order-details td::before, .woocommerce-table--order-details th::before, table.order_details td::before, table.order_details th::before { content: none !important; display: none !important; } .woocommerce-order > p, .woocommerce-thankyou-order-received, .woocommerce-notice--success { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 14px 18px; font-size: 15px; margin-bottom: 22px; } .woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details h2 { font-size: 17px !important; font-weight: 700 !important; color: var(--text) !important; margin: 26px 0 14px !important; text-align: left !important; background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important; } .woocommerce-table--order-details, .woocommerce-order-details table.shop_table, table.order_details { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; font-size: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .woocommerce-table--order-details thead th { background: transparent; color: var(--text3); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; padding: 16px 22px 10px; text-align: left; border: none; } /* product rows */ .woocommerce-table--order-details tbody td, .woocommerce-table--order-details tbody th { padding: 16px 22px; border-top: 1px solid var(--border); vertical-align: middle; text-align: left; font-weight: 400; } .woocommerce-table--order-details tbody tr:hover { background: var(--surface2); } .woocommerce-table--order-details tbody a { color: var(--text); font-weight: 700; text-decoration: none; font-size: 15px; } .woocommerce-table--order-details tbody a:hover { color: var(--primary); } .woocommerce-table--order-details tbody td:last-child { font-weight: 700; font-size: 15px; color: var(--text); } .woocommerce-table--order-details td:last-child, .woocommerce-table--order-details th:last-child { text-align: right; white-space: nowrap; } .woocommerce-table--order-details .product-quantity, .woocommerce-table--order-details strong.product-quantity { color: var(--text3); font-weight: 600; } /* fees / totals block - visually separated, lighter */ .woocommerce-table--order-details tfoot { background: var(--surface2); } .woocommerce-table--order-details tfoot th { padding: 12px 22px; border-top: 1px solid var(--border); font-weight: 500; color: var(--text2); text-align: left; } .woocommerce-table--order-details tfoot td { padding: 12px 22px; border-top: 1px solid var(--border); text-align: right; white-space: nowrap; color: var(--text); font-weight: 600; } .woocommerce-table--order-details tfoot tr:first-child th, .woocommerce-table--order-details tfoot tr:first-child td { border-top: 2px solid var(--border); } /* Emphasize the actual total (Cena spolu), not the last row */ .woocommerce-table--order-details tfoot tr.order_total th, .woocommerce-table--order-details tfoot tr.order_total td, .woocommerce-table--order-details tfoot tr.order-total th, .woocommerce-table--order-details tfoot tr.order-total td { font-size: 18px; font-weight: 800; color: var(--primary); border-top: 2px solid var(--border); padding-top: 16px; padding-bottom: 16px; background: var(--primsoft, #e8f6ee); } /* Payment method row - quiet */ .woocommerce-table--order-details tfoot tr.payment_method th, .woocommerce-table--order-details tfoot tr.payment_method td, .woocommerce-table--order-details tfoot tr.payment-method th, .woocommerce-table--order-details tfoot tr.payment-method td { color: var(--text2); font-weight: 600; font-size: 14px; } .woocommerce-order .wc-item-meta, .woocommerce-table--order-details .wc-item-meta { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; color: var(--text3); } .woocommerce-order .wc-item-meta li { margin: 2px 0; } /* Addresses - force a clean 2-col grid, overriding WooCommerce's float layout */ .woocommerce-customer-details .woocommerce-columns--addresses, .woocommerce-columns--addresses, .woocommerce-customer-details .col2-set { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 10px; float: none !important; width: auto !important; } .woocommerce-columns--addresses .woocommerce-column, .woocommerce-customer-details .col2-set > .col-1, .woocommerce-customer-details .col2-set > .col-2 { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-columns--addresses address, .woocommerce-customer-details address { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; font-style: normal; line-height: 1.7; color: var(--text2); font-size: 14px; margin: 0; } @media (max-width: 640px) { .woocommerce-customer-details .woocommerce-columns--addresses, .woocommerce-columns--addresses, .woocommerce-customer-details .col2-set { grid-template-columns: 1fr !important; } } /* ===== My Account → Adresy (edit-address list) - clean 2-col cards ===== */ .woocommerce-Addresses.addresses, .woocommerce-Addresses.col2-set { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 6px 0 0; float: none !important; width: auto !important; } .woocommerce-Address, .woocommerce-Addresses .woocommerce-Address { width: 100% !important; float: none !important; margin: 0 !important; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow); } .woocommerce-Address .woocommerce-Address-title.title, .woocommerce-Address-title.title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .woocommerce-Address-title.title h2, .woocommerce-Address-title.title h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); } .woocommerce-Address-title.title .edit { font-size: 13px; font-weight: 600; color: var(--primaryfg); background: var(--primary); padding: 7px 14px; border-radius: 8px; text-decoration: none; white-space: nowrap; line-height: 1; } .woocommerce-Address-title.title .edit:hover { background: var(--primsoftfg, #10893f); } .woocommerce-Address address { font-style: normal; line-height: 1.75; color: var(--text2); font-size: 14px; margin: 0; border: 0; padding: 0; background: none; } .woocommerce-Address > p, .woocommerce-Address address:empty::before { color: var(--text3); font-size: 14px; } @media (max-width: 640px) { .woocommerce-Addresses.addresses, .woocommerce-Addresses.col2-set { grid-template-columns: 1fr; } } /* ===== My Account → Profil (edit-account) + Adresy edit form (edit-address) ===== CSS-only styling of the standard WooCommerce forms (no template override, so all WC hooks/nonces stay intact). Scoped to .ec-content so it never leaks to the wizard/checkout. Single-column, portal card + .ec-input-like fields. */ .ec-content .woocommerce-EditAccountForm, .ec-content .woocommerce-address-fields{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);padding:24px 26px 20px;max-width:640px; } .ec-content .woocommerce-MyAccount-content form > h2{font-size:18px;font-weight:800;color:var(--text);margin:0 0 14px;} .ec-content .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 15px;padding:0;float:none;width:auto;} .ec-content .form-row-first,.ec-content .form-row-last{width:auto;float:none;} .ec-content .form-row label{font-size:13px;font-weight:600;color:var(--text2)} .ec-content .form-row .required{color:var(--primary);text-decoration:none;border:0} .ec-content .form-row .optional{color:var(--text3)} .ec-content .woocommerce-Input, .ec-content .woocommerce-address-fields input, .ec-content .woocommerce-address-fields select, .ec-content .form-row input.input-text, .ec-content .form-row input[type="text"], .ec-content .form-row input[type="email"], .ec-content .form-row input[type="password"], .ec-content .form-row input[type="tel"], .ec-content .form-row select{ width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--border); border-radius:10px;background:var(--surface);color:var(--text);font-size:14.5px;font-family:inherit;line-height:1.3; transition:border-color .15s,box-shadow .15s; } .ec-content .woocommerce-Input:focus, .ec-content .woocommerce-address-fields input:focus, .ec-content .woocommerce-address-fields select:focus, .ec-content .form-row input:focus, .ec-content .form-row select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(21,163,79,.12);outline:none} .ec-content fieldset{border:1px solid var(--border);border-radius:12px;padding:14px 18px 2px;margin:18px 0 4px} .ec-content fieldset legend{font-size:12px;font-weight:800;color:var(--text);padding:0 6px;text-transform:uppercase;letter-spacing:.04em} .ec-content .woocommerce-EditAccountForm span em, .ec-content .form-row span em{font-size:12px;color:var(--text3);font-style:normal;display:block;margin-top:4px} .ec-content button[name="save_account_details"], .ec-content button[name="save_address"]{ display:inline-flex;align-items:center;justify-content:center;margin-top:6px; background:var(--primary);color:var(--primaryfg);border:1px solid var(--primary); padding:12px 26px;border-radius:11px;font-weight:700;font-size:14.5px;cursor:pointer; transition:filter .15s,transform .1s; } .ec-content button[name="save_account_details"]:hover, .ec-content button[name="save_address"]:hover{filter:brightness(.93)} .ec-content button[name="save_account_details"]:active, .ec-content button[name="save_address"]:active{transform:scale(.98)} /* ===== Orders list - modern cards ===== */ .ec-orders-list{display:flex;flex-direction:column;gap:14px} .ec-order-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;transition:box-shadow .15s,border-color .15s} .ec-order-card:hover{border-color:#cbd5e1;box-shadow:0 6px 18px rgba(15,23,42,.06)} .ec-order-main{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .ec-order-id{display:flex;flex-direction:column;gap:2px;min-width:0} .ec-order-num{font-weight:800;font-size:16px;color:var(--text)} .ec-order-date{font-size:12.5px;color:var(--text3)} .ec-order-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .ec-order-total{font-weight:800;font-size:15px;color:var(--text);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .ec-order-total .amount{color:var(--text)} .ec-order-count{font-weight:500;font-size:12.5px;color:var(--text3)} .ec-order-actions{display:flex;gap:8px;flex-wrap:wrap} .ec-obtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600;font-size:13px;padding:8px 15px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text) !important;white-space:nowrap;transition:background .15s} .ec-obtn:hover{background:var(--surface2)} .ec-obtn-primary{background:var(--primary);border-color:var(--primary);color:#fff !important} .ec-obtn-primary:hover{background:#10893f} .ec-status{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px;white-space:nowrap} .ec-status-teal{background:#e8f6ee;color:#10893f;border:1px solid #cbe6d7} .ec-status-green{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0} .ec-status-amber{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0} .ec-status-blue{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe} .ec-status-red{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca} .ec-status-grey{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0} .ec-orders-pagination{display:flex;gap:10px;justify-content:center;margin-top:20px} .ec-orders-empty{text-align:center;padding:48px 20px;background:var(--surface);border:1px solid var(--border);border-radius:16px} .ec-orders-empty p{margin:14px 0 16px;color:var(--text3);font-size:15px} /* Order detail - product thumbnails */ .ecip-oi{display:flex;align-items:center;gap:12px} .ecip-oi-thumb{width:48px;height:48px;border-radius:10px;object-fit:contain;background:#f1f5f9;border:1px solid var(--border);flex:0 0 auto;padding:3px;box-sizing:border-box} .ecip-oi-thumb-ph{display:inline-block} .ecip-oi-name{min-width:0;font-weight:600} .woocommerce-table--order-details td.product-name,.woocommerce-table--order-details .product-name{vertical-align:middle !important} .woocommerce-table--order-details tbody tr:not(.order_item) td.product-name .ecip-oi{gap:0} /* Mobile: squeeze the carrier 6-step bar so it fits without scrolling */ @media (max-width:560px){ .ecip-track-steps > div{min-width:50px !important} .ecip-track-steps span[style*="max-width:78px"]{font-size:9.5px !important;line-height:1.2 !important} }