/* ==========================================================================
APM Siaga — Brand Skin (Phase 2a)
Loaded AFTER style.min.css + bottom-nav.css (see _head.tpl).
Pure additive overrides: recolors + rounding + branded navy header.
Reversible: remove the in _head.tpl to fully revert.
No core CSS is edited; everything here wins by cascade order.
Palette (APMSiaga DIGITAL brand):
--apm-blue #0077FF primary / buttons / links / active
--apm-blue-dark #0059CC hover / depth
--apm-orange #FF6B00 accent / CTA / active bell / badges
========================================================================== */
:root {
--apm-blue: #0077FF;
--apm-blue-dark: #0059CC;
--apm-orange: #FF6B00;
/* High-leverage: recolor every var(--link-color) consumer site-wide */
--link-color: #0077FF;
--plyr-color-main: #0077FF;
/* Branded header (day = navy, night = deeper navy) */
--header-bg-color: #000F2B;
--header-bg-color-dark: #000A1F;
}
/* --------------------------------------------------------------------------
1. Branded navy header
-------------------------------------------------------------------------- */
/* Header icons -> white on blue (day & night both fine) */
.main-header .header-icon,
.main-header .header-icon * {
color: #ffffff !important;
fill: #ffffff !important;
}
/* Active header icon (e.g. notification bell) -> orange accent */
.main-header .header-icon.active,
.main-header .header-icon.active * {
color: var(--apm-orange) !important;
fill: var(--apm-orange) !important;
}
/* Search field -> translucent white pill on the blue header */
.main-header .search-wrapper .form-control {
background: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
border-radius: 10px;
}
.main-header .search-wrapper .form-control::placeholder,
.main-header .search-wrapper .form-control::-webkit-input-placeholder,
.main-header .search-wrapper .form-control:-moz-placeholder {
color: rgba(255, 255, 255, 0.8) !important;
opacity: 1;
}
.main-header .search-input-icon,
.main-header .search-input-icon * {
color: #ffffff !important;
fill: #ffffff !important;
}
/* Logo: brand PNG on navy — fills header height, blends with header bg */
.main-header .logo img {
max-height: 60px;
width: auto;
}
/* --------------------------------------------------------------------------
2. Rounded, soft cards (the mockup's card language)
-------------------------------------------------------------------------- */
.post,
.card,
.widget,
.panel,
.alert-post {
border-radius: 14px;
}
.post {
border: 0;
box-shadow: 0 1px 3px rgba(0, 15, 43, 0.08);
overflow: hidden;
}
/* --------------------------------------------------------------------------
3. Buttons -> APM blue (primary), pill where already pill
-------------------------------------------------------------------------- */
.btn-primary {
background-color: var(--apm-blue);
border-color: var(--apm-blue);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
background-color: var(--apm-blue-dark) !important;
border-color: var(--apm-blue-dark) !important;
}
/* --------------------------------------------------------------------------
4. Mobile bottom navigation -> blue active tab (icon + label)
-------------------------------------------------------------------------- */
.apm-bottom-nav .footer-bottom-bar-links > .link.active > a,
.apm-bottom-nav .footer-bottom-bar-links > .link.active > a * {
color: var(--apm-blue) !important;
fill: var(--apm-blue) !important;
}
/* ==========================================================================
Phase 2b — Home hero banner + value icons + news section header
Markup: templates/_apm_hero.tpl + index.newsfeed.tpl
========================================================================== */
/* Hero banner */
.apm-hero {
position: relative;
overflow: hidden;
margin-bottom: 14px;
padding: 28px 24px;
border-radius: 16px;
background: linear-gradient(135deg, #00173D 0%, #0077FF 100%);
box-shadow: 0 4px 14px rgba(0, 15, 43, 0.18);
}
.apm-hero::after {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.apm-hero-text {
position: relative;
z-index: 1;
}
.apm-hero-title {
margin: 0 0 4px;
color: #ffffff;
font-size: 30px;
font-weight: 700;
line-height: 1.1;
}
.apm-hero-title span {
color: var(--apm-orange);
}
.apm-hero-slogan {
margin: 0 0 16px;
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 500;
}
.apm-hero-cta {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 26px;
border-radius: 999px;
background: var(--apm-orange);
color: #ffffff !important;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease;
}
.apm-hero-cta:hover {
background: #e65100;
}
/* Value icons row */
.apm-values {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.apm-value {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 6px;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 15, 43, 0.08);
text-align: center;
}
.apm-value i {
font-size: 24px;
color: var(--apm-blue);
}
.apm-value span {
font-size: 11.5px;
font-weight: 600;
color: #33415c;
line-height: 1.2;
}
@media (max-width: 575px) {
.apm-values {
grid-template-columns: repeat(2, 1fr);
}
.apm-hero-title {
font-size: 24px;
}
}
/* News section header */
.apm-section-head {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 12px;
}
.apm-section-bar {
width: 4px;
height: 20px;
border-radius: 4px;
background: var(--apm-orange);
}
.apm-section-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #000F2B;
}
body.night-mode .apm-section-title {
color: #e6edf5;
}
body.night-mode .apm-value {
background: #242526;
}
body.night-mode .apm-value span {
color: #c1d4e3;
}
/* ==========================================================================
APM Siaga — News tabs (Recent Updates / Suggested) + icon sub-tabs
Markup: templates/index.newsfeed.tpl (.apm-news-tabs-wrap)
========================================================================== */
.apm-news-tabs-wrap {
margin-top: 4px;
}
/* sticky main tab bar */
.apm-news-tabbar {
position: sticky;
top: 0;
z-index: 1020;
display: flex;
gap: 8px;
padding: 8px 0;
margin-bottom: 12px;
background: transparent;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.apm-news-tabbar.is-stuck {
background: #ffffff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
border-radius: 12px;
padding: 8px 10px;
margin: 0 -10px 12px;
}
.apm-news-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
border: 0;
border-radius: 999px;
background: #eef1f5;
color: #5a6b7b;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.apm-news-tab i {
font-size: 14px;
}
.apm-news-tab.is-active {
background: var(--apm-blue);
color: #ffffff;
}
.apm-news-tab:not(.is-active):hover {
background: #e2e8f0;
}
/* suggested icon sub-tabs */
.apm-sug-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 2px 0 12px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.apm-sug-tabs::-webkit-scrollbar {
display: none;
}
.apm-sug-tab {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid #e3e8ef;
border-radius: 50%;
background: #ffffff;
color: #5a6b7b;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.apm-sug-tab i {
font-size: 17px;
line-height: 1;
}
.apm-sug-tab.is-active {
background: var(--apm-orange);
border-color: var(--apm-orange);
color: #ffffff;
}
.apm-sug-tab:not(.is-active):hover {
border-color: var(--apm-blue);
color: var(--apm-blue);
}
.apm-sug-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.apm-sug-sec .card {
margin-bottom: 0;
}
.apm-sug-empty {
text-align: center;
padding: 40px 16px;
color: #9aa7b4;
}
.apm-sug-empty i {
font-size: 34px;
margin-bottom: 10px;
opacity: 0.6;
}
.apm-sug-empty p {
margin: 0;
font-size: 14px;
font-weight: 600;
}
body.night-mode .apm-sug-empty {
color: #6b7683;
}
/* ---- night mode ---- */
body.night-mode .apm-news-tabbar.is-stuck {
background: #18191a;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
body.night-mode .apm-news-tab {
background: #2a2b2c;
color: #c1d4e3;
}
body.night-mode .apm-news-tab:not(.is-active):hover {
background: #3a3b3c;
}
body.night-mode .apm-news-tab.is-active {
background: var(--apm-blue);
color: #ffffff;
}
body.night-mode .apm-sug-tab {
background: #242526;
border-color: #3a3b3c;
color: #c1d4e3;
}
body.night-mode .apm-sug-tab.is-active {
background: var(--apm-orange);
border-color: var(--apm-orange);
color: #ffffff;
}
/* ==========================================================================
Phase 2c — Marketplace: 2-col mobile grid + product card polish
Markup: templates/__feeds_product.tpl (col-6 col-lg-4) + market.tpl
========================================================================== */
.card.product {
border: 0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 15, 43, 0.08);
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card.product:hover {
box-shadow: 0 6px 18px rgba(0, 15, 43, 0.16);
transform: translateY(-2px);
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Price badge -> orange pill (matches mockup) */
.product-price {
background: var(--apm-orange) !important;
border-radius: 999px !important;
padding: 4px 12px !important;
font-size: 13px;
font-weight: 700;
}
.product-meta .title {
color: var(--link-color);
}
/* Compact cards for the 2-col mobile grid */
@media (max-width: 767px) {
.product-image {
height: 150px;
}
.product-meta .title {
font-size: 14px;
}
.product-info {
padding: 8px;
}
.product-meta {
margin-bottom: 6px;
}
}
/* Market search bar */
.js_search-form .form-control {
border-radius: 10px;
}
/* ==========================================================================
Phase 2d — Org Profile / Blogs: branded article cards + category chips
Markup: templates/__feeds_blog.tpl (.post-media.list) + blogs.tpl
========================================================================== */
/* Article list cards -> rounded, soft shadow, hover lift */
.post-media.list {
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 15, 43, 0.08);
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.post-media.list:hover {
box-shadow: 0 6px 18px rgba(0, 15, 43, 0.16);
transform: translateY(-2px);
}
/* Branded gradient behind article covers (visible when an article has no cover) */
.post-media.list .post-media-image {
background: linear-gradient(135deg, #00173D 0%, #0077FF 100%);
}
.post-media-meta .title {
color: var(--link-color);
}
/* Category chips / sub-category buttons -> APM blue (was purple) */
.blog-category {
background: #e3f0fb !important;
color: var(--apm-blue) !important;
}
.blog-category:hover,
body.night-mode .blog-category:hover {
background: var(--apm-blue) !important;
color: #ffffff !important;
}
body.night-mode .post-media.list {
background: #242526;
}
/* ==========================================================================
Phase 3b — My Connect grid: polished avatar cards
Markup: templates/__feeds_user.tpl (col-6 col-md-4 col-lg-3 + .ui-box)
========================================================================== */
.ui-box {
border: 1px solid #eef2f7;
border-radius: 14px;
box-shadow: 0 1px 4px rgba(0, 15, 43, 0.1);
}
.ui-box .img {
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.18);
}
body.night-mode .ui-box {
border-color: #3a3b3c;
}
/* ==========================================================================
Phase 4 — Org Profile App (National > State > District)
Markup: templates/orgprofile.tpl + js/apm-orgprofile.js
Mobile-first, interactive directory. Shares the APM card language above.
========================================================================== */
:root {
--apm-navy: #000F2B;
--apm-tint: #e3f0fb;
--apm-line: #eef2f7;
--apm-muted: #5b6b7f;
--apm-radius: 14px;
--apm-shadow: 0 1px 3px rgba(0, 15, 43, 0.08);
--apm-shadow-lg: 0 6px 18px rgba(0, 15, 43, 0.16);
}
/* ---- shell ---- */
.apm-org-wrap {
max-width: 980px;
margin: 0 auto;
padding: 12px 12px 96px; /* leave room for the fixed bottom nav */
}
.apm-org { min-height: 240px; }
.apm-org-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 60px 0;
color: var(--apm-muted);
font-size: 14px;
}
.apm-org-spinner {
width: 34px;
height: 34px;
border: 3px solid var(--apm-tint);
border-top-color: var(--apm-blue);
border-radius: 50%;
animation: apmSpin 0.8s linear infinite;
}
@keyframes apmSpin { to { transform: rotate(360deg); } }
.apm-org-noscript {
padding: 16px;
border-radius: var(--apm-radius);
background: #fff7ed;
border: 1px solid #fed7aa;
color: #9a3412;
font-size: 14px;
}
/* ---- sticky breadcrumb (hierarchy) ---- */
.apm-org-crumb {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 12px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border: 1px solid var(--apm-line);
border-radius: 999px;
box-shadow: var(--apm-shadow);
font-size: 13px;
}
.apm-org-crumb:empty { display: none; }
.apm-crumb-link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: 999px;
color: var(--apm-blue);
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 0;
background: transparent;
min-height: 32px;
}
.apm-crumb-link:hover { background: var(--apm-tint); }
.apm-crumb-link.is-current {
color: var(--apm-navy);
background: var(--apm-tint);
cursor: default;
}
.apm-crumb-sep { color: #b6c2d2; font-size: 12px; }
/* ---- shared section header ---- */
.apm-h {
display: flex;
align-items: center;
gap: 8px;
margin: 20px 0 12px;
}
.apm-h__bar { width: 4px; height: 20px; border-radius: 4px; background: var(--apm-orange); }
.apm-h__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--apm-navy); }
.apm-h__count {
margin-left: auto;
font-size: 12px;
font-weight: 600;
color: var(--apm-blue);
background: var(--apm-tint);
padding: 3px 10px;
border-radius: 999px;
}
/* ---- search / filter ---- */
.apm-search {
position: relative;
margin: 0 0 14px;
}
.apm-search input {
width: 100%;
min-height: 46px;
padding: 10px 14px 10px 42px;
border: 1px solid var(--apm-line);
border-radius: 12px;
background: #fff;
font-size: 15px;
color: var(--apm-navy);
box-shadow: var(--apm-shadow);
}
.apm-search input:focus {
outline: none;
border-color: var(--apm-blue);
box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.15);
}
.apm-search__ico {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--apm-muted);
pointer-events: none;
}
/* ---- National hero ---- */
.apm-org-hero {
position: relative;
overflow: hidden;
padding: 26px 22px;
border-radius: 18px;
background: linear-gradient(135deg, #00173D 0%, #0077FF 100%);
box-shadow: 0 4px 14px rgba(0, 15, 43, 0.18);
color: #fff;
margin-bottom: 6px;
}
.apm-org-hero::after {
content: "";
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.apm-org-hero__inner { position: relative; z-index: 1; }
.apm-org-hero__kicker {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--apm-orange);
margin-bottom: 6px;
}
.apm-org-hero__title { margin: 0 0 6px; font-size: 24px; font-weight: 800; line-height: 1.15; }
.apm-org-hero__lead { margin: 0 0 12px; font-size: 14px; color: rgba(255, 255, 255, 0.92); line-height: 1.5; }
.apm-org-hero__motto {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
font-size: 13px;
font-weight: 600;
}
.apm-org-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 16px 0 2px;
}
.apm-org-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 14px;
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
}
.apm-org-hero__meta a { color: #fff; text-decoration: underline; }
/* ---- national detail (#/national) ---- */
.apm-nat-kicker {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--apm-orange);
margin-bottom: 6px;
}
.apm-nat-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 18px;
border-radius: 16px;
background: linear-gradient(135deg, #00173D 0%, #0077FF 100%);
color: #fff;
text-decoration: none;
margin-top: 20px;
box-shadow: 0 4px 14px rgba(0, 15, 43, 0.18);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.apm-nat-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 15, 43, 0.26); }
.apm-nat-cta__txt { display: flex; flex-direction: column; gap: 2px; }
.apm-nat-cta__title { font-size: 15px; font-weight: 700; }
.apm-nat-cta__sub { font-size: 12px; color: rgba(255, 255, 255, 0.85); }
.apm-nat-cta__arrow {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
}
/* corporate CTA variant (orange) on national detail */
.apm-nat-cta--corp { background: linear-gradient(135deg, #fb8c00 0%, #ef6c00 100%); }
.apm-nat-cta--corp .apm-nat-cta__title { display: inline-flex; align-items: center; gap: 7px; }
.apm-nat-cta--corp .apm-nat-cta__title svg { width: 17px; height: 17px; }
/* ---- corporate hub: 2x2 icon grid (reuses marketplace catgrid pattern) ---- */
.apm-corp-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (min-width: 640px) { .apm-corp-grid { grid-template-columns: repeat(4, 1fr); } }
.apm-corp-cat {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
padding: 20px 12px;
border-radius: var(--apm-radius);
background: #fff;
border: 1px solid var(--apm-line);
box-shadow: var(--apm-shadow);
text-decoration: none;
color: inherit;
text-align: center;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.apm-corp-cat:hover, .apm-corp-cat:focus { box-shadow: var(--apm-shadow-lg); transform: translateY(-2px); }
.apm-corp-cat__ic {
width: 56px; height: 56px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff;
box-shadow: 0 3px 10px rgba(13, 42, 80, 0.16);
}
.apm-corp-cat__ic svg { width: 24px; height: 24px; }
.apm-corp-cat__label { font-size: 13.5px; font-weight: 700; color: #16324f; line-height: 1.3; }
.apm-corp-cat__count { font-size: 11.5px; font-weight: 600; color: #5a6b7e; }
/* per-category icon gradients */
.apm-corp-cat__ic--info { background: linear-gradient(135deg, #3D9BFF, #0077FF); }
.apm-corp-cat__ic--messages { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.apm-corp-cat__ic--acts { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }
.apm-corp-cat__ic--units { background: linear-gradient(135deg, #26a69a, #00897b); }
/* ---- corporate category: item list rows ---- */
.apm-corp-list { display: flex; flex-direction: column; gap: 10px; }
.apm-corp-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: 14px;
background: #fff;
border: 1px solid var(--apm-line);
box-shadow: var(--apm-shadow);
text-decoration: none;
color: inherit;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.apm-corp-item:hover, .apm-corp-item:focus { box-shadow: var(--apm-shadow-lg); transform: translateY(-1px); }
.apm-corp-item__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.apm-corp-item__label { font-size: 14.5px; font-weight: 700; color: #16324f; }
.apm-corp-item__desc { font-size: 12.5px; color: #5a6b7e; line-height: 1.4; }
.apm-corp-item__chev { flex-shrink: 0; display: flex; color: #9aa9ba; }
.apm-corp-item__chev svg { width: 18px; height: 18px; }
.apm-corp-src { margin-top: 14px; font-size: 11.5px; color: #8a99ab; text-align: center; }
/* ---- corporate item: inline video embed (responsive 16:9) ---- */
.apm-corp-video {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
border-radius: 14px;
overflow: hidden;
background: #0d1b2a;
box-shadow: var(--apm-shadow);
}
.apm-corp-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.apm-corp-video__cap {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 4px 2px;
}
.apm-corp-item--file .apm-corp-item__chev { color: #8e24aa; }
/* ---- state grid ---- */
.apm-state-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (min-width: 640px) { .apm-state-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .apm-state-grid { grid-template-columns: repeat(4, 1fr); } }
.apm-state-card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--apm-radius);
background: #fff;
border: 1px solid var(--apm-line);
box-shadow: var(--apm-shadow);
cursor: pointer;
text-decoration: none;
color: inherit;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.apm-state-card:hover, .apm-state-card:focus {
box-shadow: var(--apm-shadow-lg);
transform: translateY(-2px);
}
.apm-state-card__banner {
position: relative;
height: 78px;
background: linear-gradient(135deg, #00173D 0%, #0077FF 100%);
background-size: cover;
background-position: center;
}
.apm-state-card__badge {
position: absolute;
bottom: 8px; left: 8px;
font-size: 10.5px;
font-weight: 700;
color: #fff;
background: rgba(0, 15, 43, 0.55);
padding: 2px 8px;
border-radius: 999px;
backdrop-filter: blur(2px);
}
.apm-state-card__body { padding: 10px 12px 12px; }
.apm-state-card__name {
margin: 0 0 2px;
font-size: 15px;
font-weight: 700;
color: var(--apm-navy);
line-height: 1.2;
}
.apm-state-card__dir {
margin: 0;
font-size: 11.5px;
color: var(--apm-muted);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.apm-empty {
grid-column: 1 / -1;
text-align: center;
padding: 30px 12px;
color: var(--apm-muted);
font-size: 14px;
}
/* ---- state view hero (banner) ---- */
.apm-state-hero {
position: relative;
overflow: hidden;
border-radius: 18px;
min-height: 150px;
background: linear-gradient(135deg, #00173D 0%, #0077FF 100%);
background-size: cover;
background-position: center;
box-shadow: 0 4px 14px rgba(0, 15, 43, 0.18);
display: flex;
align-items: flex-end;
margin-bottom: 14px;
}
.apm-state-hero__scrim {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(9, 25, 45, 0.86) 0%, rgba(9, 25, 45, 0.15) 60%, transparent 100%);
}
.apm-state-hero__inner { position: relative; z-index: 1; padding: 16px 18px; color: #fff; }
.apm-state-hero__name { margin: 0 0 2px; font-size: 22px; font-weight: 800; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.apm-state-hero__sub { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.92); }
/* ---- quick facts ---- */
.apm-facts {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 6px;
}
.apm-fact {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 13px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--apm-line);
box-shadow: var(--apm-shadow);
font-size: 13.5px;
color: var(--apm-navy);
text-decoration: none;
line-height: 1.4;
}
a.apm-fact:hover { border-color: var(--apm-blue); }
.apm-fact__ico {
flex: 0 0 auto;
width: 34px; height: 34px;
display: grid; place-items: center;
border-radius: 10px;
background: var(--apm-tint);
color: var(--apm-blue);
}
.apm-fact__label { display: block; font-size: 11px; font-weight: 700; color: var(--apm-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.apm-fact__val { display: block; font-weight: 600; word-break: break-word; }
/* ---- action buttons ---- */
.apm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.apm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 9px 16px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.apm-btn--call { background: var(--apm-blue); color: #fff; }
.apm-btn--call:hover { background: var(--apm-blue-dark); color: #fff; }
.apm-btn--maps { background: #fff; color: var(--apm-blue); border-color: var(--apm-blue); }
.apm-btn--maps:hover { background: var(--apm-tint); }
.apm-btn--ghost { background: #fff; color: var(--apm-navy); border-color: var(--apm-line); }
.apm-btn--ghost:hover { border-color: var(--apm-blue); color: var(--apm-blue); }
/* ---- content sections / prose ---- */
.apm-section {
background: #fff;
border: 1px solid var(--apm-line);
border-radius: var(--apm-radius);
box-shadow: var(--apm-shadow);
padding: 16px;
margin-bottom: 14px;
}
.apm-prose { font-size: 14.5px; line-height: 1.65; color: #2c3a4d; margin: 0; }
.apm-prose + .apm-prose { margin-top: 10px; }
.apm-figure { margin: 12px 0 0; }
.apm-figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.apm-source { margin-top: 12px; font-size: 12px; color: var(--apm-muted); font-style: italic; }
.apm-linkmore {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
font-size: 13px;
font-weight: 700;
color: var(--apm-blue);
text-decoration: none;
}
.apm-linkmore:hover { text-decoration: underline; }
/* ---- org chart horizontal scroll wrapper ---- */
.apm-chart-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
background: #f7fafd;
padding: 8px;
margin-top: 12px;
}
.apm-chart-scroll img { max-width: none; height: auto; min-width: 100%; display: block; border-radius: 6px; }
.apm-chart-hint { font-size: 11.5px; color: var(--apm-muted); margin-top: 6px; }
/* ---- district accordion cards ---- */
.apm-dist-list { display: flex; flex-direction: column; gap: 10px; }
.apm-dist {
overflow: hidden;
border-radius: var(--apm-radius);
background: #fff;
border: 1px solid var(--apm-line);
box-shadow: var(--apm-shadow);
}
.apm-dist__head {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 60px;
padding: 12px 14px;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
border-left: 4px solid var(--apm-blue);
}
.apm-dist__head[aria-expanded="true"] { border-bottom: 1px solid var(--apm-line); }
.apm-dist__main { flex: 1 1 auto; min-width: 0; }
.apm-dist__name { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--apm-navy); line-height: 1.25; }
.apm-dist__officer {
margin: 2px 0 0;
font-size: 12px;
color: var(--apm-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.apm-dist__chev {
flex: 0 0 auto;
color: var(--apm-blue);
transition: transform 0.2s ease;
}
.apm-dist__head[aria-expanded="true"] .apm-dist__chev { transform: rotate(180deg); }
.apm-dist__body {
display: none;
padding: 12px 14px 14px;
}
.apm-dist.open .apm-dist__body { display: block; animation: apmFade 0.18s ease; }
@keyframes apmFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.apm-dist__row { display: flex; gap: 8px; font-size: 13.5px; color: #2c3a4d; margin-bottom: 8px; line-height: 1.45; }
.apm-dist__row .apm-fact__ico { width: 28px; height: 28px; border-radius: 8px; }
.apm-dist__row a { color: var(--apm-blue); text-decoration: none; word-break: break-word; }
.apm-dist__row a:hover { text-decoration: underline; }
/* featured HQ variant */
.apm-dist--hq .apm-dist__head {
border-left-color: var(--apm-orange);
background: linear-gradient(135deg, rgba(0,119,255,0.06), rgba(255,107,0,0.06));
}
.apm-dist--hq .apm-dist__name::before {
content: "\2605";
color: var(--apm-orange);
margin-right: 6px;
}
/* ---- staff cards ---- */
.apm-staff-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .apm-staff-grid { grid-template-columns: repeat(2, 1fr); } }
.apm-staff {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--apm-line);
box-shadow: var(--apm-shadow);
}
.apm-staff__avatar {
flex: 0 0 auto;
width: 42px; height: 42px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--apm-tint);
color: var(--apm-blue);
font-weight: 800;
font-size: 15px;
}
.apm-staff__main { min-width: 0; flex: 1 1 auto; }
.apm-staff__name { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--apm-navy); line-height: 1.25; }
.apm-staff__role { margin: 1px 0 0; font-size: 12px; color: var(--apm-muted); line-height: 1.3; }
.apm-staff__mail {
flex: 0 0 auto;
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 10px;
color: var(--apm-blue);
background: var(--apm-tint);
text-decoration: none;
}
.apm-staff__mail:hover { background: var(--apm-blue); color: #fff; }
/* ---- bottom sheet ---- */
.apm-sheet-scrim {
position: fixed;
inset: 0;
z-index: 900;
background: rgba(9, 25, 45, 0.5);
opacity: 0;
transition: opacity 0.2s ease;
}
.apm-sheet-scrim.show { opacity: 1; }
.apm-sheet {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 901;
max-height: 86vh;
overflow-y: auto;
background: #fff;
border-radius: 20px 20px 0 0;
box-shadow: 0 -6px 30px rgba(0, 15, 43, 0.25);
padding: 8px 18px 28px;
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.apm-sheet.show { transform: translateY(0); }
.apm-sheet__grab {
width: 42px; height: 5px;
border-radius: 999px;
background: #d4dde8;
margin: 8px auto 14px;
}
.apm-sheet__close {
position: absolute;
top: 12px; right: 14px;
width: 36px; height: 36px;
border: 0;
border-radius: 50%;
background: #f1f5f9;
color: var(--apm-navy);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.apm-sheet__close:hover { background: #e2e8f0; }
.apm-sheet__title { margin: 0 0 2px; font-size: 18px; font-weight: 800; color: var(--apm-navy); padding-right: 40px; }
.apm-sheet__sub { margin: 0 0 14px; font-size: 13px; color: var(--apm-muted); }
/* ---- night mode ---- */
body.night-mode .apm-org-crumb { background: rgba(24, 25, 26, 0.92); border-color: #3a3b3c; }
body.night-mode .apm-crumb-link { color: #6ea8e8; }
body.night-mode .apm-crumb-link.is-current { color: #e6edf5; background: #2a2b2c; }
body.night-mode .apm-h__title { color: #e6edf5; }
body.night-mode .apm-search input { background: #242526; border-color: #3a3b3c; color: #e6edf5; }
body.night-mode .apm-state-card,
body.night-mode .apm-section,
body.night-mode .apm-fact,
body.night-mode .apm-dist,
body.night-mode .apm-staff { background: #242526; border-color: #3a3b3c; }
body.night-mode .apm-state-card__name,
body.night-mode .apm-dist__name,
body.night-mode .apm-staff__name,
body.night-mode .apm-fact__val { color: #e6edf5; }
body.night-mode .apm-prose { color: #c1d4e3; }
body.night-mode .apm-dist__head[aria-expanded="true"] { border-bottom-color: #3a3b3c; }
body.night-mode .apm-dist--hq .apm-dist__head { background: linear-gradient(135deg, rgba(0,119,255,0.16), rgba(255,107,0,0.12)); }
body.night-mode .apm-chart-scroll { background: #1c1d1e; }
body.night-mode .apm-sheet { background: #242526; }
body.night-mode .apm-sheet__title { color: #e6edf5; }
body.night-mode .apm-sheet__close { background: #3a3b3c; color: #e6edf5; }
body.night-mode .apm-btn--maps,
body.night-mode .apm-btn--ghost { background: #242526; color: #e6edf5; }
body.night-mode .apm-corp-cat,
body.night-mode .apm-corp-item { background: #242526; border-color: #3a3b3c; }
body.night-mode .apm-corp-cat__label,
body.night-mode .apm-corp-item__label { color: #e6edf5; }
body.night-mode .apm-corp-cat__count,
body.night-mode .apm-corp-item__desc { color: #9fb2c4; }
body.night-mode .apm-corp-src { color: #6b7a8c; }
/* ==========================================================================
Phase 5 — Raw blog-article rendering polish + no-JS card components
The loader emits these card components into posts_articles.text; they must
work WITHOUT apm-orgprofile.js, so districts use native /.
========================================================================== */
/* ---- native district cards (raw articles, no JS) ---- */
details.apm-dist > summary.apm-dist__head { list-style: none; }
details.apm-dist > summary.apm-dist__head::-webkit-details-marker { display: none; }
details.apm-dist > summary.apm-dist__head::marker { content: ""; }
details.apm-dist[open] > .apm-dist__body { display: block; animation: apmFade 0.18s ease; }
details.apm-dist[open] > .apm-dist__head .apm-dist__chev { transform: rotate(180deg); }
details.apm-dist[open] > .apm-dist__head { border-bottom: 1px solid var(--apm-line); }
body.night-mode details.apm-dist[open] > .apm-dist__head { border-bottom-color: #3a3b3c; }
/* ---- blog article body: mobile-first prose + responsive media/tables ---- */
.blog-text {
font-size: 15px;
line-height: 1.7;
color: #2c3a4d;
word-break: break-word;
}
body.night-mode .blog-text { color: #c1d4e3; }
.blog-text p { margin: 0 0 12px; }
.blog-text h4 {
display: flex;
align-items: center;
gap: 8px;
margin: 22px 0 12px;
font-size: 17px;
font-weight: 700;
color: var(--apm-navy);
}
.blog-text h4::before {
content: "";
width: 4px; height: 18px;
border-radius: 4px;
background: var(--apm-orange);
}
body.night-mode .blog-text h4 { color: #e6edf5; }
.blog-text img { max-width: 100%; height: auto; border-radius: 10px; }
.blog-text a { color: var(--apm-blue); }
/* keep wide org charts scrollable inside articles (beats .blog-text img) */
.blog-text .apm-chart-scroll img { max-width: none; min-width: 100%; border-radius: 6px; }
/* legacy tables -> horizontally scrollable on small screens */
.blog-text table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: collapse;
font-size: 13px;
}
.blog-text table th,
.blog-text table td { padding: 8px 10px; }
/* card components inside articles share the app spacing */
.blog-text .apm-facts { margin: 6px 0 14px; }
.blog-text .apm-dist-list { margin-bottom: 8px; }
.blog-text .apm-staff-grid { margin-bottom: 8px; }
.blog-text .apm-source { color: var(--apm-muted); }
/* ==========================================================================
MyKonnect — Digital Warrant Card + Wallet + Verification
Premium graphical UI: gradient mesh, glassmorphism, depth, animation.
Mobile-first (360px base). Additive section; remove to revert.
========================================================================== */
/* --- layout shell + matching deep-blue background --- */
.apm-mk-wrap {
position: relative;
max-width: 480px;
margin: 0 auto;
padding: 0 0 100px;
min-height: 100vh;
overflow-x: hidden;
background:
linear-gradient(170deg, #000A1F 0%, #00173D 30%, #0059CC 60%, #103560 100%);
}
.apm-mk-wrap::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 25% 15%, rgba(0,119,255,.2) 0%, transparent 45%),
radial-gradient(ellipse at 75% 60%, rgba(0,89,204,.15) 0%, transparent 40%),
radial-gradient(ellipse at 50% 90%, rgba(255,107,0,.06) 0%, transparent 35%);
pointer-events: none;
z-index: 0;
}
body.night-mode .apm-mk-wrap {
background:
linear-gradient(170deg, #020c18 0%, #071e38 30%, #0a2a50 60%, #0c2844 100%);
}
body.night-mode .apm-mk-wrap::before {
background:
radial-gradient(ellipse at 25% 15%, rgba(0,119,255,.12) 0%, transparent 45%),
radial-gradient(ellipse at 75% 60%, rgba(0,89,204,.1) 0%, transparent 40%);
}
.apm-mk-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px 10px;
position: relative;
z-index: 1;
}
.apm-mk-topbar__title {
font-size: 22px;
font-weight: 900;
letter-spacing: -.3px;
background: linear-gradient(135deg, #e3f2fd 0%, #90caf9 50%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
body.night-mode .apm-mk-topbar__title {
background: linear-gradient(135deg, #90caf9 0%, #e3f2fd 100%);
-webkit-background-clip: text;
background-clip: text;
}
.apm-mk-scanbtn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border: none;
border-radius: 24px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.2);
transition: transform .15s, box-shadow .2s, background .2s;
}
.apm-mk-scanbtn:active {
transform: scale(.95);
background: rgba(255,255,255,.2);
}
.apm-mk-scanbtn svg { width: 18px; height: 18px; }
/* --- tabs (glassmorphism pill on dark) --- */
.apm-mk-tabs {
display: flex;
gap: 4px;
margin: 4px 16px 12px;
padding: 4px;
border-radius: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
position: relative;
z-index: 1;
}
body.night-mode .apm-mk-tabs { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
.apm-mk-tab {
position: relative;
flex: 1;
padding: 10px 6px;
border: none;
border-radius: 11px;
background: transparent;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.55);
cursor: pointer;
transition: all .25s cubic-bezier(.4,0,.2,1);
}
body.night-mode .apm-mk-tab { color: rgba(255,255,255,.45); }
.apm-mk-tab.is-active {
background: rgba(255,255,255,.14);
color: #fff;
font-weight: 700;
box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
body.night-mode .apm-mk-tab.is-active {
background: rgba(255,255,255,.1);
color: #e3f2fd;
}
.apm-mk-tabcount {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: linear-gradient(135deg, #3D9BFF, #0077FF);
color: #fff;
font-size: 10px;
font-weight: 800;
vertical-align: middle;
box-shadow: 0 2px 6px rgba(0,119,255,.4);
}
.apm-mk-tabbadge {
position: absolute;
top: 2px; right: 8px;
min-width: 17px; height: 17px;
padding: 0 5px;
border-radius: 9px;
background: linear-gradient(135deg, var(--apm-orange), #ff8f00);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 17px;
text-align: center;
box-shadow: 0 2px 6px rgba(255,107,0,.4);
animation: apmMkPulse 2s ease-in-out infinite;
}
@keyframes apmMkPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* --- main mount --- */
.apm-mk { padding: 16px 16px 32px; min-height: 300px; position: relative; z-index: 1; }
.apm-mk-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 70px 0;
color: rgba(255,255,255,.5);
}
.apm-mk-spinner {
width: 36px; height: 36px;
border: 3px solid rgba(255,255,255,.1);
border-top-color: #64b5f6;
border-radius: 50%;
animation: apmMkSpin .7s linear infinite;
box-shadow: 0 0 12px rgba(100,181,246,.3);
}
@keyframes apmMkSpin { to { transform: rotate(360deg); } }
.apm-mk-noscript { padding: 20px; text-align: center; color: rgba(255,255,255,.5); }
.apm-mk-empty {
padding: 40px 20px;
text-align: center;
color: rgba(255,255,255,.5);
font-size: 14px;
background: rgba(255,255,255,.04);
border-radius: 16px;
border: 1px dashed rgba(255,255,255,.15);
}
/* --- toast (glassmorphism) --- */
.apm-mk-toast {
position: fixed;
bottom: 100px; left: 50%;
transform: translateX(-50%) translateY(20px);
padding: 12px 24px;
border-radius: 14px;
background: rgba(15,25,40,.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.1);
color: #fff;
font-size: 13px;
font-weight: 500;
opacity: 0;
transition: opacity .3s, transform .3s cubic-bezier(.4,0,.2,1);
z-index: 9999;
pointer-events: none;
box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.apm-mk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* --- 3D card flip (premium depth) --- */
.apm-mk-stage { perspective: 1200px; margin-bottom: 18px; }
.apm-mk-card3d {
position: relative;
transform-style: preserve-3d;
transition: transform .6s cubic-bezier(.35,.1,.25,1);
cursor: pointer;
}
.apm-mk-card3d.is-flipped { transform: rotateY(180deg); }
.apm-mk-cardface {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 12px 40px rgba(0,0,0,.3),
0 4px 12px rgba(0,0,0,.2);
background: #fff;
transition: opacity .3s ease .15s;
}
body.night-mode .apm-mk-cardface {
background: #16263a;
box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.apm-mk-cardface--front { position: relative; }
.apm-mk-cardface--back {
position: absolute;
inset: 0;
transform: rotateY(180deg);
opacity: 0;
pointer-events: none;
}
/* Explicit face toggling — opacity approach for mobile reliability */
.apm-mk-card3d.is-flipped .apm-mk-cardface--front { opacity: 0; pointer-events: none; }
.apm-mk-card3d.is-flipped .apm-mk-cardface--back { opacity: 1; pointer-events: auto; }
/* --- business card info face (back) --- */
.apm-mk-bizcard {
display: flex;
flex-direction: column;
min-height: 380px;
background: #fff;
position: relative;
overflow: hidden;
}
body.night-mode .apm-mk-bizcard { background: #1a2d44; }
.apm-mk-bizheader {
display: flex;
align-items: center;
gap: 14px;
padding: 24px 20px 18px;
background:
linear-gradient(135deg, #0059CC 0%, #0077FF 50%, #3D9BFF 100%);
position: relative;
}
.apm-mk-bizheader::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 85% 20%, rgba(255,255,255,.1) 0%, transparent 40%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.apm-mk-avatar {
width: 64px; height: 64px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,.8);
object-fit: cover;
box-shadow: 0 4px 16px rgba(0,0,0,.25);
flex-shrink: 0;
background: #e3e9f0;
position: relative;
z-index: 1;
}
/* avatar selfie wrapper */
.apm-mk-avatar-wrap {
position: relative;
flex-shrink: 0;
cursor: pointer;
z-index: 1;
border-radius: 50%;
}
.apm-mk-avatar-wrap .apm-mk-avatar { display: block; }
.apm-mk-avatar-cam {
position: absolute;
bottom: 0; right: 0;
width: 24px; height: 24px;
border-radius: 50%;
background: rgba(0,119,255,.9);
display: flex; align-items: center; justify-content: center;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
pointer-events: none;
}
.apm-mk-avatar-cam svg { width: 12px; height: 12px; color: #fff; }
.apm-mk-avatar-loader {
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(0,0,0,.45);
border: 3px solid rgba(255,255,255,.3);
border-top-color: #fff;
animation: apm-mk-spin .7s linear infinite;
}
@keyframes apm-mk-spin { to { transform: rotate(360deg); } }
.apm-mk-bizid { flex: 1; min-width: 0; position: relative; z-index: 1; }
.apm-mk-name {
font-size: 17px;
font-weight: 800;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -.2px;
text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.apm-mk-sub { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 500; }
.apm-mk-bizheader .apm-mk-badge { position: relative; z-index: 1; }
.apm-mk-bizbody {
flex: 1;
padding: 18px 20px 22px;
}
.apm-mk-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
}
.apm-mk-badge svg { width: 16px; height: 16px; display: block; }
.apm-mk-badge--ok {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
color: #1b5e20;
border: 1px solid rgba(46,125,50,.2);
box-shadow: 0 2px 8px rgba(46,125,50,.15);
}
.apm-mk-badge--self {
background: linear-gradient(135deg, #fff8e1, #ffecb3);
color: #e65100;
border: 1px solid rgba(230,81,0,.15);
}
body.night-mode .apm-mk-badge--ok { background: linear-gradient(135deg, #1b3a1e, #2e5a32); color: #a5d6a7; border-color: rgba(165,214,167,.2); }
body.night-mode .apm-mk-badge--self { background: linear-gradient(135deg, #3a2a10, #4a3515); color: #ffcc80; border-color: rgba(255,204,128,.2); }
.apm-mk-negeri {
display: inline-block;
margin-bottom: 10px;
padding: 4px 12px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(0,119,255,.08), rgba(0,119,255,.04));
border: 1px solid rgba(0,119,255,.12);
color: var(--apm-blue);
font-size: 12px;
font-weight: 700;
letter-spacing: .3px;
}
.apm-mk-meta {
display: block;
font-size: 13px;
color: #3d4f63;
margin-bottom: 4px;
padding-left: 2px;
}
body.night-mode .apm-mk-meta { color: #b0c4d8; }
.apm-mk-meta b { font-weight: 700; color: #5a6b7e; }
.apm-mk-vline {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 8px 12px;
border-radius: 10px;
background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
border: 1px solid rgba(46,125,50,.12);
color: #2e7d32;
font-size: 12px;
font-weight: 500;
}
.apm-mk-vline svg { width: 14px; height: 14px; flex-shrink: 0; }
body.night-mode .apm-mk-vline { background: linear-gradient(135deg, #1b3a1e, #1e3320); color: #81c784; border-color: rgba(129,199,132,.15); }
.apm-mk-contacts { margin-top: 14px; }
.apm-mk-crow {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 0;
font-size: 13px;
color: #3d4f63;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.04);
transition: color .2s;
}
body.night-mode .apm-mk-crow { color: #b0c4d8; border-color: rgba(255,255,255,.04); }
a.apm-mk-crow:hover { color: var(--apm-blue); }
.apm-mk-crow svg {
width: 16px; height: 16px;
color: var(--apm-blue);
flex-shrink: 0;
padding: 3px;
background: rgba(0,119,255,.08);
border-radius: 6px;
}
.apm-mk-socials { display: flex; gap: 10px; margin-top: 14px; }
.apm-mk-social {
display: flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(0,119,255,.08), rgba(0,119,255,.04));
border: 1px solid rgba(0,119,255,.1);
color: var(--apm-blue);
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition: all .2s;
}
.apm-mk-social:hover {
background: linear-gradient(135deg, var(--apm-blue), var(--apm-blue-dark));
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,119,255,.3);
}
.apm-mk-fliphint {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 16px;
font-size: 11px;
color: #9aa8b8;
font-weight: 500;
}
.apm-mk-fliphint svg { width: 14px; height: 14px; opacity: .7; }
/* --- card back (unique QR credential) --- */
.apm-mk-backinner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 380px;
padding: 32px 24px;
background:
linear-gradient(160deg, #000A1F 0%, #00173D 35%, #0059CC 70%, #0077FF 100%);
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.apm-mk-backinner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 25% 15%, rgba(255,255,255,.07) 0%, transparent 35%),
radial-gradient(circle at 75% 85%, rgba(0,119,255,.25) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.02) 0%, transparent 60%);
}
.apm-mk-backinner::after {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: repeating-conic-gradient(
rgba(255,255,255,.015) 0deg 2deg, transparent 2deg 4deg
);
animation: apmMkShimmer 20s linear infinite;
}
@keyframes apmMkShimmer { to { transform: rotate(360deg); } }
.apm-mk-backtitle {
font-size: 11px;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
opacity: .6;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
/* Branded crest + wordmark on the QR face (APMSiaga DIGITAL identity) */
.apm-mk-brand {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.apm-mk-crest {
width: 42px;
height: 42px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
margin-bottom: 8px;
}
.apm-mk-brandname {
font-size: 17px;
font-weight: 800;
letter-spacing: .5px;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,.25);
line-height: 1;
}
.apm-mk-brandacc { color: #FF6B00; }
.apm-mk-brandsub {
margin-top: 5px;
font-size: 9px;
font-weight: 700;
letter-spacing: 5px;
text-indent: 5px;
color: #3D9BFF;
opacity: .95;
}
/* QR frame — unique branded double-border with corner accents */
.apm-mk-qrwrap {
position: relative;
z-index: 1;
padding: 16px;
border-radius: 20px;
background: #fff;
box-shadow:
0 0 0 3px rgba(255,255,255,.2),
0 0 0 6px rgba(0,119,255,.3),
0 12px 40px rgba(0,0,0,.4);
}
.apm-mk-qrwrap::before,
.apm-mk-qrwrap::after {
content: '';
position: absolute;
width: 20px; height: 20px;
border: 3px solid rgba(255,107,0,.8);
z-index: 2;
}
.apm-mk-qrwrap::before {
top: -8px; left: -8px;
border-right: none; border-bottom: none;
border-radius: 6px 0 0 0;
}
.apm-mk-qrwrap::after {
bottom: -8px; right: -8px;
border-left: none; border-top: none;
border-radius: 0 0 6px 0;
}
.apm-mk-qrwrap canvas { display: block; border-radius: 8px; }
.apm-mk-backname {
margin-top: 20px;
font-size: 16px;
font-weight: 800;
position: relative;
z-index: 1;
letter-spacing: .3px;
text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.apm-mk-backhint {
display: flex;
align-items: center;
gap: 7px;
margin-top: 10px;
font-size: 12px;
opacity: .65;
position: relative;
z-index: 1;
}
.apm-mk-backhint svg { width: 14px; height: 14px; }
.apm-mk-backinner .apm-mk-fliphint {
color: rgba(255,255,255,.4);
position: relative;
z-index: 1;
margin-top: 20px;
}
/* --- verification banner (glass on dark) --- */
.apm-mk-vbanner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 18px;
border-radius: 16px;
margin-bottom: 16px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,.7);
}
body.night-mode .apm-mk-vbanner { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); color: rgba(255,255,255,.6); }
.apm-mk-vbanner svg { width: 18px; height: 18px; flex-shrink: 0; }
.apm-mk-vbanner--ok {
background: rgba(46,125,50,.15);
border-color: rgba(129,199,132,.25);
color: #a5d6a7;
}
.apm-mk-vbanner--wait {
background: rgba(245,127,23,.12);
border-color: rgba(255,213,79,.2);
color: #ffd54f;
}
.apm-mk-vbanner--no {
background: rgba(198,40,40,.12);
border-color: rgba(255,138,101,.2);
color: #ff8a65;
}
body.night-mode .apm-mk-vbanner--ok { background: rgba(46,125,50,.12); color: #81c784; border-color: rgba(129,199,132,.15); }
body.night-mode .apm-mk-vbanner--wait { background: rgba(245,127,23,.1); color: #ffd54f; border-color: rgba(255,213,79,.15); }
body.night-mode .apm-mk-vbanner--no { background: rgba(198,40,40,.1); color: #ff8a65; border-color: rgba(255,138,101,.15); }
/* --- buttons (graphical gradient) --- */
.apm-mk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-bottom: 16px; }
.apm-mk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 20px;
border: none;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
border: 1px solid rgba(255,255,255,.18);
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: all .2s cubic-bezier(.4,0,.2,1);
box-shadow: 0 4px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
body.night-mode .apm-mk-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.apm-mk-btn svg { width: 18px; height: 18px; }
.apm-mk-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.1));
}
.apm-mk-btn--primary {
background: linear-gradient(135deg, #3D9BFF 0%, #0059CC 100%);
border-color: rgba(30,136,229,.4);
color: #fff;
box-shadow: 0 4px 18px rgba(0,119,255,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.apm-mk-btn--primary:hover {
background: linear-gradient(135deg, #3D9BFF, #0077FF);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0,119,255,.5);
}
.apm-mk-btn--ok {
background: linear-gradient(135deg, #43a047, #2e7d32);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 14px rgba(46,125,50,.3);
}
.apm-mk-btn--ok:hover { background: linear-gradient(135deg, #4caf50, #388e3c); color: #fff; transform: translateY(-1px); }
.apm-mk-btn--danger {
background: linear-gradient(135deg, #e53935, #c62828);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 14px rgba(198,40,40,.3);
}
.apm-mk-btn--danger:hover { background: linear-gradient(135deg, #ef5350, #d32f2f); color: #fff; transform: translateY(-1px); }
.apm-mk-btn--sm { padding: 7px 14px; font-size: 12px; border-radius: 10px; }
.apm-mk-btn:disabled { opacity: .5; pointer-events: none; }
/* --- bag (glass grid on dark) --- */
.apm-mk-wtools { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.apm-mk-search {
flex: 1;
min-width: 0;
padding: 11px 14px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
font-size: 14px;
background: rgba(255,255,255,.06);
color: #fff;
outline: none;
transition: border-color .2s, box-shadow .2s;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.apm-mk-search::placeholder { color: rgba(255,255,255,.35); }
body.night-mode .apm-mk-search { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #e6edf5; }
.apm-mk-search:focus { border-color: rgba(100,181,246,.5); box-shadow: 0 0 0 3px rgba(100,181,246,.15); }
.apm-mk-filter {
padding: 11px 12px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
font-size: 13px;
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.8);
outline: none;
max-width: 130px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.apm-mk-filter option { background: #1a2d44; color: #fff; }
body.night-mode .apm-mk-filter { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
/* --- collapsible filter & sort panel --- */
.apm-mk-fpanel {
margin-bottom: 14px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
background: rgba(255,255,255,.05);
overflow: hidden;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
body.night-mode .apm-mk-fpanel { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
.apm-mk-ftoggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
background: none;
border: none;
color: rgba(255,255,255,.85);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.apm-mk-ftoggle svg { width: 16px; height: 16px; opacity: .7; }
.apm-mk-fcount {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: #3D9BFF;
color: #fff;
font-size: 10px;
font-weight: 800;
}
.apm-mk-fchev {
margin-left: auto;
display: inline-flex;
transition: transform .25s ease;
}
.apm-mk-fchev svg { width: 16px; height: 16px; }
.apm-mk-fpanel.is-open .apm-mk-fchev { transform: rotate(180deg); }
.apm-mk-fbody {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease, padding .3s ease;
padding: 0 16px;
}
.apm-mk-fpanel.is-open .apm-mk-fbody {
max-height: 320px;
padding: 4px 16px 16px;
}
.apm-mk-frow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.apm-mk-frow label {
flex: 0 0 90px;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,.55);
}
.apm-mk-fsel {
flex: 1;
min-width: 0;
padding: 9px 12px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 10px;
font-size: 13px;
background: rgba(255,255,255,.07);
color: #fff;
outline: none;
}
.apm-mk-fsel option { background: #1a2d44; color: #fff; }
.apm-mk-frow--check { justify-content: flex-start; }
.apm-mk-fcheck {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.8);
cursor: pointer;
flex: none !important;
}
.apm-mk-fcheck input { width: 16px; height: 16px; accent-color: #3D9BFF; cursor: pointer; }
.apm-mk-fclear {
display: inline-block;
padding: 7px 14px;
border: 1px solid rgba(255,138,101,.4);
border-radius: 10px;
background: rgba(255,138,101,.1);
color: #ff8a65;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background .2s;
}
.apm-mk-fclear:active { background: rgba(255,138,101,.25); }
/* --- wallet card tags row --- */
.apm-mk-wtags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
max-width: 100%;
}
.apm-mk-wtag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 9px;
border-radius: 8px;
background: rgba(100,181,246,.12);
border: 1px solid rgba(100,181,246,.2);
color: #90caf9;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.apm-mk-wtag svg { width: 10px; height: 10px; flex: none; }
.apm-mk-wtag--unit {
background: rgba(129,199,132,.1);
border-color: rgba(129,199,132,.2);
color: #a5d6a7;
}
.apm-mk-wmeta { font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 14px; font-weight: 500; }
.apm-mk-wgrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (min-width: 420px) { .apm-mk-wgrid { grid-template-columns: repeat(3, 1fr); } }
.apm-mk-wcard {
position: relative;
}
.apm-mk-wbody {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
padding: 20px 12px 16px;
border: 1px solid rgba(0,119,255,.08);
border-radius: 18px;
background: rgba(255,255,255,.06);
cursor: pointer;
transition: all .25s cubic-bezier(.4,0,.2,1);
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
body.night-mode .apm-mk-wbody { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); box-shadow: none; }
.apm-mk-wbody:active {
transform: scale(.96) translateY(2px);
box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
@media (hover: hover) {
.apm-mk-wbody:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,.25);
border-color: rgba(255,255,255,.25);
background: rgba(255,255,255,.1);
}
}
/* favourite star button */
.apm-mk-favbtn {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
background: rgba(0,0,0,.25);
color: rgba(255,255,255,.45);
cursor: pointer;
transition: all .2s ease;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.apm-mk-favbtn svg { width: 15px; height: 15px; }
.apm-mk-favbtn:active { transform: scale(1.2); }
.apm-mk-wcard.is-fav .apm-mk-favbtn {
color: #ffd54f;
background: rgba(255,213,79,.18);
}
@media (hover: hover) {
.apm-mk-favbtn:hover { color: #ffd54f; transform: scale(1.1); }
}
/* favourite highlight ring on card */
.apm-mk-wcard.is-fav .apm-mk-wbody {
border-color: rgba(255,213,79,.35);
box-shadow: 0 2px 14px rgba(255,213,79,.12), 0 2px 10px rgba(0,0,0,.15);
}
/* --- sub-tabs (All / Favourites) under Beg --- */
.apm-mk-subtabs {
display: flex;
gap: 8px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,.1);
padding-bottom: 0;
}
.apm-mk-subtab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px 11px;
border: none;
border-bottom: 2.5px solid transparent;
background: none;
color: rgba(255,255,255,.5);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all .2s ease;
margin-bottom: -1px;
}
.apm-mk-subtab svg { width: 13px; height: 13px; }
.apm-mk-subtab.is-active {
color: #fff;
border-bottom-color: #ffd54f;
}
.apm-mk-subtab.is-active svg { color: #ffd54f; }
@media (hover: hover) {
.apm-mk-subtab:hover { color: rgba(255,255,255,.85); }
}
.apm-mk-subcount {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 17px;
height: 17px;
padding: 0 5px;
border-radius: 9px;
background: rgba(255,213,79,.2);
color: #ffd54f;
font-size: 10px;
font-weight: 800;
}
.apm-mk-wphoto {
width: 58px; height: 58px;
border-radius: 50%;
object-fit: cover;
border: 2.5px solid rgba(255,255,255,.2);
box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.apm-mk-wname {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 700;
color: #fff;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.night-mode .apm-mk-wname { color: #e6edf5; }
.apm-mk-wsub {
font-size: 11px;
color: rgba(255,255,255,.5);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apm-mk-minibadge {
display: inline-flex;
color: #66bb6a;
}
.apm-mk-minibadge svg { width: 14px; height: 14px; }
/* --- card detail back link --- */
.apm-mk-backlink {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 14px;
padding: 8px 14px;
border: none;
border-radius: 10px;
background: rgba(255,255,255,.08);
color: #90caf9;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all .2s;
}
.apm-mk-backlink:hover { background: rgba(255,255,255,.14); color: #fff; }
.apm-mk-backlink svg { width: 16px; height: 16px; }
/* --- verification sections --- */
.apm-mk-section { margin-bottom: 26px; }
.apm-mk-htitle {
font-size: 14px;
font-weight: 800;
color: #e3f2fd;
margin: 0 0 14px;
padding-bottom: 8px;
border-bottom: 2px solid rgba(255,255,255,.1);
letter-spacing: -.1px;
}
body.night-mode .apm-mk-htitle { color: #bbdefb; border-color: rgba(255,255,255,.06); }
.apm-mk-req {
padding: 16px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
background: rgba(255,255,255,.05);
margin-bottom: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
body.night-mode .apm-mk-req { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
.apm-mk-reqhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.apm-mk-reqphoto {
width: 42px; height: 42px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255,255,255,.2);
box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.apm-mk-reqname { font-size: 14px; font-weight: 700; color: #fff; }
body.night-mode .apm-mk-reqname { color: #e6edf5; }
.apm-mk-reqmeta {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
font-size: 12px;
color: rgba(255,255,255,.55);
}
body.night-mode .apm-mk-reqmeta { color: rgba(255,255,255,.45); }
.apm-mk-reqmeta b { font-weight: 700; }
.apm-mk-reqactions { display: flex; gap: 10px; margin-top: 14px; }
.apm-mk-mine {
display: flex;
flex-direction: column;
gap: 5px;
padding: 16px;
border-radius: 14px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
font-size: 13px;
color: rgba(255,255,255,.7);
}
body.night-mode .apm-mk-mine { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); color: rgba(255,255,255,.6); }
.apm-mk-mine--approved {
background: rgba(46,125,50,.12);
border-color: rgba(129,199,132,.2);
color: #a5d6a7;
}
.apm-mk-mine--rejected {
background: rgba(198,40,40,.1);
border-color: rgba(255,138,101,.2);
color: #ff8a65;
}
body.night-mode .apm-mk-mine--approved { background: rgba(46,125,50,.12); color: #81c784; border-color: rgba(129,199,132,.15); }
body.night-mode .apm-mk-mine--rejected { background: rgba(198,40,40,.1); color: #ff8a65; border-color: rgba(255,138,101,.15); }
.apm-mk-minestatus { font-weight: 800; text-transform: capitalize; }
/* --- admin panel --- */
.apm-mk-admin {
margin-top: 30px;
padding-top: 18px;
border-top: 2px dashed rgba(255,255,255,.12);
}
body.night-mode .apm-mk-admin { border-color: rgba(255,255,255,.08); }
.apm-mk-admtable { overflow-x: auto; margin-bottom: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); }
.apm-mk-admtable table { width: 100%; border-collapse: collapse; font-size: 13px; color: rgba(255,255,255,.8); }
.apm-mk-admtable th,
.apm-mk-admtable td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); }
.apm-mk-admtable th { background: rgba(255,255,255,.05); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.5); }
body.night-mode .apm-mk-admtable th,
body.night-mode .apm-mk-admtable td { border-color: rgba(255,255,255,.04); }
body.night-mode .apm-mk-admtable th { background: rgba(255,255,255,.03); color: rgba(255,255,255,.4); }
.apm-mk-admuser {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
white-space: nowrap;
}
.apm-mk-admuser img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,255,255,.2); }
.apm-mk-supsel {
padding: 7px 10px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 10px;
font-size: 12px;
background: rgba(255,255,255,.06);
color: #fff;
max-width: 140px;
outline: none;
}
.apm-mk-supsel option { background: #1a2d44; color: #fff; }
body.night-mode .apm-mk-supsel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #e6edf5; }
.apm-mk-st { font-weight: 700; text-transform: capitalize; }
.apm-mk-st--pending { color: #ffd54f; }
.apm-mk-st--approved { color: #81c784; }
.apm-mk-st--rejected { color: #ff8a65; }
/* Mobile: stack admin table into cards */
@media (max-width: 575px) {
.apm-mk-admtable table,
.apm-mk-admtable thead,
.apm-mk-admtable tbody,
.apm-mk-admtable th,
.apm-mk-admtable td,
.apm-mk-admtable tr { display: block; }
.apm-mk-admtable thead { display: none; }
.apm-mk-admtable tr {
padding: 12px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.apm-mk-admtable td {
padding: 6px 0;
border-bottom: none;
text-align: left;
}
.apm-mk-admtable td::before {
content: attr(data-label);
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: rgba(255,255,255,.4);
margin-bottom: 3px;
}
.apm-mk-admuser { white-space: normal; }
.apm-mk-supsel { max-width: 100%; width: 100%; }
}
/* --- ensure Sngine footer visible after dark section --- */
.row.footer {
background: #f5f7fa !important;
border-top: 1px solid #e2e8f0;
padding: 16px 0;
margin-top: 0;
}
body.night-mode .row.footer {
background: #1a2d44 !important;
border-top: 1px solid rgba(255,255,255,.08);
}
/* Hide footer on mobile (bottom nav bar handles navigation) */
@media (max-width: 767px) {
.row.footer { display: none !important; }
}
/* --- bizcard interior (on white) --- */
.apm-mk-bizbody .apm-mk-meta { color: #3d4f63; }
.apm-mk-bizbody .apm-mk-meta b { color: #5a6b7e; }
.apm-mk-bizbody .apm-mk-crow { color: #3d4f63; border-color: rgba(0,0,0,.05); }
.apm-mk-bizbody .apm-mk-fliphint { color: #9aa8b8; }
body.night-mode .apm-mk-bizbody .apm-mk-meta { color: #b0c4d8; }
body.night-mode .apm-mk-bizbody .apm-mk-meta b { color: #8fa8c0; }
body.night-mode .apm-mk-bizbody .apm-mk-crow { color: #b0c4d8; border-color: rgba(255,255,255,.06); }
body.night-mode .apm-mk-bizbody .apm-mk-fliphint { color: rgba(255,255,255,.4); }
/* =====================================================================
Marketplace — custom /shop storefront (apm_market module)
Shopee-style: deep-blue hero + search, scrollable category chips,
responsive white product-card grid.
===================================================================== */
.apm-mkt-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 0 100px;
min-height: 100vh;
background: linear-gradient(180deg, #eef3f9 0%, #e9eff7 100%);
}
body.night-mode .apm-mkt-wrap {
background: linear-gradient(180deg, #0a1a2e 0%, #0c2138 100%);
}
.apm-mkt { position: relative; }
/* --- hero band --- */
.apm-mkt-hero {
position: relative;
overflow: hidden;
padding: 22px 16px 24px;
background: linear-gradient(135deg, #0059CC 0%, #0077FF 50%, #00173D 100%);
border-radius: 0 0 24px 24px;
}
.apm-mkt-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 85% 10%, rgba(255,255,255,.14) 0%, transparent 45%),
radial-gradient(ellipse at 10% 90%, rgba(255,140,0,.12) 0%, transparent 40%);
pointer-events: none;
}
.apm-mkt-hero__top {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.apm-mkt-hero__title {
margin: 0;
color: #fff;
font-size: 24px;
font-weight: 800;
letter-spacing: .3px;
line-height: 1.15;
}
.apm-mkt-hero__tagline {
margin: 5px 0 0;
color: rgba(255,255,255,.78);
font-size: 12.5px;
font-weight: 500;
line-height: 1.4;
}
.apm-mkt-cartbtn {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 14px;
background: rgba(255,255,255,.16);
border: 1px solid rgba(255,255,255,.25);
color: #fff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: all .2s ease;
}
.apm-mkt-cartbtn svg { width: 20px; height: 20px; }
.apm-mkt-cartbtn:active { transform: scale(.94); }
@media (hover: hover) {
.apm-mkt-cartbtn:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); }
}
/* --- search bar --- */
.apm-mkt-search {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 10px;
height: 46px;
margin-top: 18px;
padding: 0 8px 0 16px;
background: rgba(255,255,255,.96);
border-radius: 999px;
box-shadow: 0 6px 18px rgba(2,20,40,.22);
}
.apm-mkt-search__icon { display: inline-flex; color: #0077FF; flex: none; }
.apm-mkt-search__icon svg { width: 18px; height: 18px; }
.apm-mkt-search__input {
flex: 1;
min-width: 0;
height: 100%;
border: none;
outline: none;
background: transparent;
font-size: 14px;
color: #16324f;
}
.apm-mkt-search__input::placeholder { color: #8a99ab; }
/* --- category grid (Shopee-style 2x4 icon + label) --- */
.apm-mkt-catgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px 8px;
padding: 16px 16px 8px;
}
.apm-mkt-cat {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
background: transparent;
border: none;
padding: 2px 2px 4px;
cursor: pointer;
transition: transform .15s ease;
}
.apm-mkt-cat:active { transform: scale(.94); }
.apm-mkt-cat__ic {
width: 52px; height: 52px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 21px; color: #fff;
box-shadow: 0 3px 10px rgba(13,42,80,.16);
outline: 3px solid transparent; outline-offset: 2px;
transition: box-shadow .2s ease, outline-color .2s ease;
}
.apm-mkt-cat__label {
font-size: 11px; font-weight: 700; line-height: 1.25;
color: #3d4f63; text-align: center;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 2.5em;
}
/* per-category icon gradients */
.apm-mkt-cat__ic--all { background: linear-gradient(135deg, #3D9BFF, #0077FF); }
.apm-mkt-cat__ic--merch { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.apm-mkt-cat__ic--voucher { background: linear-gradient(135deg, #ec407a, #c2185b); }
.apm-mkt-cat__ic--apparel { background: linear-gradient(135deg, #5c6bc0, #3949ab); }
.apm-mkt-cat__ic--gear { background: linear-gradient(135deg, #8d6e63, #5d4037); }
.apm-mkt-cat__ic--training { background: linear-gradient(135deg, #43a047, #2e7d32); }
.apm-mkt-cat__ic--digital { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }
.apm-mkt-cat__ic--other { background: linear-gradient(135deg, #607d8b, #455a64); }
/* active: ring around icon + blue label */
.apm-mkt-cat.is-active .apm-mkt-cat__ic { outline-color: rgba(0,119,255,.35); box-shadow: 0 5px 16px rgba(0,119,255,.4); }
.apm-mkt-cat.is-active .apm-mkt-cat__label { color: #0077FF; }
/* loading skeleton cells */
.apm-mkt-cat.is-loading {
pointer-events: none;
height: 78px; border-radius: 14px;
background: linear-gradient(90deg, #e3eaf2 25%, #d8e2ee 50%, #e3eaf2 75%);
background-size: 200% 100%;
animation: apmMktShimmer 1.2s linear infinite;
}
/* --- toolbar (count + sort) --- */
.apm-mkt-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px 2px;
}
.apm-mkt-count { font-size: 12.5px; font-weight: 600; color: #5a6b7e; }
.apm-mkt-sort { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.apm-mkt-sort__label { font-size: 12px; font-weight: 600; color: #5a6b7e; }
.apm-mkt-sort__select {
appearance: none;
-webkit-appearance: none;
padding: 8px 32px 8px 13px;
border-radius: 999px;
border: 1px solid #d7e1ec;
background: #fff;
color: #16324f;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
outline: none;
}
.apm-mkt-sort__chev { position: absolute; right: 11px; display: inline-flex; color: #5a6b7e; pointer-events: none; }
.apm-mkt-sort__chev svg { width: 14px; height: 14px; }
/* --- product grid --- */
.apm-mkt-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 14px 16px 4px;
}
@media (min-width: 640px) { .apm-mkt-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px) { .apm-mkt-grid { grid-template-columns: repeat(4, 1fr); } }
/* --- product card --- */
.apm-mkt-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(13,42,79,.06);
border-radius: 16px;
overflow: hidden;
color: inherit;
text-decoration: none;
box-shadow: 0 1px 4px rgba(13,42,79,.07);
transition: transform .22s ease, box-shadow .22s ease;
}
.apm-mkt-card:active { transform: scale(.98); }
@media (hover: hover) {
.apm-mkt-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 26px rgba(13,42,79,.16);
}
}
.apm-mkt-card__media {
position: relative;
width: 100%;
padding-top: 100%;
background: #eef3f9;
overflow: hidden;
}
.apm-mkt-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
@media (hover: hover) {
.apm-mkt-card:hover .apm-mkt-card__media img { transform: scale(1.05); }
}
.apm-mkt-card__media img.is-broken { opacity: .25; object-fit: contain; }
.apm-mkt-card__badges {
position: absolute;
top: 8px;
left: 8px;
display: flex;
flex-wrap: wrap;
gap: 4px;
z-index: 1;
}
.apm-mkt-badge {
padding: 3px 8px;
border-radius: 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
color: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.apm-mkt-badge--new { background: linear-gradient(135deg, #3D9BFF, #0077FF); }
.apm-mkt-badge--used { background: rgba(90,107,126,.9); }
.apm-mkt-badge--digital { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
/* multi-image photo count chip (bottom-right of card media) */
.apm-mkt-photos {
position: absolute;
bottom: 8px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 7px;
background: rgba(13,42,79,.72);
color: #fff;
font-size: 10.5px;
font-weight: 700;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: 1;
}
.apm-mkt-photos svg { width: 12px; height: 12px; }
.apm-mkt-card__body {
display: flex;
flex-direction: column;
gap: 7px;
padding: 11px 12px 13px;
flex: 1;
}
.apm-mkt-card__name {
font-size: 13px;
font-weight: 600;
line-height: 1.35;
color: #16324f;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.7em;
}
.apm-mkt-price { font-size: 16.5px; font-weight: 800; color: #e65100; letter-spacing: .2px; }
.apm-mkt-price--free { color: #2e7d32; }
.apm-mkt-card__meta { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.apm-mkt-seller { display: flex; align-items: center; gap: 6px; min-width: 0; }
.apm-mkt-seller__avatar {
width: 19px;
height: 19px;
border-radius: 50%;
object-fit: cover;
flex: none;
border: 1px solid rgba(13,42,79,.1);
}
.apm-mkt-seller__name {
font-size: 11.5px;
font-weight: 500;
color: #5a6b7e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.apm-mkt-vbadge { display: inline-flex; color: #0077FF; flex: none; }
.apm-mkt-vbadge svg { width: 13px; height: 13px; }
.apm-mkt-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.apm-mkt-loc {
display: inline-flex;
align-items: center;
gap: 3px;
min-width: 0;
font-size: 10.5px;
color: #8a99ab;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.apm-mkt-loc svg { width: 11px; height: 11px; flex: none; }
.apm-mkt-stock { flex: none; padding: 3px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; }
.apm-mkt-stock--in { background: rgba(46,125,50,.1); color: #2e7d32; }
.apm-mkt-stock--out { background: rgba(198,40,40,.1); color: #c62828; }
.apm-mkt-stock--sold { background: rgba(90,107,126,.14); color: #5a6b7e; }
/* --- empty state --- */
.apm-mkt-empty { grid-column: 1 / -1; text-align: center; padding: 64px 20px; }
.apm-mkt-empty__icon { display: inline-flex; color: #b6c6d8; }
.apm-mkt-empty__icon svg { width: 58px; height: 58px; }
.apm-mkt-empty__title { margin: 16px 0 5px; font-size: 15px; font-weight: 700; color: #3d4f63; }
.apm-mkt-empty__hint { margin: 0; font-size: 12.5px; color: #8a99ab; }
/* --- skeletons --- */
@keyframes apmMktShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.apm-mkt-skel { background: #fff; border: 1px solid rgba(13,42,79,.05); border-radius: 16px; overflow: hidden; }
.apm-mkt-skel__img {
padding-top: 100%;
background: linear-gradient(90deg, #eef3f9 25%, #e2eaf3 50%, #eef3f9 75%);
background-size: 200% 100%;
animation: apmMktShimmer 1.2s linear infinite;
}
.apm-mkt-skel__line {
height: 12px;
margin: 11px 12px 0;
border-radius: 6px;
background: linear-gradient(90deg, #eef3f9 25%, #e2eaf3 50%, #eef3f9 75%);
background-size: 200% 100%;
animation: apmMktShimmer 1.2s linear infinite;
}
.apm-mkt-skel__line--sm { width: 55%; margin-bottom: 14px; }
/* --- load more --- */
.apm-mkt-more { padding: 10px 16px 22px; text-align: center; }
.apm-mkt-morebtn {
padding: 11px 30px;
border-radius: 999px;
border: 1.5px solid #0077FF;
background: #fff;
color: #0077FF;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all .2s ease;
}
.apm-mkt-morebtn:active { transform: scale(.97); }
@media (hover: hover) {
.apm-mkt-morebtn:hover { background: #0077FF; color: #fff; box-shadow: 0 5px 14px rgba(0,119,255,.35); }
}
/* --- initial loading + noscript --- */
.apm-mkt-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 90px 0; }
.apm-mkt-loading p { margin: 0; font-size: 13px; color: #5a6b7e; }
@keyframes apmMktSpin { to { transform: rotate(360deg); } }
.apm-mkt-spinner {
width: 36px;
height: 36px;
border: 3px solid rgba(0,119,255,.15);
border-top-color: #0077FF;
border-radius: 50%;
animation: apmMktSpin .7s linear infinite;
}
.apm-mkt-noscript { padding: 48px 20px; text-align: center; color: #5a6b7e; font-size: 13.5px; }
/* --- night mode --- */
body.night-mode .apm-mkt-card { background: #12233a; border-color: rgba(255,255,255,.06); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
body.night-mode .apm-mkt-card__media { background: #0d1c30; }
body.night-mode .apm-mkt-card__name { color: #e3edf7; }
body.night-mode .apm-mkt-seller__name { color: #8fa8c0; }
body.night-mode .apm-mkt-loc { color: #6d86a0; }
body.night-mode .apm-mkt-cat__label { color: #b0c4d8; }
body.night-mode .apm-mkt-cat.is-active .apm-mkt-cat__label { color: #6ea8fe; }
body.night-mode .apm-mkt-cat.is-loading { background: linear-gradient(90deg, #16293f 25%, #1b324c 50%, #16293f 75%); background-size: 200% 100%; }
body.night-mode .apm-mkt-count,
body.night-mode .apm-mkt-sort__label { color: #8fa8c0; }
body.night-mode .apm-mkt-sort__select { background: #12233a; border-color: rgba(255,255,255,.12); color: #e3edf7; }
body.night-mode .apm-mkt-sort__chev { color: #8fa8c0; }
body.night-mode .apm-mkt-skel { background: #12233a; border-color: rgba(255,255,255,.05); }
body.night-mode .apm-mkt-skel__img,
body.night-mode .apm-mkt-skel__line { background: linear-gradient(90deg, #16293f 25%, #1b324c 50%, #16293f 75%); background-size: 200% 100%; }
body.night-mode .apm-mkt-morebtn { background: #12233a; }
body.night-mode .apm-mkt-empty__title { color: #b0c4d8; }
body.night-mode .apm-mkt-empty__icon { color: #3d5a7a; }
body.night-mode .apm-mkt-loading p,
body.night-mode .apm-mkt-noscript { color: #8fa8c0; }
/* =====================================================================
Product detail page — custom /shop/product/{id} (apm_product module)
Shopee-style: swipeable gallery + thumbs, buy box with variant picker,
specs table, seller card, description.
===================================================================== */
.apm-prd-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 0 100px;
min-height: 100vh;
background: linear-gradient(180deg, #eef3f9 0%, #e9eff7 100%);
}
body.night-mode .apm-prd-wrap { background: linear-gradient(180deg, #0a1a2e 0%, #0c2138 100%); }
.apm-prd { position: relative; padding: 14px 14px 0; }
/* --- breadcrumb / back --- */
.apm-prd-crumb {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(13,42,79,.08);
color: #0077FF;
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 1px 4px rgba(13,42,79,.07);
}
.apm-prd-crumb svg { width: 15px; height: 15px; }
@media (hover: hover) { .apm-prd-crumb:hover { background: #0077FF; color: #fff; } }
/* --- top layout: gallery + buy box --- */
.apm-prd-top { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
@media (min-width: 820px) {
.apm-prd-top { flex-direction: row; align-items: flex-start; }
.apm-prd-gallery { flex: 0 0 46%; }
.apm-prd-buy { flex: 1; }
}
/* --- gallery --- */
.apm-prd-gallery { position: relative; }
.apm-prd-gmain {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(13,42,79,.07);
box-shadow: 0 1px 5px rgba(13,42,79,.08);
scrollbar-width: none;
}
.apm-prd-gmain::-webkit-scrollbar { display: none; }
.apm-prd-gslide { flex: 0 0 100%; scroll-snap-align: start; position: relative; padding-top: 100%; }
.apm-prd-gslide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
}
.apm-prd-gcount {
position: absolute;
top: 10px;
right: 10px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(13,42,79,.72);
color: #fff;
font-size: 11px;
font-weight: 700;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: 2;
}
.apm-prd-gthumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.apm-prd-gthumbs::-webkit-scrollbar { display: none; }
.apm-prd-gthumb {
flex: none;
width: 58px;
height: 58px;
padding: 0;
border-radius: 12px;
overflow: hidden;
border: 2px solid transparent;
background: #fff;
cursor: pointer;
transition: border-color .2s ease;
}
.apm-prd-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apm-prd-gthumb.is-active { border-color: #0077FF; }
/* --- buy box --- */
.apm-prd-buy {
background: #fff;
border: 1px solid rgba(13,42,79,.07);
border-radius: 18px;
padding: 18px 18px 20px;
box-shadow: 0 1px 5px rgba(13,42,79,.08);
}
.apm-prd-badges { display: flex; gap: 6px; margin-bottom: 10px; }
.apm-prd-badge {
padding: 3px 9px;
border-radius: 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
color: #fff;
}
.apm-prd-badge--new { background: linear-gradient(135deg, #3D9BFF, #0077FF); }
.apm-prd-badge--used { background: rgba(90,107,126,.9); }
.apm-prd-badge--digital { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.apm-prd-name {
margin: 0 0 12px;
font-size: 19px;
font-weight: 800;
line-height: 1.3;
color: #16324f;
}
.apm-prd-pricebox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-radius: 14px;
background: linear-gradient(135deg, #fff4ec, #ffeede);
border: 1px solid rgba(230,81,0,.12);
}
.apm-prd-price { font-size: 24px; font-weight: 800; color: #e65100; letter-spacing: .2px; }
.apm-prd-stocktag { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.apm-prd-stocktag--in { background: rgba(46,125,50,.12); color: #2e7d32; }
.apm-prd-stocktag--out { background: rgba(198,40,40,.12); color: #c62828; }
.apm-prd-stocktag--sold { background: rgba(90,107,126,.14); color: #5a6b7e; }
/* --- variant picker --- */
.apm-prd-var { margin-top: 16px; }
.apm-prd-var__label { font-size: 12.5px; font-weight: 700; color: #5a6b7e; margin-bottom: 8px; }
.apm-prd-var__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.apm-prd-varopt {
padding: 8px 16px;
border-radius: 10px;
border: 1.5px solid #d7e1ec;
background: #fff;
color: #3d4f63;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .18s ease;
}
.apm-prd-varopt.is-selected { border-color: #0077FF; color: #0077FF; background: rgba(0,119,255,.07); box-shadow: 0 2px 8px rgba(0,119,255,.18); }
.apm-prd-varopt.is-disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
@media (hover: hover) { .apm-prd-varopt:not(.is-disabled):not(.is-selected):hover { border-color: #0077FF; color: #0077FF; } }
/* --- quantity stepper --- */
.apm-prd-qty { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.apm-prd-qty__label { font-size: 12.5px; font-weight: 700; color: #5a6b7e; }
.apm-prd-qty__ctl { display: inline-flex; align-items: center; border: 1.5px solid #d7e1ec; border-radius: 10px; overflow: hidden; }
.apm-prd-qty__ctl button {
width: 36px;
height: 36px;
border: none;
background: #f4f8fc;
color: #16324f;
font-size: 17px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease;
}
.apm-prd-qty__ctl button:active { background: #e2ebf4; }
.apm-prd-qty__ctl input {
width: 48px;
height: 36px;
border: none;
outline: none;
text-align: center;
font-size: 14px;
font-weight: 700;
color: #16324f;
-moz-appearance: textfield;
}
.apm-prd-qty__ctl input::-webkit-outer-spin-button,
.apm-prd-qty__ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* --- action buttons --- */
.apm-prd-actions { display: flex; gap: 10px; margin-top: 20px; }
.apm-prd-addcart {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 16px;
border-radius: 12px;
border: 1.5px solid #0077FF;
background: #fff;
color: #0077FF;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all .2s ease;
}
.apm-prd-addcart svg { width: 17px; height: 17px; }
.apm-prd-addcart:active { transform: scale(.98); }
@media (hover: hover) { .apm-prd-addcart:hover { background: rgba(0,119,255,.08); } }
.apm-prd-buynow {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 16px;
border-radius: 12px;
background: linear-gradient(135deg, #fb8c00, #ef6c00);
color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 5px 14px rgba(239,108,0,.32);
transition: all .2s ease;
}
.apm-prd-buynow:active { transform: scale(.98); }
@media (hover: hover) { .apm-prd-buynow:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(239,108,0,.4); } }
/* --- seller card --- */
.apm-prd-seller {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
padding: 14px 16px;
background: #fff;
border: 1px solid rgba(13,42,79,.07);
border-radius: 16px;
box-shadow: 0 1px 5px rgba(13,42,79,.08);
}
.apm-prd-seller__avatar {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(0,119,255,.2);
flex: none;
}
.apm-prd-seller__avatar--ph { background: linear-gradient(135deg, #cfe0f2, #b6cde6); display: inline-block; }
.apm-prd-seller__info { min-width: 0; }
.apm-prd-seller__name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #16324f; }
.apm-prd-seller__sub { font-size: 11.5px; color: #8a99ab; margin-top: 2px; }
.apm-prd-vbadge { display: inline-flex; align-items: center; gap: 3px; color: #0077FF; font-size: 11px; font-weight: 700; }
.apm-prd-vbadge svg { width: 13px; height: 13px; }
/* --- blocks (specs / description) --- */
.apm-prd-block {
margin-top: 14px;
padding: 16px 18px 18px;
background: #fff;
border: 1px solid rgba(13,42,79,.07);
border-radius: 16px;
box-shadow: 0 1px 5px rgba(13,42,79,.08);
}
.apm-prd-block__title {
margin: 0 0 12px;
font-size: 14.5px;
font-weight: 800;
color: #16324f;
letter-spacing: .2px;
}
.apm-prd-specs { display: flex; flex-direction: column; }
.apm-prd-specrow {
display: flex;
gap: 12px;
padding: 8px 0;
border-bottom: 1px dashed rgba(13,42,79,.08);
font-size: 13px;
}
.apm-prd-specrow:last-child { border-bottom: none; }
.apm-prd-specrow__k { flex: 0 0 38%; color: #8a99ab; font-weight: 600; }
.apm-prd-specrow__v { flex: 1; color: #16324f; font-weight: 600; }
.apm-prd-desc { font-size: 13.5px; line-height: 1.65; color: #3d4f63; white-space: normal; }
/* --- toast --- */
.apm-prd-toast {
position: fixed;
left: 50%;
bottom: 90px;
transform: translateX(-50%);
padding: 11px 20px;
border-radius: 999px;
background: rgba(13,42,79,.92);
color: #fff;
font-size: 13px;
font-weight: 700;
box-shadow: 0 8px 22px rgba(2,20,40,.35);
z-index: 999;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.apm-prd-toast.is-warn { background: rgba(198,40,40,.92); }
/* --- empty / not found --- */
.apm-prd-empty { text-align: center; padding: 70px 20px; }
.apm-prd-empty__icon { display: inline-flex; color: #b6c6d8; }
.apm-prd-empty__icon svg { width: 58px; height: 58px; }
.apm-prd-empty__title { margin: 16px 0 5px; font-size: 15px; font-weight: 700; color: #3d4f63; }
.apm-prd-empty__hint { margin: 0; font-size: 12.5px; color: #8a99ab; }
/* --- loading + noscript --- */
.apm-prd-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 90px 0; }
.apm-prd-loading p { margin: 0; font-size: 13px; color: #5a6b7e; }
@keyframes apmPrdSpin { to { transform: rotate(360deg); } }
.apm-prd-spinner {
width: 36px;
height: 36px;
border: 3px solid rgba(0,119,255,.15);
border-top-color: #0077FF;
border-radius: 50%;
animation: apmPrdSpin .7s linear infinite;
}
.apm-prd-noscript { padding: 48px 20px; text-align: center; color: #5a6b7e; font-size: 13.5px; }
/* --- night mode --- */
body.night-mode .apm-prd-crumb { background: #12233a; border-color: rgba(255,255,255,.1); }
body.night-mode .apm-prd-buy,
body.night-mode .apm-prd-seller,
body.night-mode .apm-prd-block { background: #12233a; border-color: rgba(255,255,255,.06); }
body.night-mode .apm-prd-name,
body.night-mode .apm-prd-block__title,
body.night-mode .apm-prd-seller__name,
body.night-mode .apm-prd-specrow__v { color: #e3edf7; }
body.night-mode .apm-prd-gmain { background: #12233a; border-color: rgba(255,255,255,.08); }
body.night-mode .apm-prd-gthumb { background: #12233a; }
body.night-mode .apm-prd-pricebox { background: linear-gradient(135deg, #2a1f14, #33241a); border-color: rgba(230,81,0,.25); }
body.night-mode .apm-prd-varopt { background: #0d1c30; border-color: rgba(255,255,255,.14); color: #b0c4d8; }
body.night-mode .apm-prd-varopt.is-selected { border-color: #3D9BFF; color: #3D9BFF; background: rgba(61,155,255,.1); }
body.night-mode .apm-prd-qty__ctl { border-color: rgba(255,255,255,.14); }
body.night-mode .apm-prd-qty__ctl button { background: #0d1c30; color: #e3edf7; }
body.night-mode .apm-prd-qty__ctl input { background: transparent; color: #e3edf7; }
body.night-mode .apm-prd-addcart { background: transparent; border-color: #3D9BFF; color: #3D9BFF; }
body.night-mode .apm-prd-desc { color: #b0c4d8; }
body.night-mode .apm-prd-specrow__k { color: #8fa8c0; }
body.night-mode .apm-prd-empty__title { color: #b0c4d8; }
body.night-mode .apm-prd-loading p,
body.night-mode .apm-prd-noscript { color: #8fa8c0; }
/* =====================================================================
Phase 2 — Shops, seller dashboard, store page, admin approvals
(apm_store / apm_seller / apm_seller_apply / apm_admin_shops modules)
===================================================================== */
/* ---------- shared shell bits (loading spinners / noscript) ---------- */
.apm-store-wrap, .apm-apply-wrap, .apm-seller-wrap, .apm-admin-wrap {
min-height: 60vh;
background: linear-gradient(180deg, #f4f6f9 0%, #eef1f6 100%);
padding-bottom: 40px;
}
body.night-mode .apm-store-wrap, body.night-mode .apm-apply-wrap,
body.night-mode .apm-seller-wrap, body.night-mode .apm-admin-wrap {
background: linear-gradient(180deg, #0a1a2e 0%, #0c2138 100%);
}
.apm-store-loading, .apm-apply-loading, .apm-seller-loading, .apm-admin-loading {
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 70px 16px; color: #5b6b7c;
}
.apm-store-spinner, .apm-apply-spinner, .apm-seller-spinner, .apm-admin-spinner {
width: 34px; height: 34px; border-radius: 50%;
border: 3px solid rgba(0,119,255,.2); border-top-color: #0077FF;
animation: apmSpin .8s linear infinite;
}
@keyframes apmSpin { to { transform: rotate(360deg); } }
.apm-store-noscript, .apm-apply-noscript, .apm-seller-noscript, .apm-admin-noscript {
text-align: center; padding: 60px 16px; color: #5b6b7c;
}
/* =====================================================================
STORE PAGE (/shop/store/{slug})
===================================================================== */
.apm-store { max-width: 1080px; margin: 0 auto; padding: 14px; }
.apm-store-back {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 20px; background: #fff; border: 1px solid #dfe5ec;
color: #0077FF; font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 12px;
}
.apm-store-back svg { width: 15px; height: 15px; }
@media (hover: hover) { .apm-store-back:hover { background: #0077FF; color: #fff; } }
.apm-store-cardwrap {
background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; overflow: hidden;
box-shadow: 0 2px 10px rgba(0,89,204,.06);
}
.apm-store-banner { height: 150px; background-size: cover; background-position: center; }
.apm-store-head { display: flex; gap: 16px; padding: 0 20px 20px; align-items: flex-start; }
.apm-store-logo {
width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
border: 3px solid #fff; margin-top: -42px; box-shadow: 0 3px 12px rgba(0,0,0,.18); background: #fff;
}
.apm-store-logo-ph { display: flex; align-items: center; justify-content: center; color: #c0392b; }
.apm-store-logo-ph svg { width: 38px; height: 38px; }
.apm-store-headinfo { padding-top: 12px; min-width: 0; }
.apm-store-name { font-size: 21px; font-weight: 800; color: #16324f; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apm-store-verified {
display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
color: #0d7a3f; background: #e6f5ec; border: 1px solid #bfe6cf; padding: 2px 9px; border-radius: 12px;
}
.apm-store-verified svg { width: 12px; height: 12px; }
.apm-store-owner { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #5b6b7c; }
.apm-store-ownerpic { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.apm-store-desc { font-size: 13.5px; color: #44566b; margin: 8px 0 0; line-height: 1.5; }
.apm-store-count { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #0077FF; }
.apm-store-count svg { width: 14px; height: 14px; }
.apm-store-sec { font-size: 17px; font-weight: 800; color: #16324f; margin: 22px 2px 12px; }
.apm-store-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .apm-store-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .apm-store-grid { grid-template-columns: repeat(4, 1fr); } }
.apm-store-card {
background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; overflow: hidden;
text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s; display: block;
}
@media (hover: hover) { .apm-store-card:hover { box-shadow: 0 6px 18px rgba(0,89,204,.14); transform: translateY(-2px); } }
.apm-store-cardimg { position: relative; aspect-ratio: 1/1; background-size: cover; background-position: center; background-color: #f2f5f9; }
.apm-store-cam {
position: absolute; right: 7px; bottom: 7px; background: rgba(0,0,0,.62); color: #fff;
font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
.apm-store-cardbody { padding: 9px 10px 12px; }
.apm-store-cardname {
font-size: 13px; font-weight: 600; color: #22364c; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px;
}
.apm-store-price { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; color: #e65100; }
.apm-store-free { color: #0d7a3f; }
.apm-store-empty, .apm-store-notfound { text-align: center; padding: 50px 16px; color: #5b6b7c; }
.apm-store-notfound-ico svg { width: 46px; height: 46px; color: #b7c3d0; }
.apm-store-notfound h2 { color: #16324f; margin: 10px 0 4px; }
/* night mode — store */
body.night-mode .apm-store-cardwrap, body.night-mode .apm-store-card,
body.night-mode .apm-store-back { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-store-name, body.night-mode .apm-store-sec,
body.night-mode .apm-store-notfound h2 { color: #e3edf7; }
body.night-mode .apm-store-cardname { color: #c7d6e6; }
body.night-mode .apm-store-desc, body.night-mode .apm-store-owner,
body.night-mode .apm-store-empty, body.night-mode .apm-store-notfound { color: #9db2c6; }
body.night-mode .apm-store-cardimg { background-color: #0d1c30; }
/* =====================================================================
SELLER APPLY (/seller/apply)
===================================================================== */
.apm-apply { max-width: 560px; margin: 0 auto; padding: 26px 14px; }
.apm-apply-hero { text-align: center; margin-bottom: 20px; }
.apm-apply-heroico {
width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 18px;
background: linear-gradient(135deg, #c0392b, #8e2418); color: #fff;
display: flex; align-items: center; justify-content: center;
}
.apm-apply-heroico svg { width: 30px; height: 30px; }
.apm-apply-hero h1 { font-size: 22px; font-weight: 800; color: #16324f; margin: 0 0 6px; }
.apm-apply-hero p { font-size: 14px; color: #5b6b7c; margin: 0; }
.apm-apply-card {
background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 22px;
box-shadow: 0 2px 10px rgba(0,89,204,.06); text-align: center;
}
.apm-apply-card.apm-apply-form { text-align: left; }
.apm-apply-ico svg { width: 46px; height: 46px; margin-bottom: 8px; }
.apm-apply-pending .apm-apply-ico { color: #e68a00; }
.apm-apply-approved .apm-apply-ico { color: #0d7a3f; }
.apm-apply-rejected .apm-apply-ico { color: #c62828; }
.apm-apply-suspended .apm-apply-ico { color: #c62828; }
.apm-apply-card h2 { font-size: 18px; font-weight: 800; color: #16324f; margin: 0 0 8px; }
.apm-apply-card p { font-size: 14px; color: #44566b; line-height: 1.55; margin: 0; }
.apm-apply-reason { margin-top: 10px !important; font-size: 13.5px; }
.apm-apply-label { display: block; font-size: 13px; font-weight: 700; color: #33475c; margin-bottom: 14px; }
.apm-apply-input {
display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 14px;
border: 1px solid #cfd9e4; border-radius: 9px; background: #fbfcfe; color: #22364c; box-sizing: border-box;
}
.apm-apply-input:focus { outline: none; border-color: #0077FF; box-shadow: 0 0 0 3px rgba(0,119,255,.12); }
.apm-apply-textarea { resize: vertical; }
.apm-apply-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
background: linear-gradient(135deg, #ff8f1f, #e65100); color: #fff; border: none;
padding: 11px 26px; border-radius: 24px; font-size: 14.5px; font-weight: 800; cursor: pointer;
text-decoration: none; margin-top: 14px; box-shadow: 0 3px 10px rgba(230,81,0,.3);
}
@media (hover: hover) { .apm-apply-btn:hover { filter: brightness(1.06); } }
.apm-apply-btn:disabled { opacity: .6; cursor: default; }
.apm-apply-note { font-size: 12px; color: #7a8ba0; margin-top: 14px !important; }
.apm-apply-msg { min-height: 18px; font-size: 13px; margin: 4px 0 2px; }
.apm-apply-err { color: #c62828; }
.apm-apply-ok { color: #0d7a3f; }
/* night mode — apply */
body.night-mode .apm-apply-card { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-apply-hero h1, body.night-mode .apm-apply-card h2 { color: #e3edf7; }
body.night-mode .apm-apply-hero p, body.night-mode .apm-apply-card p,
body.night-mode .apm-apply-label { color: #9db2c6; }
body.night-mode .apm-apply-input { background: #0d1c30; border-color: rgba(255,255,255,.14); color: #e3edf7; }
/* =====================================================================
SELLER DASHBOARD (/seller)
===================================================================== */
.apm-seller { max-width: 900px; margin: 0 auto; padding: 18px 14px; }
.apm-seller-noshop { text-align: center; padding: 60px 16px; color: #5b6b7c; }
.apm-seller-noshop-ico svg { width: 52px; height: 52px; color: #b7c3d0; }
.apm-seller-noshop p { font-size: 15px; margin: 12px 0 4px; }
.apm-seller-head {
display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e3e8ef;
border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(0,89,204,.06);
}
.apm-seller-headico {
width: 50px; height: 50px; border-radius: 14px; flex: 0 0 auto;
background: linear-gradient(135deg, #c0392b, #8e2418); color: #fff;
display: flex; align-items: center; justify-content: center;
}
.apm-seller-headico svg { width: 26px; height: 26px; }
.apm-seller-headinfo { flex: 1; min-width: 0; }
.apm-seller-headinfo h1 { font-size: 18px; font-weight: 800; color: #16324f; margin: 0 0 2px; }
.apm-seller-headinfo a { font-size: 13px; color: #0077FF; font-weight: 600; text-decoration: none; }
.apm-seller-btn {
display: inline-flex; align-items: center; gap: 7px;
background: linear-gradient(135deg, #ff8f1f, #e65100); color: #fff; border: none;
padding: 10px 20px; border-radius: 22px; font-size: 13.5px; font-weight: 800; cursor: pointer;
text-decoration: none; box-shadow: 0 3px 10px rgba(230,81,0,.3); white-space: nowrap;
}
.apm-seller-btn svg { width: 15px; height: 15px; }
@media (hover: hover) { .apm-seller-btn:hover { filter: brightness(1.06); } }
.apm-seller-btn:disabled { opacity: .6; cursor: default; }
.apm-seller-btn.apm-seller-ghost { background: #eef2f7; color: #33475c; box-shadow: none; }
.apm-seller-sec { font-size: 16px; font-weight: 800; color: #16324f; margin: 22px 2px 12px; }
.apm-seller-list { display: flex; flex-direction: column; gap: 10px; }
.apm-seller-prow {
display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e3e8ef;
border-radius: 12px; padding: 12px 14px;
}
.apm-seller-pimg { width: 62px; height: 62px; border-radius: 10px; background-size: cover; background-position: center; background-color: #f2f5f9; flex: 0 0 auto; }
.apm-seller-pinfo { flex: 1; min-width: 0; }
.apm-seller-pname { display: block; font-size: 14px; font-weight: 700; color: #16324f; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .apm-seller-pname:hover { color: #0077FF; } }
.apm-seller-pmeta { font-size: 12.5px; color: #5b6b7c; margin-top: 3px; }
.apm-seller-pbadges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.apm-seller-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #eef2f7; color: #5b6b7c; }
.apm-seller-chip.apm-seller-on { background: #e6f5ec; color: #0d7a3f; }
.apm-seller-chip.apm-seller-off { background: #fdecea; color: #c62828; }
.apm-seller-pact { display: flex; gap: 8px; flex: 0 0 auto; }
.apm-seller-iconbtn {
width: 34px; height: 34px; border-radius: 9px; border: 1px solid #dfe5ec; background: #fff;
color: #0077FF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.apm-seller-iconbtn svg { width: 16px; height: 16px; }
@media (hover: hover) { .apm-seller-iconbtn:hover { background: #0077FF; color: #fff; border-color: #0077FF; } }
.apm-seller-iconbtn.apm-seller-del { color: #c62828; }
@media (hover: hover) { .apm-seller-iconbtn.apm-seller-del:hover { background: #c62828; border-color: #c62828; color: #fff; } }
.apm-seller-empty { text-align: center; padding: 40px 16px; color: #5b6b7c; background: #fff; border: 1px dashed #cfd9e4; border-radius: 12px; }
/* editor */
.apm-seller-backlink {
display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
color: #0077FF; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 4px 2px; margin-bottom: 12px;
}
.apm-seller-backlink svg { width: 15px; height: 15px; }
.apm-seller-editor { background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 20px; box-shadow: 0 2px 10px rgba(0,89,204,.06); }
.apm-seller-editor h3 { font-size: 14px; font-weight: 800; color: #16324f; margin: 20px 0 10px; border-bottom: 1px solid #eef2f7; padding-bottom: 6px; }
.apm-seller-egrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
@media (min-width: 720px) { .apm-seller-egrid { grid-template-columns: repeat(3, 1fr); } }
.apm-seller-f { display: block; font-size: 12.5px; font-weight: 700; color: #33475c; }
.apm-seller-span2 { grid-column: span 2; }
@media (min-width: 720px) { .apm-seller-span2 { grid-column: span 3; } }
.apm-seller-input {
display: block; width: 100%; margin-top: 5px; padding: 9px 11px; font-size: 13.5px;
border: 1px solid #cfd9e4; border-radius: 9px; background: #fbfcfe; color: #22364c; box-sizing: border-box;
}
.apm-seller-input:focus { outline: none; border-color: #0077FF; box-shadow: 0 0 0 3px rgba(0,119,255,.12); }
.apm-seller-textarea { resize: vertical; }
.apm-seller-check { display: flex; align-items: center; gap: 8px; font-size: 13px; align-self: end; padding-bottom: 8px; }
.apm-seller-check input { width: 16px; height: 16px; }
.apm-seller-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.apm-seller-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid #e3e8ef; }
.apm-seller-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apm-seller-thumbx {
position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
background: rgba(0,0,0,.65); color: #fff; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.apm-seller-thumbx svg { width: 12px; height: 12px; }
.apm-seller-addimg {
width: 84px; height: 84px; border: 1.5px dashed #b7c3d0; border-radius: 10px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
color: #7a8ba0; font-size: 10.5px; font-weight: 700; cursor: pointer; background: #fbfcfe;
}
.apm-seller-addimg svg { width: 20px; height: 20px; }
@media (hover: hover) { .apm-seller-addimg:hover { border-color: #0077FF; color: #0077FF; } }
.apm-seller-vrow { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.apm-seller-vrow .apm-seller-input { margin-top: 0; }
.apm-seller-linkbtn {
display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
color: #0077FF; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 2px;
}
.apm-seller-linkbtn svg { width: 14px; height: 14px; }
.apm-seller-msg { min-height: 20px; font-size: 13.5px; margin: 12px 0 4px; }
.apm-seller-err { color: #c62828; }
.apm-seller-ok { color: #0d7a3f; }
.apm-seller-ebtns { display: flex; gap: 10px; margin-top: 8px; }
/* night mode — seller */
body.night-mode .apm-seller-head, body.night-mode .apm-seller-prow,
body.night-mode .apm-seller-editor { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-seller-headinfo h1, body.night-mode .apm-seller-sec,
body.night-mode .apm-seller-pname, body.night-mode .apm-seller-editor h3 { color: #e3edf7; }
body.night-mode .apm-seller-pmeta, body.night-mode .apm-seller-empty,
body.night-mode .apm-seller-noshop { color: #9db2c6; }
body.night-mode .apm-seller-input, body.night-mode .apm-seller-addimg { background: #0d1c30; border-color: rgba(255,255,255,.14); color: #e3edf7; }
body.night-mode .apm-seller-f, body.night-mode .apm-seller-check { color: #9db2c6; }
body.night-mode .apm-seller-iconbtn { background: #0d1c30; border-color: rgba(255,255,255,.14); }
body.night-mode .apm-seller-chip { background: #0d1c30; color: #9db2c6; }
body.night-mode .apm-seller-empty { background: #12233a; border-color: rgba(255,255,255,.14); }
body.night-mode .apm-seller-btn.apm-seller-ghost { background: #0d1c30; color: #c7d6e6; }
/* =====================================================================
ADMIN SHOP APPROVALS (/seller/admin)
===================================================================== */
.apm-admin { max-width: 820px; margin: 0 auto; padding: 20px 14px; }
.apm-admin-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.apm-admin-headico {
width: 50px; height: 50px; border-radius: 14px; flex: 0 0 auto;
background: linear-gradient(135deg, #0077FF, #0059CC); color: #fff;
display: flex; align-items: center; justify-content: center;
}
.apm-admin-headico svg { width: 26px; height: 26px; }
.apm-admin-head h1 { font-size: 19px; font-weight: 800; color: #16324f; margin: 0 0 2px; }
.apm-admin-head p { font-size: 13px; color: #5b6b7c; margin: 0; }
.apm-admin-msg { min-height: 20px; font-size: 13.5px; margin-bottom: 8px; }
.apm-admin-ok { color: #0d7a3f; }
.apm-admin-err { color: #c62828; }
.apm-admin-list { display: flex; flex-direction: column; gap: 10px; }
.apm-admin-row {
display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e3e8ef;
border-radius: 12px; padding: 14px 16px; flex-wrap: wrap;
}
.apm-admin-rowmain { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.apm-admin-pic { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.apm-admin-rowinfo { min-width: 0; }
.apm-admin-rowtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apm-admin-rowtop strong { font-size: 14.5px; color: #16324f; }
.apm-admin-badge { font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; }
.apm-admin-pending { background: #fff4e0; color: #b26a00; }
.apm-admin-approved { background: #e6f5ec; color: #0d7a3f; }
.apm-admin-rejected { background: #fdecea; color: #c62828; }
.apm-admin-suspended { background: #f3e8fd; color: #7b1fa2; }
.apm-admin-owner { font-size: 12.5px; color: #5b6b7c; margin-top: 3px; }
.apm-admin-desc { font-size: 13px; color: #44566b; margin: 6px 0 0; line-height: 1.45; }
.apm-admin-storelink { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #0077FF; text-decoration: none; }
.apm-admin-rowact { display: flex; gap: 8px; flex: 0 0 auto; }
.apm-admin-act {
display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 20px;
font-size: 12.5px; font-weight: 800; cursor: pointer; border: 1px solid transparent;
}
.apm-admin-act svg { width: 14px; height: 14px; }
.apm-admin-approve { background: #0d7a3f; color: #fff; }
@media (hover: hover) { .apm-admin-approve:hover { filter: brightness(1.1); } }
.apm-admin-reject, .apm-admin-suspend { background: #fff; color: #c62828; border-color: #f0b9b9; }
@media (hover: hover) { .apm-admin-reject:hover, .apm-admin-suspend:hover { background: #fdecea; } }
.apm-admin-act:disabled { opacity: .55; cursor: default; }
.apm-admin-empty { text-align: center; padding: 46px 16px; color: #5b6b7c; background: #fff; border: 1px dashed #cfd9e4; border-radius: 12px; }
.apm-admin-forbidden { color: #c62828; font-weight: 700; }
/* night mode — admin */
body.night-mode .apm-admin-row, body.night-mode .apm-admin-empty { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-admin-head h1, body.night-mode .apm-admin-rowtop strong { color: #e3edf7; }
body.night-mode .apm-admin-head p, body.night-mode .apm-admin-owner,
body.night-mode .apm-admin-empty { color: #9db2c6; }
body.night-mode .apm-admin-desc { color: #b0c4d8; }
body.night-mode .apm-admin-reject, body.night-mode .apm-admin-suspend { background: #0d1c30; }
/* ==========================================================================
PHASE 3 — Cart / Checkout / Orders / Seller order management
Pages: /shop/cart, /shop/checkout, /shop/orders, /seller/orders
Mounts: #apmCart, #apmCheckout, #apmOrders, #apmSellerOrders
========================================================================== */
/* --- page shell (shared) --- */
.apm-cart-wrap, .apm-co-wrap, .apm-orders-wrap, .apm-sorders-wrap {
min-height: 60vh;
background: linear-gradient(180deg, #f4f6f9 0%, #eef1f6 100%);
padding-bottom: 40px;
}
.apm-cart, .apm-co, .apm-orders, .apm-sorders { max-width: 900px; margin: 0 auto; padding: 18px 14px; }
.apm-co { max-width: 1040px; }
.apm-cart-loading, .apm-co-loading, .apm-orders-loading, .apm-sorders-loading {
display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 70px 16px; color: #5b6b7c;
}
.apm-cart-spinner, .apm-co-spinner, .apm-orders-spinner, .apm-sorders-spinner {
width: 34px; height: 34px; border-radius: 50%;
border: 3px solid rgba(0,119,255,.18); border-top-color: #0077FF;
animation: apmSpin .8s linear infinite;
}
@keyframes apmSpin { to { transform: rotate(360deg); } }
.apm-cart-noscript, .apm-co-noscript, .apm-orders-noscript, .apm-sorders-noscript {
text-align: center; padding: 40px 16px; color: #c62828; font-weight: 700;
}
/* --- shared page head --- */
.apm-cart-head, .apm-co-head, .apm-orders-head, .apm-sorders-head { margin-bottom: 16px; }
.apm-cart-head h1, .apm-co-head h1, .apm-orders-head h1, .apm-sorders-head h1 {
display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; color: #16324f; margin: 0 0 4px;
}
.apm-cart-head h1 svg, .apm-orders-head h1 svg, .apm-sorders-head h1 svg { width: 22px; height: 22px; color: #0077FF; }
.apm-sorders-head p { font-size: 13.5px; color: #5b6b7c; margin: 0 0 8px; }
.apm-cart-backlink, .apm-co-backlink, .apm-orders-backlink, .apm-sorders-backlink {
display: inline-flex; align-items: center; gap: 6px; color: #0077FF;
font-size: 13.5px; font-weight: 700; text-decoration: none; padding: 4px 2px;
}
.apm-cart-backlink svg, .apm-co-backlink svg, .apm-orders-backlink svg, .apm-sorders-backlink svg { width: 15px; height: 15px; }
@media (hover: hover) {
.apm-cart-backlink:hover, .apm-co-backlink:hover, .apm-orders-backlink:hover, .apm-sorders-backlink:hover { text-decoration: underline; }
}
/* --- shared status badges --- */
.apm-orders-status, .apm-sorders-status, .apm-sorders-istatus {
display: inline-flex; align-items: center; font-size: 11px; font-weight: 800;
padding: 3px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}
.apm-orders-pending, .apm-sorders-pending, .apm-sorders-i-pending { background: #fff4e0; color: #b26a00; }
.apm-orders-confirmed, .apm-sorders-confirmed, .apm-sorders-i-confirmed { background: #e3f0fb; color: #0077FF; }
.apm-orders-shipped, .apm-sorders-shipped, .apm-sorders-i-shipped { background: #e0f2f1; color: #00695c; }
.apm-orders-completed, .apm-sorders-completed, .apm-sorders-i-completed { background: #e6f5ec; color: #0d7a3f; }
.apm-orders-cancelled, .apm-sorders-cancelled, .apm-sorders-i-cancelled { background: #fdecea; color: #c62828; }
.apm-orders-pay, .apm-sorders-pay {
display: inline-flex; align-items: center; font-size: 11px; font-weight: 800;
padding: 3px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}
.apm-orders-paid, .apm-sorders-paid { background: #e6f5ec; color: #0d7a3f; }
.apm-orders-unpaid, .apm-sorders-unpaid { background: #fff4e0; color: #b26a00; }
/* --- shared empty box --- */
.apm-cart-emptybox, .apm-co-emptybox, .apm-orders-emptybox, .apm-sorders-emptybox {
text-align: center; padding: 60px 18px; background: #fff; border: 1px dashed #cfd9e4;
border-radius: 14px; color: #5b6b7c;
}
.apm-cart-emptyico svg, .apm-orders-emptyico svg, .apm-sorders-emptyico svg { width: 52px; height: 52px; color: #b7c3d0; }
.apm-cart-emptybox h2, .apm-co-emptybox h2, .apm-orders-emptybox h2, .apm-sorders-emptybox h2 {
font-size: 16.5px; font-weight: 800; color: #16324f; margin: 14px 0 6px;
}
.apm-cart-emptybox p, .apm-co-emptybox p, .apm-orders-emptybox p, .apm-sorders-emptybox p { font-size: 13.5px; margin: 0 0 18px; }
.apm-cart-browse, .apm-co-goshop, .apm-orders-goshop, .apm-sorders-apply {
display: inline-flex; align-items: center; justify-content: center; padding: 11px 26px;
border-radius: 24px; background: linear-gradient(135deg, #fb8c00, #ef6c00); color: #fff;
font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 5px 14px rgba(239,108,0,.32);
transition: all .2s ease;
}
@media (hover: hover) {
.apm-cart-browse:hover, .apm-co-goshop:hover, .apm-orders-goshop:hover, .apm-sorders-apply:hover {
transform: translateY(-1px); box-shadow: 0 8px 18px rgba(239,108,0,.4);
}
}
/* ===================== CART (/shop/cart) ===================== */
.apm-cart-shop {
background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; margin-bottom: 14px;
box-shadow: 0 2px 10px rgba(0,89,204,.06); overflow: hidden;
}
.apm-cart-shophead {
display: flex; align-items: center; gap: 8px; padding: 12px 16px;
background: #f7fafd; border-bottom: 1px solid #eef2f7; font-size: 14px; font-weight: 800; color: #16324f;
}
.apm-cart-shophead svg { width: 16px; height: 16px; color: #0077FF; flex: 0 0 auto; }
.apm-cart-shophead a { color: #0077FF; text-decoration: none; }
@media (hover: hover) { .apm-cart-shophead a:hover { text-decoration: underline; } }
.apm-cart-shopsub { margin-left: auto; font-size: 13.5px; font-weight: 800; color: #ef6c00; }
.apm-cart-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f1f4f8; }
.apm-cart-item:last-child { border-bottom: none; }
.apm-cart-img {
width: 72px; height: 72px; flex: 0 0 auto; border-radius: 10px; background-size: cover;
background-position: center; background-color: #f4f6f9; border: 1px solid #eef2f7;
}
.apm-cart-info { flex: 1; min-width: 0; }
.apm-cart-name {
display: block; font-size: 14px; font-weight: 700; color: #16324f; text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) { .apm-cart-name:hover { color: #0077FF; } }
.apm-cart-variant { font-size: 12.5px; color: #5b6b7c; margin-top: 3px; }
.apm-cart-unit { font-size: 13px; font-weight: 700; color: #ef6c00; margin-top: 4px; }
.apm-cart-low { display: inline-block; font-size: 11.5px; font-weight: 700; color: #b26a00; margin-top: 4px; }
.apm-cart-unavail { display: inline-block; font-size: 11.5px; font-weight: 800; color: #c62828; margin-top: 4px; }
.apm-cart-ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.apm-cart-qty { display: inline-flex; align-items: center; border: 1px solid #dfe5ec; border-radius: 20px; overflow: hidden; background: #fff; }
.apm-cart-qbtn {
width: 30px; height: 30px; border: none; background: #f7fafd; color: #0077FF;
font-size: 16px; font-weight: 800; cursor: pointer; line-height: 1; transition: background .15s ease;
}
@media (hover: hover) { .apm-cart-qbtn:hover { background: #e3f0fb; } }
.apm-cart-qval { min-width: 34px; text-align: center; font-size: 13.5px; font-weight: 800; color: #16324f; }
.apm-cart-line { font-size: 14.5px; font-weight: 800; color: #16324f; }
.apm-cart-rm {
display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
border: none; background: none; color: #90a4b8; cursor: pointer; border-radius: 50%; transition: all .15s ease;
}
.apm-cart-rm svg { width: 16px; height: 16px; }
@media (hover: hover) { .apm-cart-rm:hover { color: #c62828; background: #fdecea; } }
.apm-cart-summary {
position: sticky; bottom: 12px; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px;
padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
box-shadow: 0 6px 20px rgba(0,89,204,.12); margin-top: 18px; flex-wrap: wrap;
}
.apm-cart-sumrow { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #5b6b7c; }
.apm-cart-sumrow strong { font-size: 18px; font-weight: 800; color: #ef6c00; }
.apm-cart-checkout {
display: inline-flex; align-items: center; justify-content: center; padding: 13px 34px;
border-radius: 26px; background: linear-gradient(135deg, #fb8c00, #ef6c00); color: #fff;
font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 5px 14px rgba(239,108,0,.32);
transition: all .2s ease;
}
@media (hover: hover) { .apm-cart-checkout:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(239,108,0,.4); } }
@media (max-width: 560px) {
.apm-cart-item { flex-wrap: wrap; }
.apm-cart-ctrl { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
.apm-cart-summary { flex-direction: column; align-items: stretch; text-align: center; }
.apm-cart-sumrow { align-items: center; }
}
/* ===================== CHECKOUT (/shop/checkout) ===================== */
.apm-co-cols { display: flex; gap: 16px; align-items: flex-start; }
.apm-co-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.apm-co-side { flex: 0 0 340px; }
.apm-co-card {
background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 18px;
box-shadow: 0 2px 10px rgba(0,89,204,.06);
}
.apm-co-card h2 {
display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #16324f;
margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #eef2f7;
}
.apm-co-card h2 svg { width: 17px; height: 17px; color: #0077FF; }
.apm-co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.apm-co-f { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: #44566b; }
.apm-co-input {
width: 100%; padding: 10px 12px; border: 1px solid #dfe5ec; border-radius: 10px;
font-size: 14px; color: #16324f; background: #fbfcfe; transition: border-color .15s ease; box-sizing: border-box;
}
.apm-co-input:focus { outline: none; border-color: #0077FF; background: #fff; }
textarea.apm-co-input { min-height: 70px; resize: vertical; }
.apm-co-opts { display: flex; flex-direction: column; gap: 8px; }
.apm-co-opt {
display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #e3e8ef;
border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #16324f;
background: #fbfcfe; transition: all .15s ease;
}
.apm-co-opt input { accent-color: #0077FF; width: 16px; height: 16px; flex: 0 0 auto; }
.apm-co-opt span { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; }
.apm-co-opt:has(input:checked) { border-color: #0077FF; background: #e3f0fb; }
.apm-co-optfee { font-size: 12.5px; font-weight: 800; color: #ef6c00; }
.apm-co-summary { position: sticky; top: 70px; }
.apm-co-sumshop { font-size: 12px; font-weight: 800; color: #0077FF; text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 6px; }
.apm-co-sumitem { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; color: #44566b; }
.apm-co-sumimg {
width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px; background-size: cover;
background-position: center; background-color: #f4f6f9; border: 1px solid #eef2f7;
}
.apm-co-sumname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apm-co-sumname em { font-style: normal; color: #5b6b7c; font-size: 12px; }
.apm-co-sumprice { font-weight: 700; color: #16324f; white-space: nowrap; }
.apm-co-totals { border-top: 1px solid #eef2f7; margin-top: 12px; padding-top: 12px; }
.apm-co-trow { display: flex; justify-content: space-between; font-size: 13.5px; color: #5b6b7c; padding: 3px 0; }
.apm-co-total { font-size: 15px; color: #16324f; padding-top: 8px; }
.apm-co-total strong { font-size: 19px; font-weight: 800; color: #ef6c00; }
.apm-co-place {
width: 100%; margin-top: 16px; padding: 14px 16px; border: none; border-radius: 26px;
background: linear-gradient(135deg, #fb8c00, #ef6c00); color: #fff; font-size: 15px; font-weight: 800;
cursor: pointer; box-shadow: 0 5px 14px rgba(239,108,0,.32); transition: all .2s ease;
}
.apm-co-place:disabled { opacity: .6; cursor: default; }
@media (hover: hover) { .apm-co-place:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(239,108,0,.4); } }
.apm-co-msg { margin-top: 10px; font-size: 13px; font-weight: 700; min-height: 18px; }
.apm-co-err { color: #c62828; }
.apm-co-success { text-align: center; padding: 60px 18px; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; }
.apm-co-successico { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: #e6f5ec; color: #0d7a3f; align-items: center; justify-content: center; margin-bottom: 16px; }
.apm-co-successico svg { width: 32px; height: 32px; }
.apm-co-success h1 { font-size: 20px; font-weight: 800; color: #0d7a3f; margin: 0 0 10px; }
.apm-co-orderno { font-size: 14.5px; color: #44566b; margin: 0 0 4px; }
.apm-co-orderno strong { color: #16324f; }
.apm-co-ordertotal { font-size: 14.5px; color: #44566b; margin: 0 0 22px; }
.apm-co-ordertotal strong { color: #ef6c00; font-size: 17px; }
.apm-co-vieworders {
display: inline-flex; padding: 12px 30px; border-radius: 24px; background: #0077FF; color: #fff;
font-size: 14px; font-weight: 800; text-decoration: none; transition: background .15s ease;
}
@media (hover: hover) { .apm-co-vieworders:hover { background: #0059CC; } }
@media (max-width: 820px) {
.apm-co-cols { flex-direction: column; }
.apm-co-side { flex: 1; width: 100%; }
.apm-co-summary { position: static; }
}
@media (max-width: 560px) { .apm-co-grid { grid-template-columns: 1fr; } }
/* ===================== BUYER ORDERS (/shop/orders) ===================== */
.apm-orders-list { display: flex; flex-direction: column; gap: 14px; }
.apm-orders-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,89,204,.06); overflow: hidden; }
.apm-orders-cardhead {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
padding: 12px 16px; background: #f7fafd; border-bottom: 1px solid #eef2f7;
}
.apm-orders-no { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #44566b; flex-wrap: wrap; }
.apm-orders-no svg { width: 16px; height: 16px; color: #0077FF; }
.apm-orders-no strong { color: #16324f; font-size: 14px; }
.apm-orders-date { font-size: 12px; color: #90a4b8; }
.apm-orders-cardhead .apm-orders-status, .apm-orders-cardhead .apm-orders-pay { margin-left: 4px; }
.apm-orders-items { padding: 6px 16px; }
.apm-orders-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f4f8; }
.apm-orders-item:last-child { border-bottom: none; }
.apm-orders-img {
width: 56px; height: 56px; flex: 0 0 auto; border-radius: 9px; background-size: cover;
background-position: center; background-color: #f4f6f9; border: 1px solid #eef2f7;
}
.apm-orders-iteminfo { flex: 1; min-width: 0; }
.apm-orders-itemname {
display: block; font-size: 13.5px; font-weight: 700; color: #16324f; text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) { .apm-orders-itemname:hover { color: #0077FF; } }
.apm-orders-itemvar { font-size: 12px; color: #5b6b7c; margin-top: 2px; }
.apm-orders-itemshop { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #0077FF; margin-top: 3px; font-weight: 600; }
.apm-orders-itemshop svg { width: 12px; height: 12px; }
.apm-orders-itemright { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.apm-orders-itemqty { font-size: 12px; color: #90a4b8; }
.apm-orders-itemprice { font-size: 14px; font-weight: 800; color: #16324f; }
.apm-orders-cardfoot {
display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 12px 16px; background: #fbfcfe; border-top: 1px solid #eef2f7;
}
.apm-orders-addr { font-size: 12.5px; color: #5b6b7c; line-height: 1.5; flex: 1; min-width: 200px; }
.apm-orders-totalbox { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.apm-orders-paymethod { font-size: 12px; color: #90a4b8; text-transform: capitalize; }
.apm-orders-total { font-size: 13.5px; color: #44566b; }
.apm-orders-total strong { font-size: 17px; font-weight: 800; color: #ef6c00; }
.apm-orders-cancel {
padding: 8px 18px; border-radius: 20px; border: 1px solid #f0b9b9; background: #fff; color: #c62828;
font-size: 12.5px; font-weight: 800; cursor: pointer; transition: background .15s ease;
}
@media (hover: hover) { .apm-orders-cancel:hover { background: #fdecea; } }
/* --- My Purchases hub: search + status tabs + actions --- */
.apm-orders-search { position: relative; margin: 0 0 12px; }
.apm-orders-search__ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #90a4b8; pointer-events: none; }
.apm-orders-search__input {
width: 100%; padding: 10px 14px 10px 36px; border-radius: 22px; border: 1px solid #d7e1ec;
background: #fff; font-size: 13.5px; color: #16324f; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.apm-orders-search__input:focus { border-color: #0077FF; box-shadow: 0 0 0 3px rgba(0,119,255,.12); }
.apm-orders-tabs {
display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
margin: 0 0 14px; padding-bottom: 2px;
}
.apm-orders-tabs::-webkit-scrollbar { display: none; }
.apm-orders-tab {
flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
border: 1px solid #d7e1ec; background: #fff; color: #3d4f63; font-size: 12.5px; font-weight: 700;
cursor: pointer; white-space: nowrap; transition: all .18s ease;
}
.apm-orders-tab.is-active { background: linear-gradient(135deg, #0077FF, #0059CC); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(0,119,255,.3); }
.apm-orders-tabbadge {
min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #FF6B00; color: #fff;
font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}
.apm-orders-tab.is-active .apm-orders-tabbadge { background: #fff; color: #0059CC; }
.apm-orders-actions { display: flex; gap: 8px; justify-content: flex-end; }
.apm-orders-receive {
padding: 8px 18px; border-radius: 20px; border: 1px solid transparent;
background: linear-gradient(135deg, #43a047, #2e7d32); color: #fff;
font-size: 12.5px; font-weight: 800; cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.apm-orders-receive:active { transform: scale(.96); }
@media (hover: hover) { .apm-orders-receive:hover { filter: brightness(1.06); } }
.apm-orders-emptybox--inline { padding: 34px 16px; }
.apm-orders-ratecard .apm-orders-item { padding: 14px 16px; }
body.night-mode .apm-orders-search__input { background: #12233a; border-color: rgba(255,255,255,.12); color: #e3edf7; }
body.night-mode .apm-orders-search__ic { color: #6d86a0; }
body.night-mode .apm-orders-tab { background: #12233a; border-color: rgba(255,255,255,.1); color: #b0c4d8; }
body.night-mode .apm-orders-tab.is-active { background: linear-gradient(135deg, #0077FF, #0059CC); color: #fff; border-color: transparent; }
/* ===================== SELLER ORDERS (/seller/orders) ===================== */
.apm-sorders-list { display: flex; flex-direction: column; gap: 14px; }
.apm-sorders-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,89,204,.06); overflow: hidden; }
.apm-sorders-cardhead {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
padding: 12px 16px; background: #f7fafd; border-bottom: 1px solid #eef2f7;
}
.apm-sorders-no { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #44566b; flex-wrap: wrap; }
.apm-sorders-no svg { width: 16px; height: 16px; color: #0077FF; }
.apm-sorders-no strong { color: #16324f; font-size: 14px; }
.apm-sorders-date { font-size: 12px; color: #90a4b8; }
.apm-sorders-buyerrow {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
padding: 10px 16px; border-bottom: 1px solid #f1f4f8;
}
.apm-sorders-buyer { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #44566b; }
.apm-sorders-buyer strong { color: #16324f; }
.apm-sorders-bpic { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid #eef2f7; }
.apm-sorders-items { padding: 6px 16px; }
.apm-sorders-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f4f8; flex-wrap: wrap; }
.apm-sorders-item:last-child { border-bottom: none; }
.apm-sorders-img {
width: 56px; height: 56px; flex: 0 0 auto; border-radius: 9px; background-size: cover;
background-position: center; background-color: #f4f6f9; border: 1px solid #eef2f7;
}
.apm-sorders-iteminfo { flex: 1; min-width: 160px; }
.apm-sorders-itemname {
display: block; font-size: 13.5px; font-weight: 700; color: #16324f; text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: hover) { .apm-sorders-itemname:hover { color: #0077FF; } }
.apm-sorders-itemvar { font-size: 12px; color: #5b6b7c; margin-top: 2px; }
.apm-sorders-itemmeta { font-size: 12.5px; color: #5b6b7c; margin-top: 3px; }
.apm-sorders-itemmeta strong { color: #16324f; }
.apm-sorders-itemright { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.apm-sorders-itemact { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.apm-sorders-act {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 18px;
font-size: 12px; font-weight: 800; cursor: pointer; border: 1px solid transparent; transition: all .15s ease;
}
.apm-sorders-act svg { width: 13px; height: 13px; }
.apm-sorders-confirm { background: #0077FF; color: #fff; }
@media (hover: hover) { .apm-sorders-confirm:hover { background: #0059CC; } }
.apm-sorders-ship { background: #00695c; color: #fff; }
@media (hover: hover) { .apm-sorders-ship:hover { filter: brightness(1.15); } }
.apm-sorders-complete { background: #0d7a3f; color: #fff; }
@media (hover: hover) { .apm-sorders-complete:hover { filter: brightness(1.15); } }
.apm-sorders-cancelitem { background: #fff; color: #c62828; border-color: #f0b9b9; }
@media (hover: hover) { .apm-sorders-cancelitem:hover { background: #fdecea; } }
.apm-sorders-cardfoot {
display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 12px 16px; background: #fbfcfe; border-top: 1px solid #eef2f7;
}
.apm-sorders-addr { font-size: 12.5px; color: #5b6b7c; line-height: 1.5; flex: 1; min-width: 200px; }
.apm-sorders-total { font-size: 17px; font-weight: 800; color: #ef6c00; }
/* ===================== PHASE 3 — night mode ===================== */
body.night-mode .apm-cart-wrap, body.night-mode .apm-co-wrap,
body.night-mode .apm-orders-wrap, body.night-mode .apm-sorders-wrap {
background: linear-gradient(180deg, #0a1a2e 0%, #0c2138 100%);
}
body.night-mode .apm-cart-loading, body.night-mode .apm-co-loading,
body.night-mode .apm-orders-loading, body.night-mode .apm-sorders-loading { color: #9db2c6; }
body.night-mode .apm-cart-head h1, body.night-mode .apm-co-head h1,
body.night-mode .apm-orders-head h1, body.night-mode .apm-sorders-head h1 { color: #e3edf7; }
body.night-mode .apm-sorders-head p { color: #9db2c6; }
body.night-mode .apm-cart-shop, body.night-mode .apm-co-card,
body.night-mode .apm-orders-card, body.night-mode .apm-sorders-card,
body.night-mode .apm-cart-summary { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-cart-shophead, body.night-mode .apm-orders-cardhead,
body.night-mode .apm-sorders-cardhead { background: #0d1c30; border-color: rgba(255,255,255,.06); }
body.night-mode .apm-cart-shophead, body.night-mode .apm-orders-no strong,
body.night-mode .apm-sorders-no strong { color: #e3edf7; }
body.night-mode .apm-cart-item, body.night-mode .apm-orders-item,
body.night-mode .apm-sorders-item { border-color: rgba(255,255,255,.06); }
body.night-mode .apm-cart-name, body.night-mode .apm-cart-line, body.night-mode .apm-cart-qval,
body.night-mode .apm-orders-itemname, body.night-mode .apm-orders-itemprice,
body.night-mode .apm-sorders-itemname, body.night-mode .apm-sorders-buyer strong { color: #e3edf7; }
body.night-mode .apm-cart-variant, body.night-mode .apm-orders-itemvar,
body.night-mode .apm-sorders-itemvar, body.night-mode .apm-sorders-itemmeta,
body.night-mode .apm-orders-addr, body.night-mode .apm-sorders-addr,
body.night-mode .apm-sorders-buyer { color: #9db2c6; }
body.night-mode .apm-cart-qty { border-color: rgba(255,255,255,.14); background: #0d1c30; }
body.night-mode .apm-cart-qbtn { background: #0d1c30; color: #3D9BFF; }
body.night-mode .apm-co-f { color: #9db2c6; }
body.night-mode .apm-co-input { background: #0d1c30; border-color: rgba(255,255,255,.14); color: #e3edf7; }
body.night-mode .apm-co-opt { background: #0d1c30; border-color: rgba(255,255,255,.1); color: #e3edf7; }
body.night-mode .apm-co-opt:has(input:checked) { border-color: #3D9BFF; background: rgba(0,119,255,.22); }
body.night-mode .apm-co-card h2 { color: #e3edf7; border-color: rgba(255,255,255,.06); }
body.night-mode .apm-co-sumname, body.night-mode .apm-co-trow, body.night-mode .apm-co-sumprice { color: #b0c4d8; }
body.night-mode .apm-co-total { color: #e3edf7; }
body.night-mode .apm-co-totals, body.night-mode .apm-co-sumshop { border-color: rgba(255,255,255,.06); }
body.night-mode .apm-co-success { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-co-orderno, body.night-mode .apm-co-ordertotal { color: #b0c4d8; }
body.night-mode .apm-co-orderno strong { color: #e3edf7; }
body.night-mode .apm-orders-cardfoot, body.night-mode .apm-sorders-cardfoot,
body.night-mode .apm-sorders-buyerrow { background: #0d1c30; border-color: rgba(255,255,255,.06); }
body.night-mode .apm-orders-total, body.night-mode .apm-orders-paymethod { color: #9db2c6; }
body.night-mode .apm-orders-cancel, body.night-mode .apm-sorders-cancelitem { background: #0d1c30; }
body.night-mode .apm-cart-emptybox, body.night-mode .apm-co-emptybox,
body.night-mode .apm-orders-emptybox, body.night-mode .apm-sorders-emptybox {
background: #12233a; border-color: rgba(255,255,255,.12); color: #9db2c6;
}
body.night-mode .apm-cart-emptybox h2, body.night-mode .apm-co-emptybox h2,
body.night-mode .apm-orders-emptybox h2, body.night-mode .apm-sorders-emptybox h2 { color: #e3edf7; }
/* =====================================================================
Phase 4 — Admin payment gateway settings (/seller/admin/payment)
===================================================================== */
.apm-ap-head { margin-bottom: 18px; }
.apm-ap-backlink {
display: inline-flex; align-items: center; gap: 6px;
color: var(--apm-blue); font-size: 13px; font-weight: 600;
text-decoration: none; margin-bottom: 10px;
}
.apm-ap-backlink svg { width: 16px; height: 16px; }
.apm-ap-backlink:hover { text-decoration: underline; }
.apm-ap-head h1 {
display: flex; align-items: center; gap: 10px;
font-size: 22px; font-weight: 800; color: #16324f; margin: 0 0 4px;
}
.apm-ap-head h1 svg { width: 24px; height: 24px; color: var(--apm-blue); }
.apm-ap-sub { color: #5b6b7c; font-size: 14px; margin: 0 0 14px; }
.apm-ap-status {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;
}
.apm-ap-status svg { width: 16px; height: 16px; }
.apm-ap-on { background: #e6f5ec; color: #0d7a3f; border: 1px solid #bfe6cf; }
.apm-ap-off { background: #fff4e0; color: #b26a00; border: 1px solid #f5ddb0; }
.apm-ap-form {
background: #fff; border: 1px solid #e3e8ef; border-radius: 14px;
padding: 20px; max-width: 640px; display: flex; flex-direction: column; gap: 16px;
}
.apm-ap-toggle {
display: flex; align-items: center; gap: 10px;
font-size: 15px; font-weight: 700; color: #16324f; cursor: pointer;
}
.apm-ap-toggle input { width: 18px; height: 18px; accent-color: var(--apm-blue); cursor: pointer; }
.apm-ap-hint { display: block; color: #5b6b7c; font-size: 12px; margin-top: 4px; }
.apm-ap-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: #16324f; }
.apm-ap-input {
width: 100%; padding: 10px 12px; border: 1px solid #d4dce6; border-radius: 10px;
font-size: 14px; color: #16324f; background: #fff; box-sizing: border-box;
}
.apm-ap-input:focus { outline: none; border-color: var(--apm-blue); box-shadow: 0 0 0 3px rgba(0,119,255,.12); }
select.apm-ap-input { cursor: pointer; }
.apm-ap-urls { display: flex; flex-direction: column; gap: 8px; }
.apm-ap-url { display: flex; flex-direction: column; gap: 3px; }
.apm-ap-url span { font-size: 12px; font-weight: 700; color: #5b6b7c; }
.apm-ap-url code {
font-size: 12px; background: #f2f6fb; border: 1px solid #e3e8ef; border-radius: 8px;
padding: 7px 10px; color: #0059CC; word-break: break-all;
}
.apm-ap-save {
align-self: flex-start; border: none; cursor: pointer;
background: linear-gradient(135deg, #fb8c00, #ef6c00); color: #fff;
font-size: 15px; font-weight: 800; padding: 12px 26px; border-radius: 12px;
box-shadow: 0 6px 18px rgba(239,108,0,.32);
}
.apm-ap-save:hover { filter: brightness(1.05); }
.apm-ap-save:disabled { opacity: .6; cursor: default; }
.apm-ap-msg { font-size: 13px; font-weight: 600; min-height: 18px; }
.apm-ap-ok { color: #0d7a3f; }
.apm-ap-err { color: #c62828; }
.apm-ap-docs { max-width: 640px; color: #5b6b7c; font-size: 12px; margin-top: 14px; }
.apm-ap-forbidden { text-align: center; padding: 60px 16px; color: #5b6b7c; }
.apm-ap-forbidden h1 { color: #16324f; font-size: 20px; margin: 0 0 8px; }
/* night mode */
body.night-mode .apm-ap-head h1, body.night-mode .apm-ap-toggle,
body.night-mode .apm-ap-f { color: #e3edf7; }
body.night-mode .apm-ap-sub, body.night-mode .apm-ap-hint,
body.night-mode .apm-ap-docs, body.night-mode .apm-ap-url span { color: #9db2c6; }
body.night-mode .apm-ap-form { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-ap-input { background: #0d1c30; border-color: rgba(255,255,255,.12); color: #e3edf7; }
body.night-mode .apm-ap-url code { background: #0d1c30; border-color: rgba(255,255,255,.12); color: #b0c4d8; }
body.night-mode .apm-ap-on { background: rgba(13,122,63,.18); color: #6fd39a; border-color: rgba(13,122,63,.35); }
body.night-mode .apm-ap-off { background: rgba(178,106,0,.18); color: #f0b45a; border-color: rgba(178,106,0,.35); }
body.night-mode .apm-ap-forbidden { color: #9db2c6; }
body.night-mode .apm-ap-forbidden h1 { color: #e3edf7; }
/* =====================================================================
APM SIAGA — Phase 5 (Trust & growth): reviews, ratings, featured,
vouchers, admin commerce panel. Additive block; safe to remove.
===================================================================== */
/* ---------- star ratings (shared) ---------- */
.apm-prd-stars { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.apm-prd-star { color: #d4dce6; font-size: 14px; }
.apm-prd-star.is-on { color: #ffb300; }
.apm-prd-stars--lg .apm-prd-star { font-size: 20px; }
/* ---------- product detail: rating row under name ---------- */
.apm-prd-ratingrow { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; }
.apm-prd-ratingscore { font-weight: 700; color: #16324f; font-size: 14px; }
.apm-prd-ratingsep { color: #c3cedb; }
.apm-prd-ratingcount { color: #5b6b7c; font-size: 13px; }
/* ---------- product detail: reviews block ---------- */
.apm-prd-revloading { color: #5b6b7c; font-size: 14px; padding: 8px 0; }
.apm-prd-revsummary { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; background: #f7f9fc; border: 1px solid #e3e8ef; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.apm-prd-revbig { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; }
.apm-prd-revbig__score { font-size: 34px; font-weight: 800; color: #16324f; line-height: 1; }
.apm-prd-revbig__count { color: #5b6b7c; font-size: 12px; }
.apm-prd-revbars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.apm-prd-revbar { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.apm-prd-revbar__label { width: 30px; color: #5b6b7c; text-align: right; }
.apm-prd-revbar__track { flex: 1; height: 7px; background: #e8edf4; border-radius: 4px; overflow: hidden; }
.apm-prd-revbar__fill { display: block; height: 100%; background: #ffb300; border-radius: 4px; }
.apm-prd-revbar__count { width: 26px; color: #5b6b7c; }
.apm-prd-revlist { display: flex; flex-direction: column; gap: 16px; }
.apm-prd-rev { display: flex; gap: 12px; }
.apm-prd-rev__avatar { width: 38px; height: 38px; border-radius: 50%; background: #e3e8ef center/cover no-repeat; flex: 0 0 38px; }
.apm-prd-rev__body { flex: 1; }
.apm-prd-rev__head { display: flex; align-items: baseline; gap: 10px; }
.apm-prd-rev__name { font-weight: 700; color: #16324f; font-size: 14px; }
.apm-prd-rev__date { color: #8a97a8; font-size: 12px; }
.apm-prd-rev__comment { margin: 6px 0 0; color: #3c4a5b; font-size: 14px; line-height: 1.5; }
.apm-prd-revempty { color: #5b6b7c; font-size: 14px; background: #f7f9fc; border: 1px dashed #d4dce6; border-radius: 12px; padding: 20px; text-align: center; }
/* ---------- storefront: card rating row ---------- */
.apm-mkt-rating { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; }
.apm-mkt-rating__star { color: #ffb300; font-size: 13px; line-height: 1; }
.apm-mkt-rating__score { font-weight: 700; color: #16324f; }
.apm-mkt-rating__count { color: #8a97a8; }
/* ---------- storefront: featured badge on card ---------- */
.apm-mkt-badge--featured { background: linear-gradient(135deg, #fb8c00, #ef6c00); color: #fff; box-shadow: 0 2px 6px rgba(239,108,0,.32); }
/* ---------- storefront: featured strip ---------- */
.apm-mkt-featured { margin: 18px 0 6px; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 14px 16px; }
.apm-mkt-featured__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.apm-mkt-featured__icon { color: #ef6c00; width: 18px; height: 18px; }
.apm-mkt-featured__icon svg { width: 18px; height: 18px; }
.apm-mkt-featured__title { font-weight: 800; color: #16324f; font-size: 15px; }
.apm-mkt-featured__row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.apm-mkt-fcard { flex: 0 0 132px; display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; overflow: hidden; transition: box-shadow .18s, transform .18s; }
.apm-mkt-fcard:hover { box-shadow: 0 6px 18px rgba(0,119,255,.14); transform: translateY(-2px); }
.apm-mkt-fcard__media { display: block; width: 100%; aspect-ratio: 1/1; background: #f2f5f9; }
.apm-mkt-fcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apm-mkt-fcard__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; color: #16324f; padding: 8px 9px 2px; line-height: 1.35; min-height: 2.7em; }
.apm-mkt-fcard__price { font-weight: 800; color: #ef6c00; font-size: 13.5px; padding: 0 9px 9px; }
.apm-mkt-fcard__price--free { color: #0d7a3f; }
/* ---------- checkout: voucher box ---------- */
.apm-co-voucherbox { margin: 12px 0 4px; }
.apm-co-voucher { display: flex; gap: 8px; }
.apm-co-voucher__input { flex: 1; text-transform: uppercase; }
.apm-co-voucher__apply { flex: 0 0 auto; border: none; cursor: pointer; border-radius: 9px; padding: 0 16px; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, #fb8c00, #ef6c00); box-shadow: 0 3px 10px rgba(239,108,0,.32); transition: opacity .15s; }
.apm-co-voucher__apply:hover { opacity: .9; }
.apm-co-voucher__apply:disabled { opacity: .55; cursor: default; }
.apm-co-voucher.is-applied { align-items: center; background: #e6f5ec; border: 1px solid #bfe3cd; border-radius: 10px; padding: 9px 12px; gap: 8px; }
.apm-co-voucher__tag { color: #0d7a3f; width: 16px; height: 16px; }
.apm-co-voucher__tag svg { width: 16px; height: 16px; }
.apm-co-voucher__code { font-weight: 800; color: #0d7a3f; letter-spacing: .5px; }
.apm-co-voucher__disc { color: #0d7a3f; font-weight: 700; margin-left: auto; }
.apm-co-voucher__rm { border: none; background: transparent; color: #c62828; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.apm-co-vmsg { font-size: 12.5px; margin-top: 6px; min-height: 1em; }
.apm-co-vmsg.apm-co-err { color: #c62828; }
.apm-co-trow--disc { color: #0d7a3f; }
.apm-co-trow--disc span:last-child { font-weight: 700; }
/* ---------- orders: review button ---------- */
.apm-orders-reviewbtn { margin-top: 7px; align-self: flex-start; border: 1px solid #ef6c00; color: #ef6c00; background: #fff7f0; border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s; }
.apm-orders-reviewbtn:hover { background: #ffeedd; }
/* ---------- orders: review modal ---------- */
.apm-orders-modal { position: fixed; inset: 0; background: rgba(13,28,48,.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.apm-orders-modal__box { background: #fff; border-radius: 16px; width: 100%; max-width: 440px; padding: 20px; box-shadow: 0 20px 50px rgba(13,28,48,.3); }
.apm-orders-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.apm-orders-modal__head h3 { margin: 0; color: #16324f; font-size: 17px; }
.apm-orders-modal__x { border: none; background: transparent; font-size: 24px; line-height: 1; color: #8a97a8; cursor: pointer; }
.apm-orders-modal__prod { color: #5b6b7c; font-size: 13px; margin-bottom: 14px; }
.apm-orders-modal__label { font-weight: 700; color: #16324f; font-size: 13px; margin-bottom: 6px; }
.apm-orders-modal__stars { display: flex; gap: 4px; margin-bottom: 14px; }
.apm-orders-star { border: none; background: transparent; font-size: 30px; line-height: 1; color: #d4dce6; cursor: pointer; transition: color .12s, transform .12s; padding: 2px; }
.apm-orders-star:hover { transform: scale(1.12); }
.apm-orders-star.is-on { color: #ffb300; }
.apm-orders-modal__comment { width: 100%; min-height: 84px; resize: vertical; border: 1px solid #d4dce6; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; box-sizing: border-box; }
.apm-orders-modal__msg { font-size: 13px; margin-top: 8px; min-height: 1em; }
.apm-orders-modal__msg.apm-orders-err { color: #c62828; }
.apm-orders-modal__msg.apm-orders-ok { color: #0d7a3f; }
.apm-orders-modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.apm-orders-modal__cancel { border: 1px solid #d4dce6; background: #fff; color: #5b6b7c; border-radius: 9px; padding: 9px 16px; font-weight: 700; cursor: pointer; }
.apm-orders-modal__submit { border: none; background: linear-gradient(135deg, #fb8c00, #ef6c00); color: #fff; border-radius: 9px; padding: 9px 18px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 10px rgba(239,108,0,.32); }
.apm-orders-modal__submit:disabled { opacity: .55; cursor: default; }
/* ---------- admin: nav links on shop approvals ---------- */
.apm-admin-headlinks { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.apm-admin-navlink { font-size: 12.5px; font-weight: 700; color: #0077FF; text-decoration: none; border: 1px solid #cfe0f5; background: #f2f7fd; border-radius: 8px; padding: 6px 12px; transition: background .15s; }
.apm-admin-navlink:hover { background: #e3f0fb; }
/* ---------- admin commerce panel ---------- */
.apm-ac-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.apm-ac-head__txt h1 { margin: 0 0 4px; color: #16324f; font-size: 22px; }
.apm-ac-head__txt p { margin: 0; color: #5b6b7c; font-size: 13.5px; }
.apm-ac-head__links { display: flex; gap: 8px; flex-wrap: wrap; }
.apm-ac-link { font-size: 12.5px; font-weight: 700; color: #0077FF; text-decoration: none; border: 1px solid #cfe0f5; background: #f2f7fd; border-radius: 8px; padding: 6px 12px; }
.apm-ac-link:hover { background: #e3f0fb; }
.apm-ac-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e3e8ef; margin-bottom: 16px; }
.apm-ac-tab { border: none; background: transparent; padding: 10px 18px; font-size: 14px; font-weight: 700; color: #5b6b7c; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.apm-ac-tab.is-active { color: #0077FF; border-bottom-color: #0077FF; }
.apm-ac-hint { color: #5b6b7c; font-size: 13px; margin: 0 0 14px; }
.apm-ac-empty { color: #5b6b7c; background: #f7f9fc; border: 1px dashed #d4dce6; border-radius: 12px; padding: 24px; text-align: center; font-size: 14px; }
.apm-ac-forbidden { color: #c62828; }
.apm-ac-table { display: flex; flex-direction: column; gap: 10px; }
.apm-ac-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 12px 16px; }
.apm-ac-row__main { flex: 1; min-width: 0; }
.apm-ac-row__name { font-weight: 700; color: #16324f; font-size: 14px; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.apm-ac-row__name:hover { color: #0077FF; }
.apm-ac-row__sub { display: flex; gap: 14px; flex-wrap: wrap; color: #5b6b7c; font-size: 12.5px; margin-top: 3px; }
.apm-ac-muted { color: #8a97a8; }
.apm-ac-code { background: #f2f7fd; border: 1px solid #cfe0f5; border-radius: 6px; padding: 2px 7px; font-weight: 800; color: #0059CC; letter-spacing: .5px; }
.apm-ac-vval { font-weight: 800; color: #ef6c00; }
.apm-ac-chip { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.apm-ac-chip--on { background: #e6f5ec; color: #0d7a3f; border: 1px solid #bfe3cd; }
.apm-ac-chip--off { background: #fdecea; color: #c62828; border: 1px solid #f5c6c0; }
/* toggle switch */
.apm-ac-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto; }
.apm-ac-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.apm-ac-switch__track { width: 42px; height: 24px; border-radius: 999px; background: #cfd8e3; position: relative; transition: background .18s; flex: 0 0 42px; }
.apm-ac-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .18s; }
.apm-ac-switch input:checked + .apm-ac-switch__track { background: #0077FF; }
.apm-ac-switch input:checked + .apm-ac-switch__track::after { left: 21px; }
.apm-ac-switch__label { font-size: 12.5px; font-weight: 700; color: #5b6b7c; }
/* voucher create form */
.apm-ac-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 16px; margin-bottom: 18px; }
.apm-ac-card h2 { margin: 0 0 14px; color: #16324f; font-size: 16px; }
.apm-ac-formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.apm-ac-f { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: #5b6b7c; }
.apm-ac-f--check { flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; align-self: end; padding-bottom: 9px; }
.apm-ac-input { border: 1px solid #d4dce6; border-radius: 9px; padding: 9px 11px; font-size: 14px; font-family: inherit; background: #fff; color: #16324f; box-sizing: border-box; width: 100%; }
.apm-ac-input:focus { outline: none; border-color: #0077FF; box-shadow: 0 0 0 3px rgba(0,119,255,.12); }
.apm-ac-formfoot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.apm-ac-create { border: none; background: linear-gradient(135deg, #fb8c00, #ef6c00); color: #fff; border-radius: 9px; padding: 10px 20px; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 3px 10px rgba(239,108,0,.32); }
.apm-ac-create:disabled { opacity: .55; cursor: default; }
.apm-ac-formmsg { font-size: 13px; }
.apm-ac-formmsg.apm-ac-err { color: #c62828; }
.apm-ac-formmsg.apm-ac-ok { color: #0d7a3f; }
.apm-ac-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #16324f; color: #fff; border-radius: 10px; padding: 10px 20px; font-size: 13.5px; font-weight: 700; z-index: 9999; box-shadow: 0 8px 24px rgba(13,28,48,.35); }
/* ---------- Phase 5 night mode ---------- */
body.night-mode .apm-prd-ratingscore, body.night-mode .apm-prd-revbig__score, body.night-mode .apm-prd-rev__name { color: #e3edf7; }
body.night-mode .apm-prd-ratingcount, body.night-mode .apm-prd-revbig__count, body.night-mode .apm-prd-revbar__label, body.night-mode .apm-prd-revbar__count { color: #9db2c6; }
body.night-mode .apm-prd-star { color: #33465e; }
body.night-mode .apm-prd-revsummary, body.night-mode .apm-prd-revempty { background: #0d1c30; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-prd-revbar__track { background: #1c3050; }
body.night-mode .apm-prd-rev__comment { color: #b0c4d8; }
body.night-mode .apm-prd-rev__avatar { background-color: #1c3050; }
body.night-mode .apm-mkt-rating__score { color: #e3edf7; }
body.night-mode .apm-mkt-rating__count { color: #9db2c6; }
body.night-mode .apm-mkt-featured { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-mkt-featured__title { color: #e3edf7; }
body.night-mode .apm-mkt-fcard { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-mkt-fcard__name { color: #e3edf7; }
body.night-mode .apm-mkt-fcard__media { background: #0d1c30; }
body.night-mode .apm-co-voucher.is-applied { background: rgba(13,122,63,.18); border-color: rgba(13,122,63,.35); }
body.night-mode .apm-co-voucher__code, body.night-mode .apm-co-voucher__disc, body.night-mode .apm-co-voucher__tag { color: #6fd39a; }
body.night-mode .apm-co-trow--disc { color: #6fd39a; }
body.night-mode .apm-orders-reviewbtn { background: rgba(239,108,0,.12); border-color: rgba(239,108,0,.4); color: #ffa260; }
body.night-mode .apm-orders-modal__box { background: #12233a; }
body.night-mode .apm-orders-modal__head h3, body.night-mode .apm-orders-modal__label { color: #e3edf7; }
body.night-mode .apm-orders-modal__prod { color: #9db2c6; }
body.night-mode .apm-orders-modal__comment { background: #0d1c30; border-color: rgba(255,255,255,.12); color: #e3edf7; }
body.night-mode .apm-orders-star { color: #33465e; }
body.night-mode .apm-orders-modal__cancel { background: #0d1c30; border-color: rgba(255,255,255,.12); color: #9db2c6; }
body.night-mode .apm-admin-navlink, body.night-mode .apm-ac-link { background: #0d1c30; border-color: rgba(255,255,255,.12); color: #7fb3f0; }
body.night-mode .apm-ac-head__txt h1, body.night-mode .apm-ac-card h2, body.night-mode .apm-ac-row__name { color: #e3edf7; }
body.night-mode .apm-ac-head__txt p, body.night-mode .apm-ac-hint, body.night-mode .apm-ac-row__sub, body.night-mode .apm-ac-switch__label, body.night-mode .apm-ac-f { color: #9db2c6; }
body.night-mode .apm-ac-tabs { border-bottom-color: rgba(255,255,255,.07); }
body.night-mode .apm-ac-tab { color: #9db2c6; }
body.night-mode .apm-ac-tab.is-active { color: #7fb3f0; border-bottom-color: #7fb3f0; }
body.night-mode .apm-ac-row, body.night-mode .apm-ac-card, body.night-mode .apm-ac-empty { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-ac-empty { color: #9db2c6; }
body.night-mode .apm-ac-code { background: #0d1c30; border-color: rgba(255,255,255,.12); color: #7fb3f0; }
body.night-mode .apm-ac-input { background: #0d1c30; border-color: rgba(255,255,255,.12); color: #e3edf7; }
body.night-mode .apm-ac-switch__track { background: #33465e; }
body.night-mode .apm-ac-toast { background: #0d1c30; color: #e3edf7; }
/* ============================================================
APM Siaga — Member Hub (Home redesign) + system-wide back btn
Added: mobile back button, 'Me' dropdown icons, home status
strip, quick actions, featured rail, hub widget, sidebar icons.
============================================================ */
/* ---- system-wide mobile back button (in .main-header) ----
Must occupy the SAME absolute slot as .menu-icon (position:absolute;
top:10px; left:0; 48x50) so it never pushes the .logo out of the
.logo-wrapper (which has padding-left:48px + overflow:hidden). */
.apm-backbtn { display: none; position: absolute; top: 10px; left: 0; width: 48px; height: 50px; align-items: center; justify-content: center; text-decoration: none; border-radius: 4px; z-index: 2; }
.apm-backbtn.apm-backbtn--show { display: flex; }
.apm-backbtn:hover { background-color: rgba(255, 255, 255, 0.1); }
.apm-backbtn i { font-size: 18px; color: #fff; }
.logo-wrapper .menu-icon.apm-burger-hidden { display: none !important; }
/* ---- 'Me' dropdown commerce icons ---- */
.apm-menu-ic { display: inline-block; width: 20px; text-align: center; font-size: 15px; color: var(--apm-blue); }
/* ---- home: member status strip ---- */
.apm-home-status { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--apm-blue), var(--apm-blue-dark)); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; color: #fff; box-shadow: 0 4px 14px rgba(0,89,204,.25); }
.apm-home-status__avatar { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.7); }
.apm-home-status__body { flex: 1; min-width: 0; }
.apm-home-status__name { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apm-home-status__vfd { font-size: 14px; color: #4dd0e1; }
.apm-home-status__sub { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 1px; }
.apm-home-status__qr { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,255,255,.16); color: #fff; font-size: 18px; text-decoration: none; transition: background .15s; }
.apm-home-status__qr:hover { background: rgba(255,255,255,.3); color: #fff; }
/* ---- home: quick actions (4 pillars) ---- */
.apm-home-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.apm-home-action { display: flex; flex-direction: column; align-items: center; gap: 7px; background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 12px 6px 10px; text-decoration: none; transition: box-shadow .18s, transform .18s; }
.apm-home-action:hover { box-shadow: 0 6px 18px rgba(0,119,255,.14); transform: translateY(-2px); }
.apm-home-action__ic { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; }
.apm-home-action__ic--shop { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.apm-home-action__ic--orders { background: linear-gradient(135deg, #3D9BFF, #0077FF); }
.apm-home-action__ic--org { background: linear-gradient(135deg, #43a047, #2e7d32); }
.apm-home-action__ic--konnect { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }
.apm-home-action__label { font-size: 11.5px; font-weight: 700; color: #16324f; text-align: center; line-height: 1.2; }
/* ---- home: featured rail head (title + see-all) ---- */
.apm-home-rail .apm-mkt-featured__head { justify-content: space-between; }
.apm-home-rail__seeall { font-size: 12.5px; font-weight: 700; color: var(--apm-blue); text-decoration: none; }
.apm-home-rail__seeall:hover { text-decoration: underline; }
/* ---- home: right-panel hub widget ---- */
.apm-home-hub .card-body { padding: 6px 14px; }
.apm-home-hub__item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; text-decoration: none; border-bottom: 1px solid #eef2f7; }
.apm-home-hub__item:last-child { border-bottom: none; }
.apm-home-hub__ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; }
.apm-home-hub__ic--konnect { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }
.apm-home-hub__ic--org { background: linear-gradient(135deg, #43a047, #2e7d32); }
.apm-home-hub__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.apm-home-hub__title { font-weight: 800; font-size: 13.5px; color: #16324f; }
.apm-home-hub__sub { font-size: 11.5px; color: #5b6b7c; margin-top: 1px; }
.apm-home-hub__chev { font-size: 12px; color: #9fb0c3; }
/* ---- sidebar APM quick-access icons ---- */
.apm-side-ic { display: inline-block; width: 24px; text-align: center; font-size: 17px; color: var(--apm-blue); }
/* ---- night mode ---- */
body.night-mode .apm-home-status { box-shadow: 0 4px 14px rgba(0,0,0,.4); }
body.night-mode .apm-home-action { background: #12233a; border-color: rgba(255,255,255,.07); }
body.night-mode .apm-home-action__label { color: #e3edf7; }
body.night-mode .apm-home-hub__item { border-bottom-color: rgba(255,255,255,.07); }
body.night-mode .apm-home-hub__title { color: #e3edf7; }
body.night-mode .apm-home-hub__sub { color: #9db2c6; }
body.night-mode .apm-home-hub__chev { color: #5b6b7c; }
body.night-mode .apm-home-rail__seeall { color: #6ea8fe; }
body.night-mode .apm-menu-ic { color: #6ea8fe; }
body.night-mode .apm-side-ic { color: #6ea8fe; }
/* ============================================================
APM Siaga — bottom-nav 'Me' account bottom-sheet
Markup: _footer.bottom_bar.tpl (sheet + backdrop + toggle JS)
Sits just above the fixed bottom bar (70px + safe-area).
============================================================ */
.apm-me-backdrop { position: fixed; inset: 0; background: rgba(9,20,35,.45); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 998; }
.apm-me-backdrop.is-open { opacity: 1; pointer-events: auto; }
.apm-me-sheet { position: fixed; left: 0; right: 0; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 1000; background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(9,20,35,.22); max-height: calc(100vh - 84px); overflow-y: auto; transform: translateY(calc(100% + 80px)); transition: transform .26s ease; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
.apm-me-sheet.is-open { transform: translateY(0); }
.apm-me-sheet__grab { width: 42px; height: 4px; border-radius: 2px; background: #d4dce6; margin: 4px auto 10px; }
.apm-me-sheet__profile { display: flex; align-items: center; gap: 12px; padding: 6px 8px 10px; text-decoration: none; }
.apm-me-sheet__avatar { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #e3e8ef; }
.apm-me-sheet__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.apm-me-sheet__name { font-weight: 800; font-size: 15px; color: #16324f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apm-me-sheet__view { font-size: 12px; font-weight: 700; color: var(--apm-blue); }
.apm-me-sheet__chev { font-size: 13px; color: #9fb0c3; }
.apm-me-sheet .dropdown-item { display: flex; align-items: center; width: 100%; padding: 11px 10px; font-size: 14px; font-weight: 600; color: #16324f; border-radius: 10px; background: transparent; }
.apm-me-sheet .dropdown-item:active { background: #f0f5fb; }
.apm-me-sheet .dropdown-divider { margin: 6px 4px; border-top-color: #eef2f7; }
/* night mode */
body.night-mode .apm-me-sheet { background: #12233a; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
body.night-mode .apm-me-sheet__grab { background: #33465e; }
body.night-mode .apm-me-sheet__avatar { border-color: rgba(255,255,255,.14); }
body.night-mode .apm-me-sheet__name { color: #e3edf7; }
body.night-mode .apm-me-sheet__view { color: #6ea8fe; }
body.night-mode .apm-me-sheet__chev { color: #5b6b7c; }
body.night-mode .apm-me-sheet .dropdown-item { color: #e3edf7; }
body.night-mode .apm-me-sheet .dropdown-item:active { background: rgba(255,255,255,.06); }
body.night-mode .apm-me-sheet .dropdown-divider { border-top-color: rgba(255,255,255,.07); }
/* ============================================================
APM Siaga — 'My Purchases' quick-access tiles in the Me sheet
(Shopee-style: 4 status tiles with live count badges)
============================================================ */
.apm-me-purchases { padding: 4px 6px 10px; }
.apm-me-purchases__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.apm-me-purchases__title { font-size: 14px; font-weight: 800; color: #16324f; }
.apm-me-purchases__history { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--apm-blue); text-decoration: none; }
.apm-me-purchases__history i { font-size: 9px; }
.apm-me-purchases__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.apm-me-ptile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px 6px; border-radius: 12px; text-decoration: none; transition: background .15s ease; }
.apm-me-ptile:active { background: #f0f5fb; }
.apm-me-ptile__ic { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; box-shadow: 0 3px 9px rgba(13,42,80,.16); }
.apm-me-ptile__ic--pay { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.apm-me-ptile__ic--ship { background: linear-gradient(135deg, #3D9BFF, #0077FF); }
.apm-me-ptile__ic--receive { background: linear-gradient(135deg, #43a047, #2e7d32); }
.apm-me-ptile__ic--rate { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }
.apm-me-ptile__badge {
position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
border-radius: 9px; background: #ff3b30; color: #fff; font-size: 10px; font-weight: 800;
line-height: 18px; text-align: center; border: 2px solid #fff; box-sizing: content-box;
}
.apm-me-ptile__label { font-size: 11px; font-weight: 700; color: #3d4f63; text-align: center; }
body.night-mode .apm-me-purchases__title { color: #e3edf7; }
body.night-mode .apm-me-purchases__history { color: #6ea8fe; }
body.night-mode .apm-me-ptile:active { background: rgba(255,255,255,.06); }
body.night-mode .apm-me-ptile__label { color: #b0c4d8; }
body.night-mode .apm-me-ptile__badge { border-color: #12233a; }
/* ── Me sheet: icon tile groups ── */
.apm-me-tgroup { padding: 10px 16px 4px; }
.apm-me-tgroup__label { font-size: 11px; font-weight: 700; color: #8899aa; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
body.night-mode .apm-me-tgroup__label { color: #6b7f94; }
.apm-me-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.apm-me-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 12px; text-decoration: none; cursor: pointer; transition: background .15s ease; }
.apm-me-tile:active { background: #f0f5fb; }
.apm-me-tile__ic { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; box-shadow: 0 3px 9px rgba(13,42,80,.16); }
.apm-me-tile__label { font-size: 11px; font-weight: 600; color: #3d4f63; text-align: center; line-height: 1.2; }
/* colour variants */
.apm-me-tile__ic--orange { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.apm-me-tile__ic--blue { background: linear-gradient(135deg, #3D9BFF, #0077FF); }
.apm-me-tile__ic--teal { background: linear-gradient(135deg, #26a69a, #00897b); }
.apm-me-tile__ic--green { background: linear-gradient(135deg, #43a047, #2e7d32); }
.apm-me-tile__ic--purple { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }
.apm-me-tile__ic--pink { background: linear-gradient(135deg, #ec407a, #d81b60); }
.apm-me-tile__ic--slate { background: linear-gradient(135deg, #78909c, #546e7a); }
.apm-me-tile__ic--red { background: linear-gradient(135deg, #ef5350, #d32f2f); }
.apm-me-tile__ic--amber { background: linear-gradient(135deg, #ffa726, #f57c00); }
.apm-me-tile__ic--indigo { background: linear-gradient(135deg, #5c6bc0, #3949ab); }
.apm-me-tile__ic--danger { background: linear-gradient(135deg, #ef5350, #c62828); }
.apm-me-tile--danger .apm-me-tile__label { color: #d32f2f; }
/* night mode */
body.night-mode .apm-me-tile:active { background: rgba(255,255,255,.06); }
body.night-mode .apm-me-tile__label { color: #b0c4d8; }
body.night-mode .apm-me-tile--danger .apm-me-tile__label { color: #ef9a9a; }
/* ======================================================================
APM Siaga — dedicated mobile navigation drawer
Replaces the native sg-offcanvas sidebar on mobile. Slides in from the
left, sits ABOVE the sticky news tabbar (z-index 1020) so nothing leaks
through, and is rendered on every page via _footer.tpl.
====================================================================== */
.apm-drawer-backdrop {
position: fixed; inset: 0; background: rgba(9,20,35,.5);
opacity: 0; pointer-events: none; transition: opacity .24s ease;
z-index: 1500;
}
.apm-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
body.apm-drawer-lock { overflow: hidden; }
.apm-drawer {
position: fixed; top: 0; left: 0; bottom: 0;
width: 84%; max-width: 330px; z-index: 1501;
background: #f4f7fb;
border-radius: 0 20px 20px 0;
box-shadow: 8px 0 34px rgba(9,20,35,.28);
display: flex; flex-direction: column;
transform: translateX(-105%); transition: transform .28s cubic-bezier(.4,0,.2,1);
visibility: hidden;
}
.apm-drawer.is-open { transform: translateX(0); visibility: visible; }
/* ---- header ---- */
.apm-drawer__head {
position: relative;
background: linear-gradient(135deg, var(--apm-blue) 0%, var(--apm-blue-dark) 75%, #0a3a80 100%);
padding: 22px 18px 20px; color: #fff;
}
.apm-drawer__close {
position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
border: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff;
font-size: 15px; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .15s ease;
}
.apm-drawer__close:active { background: rgba(255,255,255,.3); }
.apm-drawer__profile { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.apm-drawer__avatar {
flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
border: 2.5px solid rgba(255,255,255,.85); box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.apm-drawer__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.apm-drawer__name { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apm-drawer__vfd { color: #ffd54f; font-size: 13px; }
.apm-drawer__view { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); }
.apm-drawer__view i { font-size: 9px; margin-left: 2px; }
/* ---- body ---- */
.apm-drawer__body { flex: 1; overflow-y: auto; padding: 12px 12px 8px; -webkit-overflow-scrolling: touch; }
.apm-drawer__sec {
font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: #8ba0b5; padding: 14px 8px 6px;
}
.apm-drawer__sec:first-child { padding-top: 4px; }
.apm-drawer__item {
display: flex; align-items: center; gap: 12px;
padding: 9px 8px; border-radius: 12px; text-decoration: none;
transition: background .15s ease;
}
.apm-drawer__item:active { background: #e8eef6; }
.apm-drawer__item.is-active { background: #e3edf8; }
.apm-drawer__ic {
flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: #fff; box-shadow: 0 2px 7px rgba(13,42,80,.18);
}
.apm-drawer__ic--blue { background: linear-gradient(135deg, #3D9BFF, #0077FF); }
.apm-drawer__ic--orange { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.apm-drawer__ic--green { background: linear-gradient(135deg, #43a047, #2e7d32); }
.apm-drawer__ic--purple { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }
.apm-drawer__ic--teal { background: linear-gradient(135deg, #00897b, #00695c); }
.apm-drawer__ic--red { background: linear-gradient(135deg, #e53935, #c62828); }
.apm-drawer__ic--indigo { background: linear-gradient(135deg, #3949ab, #283593); }
.apm-drawer__label { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: #16324f; }
.apm-drawer__chev { font-size: 12px; color: #a5b6c8; }
/* ---- footer ---- */
.apm-drawer__foot {
border-top: 1px solid #e6ecf3; background: #fff;
padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; gap: 2px;
}
.apm-drawer__footbtn {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 11px 8px; border: none; border-radius: 10px; background: transparent;
font-size: 14px; font-weight: 700; color: #16324f; text-decoration: none; cursor: pointer;
transition: background .15s ease; text-align: left;
}
.apm-drawer__footbtn:active { background: #f0f5fb; }
.apm-drawer__footbtn i { flex: 0 0 20px; text-align: center; font-size: 15px; color: #5b7c9e; }
.apm-drawer__footbtn--danger { color: #d32f2f; }
.apm-drawer__footbtn--danger i { color: #d32f2f; }
/* ---- night mode ---- */
body.night-mode .apm-drawer { background: #0f1e33; box-shadow: 8px 0 34px rgba(0,0,0,.55); }
body.night-mode .apm-drawer__sec { color: #5f7a99; }
body.night-mode .apm-drawer__item:active { background: rgba(255,255,255,.06); }
body.night-mode .apm-drawer__item.is-active { background: rgba(30,136,229,.16); }
body.night-mode .apm-drawer__label { color: #e3edf7; }
body.night-mode .apm-drawer__chev { color: #4d617a; }
body.night-mode .apm-drawer__foot { background: #12233a; border-top-color: rgba(255,255,255,.08); }
body.night-mode .apm-drawer__footbtn { color: #e3edf7; }
body.night-mode .apm-drawer__footbtn:active { background: rgba(255,255,255,.06); }
body.night-mode .apm-drawer__footbtn i { color: #7d97b4; }
/* hide the native offcanvas sidebar trigger on mobile — the drawer replaces it */
@media (max-width: 767px) {
.sg-offcanvas .sg-offcanvas-sidebar { display: none !important; }
}
/* ======================================================================
APM Siaga — Pusat Latihan hub (/pusatlatihan)
Portal-styled landing + centre detail. Server-rendered from pusat_data.json.
====================================================================== */
.pl-wrap { margin-bottom: 40px; }
/* ---- hero ---- */
.pl-hero {
background: linear-gradient(135deg, var(--apm-blue) 0%, var(--apm-blue-dark) 70%, #0a3a80 100%);
color: #fff; padding: 42px 0 38px; position: relative; overflow: hidden;
}
.pl-hero::after {
content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
border-radius: 50%; background: rgba(255,255,255,.06);
}
.pl-hero__title { font-size: 30px; font-weight: 800; color: #fff; margin: 0 0 8px; position: relative; z-index: 1; }
.pl-hero__title span { color: var(--apm-orange); }
.pl-hero__sub { font-size: 15px; color: rgba(255,255,255,.9); margin: 0; position: relative; z-index: 1; }
.pl-hero__motto { margin: 12px 0 0; font-style: italic; color: rgba(255,255,255,.85); font-size: 14px; position: relative; z-index: 1; }
.pl-hero--detail { padding-top: 26px; }
.pl-hero__badge {
display: inline-block; background: var(--apm-orange); color: #fff; font-weight: 800;
padding: 6px 16px; border-radius: 999px; font-size: 15px; letter-spacing: 1px; margin-bottom: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,.25); position: relative; z-index: 1;
}
.pl-crumb { margin-bottom: 14px; position: relative; z-index: 1; }
.pl-crumb a { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; text-decoration: none; }
.pl-crumb a:hover { color: #fff; text-decoration: underline; }
/* ---- sticky section nav ---- */
.pl-nav {
position: sticky; top: 56px; z-index: 100; background: #fff; border-bottom: 1px solid #e3ecf5;
box-shadow: 0 2px 8px rgba(13,42,80,.06);
}
.pl-nav__inner { display: flex; gap: 6px; overflow-x: auto; padding: 10px 15px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pl-nav__inner::-webkit-scrollbar { display: none; }
.pl-nav__link {
flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
color: var(--apm-blue); background: #eef4fb; text-decoration: none; white-space: nowrap; transition: all .15s ease;
}
.pl-nav__link:hover { background: var(--apm-blue); color: #fff; }
/* ---- body / sections ---- */
.pl-body { padding-top: 26px; }
.pl-sec { margin-bottom: 38px; scroll-margin-top: 120px; }
.pl-sec__title {
display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800;
color: #16324f; margin-bottom: 18px;
}
.pl-sec__bar { display: inline-block; width: 5px; height: 24px; border-radius: 3px; background: var(--apm-orange); flex: 0 0 auto; }
.pl-sec__count { font-size: 13px; font-weight: 600; color: #6b7c93; margin-left: auto; }
.pl-sec__lead { font-size: 14px; color: #5a6b7f; margin-bottom: 16px; }
/* ---- profil cards ---- */
.pl-profil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pl-profil-card {
background: #fff; border: 1px solid #e3ecf5; border-radius: 14px; padding: 20px;
box-shadow: 0 2px 10px rgba(13,42,80,.05); transition: transform .15s ease, box-shadow .15s ease;
}
.pl-profil-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(13,42,80,.1); }
.pl-profil-card__icon {
width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--apm-blue), var(--apm-blue-dark)); color: #fff; font-size: 18px; margin-bottom: 12px;
}
.pl-profil-card h3 { font-size: 15px; font-weight: 800; color: var(--apm-blue-dark); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.pl-profil-card p { font-size: 14px; color: #45566b; line-height: 1.6; margin: 0 0 8px; }
.pl-profil-card p:last-child { margin-bottom: 0; }
/* ---- sejarah timeline ---- */
.pl-sejarah-intro { background: #f4f8fd; border-left: 4px solid var(--apm-blue); border-radius: 8px; padding: 16px 18px; margin-bottom: 24px; }
.pl-sejarah-intro h3 { font-size: 15px; font-weight: 800; color: var(--apm-blue-dark); margin-bottom: 8px; }
.pl-sejarah-intro ul { margin: 0; padding-left: 18px; }
.pl-sejarah-intro li { font-size: 13.5px; color: #45566b; line-height: 1.6; }
.pl-timeline { position: relative; padding-left: 8px; }
.pl-timeline::before { content: ""; position: absolute; left: 96px; top: 8px; bottom: 8px; width: 3px; background: linear-gradient(var(--apm-blue), var(--apm-orange)); border-radius: 2px; }
.pl-tl-item { position: relative; display: flex; gap: 20px; margin-bottom: 22px; align-items: flex-start; }
.pl-tl-year {
flex: 0 0 78px; text-align: right; font-weight: 800; font-size: 16px; color: var(--apm-blue-dark);
padding-top: 8px;
}
.pl-tl-dot {
flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--apm-orange);
border: 3px solid #fff; box-shadow: 0 0 0 2px var(--apm-orange); margin-top: 12px; position: relative; z-index: 1;
}
.pl-tl-card { flex: 1; background: #fff; border: 1px solid #e3ecf5; border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(13,42,80,.05); }
.pl-tl-title { font-size: 14.5px; font-weight: 800; color: #16324f; margin-bottom: 6px; text-transform: uppercase; }
.pl-tl-desc { font-size: 13.5px; color: #5a6b7f; line-height: 1.6; margin: 0; }
/* ---- fungsi / peranan lists ---- */
.pl-list-card { background: #fff; border: 1px solid #e3ecf5; border-radius: 14px; padding: 20px; height: 100%; box-shadow: 0 2px 10px rgba(13,42,80,.05); }
.pl-list-card h3 { font-size: 16px; font-weight: 800; color: var(--apm-blue-dark); margin-bottom: 12px; }
.pl-list-card ol { margin: 0; padding-left: 20px; }
.pl-list-card li { font-size: 14px; color: #45566b; line-height: 1.65; margin-bottom: 8px; }
/* ---- tables (direktori / fasiliti) ---- */
.pl-table-tools { margin-bottom: 12px; max-width: 380px; }
.pl-search { border-radius: 999px; border: 1px solid #d5e2f0; font-size: 14px; }
.pl-table-wrap { overflow-x: auto; border: 1px solid #e3ecf5; border-radius: 12px; background: #fff; max-height: 520px; overflow-y: auto; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.pl-table thead th {
position: sticky; top: 0; background: var(--apm-blue); color: #fff; font-weight: 700;
text-align: left; padding: 11px 14px; white-space: nowrap; z-index: 2;
}
.pl-table tbody td { padding: 10px 14px; border-bottom: 1px solid #eef3f9; color: #45566b; vertical-align: top; }
.pl-table tbody tr:nth-child(even) { background: #f8fbfe; }
.pl-table tbody tr:hover { background: #eef6ff; }
.pl-table a { color: var(--apm-blue); text-decoration: none; }
.pl-table a:hover { text-decoration: underline; }
.pl-td-idx { color: #93a5bb; font-weight: 600; width: 40px; }
.pl-td-nama { font-weight: 700; color: #16324f; }
.pl-td-kadar { white-space: nowrap; font-weight: 700; color: var(--apm-blue-dark); }
.pl-table--rates { min-width: 0; }
.pl-table--rates thead th { background: var(--apm-blue-dark); }
/* ---- fasiliti ---- */
.pl-fas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 20px; }
.pl-fas-card { background: #fff; border: 1px solid #e3ecf5; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(13,42,80,.05); }
.pl-fas-card__title { background: linear-gradient(135deg, var(--apm-blue), var(--apm-blue-dark)); color: #fff; font-size: 15px; font-weight: 800; padding: 12px 16px; margin: 0; }
.pl-fas-card .pl-table { border: none; }
.pl-fas-card .pl-table thead th { display: none; }
.pl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pl-gallery__item { display: block; border-radius: 10px; overflow: hidden; border: 1px solid #e3ecf5; }
.pl-gallery__item img { width: 100%; height: 110px; object-fit: cover; display: block; transition: transform .2s ease; }
.pl-gallery__item:hover img { transform: scale(1.05); }
/* ---- takwim empty state ---- */
.pl-empty {
background: #fff; border: 1px dashed #c9d9ec; border-radius: 14px; padding: 38px 20px;
text-align: center; color: #6b7c93;
}
.pl-empty i { font-size: 38px; color: #b9cde3; margin-bottom: 12px; }
.pl-empty h3 { font-size: 17px; font-weight: 800; color: #16324f; margin-bottom: 6px; }
.pl-empty p { font-size: 13.5px; margin: 0; }
/* ---- senarai kursus (PULAPAU) ---- */
.pl-senarai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pl-senarai-card { background: #fff; border: 1px solid #e3ecf5; border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(13,42,80,.05); }
.pl-senarai-card__title { font-size: 15px; font-weight: 800; color: var(--apm-blue-dark); margin-bottom: 10px; }
.pl-senarai-card__list { list-style: none; margin: 0 0 12px; padding: 0; }
.pl-senarai-card__list li { font-size: 13.5px; color: #45566b; padding: 6px 0 6px 22px; position: relative; border-bottom: 1px solid #f0f5fb; }
.pl-senarai-card__list li::before { content: "\f00c"; font-family: "Font Awesome 7 Free", "Font Awesome 5 Free", FontAwesome; font-weight: 900; position: absolute; left: 0; color: var(--apm-orange); font-size: 12px; }
.pl-senarai-card__img { width: 100%; border-radius: 10px; border: 1px solid #e3ecf5; }
/* ---- carta ---- */
.pl-carta { background: #fff; border: 1px solid #e3ecf5; border-radius: 14px; padding: 14px; text-align: center; box-shadow: 0 2px 10px rgba(13,42,80,.05); }
.pl-carta img { max-width: 100%; height: auto; border-radius: 8px; }
/* ---- lirik ---- */
.pl-lyric { background: #fff; border: 1px solid #e3ecf5; border-left: 4px solid var(--apm-orange); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(13,42,80,.05); }
.pl-lyric h3 { font-size: 16px; font-weight: 800; color: var(--apm-blue-dark); margin-bottom: 10px; }
.pl-lyric__body { font-size: 14px; color: #45566b; line-height: 1.8; white-space: normal; }
/* ---- hubungi ---- */
.pl-contact { background: #fff; border: 1px solid #e3ecf5; border-radius: 14px; padding: 22px; box-shadow: 0 2px 10px rgba(13,42,80,.05); }
.pl-contact__addr h3 { font-size: 15px; font-weight: 800; color: var(--apm-blue-dark); margin-bottom: 10px; }
.pl-contact__addr p { font-size: 14px; color: #45566b; line-height: 1.6; margin: 0 0 4px; }
.pl-contact__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pl-contact__chip {
display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
background: #eef4fb; color: var(--apm-blue-dark); font-size: 13px; font-weight: 700; text-decoration: none;
}
a.pl-contact__chip:hover { background: var(--apm-blue); color: #fff; }
/* ---- back nav ---- */
.pl-back { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e3ecf5; }
/* ---- landing cards ---- */
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.pl-card {
background: #fff; border: 1px solid #e3ecf5; border-radius: 16px; padding: 22px; text-decoration: none;
box-shadow: 0 2px 12px rgba(13,42,80,.06); transition: transform .15s ease, box-shadow .15s ease;
display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.pl-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--apm-blue), var(--apm-orange)); }
.pl-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(13,42,80,.14); text-decoration: none; }
.pl-card__badge {
align-self: flex-start; background: linear-gradient(135deg, var(--apm-blue), var(--apm-blue-dark));
color: #fff; font-weight: 800; padding: 6px 14px; border-radius: 999px; font-size: 14px; letter-spacing: 1px; margin-bottom: 14px;
}
.pl-card__name { font-size: 16px; font-weight: 800; color: #16324f; margin-bottom: 6px; line-height: 1.35; }
.pl-card__region { font-size: 13px; color: #6b7c93; margin-bottom: 10px; }
.pl-card__motto { font-size: 13px; font-style: italic; color: #8a6d3b; background: #fff8ec; border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; }
.pl-card__cta { margin-top: auto; font-size: 13.5px; font-weight: 800; color: var(--apm-blue); }
.pl-card:hover .pl-card__cta { color: var(--apm-orange); }
.pl-landing-note { margin-top: 24px; background: #eef4fb; border-radius: 12px; padding: 14px 18px; font-size: 13.5px; color: #45566b; }
.pl-landing-note a { color: var(--apm-blue); font-weight: 700; }
/* ---- Courses-page banner linking to /pusatlatihan ---- */
.pl-courses-banner {
display: flex; align-items: center; gap: 16px; margin: 16px 0 22px; padding: 16px 20px;
background: linear-gradient(120deg, var(--apm-blue) 0%, var(--apm-blue-dark) 62%, #0a3a80 100%);
border-radius: 16px; text-decoration: none; position: relative; overflow: hidden;
box-shadow: 0 4px 16px rgba(13,42,80,.18); transition: transform .15s ease, box-shadow .15s ease;
}
.pl-courses-banner::after {
content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px;
border-radius: 50%; background: rgba(255,255,255,.07);
}
.pl-courses-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,42,80,.28); text-decoration: none; }
.pl-courses-banner__icon {
flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--apm-orange); color: #fff; font-size: 21px; box-shadow: 0 3px 10px rgba(0,0,0,.25); position: relative; z-index: 1;
}
.pl-courses-banner__text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
.pl-courses-banner__text strong { color: #fff; font-size: 16px; font-weight: 800; line-height: 1.3; }
.pl-courses-banner__text em { color: rgba(255,255,255,.85); font-size: 13px; font-style: normal; margin-top: 2px; }
.pl-courses-banner__cta {
flex: 0 0 auto; color: #fff; font-size: 13.5px; font-weight: 800; background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.35); padding: 8px 16px; border-radius: 999px; white-space: nowrap;
position: relative; z-index: 1; transition: background .15s ease;
}
.pl-courses-banner:hover .pl-courses-banner__cta { background: var(--apm-orange); border-color: var(--apm-orange); }
/* ---- night mode ---- */
body.night-mode .pl-nav { background: #12233a; border-bottom-color: #1d3350; }
body.night-mode .pl-nav__link { background: #1d3350; color: #8fb8e8; }
body.night-mode .pl-nav__link:hover { background: var(--apm-blue); color: #fff; }
body.night-mode .pl-sec__title, body.night-mode .pl-tl-title, body.night-mode .pl-empty h3,
body.night-mode .pl-card__name, body.night-mode .pl-td-nama { color: #e3edf7; }
body.night-mode .pl-profil-card, body.night-mode .pl-tl-card, body.night-mode .pl-list-card,
body.night-mode .pl-fas-card, body.night-mode .pl-senarai-card, body.night-mode .pl-carta,
body.night-mode .pl-lyric, body.night-mode .pl-contact, body.night-mode .pl-card,
body.night-mode .pl-table-wrap, body.night-mode .pl-empty { background: #16273f; border-color: #23395a; }
body.night-mode .pl-profil-card p, body.night-mode .pl-tl-desc, body.night-mode .pl-list-card li,
body.night-mode .pl-senarai-card__list li, body.night-mode .pl-lyric__body,
body.night-mode .pl-contact__addr p, body.night-mode .pl-table tbody td { color: #b0c4d8; }
body.night-mode .pl-profil-card h3, body.night-mode .pl-list-card h3, body.night-mode .pl-fas-card__title,
body.night-mode .pl-senarai-card__title, body.night-mode .pl-lyric h3, body.night-mode .pl-contact__addr h3,
body.night-mode .pl-profil-card__icon { color: #8fb8e8; }
body.night-mode .pl-fas-card__title { color: #fff; }
body.night-mode .pl-table tbody tr:nth-child(even) { background: #1a2c47; }
body.night-mode .pl-table tbody tr:hover { background: #20355a; }
body.night-mode .pl-table tbody td { border-bottom-color: #23395a; }
body.night-mode .pl-sejarah-intro { background: #1a2c47; }
body.night-mode .pl-sejarah-intro li, body.night-mode .pl-sec__lead, body.night-mode .pl-sec__count { color: #b0c4d8; }
body.night-mode .pl-tl-year { color: #8fb8e8; }
body.night-mode .pl-tl-dot { border-color: #16273f; }
body.night-mode .pl-card__region { color: #8ba3bd; }
body.night-mode .pl-card__motto { background: #2a3a52; color: #d9c08a; }
body.night-mode .pl-contact__chip { background: #1d3350; color: #8fb8e8; }
body.night-mode .pl-landing-note { background: #1a2c47; color: #b0c4d8; }
body.night-mode .pl-search { background: #1a2c47; border-color: #2c4468; color: #e3edf7; }
body.night-mode .pl-back { border-top-color: #23395a; }
body.night-mode .pl-gallery__item { border-color: #23395a; }
body.night-mode .pl-senarai-card__list li { border-bottom-color: #23395a; }
body.night-mode .pl-courses-banner { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
/* ---- mobile ---- */
@media (max-width: 767px) {
.pl-hero { padding: 30px 0 26px; }
.pl-hero__title { font-size: 23px; }
.pl-nav { top: 52px; }
.pl-sec { scroll-margin-top: 110px; }
.pl-timeline::before { left: 12px; }
.pl-tl-item { flex-direction: column; gap: 0; padding-left: 34px; }
.pl-tl-year { text-align: left; padding-top: 0; margin-bottom: 4px; }
.pl-tl-dot { position: absolute; left: 6px; top: 6px; margin-top: 0; }
.pl-sec__count { display: none; }
.pl-courses-banner { gap: 12px; padding: 14px 16px; }
.pl-courses-banner__icon { width: 42px; height: 42px; font-size: 18px; }
.pl-courses-banner__text strong { font-size: 14.5px; }
.pl-courses-banner__text em { font-size: 12px; }
.pl-courses-banner__cta { display: none; }
}
/* ======================================================================
APM Siaga — Sertai APM / Kerjaya hub (/sertai)
Portal-styled volunteer recruitment + SPA careers. Server-rendered from
sertai_data.json.
====================================================================== */
.sr-wrap { margin-bottom: 40px; }
/* ---- hero ---- */
.sr-hero {
background: linear-gradient(135deg, var(--apm-blue) 0%, var(--apm-blue-dark) 70%, #0a3a80 100%);
color: #fff; padding: 42px 0 38px; position: relative; overflow: hidden;
}
.sr-hero::after {
content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
border-radius: 50%; background: rgba(255,255,255,.06);
}
.sr-hero__badge {
display: inline-block; background: var(--apm-orange); color: #fff; font-weight: 800;
padding: 6px 16px; border-radius: 999px; font-size: 13.5px; letter-spacing: .5px; margin-bottom: 12px;
box-shadow: 0 3px 10px rgba(0,0,0,.25); position: relative; z-index: 1;
}
.sr-hero__title { font-size: 30px; font-weight: 800; color: #fff; margin: 0 0 8px; position: relative; z-index: 1; }
.sr-hero__title span { color: var(--apm-orange); }
.sr-hero__sub { font-size: 15px; color: rgba(255,255,255,.9); margin: 0; position: relative; z-index: 1; }
/* ---- sticky section nav ---- */
.sr-nav {
position: sticky; top: 56px; z-index: 100; background: #fff; border-bottom: 1px solid #e3ecf5;
box-shadow: 0 2px 8px rgba(13,42,80,.06);
}
.sr-nav__inner { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 15px; }
.sr-nav__link {
flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
color: var(--apm-blue); background: #eef4fb; text-decoration: none; white-space: nowrap; transition: all .15s ease;
}
.sr-nav__link:hover { background: var(--apm-blue); color: #fff; }
/* ---- body / sections ---- */
.sr-body { padding-top: 26px; }
.sr-sec { margin-bottom: 38px; scroll-margin-top: 150px; }
.sr-sec__title {
display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800;
color: #16324f; margin-bottom: 18px;
}
.sr-sec__bar { display: inline-block; width: 5px; height: 24px; border-radius: 3px; background: var(--apm-orange); flex: 0 0 auto; }
.sr-sec__lead { font-size: 14px; color: #5a6b7f; margin-bottom: 16px; line-height: 1.65; }
/* ---- sukarelawan intro ---- */
.sr-intro {
display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid #e3ecf5;
border-radius: 16px; padding: 22px; box-shadow: 0 2px 10px rgba(13,42,80,.05);
}
.sr-intro__icon {
flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center;
justify-content: center; background: linear-gradient(135deg, var(--apm-orange), #ff8f00); color: #fff; font-size: 22px;
}
.sr-intro .sr-sec__lead { margin-bottom: 0; font-size: 14.5px; line-height: 1.7; color: #45566b; }
/* ---- syarat (numbered requirement cards) ---- */
.sr-syarat { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.sr-syarat__item {
background: #fff; border: 1px solid #e3ecf5; border-radius: 14px; padding: 18px;
display: flex; flex-direction: column; gap: 12px; box-shadow: 0 2px 10px rgba(13,42,80,.05);
transition: transform .15s ease, box-shadow .15s ease;
}
.sr-syarat__item:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(13,42,80,.1); }
.sr-syarat__no {
width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--apm-blue), var(--apm-blue-dark)); color: #fff; font-weight: 800; font-size: 17px;
}
.sr-syarat__text { font-size: 14px; color: #45566b; line-height: 1.55; margin: 0; }
/* ---- faedah (benefits grid) ---- */
.sr-faedah { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.sr-faedah__item {
display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #e3ecf5;
border-radius: 12px; padding: 14px 16px; font-size: 13.5px; color: #45566b; line-height: 1.5;
}
.sr-faedah__tick {
flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #e8f5e9; color: #2e7d32;
display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 1px;
}
/* ---- cara memohon (steps) ---- */
.sr-mohon { background: linear-gradient(135deg, #f4f8fd, #eef4fb); border-radius: 16px; padding: 24px; }
.sr-mohon__headline { font-size: 18px; font-weight: 800; color: var(--apm-blue-dark); margin-bottom: 18px; }
.sr-mohon__steps { display: flex; flex-direction: column; gap: 16px; }
.sr-mohon__step { display: flex; gap: 14px; align-items: flex-start; }
.sr-mohon__step-no {
flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--apm-orange); color: #fff;
font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.sr-mohon__step h4 { font-size: 15px; font-weight: 800; color: #16324f; margin-bottom: 4px; }
.sr-mohon__step p { font-size: 13.5px; color: #5a6b7f; margin: 0; line-height: 1.55; }
/* ---- kerjaya SPA (external link cards) ---- */
.sr-spa { display: flex; flex-direction: column; gap: 14px; }
.sr-spa__card {
display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #e3ecf5;
border-radius: 14px; padding: 18px 20px; text-decoration: none; box-shadow: 0 2px 10px rgba(13,42,80,.05);
transition: transform .15s ease, box-shadow .15s ease;
}
.sr-spa__card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,42,80,.14); text-decoration: none; }
.sr-spa__card--main { background: linear-gradient(120deg, var(--apm-blue) 0%, var(--apm-blue-dark) 62%, #0a3a80 100%); border: none; }
.sr-spa__icon {
flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center;
justify-content: center; background: #eef4fb; color: var(--apm-blue); font-size: 19px;
}
.sr-spa__card--main .sr-spa__icon { background: var(--apm-orange); color: #fff; }
.sr-spa__card h3 { font-size: 15.5px; font-weight: 800; color: var(--apm-blue-dark); margin-bottom: 3px; }
.sr-spa__card p { font-size: 13px; color: #5a6b7f; margin: 0; line-height: 1.5; }
.sr-spa__card--main h3 { color: #fff; }
.sr-spa__card--main p { color: rgba(255,255,255,.85); }
.sr-spa__go { margin-left: auto; flex: 0 0 auto; color: #8ba3bd; font-size: 15px; }
.sr-spa__card--main .sr-spa__go { color: rgba(255,255,255,.8); }
/* ---- hubungi (contact cards) ---- */
.sr-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.sr-contact__card {
background: #fff; border: 1px solid #e3ecf5; border-radius: 14px; padding: 22px 20px; text-align: center;
box-shadow: 0 2px 10px rgba(13,42,80,.05);
}
.sr-contact__icon {
width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center;
justify-content: center; background: #eef4fb; color: var(--apm-blue); font-size: 19px;
}
.sr-contact__card h3 { font-size: 14.5px; font-weight: 800; color: var(--apm-blue-dark); margin-bottom: 6px; }
.sr-contact__card p { font-size: 13px; color: #5a6b7f; margin: 0; line-height: 1.55; }
.sr-contact__card a { color: var(--apm-blue); font-weight: 700; }
/* ---- empty fallback ---- */
.sr-empty { text-align: center; background: #fff; border: 1px solid #e3ecf5; border-radius: 16px; padding: 40px 24px; }
.sr-empty i { font-size: 38px; color: #b9cde3; margin-bottom: 12px; }
.sr-empty h3 { font-size: 17px; font-weight: 800; color: #16324f; margin-bottom: 6px; }
.sr-empty p { font-size: 13.5px; color: #5a6b7f; margin-bottom: 16px; }
/* ---- back nav ---- */
.sr-back { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e3ecf5; }
/* ---- night mode ---- */
body.night-mode .sr-nav { background: #12233a; border-bottom-color: #1d3350; }
body.night-mode .sr-nav__link { background: #1d3350; color: #8fb8e8; }
body.night-mode .sr-nav__link:hover { background: var(--apm-blue); color: #fff; }
body.night-mode .sr-sec__title, body.night-mode .sr-empty h3, body.night-mode .sr-mohon__step h4 { color: #e3edf7; }
body.night-mode .sr-intro, body.night-mode .sr-syarat__item, body.night-mode .sr-faedah__item,
body.night-mode .sr-spa__card, body.night-mode .sr-contact__card, body.night-mode .sr-empty { background: #16273f; border-color: #23395a; }
body.night-mode .sr-intro .sr-sec__lead, body.night-mode .sr-syarat__text,
body.night-mode .sr-mohon__step p, body.night-mode .sr-spa__card p, body.night-mode .sr-contact__card p,
body.night-mode .sr-sec__lead { color: #b0c4d8; }
body.night-mode .sr-faedah__item { color: #b0c4d8; }
body.night-mode .sr-spa__card h3, body.night-mode .sr-contact__card h3 { color: #8fb8e8; }
body.night-mode .sr-spa__card--main h3 { color: #fff; }
body.night-mode .sr-spa__card--main p { color: rgba(255,255,255,.85); }
body.night-mode .sr-spa__icon { background: #1d3350; color: #8fb8e8; }
body.night-mode .sr-spa__card--main .sr-spa__icon { background: var(--apm-orange); color: #fff; }
body.night-mode .sr-mohon { background: #1a2c47; }
body.night-mode .sr-mohon__headline { color: #8fb8e8; }
body.night-mode .sr-faedah__tick { background: #1d3350; color: #81c784; }
body.night-mode .sr-contact__icon { background: #1d3350; color: #8fb8e8; }
body.night-mode .sr-back { border-top-color: #23395a; }
/* ---- mobile ---- */
@media (max-width: 767px) {
.sr-hero { padding: 30px 0 26px; }
.sr-hero__title { font-size: 23px; }
.sr-nav { top: 52px; }
.sr-sec { scroll-margin-top: 150px; }
.sr-intro { flex-direction: column; gap: 12px; }
.sr-spa__card { flex-wrap: wrap; }
.sr-spa__go { display: none; }
}
/* --------------------------------------------------------------------------
Profile page: mobile cleanup
The col-lg-4 sidebar stacks full-width on mobile, showing a bulky search
card + photos before the user's posts. Hide the search card (desktop-only
convenience) and tighten the photos grid for a cleaner mobile experience.
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
/* Hide the profile search card on mobile (form with input[name=query]) */
.profile-page .col-lg-4 form[action$="/search"],
.sg-offcanvas-mainbar form[action$="/search"] {
display: none;
}
/* Also hide the search card wrapper (parent .card) */
.sg-offcanvas-mainbar .col-lg-4 .card:has(form[action$="/search"]) {
display: none;
}
/* Compact the photos panel */
.sg-offcanvas-mainbar .col-lg-4 .panel-photos .card-body {
padding: 8px;
}
.sg-offcanvas-mainbar .col-lg-4 .panel-photos .col-3 {
padding: 2px;
}
.sg-offcanvas-mainbar .col-lg-4 .panel-photos img {
border-radius: 6px;
}
/* Reduce card spacing in the profile sidebar */
.sg-offcanvas-mainbar .col-lg-4 > .card {
margin-bottom: 8px;
}
.sg-offcanvas-mainbar .col-lg-4 > .card > .card-header {
padding: 10px 12px;
font-size: 13px;
}
.sg-offcanvas-mainbar .col-lg-4 > .card > .card-body {
padding: 10px 12px;
}
}
/* ===== MyKonnect: Edit button + field rows + edit modal ===== */
.apm-mk-editbtn {
position: relative; z-index: 1;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.3);
border-radius: 10px;
padding: 7px;
cursor: pointer;
color: #fff;
flex-shrink: 0;
transition: background .2s;
}
.apm-mk-editbtn:hover { background: rgba(255,255,255,.3); }
.apm-mk-editbtn svg { width: 16px; height: 16px; display: block; }
.apm-mk-fields {
display: flex;
flex-direction: column;
gap: 0;
}
.apm-mk-frow {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(0,0,0,.05);
font-size: 13px;
}
body.night-mode .apm-mk-frow { border-color: rgba(255,255,255,.06); }
.apm-mk-ficon {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--apm-blue);
opacity: .65;
}
.apm-mk-ficon svg { width: 100%; height: 100%; display: block; }
body.night-mode .apm-mk-ficon { color: #6cb3ff; }
.apm-mk-fval {
flex: 1;
color: #1a2d44;
word-break: break-word;
}
body.night-mode .apm-mk-fval { color: #d0dae6; }
.apm-mk-field-empty {
color: #aab5c0;
font-style: italic;
font-size: 12px;
}
/* Edit mode: inline inputs on card */
.apm-mk-frow--edit {
padding: 5px 0;
border-bottom: 1px solid rgba(0,119,255,.1);
}
.apm-mk-finput {
flex: 1;
padding: 6px 10px;
border: 1px solid #d0d7de;
border-radius: 6px;
font-size: 13px;
color: #1a2d44;
background: #f8f9fa;
transition: border-color .2s;
min-width: 0;
box-sizing: border-box;
}
body.night-mode .apm-mk-finput {
background: #3a3b3c;
border-color: #555;
color: #e4e6eb;
}
.apm-mk-finput:focus {
outline: none;
border-color: var(--apm-blue);
background: #fff;
box-shadow: 0 0 0 2px rgba(0,119,255,.12);
}
body.night-mode .apm-mk-finput:focus {
background: #2d2e2f;
}
select.apm-mk-finput {
appearance: auto;
}
.apm-mk-edit-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 12px;
margin-top: 4px;
border-top: 1px solid rgba(0,0,0,.06);
}
body.night-mode .apm-mk-edit-actions { border-color: rgba(255,255,255,.08); }
.apm-mk-btn--sm {
padding: 8px;
font-size: 0;
line-height: 0;
border-radius: 8px;
min-width: 36px;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.apm-mk-btn--sm svg { width: 18px; height: 18px; }
.apm-mk-btn--cancel {
background: #fee2e2;
color: #dc2626;
border-color: #fca5a5;
box-shadow: none;
backdrop-filter: none;
}
body.night-mode .apm-mk-btn--cancel {
background: #451a1a;
color: #fca5a5;
border-color: #7f1d1d;
}
.apm-mk-btn--cancel:hover {
background: #fecaca;
transform: none;
box-shadow: none;
}
body.night-mode .apm-mk-btn--cancel:hover { background: #5a1a1a; }
.apm-mk-btn--save {
background: #dcfce7;
color: #16a34a;
border-color: #86efac;
box-shadow: none;
backdrop-filter: none;
}
body.night-mode .apm-mk-btn--save {
background: #14351a;
color: #86efac;
border-color: #166534;
}
.apm-mk-btn--save:hover {
background: #bbf7d0;
transform: none;
box-shadow: none;
}
body.night-mode .apm-mk-btn--save:hover { background: #1a4520; }
/* =====================================================================
MYCONNECT EDIT PAGE (reuses bizcard classes, minimal additions)
===================================================================== */
.apm-mk-edit-page {
min-height: 60vh;
padding: 20px 16px;
}
.apm-mk-edit-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.15);
transition: background .2s;
position: relative;
z-index: 1;
flex-shrink: 0;
}
.apm-mk-edit-back:hover { background: rgba(255,255,255,.25); }
.apm-mk-finput {
flex: 1;
min-width: 0;
padding: 8px 12px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 8px;
font-size: 14px;
color: #1a2d44;
background: #f4f6f8;
transition: border-color .2s, box-shadow .2s;
box-sizing: border-box;
}
body.night-mode .apm-mk-finput {
background: #3a3b3c;
border-color: rgba(255,255,255,.1);
color: #e4e6eb;
}
.apm-mk-finput:focus {
outline: none;
border-color: var(--apm-blue);
background: #fff;
box-shadow: 0 0 0 3px rgba(0,119,255,.12);
}
body.night-mode .apm-mk-finput:focus { background: #2d2e2f; }
select.apm-mk-finput { appearance: auto; }
.apm-mk-edit-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 16px;
margin-top: 8px;
border-top: 1px solid rgba(0,0,0,.06);
}
body.night-mode .apm-mk-edit-actions { border-color: rgba(255,255,255,.08); }
@media (max-width: 480px) {
.apm-mk-edit-page { padding: 0; }
.apm-mk-bizcard[style] { border-radius: 0 !important; }
}