/* ============================================================
   Arrowprint Storefront — Modern UI layer (2026-08)
   Loaded after eshop-bundle + peach.css. Brand green #3aae4b.
   Generic polish first, then namespaced .ap- components.
   ============================================================ */

/* ---- Generic polish (applies to existing eShop markup) ---- */
.card {
    border: 1px solid #ecedef;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20,20,40,.04);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: 0 6px 20px rgba(20,20,40,.07); }
.card-header { border-bottom: 1px solid #f1f2f4; background: #fff; }

.btn, .button {
    border-radius: 9px !important;
    font-weight: 500;
    transition: transform .06s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active, .button:active { transform: translateY(1px); }
.btn-primary {
    background-color: #3aae4b !important;
    border-color: #3aae4b !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(58,174,75,.18);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #2e8c3c !important;
    border-color: #2e8c3c !important;
    box-shadow: 0 3px 8px rgba(58,174,75,.24);
}
.btn-outline-primary { color: #3aae4b !important; border-color: #3aae4b !important; }
.btn-outline-primary:hover { background-color: #3aae4b !important; color: #fff !important; }
.btn-success { box-shadow: 0 1px 2px rgba(40,167,69,.18); }

/* Selects: consistent height + custom chevron */
select.form-control, select.form-control-sm, .custom-select {
    height: 42px;
    padding: .45rem 2rem .45rem .8rem;
    border-radius: 9px;
    border-color: #e2e5ea;
    color: var(--ap-ink, #1f2733);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
select.form-control-sm { height: 34px; }
select.form-control:focus, .custom-select:focus { border-color: #3aae4b; box-shadow: 0 0 0 3px rgba(58,174,75,.14); }

/* Select2 (default theme) — mirror the .form-control input exactly */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
    height: 42px !important;
    border: 1px solid #e2e5ea !important;
    border-radius: 9px !important;
    background-color: #fff !important;
    display: block !important;
    padding: .45rem 2rem .45rem .8rem !important;
    /* clean chevron, same as .custom-select */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .7rem center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.6 !important;
    padding: 0 !important;
    color: var(--ap-ink) !important;
    font-size: .9rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #8a94a1 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none !important; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #3aae4b !important;
    box-shadow: 0 0 0 3px rgba(58,174,75,.14) !important;
}
.select2-container--default .select2-dropdown,
.select2-dropdown { border: 1px solid #e2e5ea; border-radius: 10px; box-shadow: var(--ap-shadow-lg); overflow: hidden; }
.select2-container--default .select2-results__option { padding: .5rem .8rem; font-size: .9rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ap-primary) !important;
    color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--ap-primary-soft) !important;
    color: var(--ap-primary-dark) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e2e5ea !important;
    border-radius: 8px !important;
    padding: .4rem .6rem !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #3aae4b !important; outline: none; box-shadow: 0 0 0 3px rgba(58,174,75,.14); }
.select2-container--default .select2-selection__clear { color: #a0a8b3; margin-right: .3rem; font-size: 1.1rem; }

/* One standard for all form fields inside modernized pages */
.ap-page .form-control,
.ap-page .custom-select,
.ap-card .form-control,
.ap-card .custom-select {
    height: 42px;
    border-radius: 9px !important;
    border: 1px solid #e2e5ea !important;
    box-shadow: none !important;
    background-color: #fff;
    font-size: .9rem;
    padding: .45rem .8rem;
    color: var(--ap-ink);
}
.ap-page select.form-control, .ap-page .custom-select,
.ap-card select.form-control, .ap-card .custom-select {
    padding-right: 2rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 40px !important;
}
.ap-page textarea.form-control,
.ap-card textarea.form-control { height: auto; min-height: 84px; padding: .6rem .8rem; }
.ap-page .form-control-sm, .ap-card .form-control-sm { height: 36px; font-size: .85rem; }
.ap-page .form-control:focus,
.ap-page .custom-select:focus,
.ap-card .form-control:focus,
.ap-card .custom-select:focus {
    border-color: #3aae4b !important;
    box-shadow: 0 0 0 3px rgba(58,174,75,.14) !important;
}

.form-control, .form-control-sm {
    border-radius: 9px;
    border-color: #e2e5ea;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-control-sm:focus {
    border-color: #3aae4b;
    box-shadow: 0 0 0 3px rgba(58,174,75,.14);
}

.alert { border-radius: 10px; border: 1px solid transparent; padding: .8rem 1rem; }
.badge { font-weight: 500; padding: .34em .6em; border-radius: 6px; }

.breadcrumb { background: transparent; padding: .35rem 0; font-size: .85rem; }
.modal-content { border: none; border-radius: 14px; box-shadow: 0 12px 40px rgba(20,20,40,.15); }

/* ============================================================
   AP Storefront Design System — reusable modern components.
   Class prefix: .ap-  (namespaced, won't clash with eShop)
   ============================================================ */
:root {
    --ap-primary: #3aae4b;
    --ap-primary-dark: #2e8c3c;
    --ap-primary-soft: #eaf7ec;
    --ap-ink: #1f2733;
    --ap-muted: #6b7686;
    --ap-line: #e9ecf1;
    --ap-bg: #f5f7fa;
    --ap-radius: 14px;
    --ap-radius-sm: 10px;
    --ap-shadow: 0 2px 10px rgba(23,33,51,.06);
    --ap-shadow-lg: 0 10px 30px rgba(23,33,51,.10);
}

/* Page shell + header */
.ap-page { background: var(--ap-bg); min-height: 60vh; padding: 1.75rem 0 3rem; }
.ap-container { max-width: 1680px; width: 100%; margin: 0 auto; padding: 0 16px; }
.ap-page-head { margin-bottom: 1.5rem; }
.ap-page-head h1, .ap-page-head h2 { font-weight: 700; color: var(--ap-ink); margin: 0 0 .25rem; letter-spacing: -.4px; font-size: 1.7rem; }
.ap-page-head .ap-sub { color: var(--ap-muted); font-size: .92rem; margin: 0; }
.ap-crumbs { font-size: .82rem; color: var(--ap-muted); margin-bottom: .35rem; }
.ap-crumbs a { color: var(--ap-muted); }
.ap-crumbs a:hover { color: var(--ap-primary); text-decoration: none; }
.ap-crumbs .sep { margin: 0 .4rem; opacity: .5; }

/* Category / service tiles */
.ap-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem; }
.ap-cat-card {
    position: relative; display: block; background: #fff; border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius); overflow: hidden; text-decoration: none; color: var(--ap-ink);
    box-shadow: var(--ap-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.ap-cat-card:hover { transform: translateY(-4px); box-shadow: var(--ap-shadow-lg); border-color: #d8ecdb; color: var(--ap-ink); text-decoration: none; }
.ap-cat-thumb { aspect-ratio: 4/3; background: #f2f4f7; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ap-cat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ap-cat-card:hover .ap-cat-thumb img { transform: scale(1.06); }
.ap-cat-body { padding: .8rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ap-cat-name { font-weight: 600; font-size: .98rem; margin: 0; line-height: 1.25; color: var(--ap-ink); }
.ap-cat-go { color: var(--ap-primary); font-size: .9rem; flex: 0 0 auto; opacity: 0; transform: translateX(-4px); transition: .18s; }
.ap-cat-card:hover .ap-cat-go { opacity: 1; transform: translateX(0); }

/* Product cards */
.ap-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.ap-prod-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius); overflow: hidden; box-shadow: var(--ap-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.ap-prod-card:hover { transform: translateY(-4px); box-shadow: var(--ap-shadow-lg); border-color: #d8ecdb; }
.ap-prod-thumb { position: relative; aspect-ratio: 1/1; background: #f2f4f7; overflow: hidden; display: block; }
.ap-prod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ap-prod-card:hover .ap-prod-thumb img { transform: scale(1.05); }
.ap-prod-badge { position: absolute; top: 10px; left: 10px; background: var(--ap-primary); color: #fff; font-size: .68rem; font-weight: 600; padding: .25em .55em; border-radius: 6px; letter-spacing: .3px; }
.ap-prod-body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.ap-prod-name { font-weight: 600; font-size: .98rem; color: var(--ap-ink); margin: 0 0 .3rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.55em; }
.ap-prod-name a { color: inherit; text-decoration: none; }
.ap-prod-name a:hover { color: var(--ap-primary); }
.ap-prod-desc { font-size: .82rem; color: var(--ap-muted); margin: 0 0 .7rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-prod-meta { font-size: .78rem; color: var(--ap-muted); margin-bottom: .7rem; }
.ap-prod-foot { margin-top: auto; }
.ap-btn-order { display: block; width: 100%; text-align: center; background: var(--ap-primary); color: #fff; border: none; border-radius: 9px; padding: .55rem .75rem; font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .16s ease, box-shadow .16s ease; }
.ap-btn-order:hover { background: var(--ap-primary-dark); color: #fff; text-decoration: none; box-shadow: 0 4px 12px rgba(58,174,75,.28); }

/* Generic content card / order card */
.ap-card { background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow); }
.ap-card + .ap-card { margin-top: 1rem; }
.ap-card-pad { padding: 1.1rem 1.15rem; }

.ap-order-card { background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow); overflow: hidden; margin-bottom: 1.15rem; transition: box-shadow .18s ease; }
.ap-order-card:hover { box-shadow: var(--ap-shadow-lg); }
.ap-order-top { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: flex-start; padding: .95rem 1.1rem; border-bottom: 1px solid var(--ap-line); background: #fcfdfe; }
.ap-order-id { font-size: .78rem; color: var(--ap-muted); }
.ap-order-id strong { color: var(--ap-ink); font-size: .95rem; }
.ap-order-body { padding: 1rem 1.1rem; display: flex; gap: 1rem; }
.ap-order-thumb { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #f2f4f7; }
.ap-order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ap-order-total { font-size: 1.15rem; font-weight: 700; color: var(--ap-ink); }

/* Status badges */
.ap-status { display: inline-flex; align-items: center; gap: .35em; font-size: .74rem; font-weight: 600; padding: .32em .7em; border-radius: 999px; line-height: 1.4; text-transform: capitalize; }
.ap-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ap-status-new      { background: #eef4ff; color: #2b59c3; }
.ap-status-progress { background: #fff3e0; color: #b26a00; }
.ap-status-done     { background: var(--ap-primary-soft); color: var(--ap-primary-dark); }
.ap-status-cancel   { background: #fdecec; color: #c0392b; }
.ap-status-muted    { background: #eef1f4; color: #5c6673; }

/* Namespaced action buttons */
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; border-radius: 9px; padding: .5rem .95rem; font-weight: 600; font-size: .88rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: all .16s ease; }
.ap-btn-primary { background: var(--ap-primary); color: #fff; }
.ap-btn-primary:hover { background: var(--ap-primary-dark); color: #fff; text-decoration: none; }
.ap-btn-outline { background: #fff; color: var(--ap-primary); border-color: var(--ap-primary); }
.ap-btn-outline:hover { background: var(--ap-primary); color: #fff; text-decoration: none; }
.ap-btn-ghost { background: #f3f5f8; color: var(--ap-ink); }
.ap-btn-ghost:hover { background: #e9edf2; color: var(--ap-ink); text-decoration: none; }
.ap-btn-danger-outline { background: #fff; color: #c0392b; border-color: #e6b0aa; }
.ap-btn-danger-outline:hover { background: #c0392b; color: #fff; border-color: #c0392b; text-decoration: none; }
.ap-btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.ap-btn-block { display: flex; width: 100%; }
.ap-btn:disabled, .ap-btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Qty stepper */
.ap-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--ap-line); border-radius: 9px; overflow: hidden; background: #fff; }
.ap-stepper button { border: none; background: #f5f7fa; color: var(--ap-ink); width: 34px; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .14s ease; }
.ap-stepper button:hover { background: var(--ap-primary-soft); color: var(--ap-primary-dark); }
.ap-stepper input { border: none; width: 54px; text-align: center; font-weight: 600; color: var(--ap-ink); background: #fff; }
.ap-stepper input:focus { outline: none; }

/* Sticky summary panel */
.ap-summary { position: sticky; top: 90px; background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow); padding: 1.2rem 1.25rem; }
.ap-summary h5 { font-weight: 700; color: var(--ap-ink); margin-bottom: 1rem; }
.ap-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--ap-muted); margin-bottom: .6rem; }
.ap-summary-row .val { color: var(--ap-ink); font-weight: 600; }
.ap-summary-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .85rem; margin-top: .35rem; border-top: 1px dashed var(--ap-line); }
.ap-summary-total .lbl { font-weight: 700; color: var(--ap-ink); }
.ap-summary-total .amt { font-weight: 800; font-size: 1.4rem; color: var(--ap-primary-dark); }

/* Dashboard stat tiles */
.ap-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.ap-stat {
    display: flex; align-items: center; gap: .85rem;
    background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow); padding: 1rem 1.1rem; text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.ap-stat:hover { transform: translateY(-3px); box-shadow: var(--ap-shadow-lg); border-color: #d8ecdb; text-decoration: none; }
.ap-stat-ico { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.ap-stat-ico.ico-primary { background: #eef4ff; color: #2b59c3; }
.ap-stat-ico.ico-success { background: var(--ap-primary-soft); color: var(--ap-primary-dark); }
.ap-stat-ico.ico-warn { background: #fff3e0; color: #b26a00; }
.ap-stat-ico.ico-info { background: #e8f4fc; color: #0d84c9; }
.ap-stat-num { font-size: 1.5rem; font-weight: 800; color: var(--ap-ink); line-height: 1; }
.ap-stat-lbl { font-size: .8rem; color: var(--ap-muted); margin-top: .15rem; }

/* Welcome / wallet strip */
.ap-welcome { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.ap-wallet-box { background: linear-gradient(135deg, var(--ap-primary-soft), #f2fbf4); border: 1px solid #d3ecd8; border-radius: var(--ap-radius); padding: 1rem 1.25rem; text-align: right; min-width: 210px; }
.ap-wallet-box .amt { font-size: 1.5rem; font-weight: 800; color: var(--ap-primary-dark); }

/* Empty state */
.ap-empty { text-align: center; padding: 3rem 1.5rem; background: #fff; border: 1px dashed var(--ap-line); border-radius: var(--ap-radius); }
.ap-empty .ap-empty-ico { font-size: 2.6rem; color: #cbd3dd; margin-bottom: .6rem; }
.ap-empty h5 { font-weight: 700; color: var(--ap-ink); }
.ap-empty p { color: var(--ap-muted); margin-bottom: 1.1rem; }

/* Chips / pills */
.ap-chip { display: inline-flex; align-items: center; gap: .35em; font-size: .76rem; font-weight: 500; padding: .28em .65em; border-radius: 999px; background: #f0f3f6; color: var(--ap-muted); }
.ap-chip-ok { background: var(--ap-primary-soft); color: var(--ap-primary-dark); }
.ap-chip-warn { background: #fff3e0; color: #b26a00; }
.ap-chip-info { background: #eef4ff; color: #2b59c3; }

/* Utility */
.ap-divider { height: 1px; background: var(--ap-line); border: 0; margin: 1rem 0; }
.ap-muted { color: var(--ap-muted) !important; }

/* Table cards: trim the wide side padding so the table fills the card */
.ap-card-pad:has(> table[data-toggle="table"]),
.ap-card-pad:has(> .table-responsive),
.ap-card-pad:has(.fixed-table-container) { padding-left: .6rem; padding-right: .6rem; padding-top: .7rem; }
.ap-card-pad > .table-responsive { margin: 0; }

/* Bootstrap-table toolbar: search left, buttons right (float-based) */
.fixed-table-toolbar { padding: 0 0 .6rem; margin: 0; min-height: 0; overflow: hidden; }
.fixed-table-toolbar::after { content: ''; display: block; clear: both; }
.fixed-table-toolbar .search { float: left !important; margin: 0 !important; }
.fixed-table-toolbar .search input,
.fixed-table-toolbar .search .form-control,
.fixed-table-toolbar input.search-input {
    width: 240px !important;
    max-width: 60vw;
    height: 34px !important;
    padding: .3rem .7rem !important;
    font-size: .86rem !important;
    border-radius: 8px !important;
    display: inline-block !important;
}
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .columns,
.fixed-table-toolbar .columns-right,
.fixed-table-toolbar .btn-group,
.fixed-table-toolbar .keep-open { float: right !important; margin: 0 0 0 .4rem !important; }
.fixed-table-toolbar .btn {
    height: 34px;
    padding: .28rem .55rem !important;
    border-radius: 8px !important;
    line-height: 1.2;
}
@media (max-width: 575px) {
    .fixed-table-toolbar .search { float: none !important; display: block; width: 100%; margin-top: .4rem !important; }
    .fixed-table-toolbar .search input,
    .fixed-table-toolbar .search .form-control { width: 100% !important; max-width: 100%; }
}

/* Rich-text (CMS) content pages: about / terms / privacy */
.ap-rte { color: #3a4453; line-height: 1.75; font-size: .96rem; }
.ap-rte h1, .ap-rte h2, .ap-rte h3, .ap-rte h4 { color: var(--ap-ink); font-weight: 700; margin: 1.4rem 0 .6rem; }
.ap-rte h1 { font-size: 1.5rem; } .ap-rte h2 { font-size: 1.3rem; } .ap-rte h3 { font-size: 1.12rem; }
.ap-rte p { margin-bottom: 1rem; }
.ap-rte a { color: var(--ap-primary-dark); text-decoration: underline; }
.ap-rte ul, .ap-rte ol { padding-left: 1.3rem; margin-bottom: 1rem; }
.ap-rte li { margin-bottom: .4rem; }
.ap-rte img { max-width: 100%; height: auto; border-radius: var(--ap-radius-sm); }
.ap-rte table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.ap-rte th, .ap-rte td { border: 1px solid var(--ap-line); padding: .5rem .7rem; }

/* Add Money page */
#faq_sec .toggle-container { justify-content: center; margin: .5rem 0 1.5rem; }
#faq_sec #manualPaymentSection .accordion {
    background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow); padding: 1.5rem;
}
#faq_sec .textall { color: var(--ap-ink); font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; }
#faq_sec .detailall { color: var(--ap-muted); line-height: 1.7; }

/* Auth modal (Login / Join Us) — CSS-only modernization */
.auth-modal { border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 20px 60px rgba(20,20,40,.25) !important; }
.auth-modal header {
    display: flex !important; border-bottom: 1px solid var(--ap-line) !important;
    background: #fff !important; padding: 0 !important; height: auto !important; position: static !important;
}
.auth-modal header a {
    flex: 1 1 0; text-align: center; padding: 1rem .5rem !important; font-weight: 700; font-size: 1rem;
    color: var(--ap-muted) !important; background: #fff !important; border: none !important;
    text-decoration: none !important; transition: color .15s, background .15s;
}
.auth-modal header a:hover { color: var(--ap-primary-dark) !important; }
.auth-modal header a.active {
    color: var(--ap-primary-dark) !important; background: var(--ap-primary-soft) !important;
    box-shadow: inset 0 -3px 0 var(--ap-primary);
}
.auth-modal section { padding: 1.6rem 1.5rem !important; }
.auth-modal .input-group { display: block !important; margin-bottom: 1rem; }
.auth-modal .form-control,
.auth-modal .form-input,
.auth-modal input[type="text"],
.auth-modal input[type="password"],
.auth-modal input[type="number"] {
    height: 46px !important; width: 100% !important;
    border: 1px solid #e2e5ea !important; border-radius: 9px !important;
    padding: .5rem .9rem !important; font-size: .95rem !important;
    box-shadow: none !important; background: #fff !important; margin-bottom: 0 !important;
}
.auth-modal .form-control:focus,
.auth-modal .form-input:focus,
.auth-modal input:focus {
    border-color: var(--ap-primary) !important; box-shadow: 0 0 0 3px rgba(58,174,75,.14) !important; outline: none !important;
}
.auth-modal footer { display: flex !important; gap: .75rem; padding: .25rem 0 0 !important; border: none !important; background: transparent !important; position: static !important; }
.auth-modal footer button,
.auth-modal button[type="submit"],
.auth-modal .submit_btn,
.auth-modal button[type="button"] {
    flex: 1 1 0; border-radius: 9px !important; padding: .7rem 1rem !important;
    font-weight: 600 !important; border: none !important; font-size: .95rem; width: auto !important;
}
.auth-modal footer button[data-izimodal-close],
.auth-modal button[data-izimodal-close] { background: #eef1f4 !important; color: var(--ap-ink) !important; }
.auth-modal .submit_btn,
.auth-modal button[type="submit"] { background: var(--ap-primary) !important; color: #fff !important; }
.auth-modal .submit_btn:hover,
.auth-modal button[type="submit"]:hover { background: var(--ap-primary-dark) !important; }

/* Contact cards */
.ap-contact-ico { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: var(--ap-primary-soft); color: var(--ap-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-right: 1rem; }

/* FAQ accordion */
.ap-faq .ap-card { overflow: hidden; }
.ap-faq .ap-faq-btn { padding: .95rem 1.1rem; font-weight: 600; color: var(--ap-ink); text-decoration: none; white-space: normal; }
.ap-faq .ap-faq-btn:hover { color: var(--ap-primary-dark); text-decoration: none; }
.ap-faq .ap-faq-btn .fa-angle-down { transition: transform .2s ease; flex: 0 0 auto; margin-left: 1rem; }
.ap-faq .ap-faq-btn[aria-expanded="true"] { color: var(--ap-primary-dark); }
.ap-faq .ap-faq-btn[aria-expanded="true"] .fa-angle-down { transform: rotate(180deg); }
.ap-faq .card-body { border-top: 1px solid var(--ap-line); }

/* Header: "All Service" dropdown removed — nav uses full width */
.header-bottom .col-nav-full { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; }
.header-bottom .col-nav-full .menu-main-navigation-container,
.header-bottom .col-nav-full .main-nav { width: 100%; }
.header-bottom .col-nav-full .main-nav > ul { justify-content: flex-start; padding-left: 0; }

/* Home "Our Services" — modern band */
.ap-home-services { background: linear-gradient(180deg, #ffffff 0%, var(--ap-bg) 100%); padding: 2.25rem 0 2.75rem; }
.ap-home-services .ap-page-head h2 { position: relative; display: inline-block; }
.ap-home-services .ap-page-head h2::after { content: ''; display: block; width: 54px; height: 3px; border-radius: 3px; background: var(--ap-primary); margin: .55rem auto 0; }

/* Featured product sections (home carousels) + favorites product-grid */
.featured-section-title h1, .featured-section-title h2, .featured-section-title h3, .featured-section-title .head-title { font-weight: 700; color: var(--ap-ink); letter-spacing: -.3px; }
.featured-section-view-more { color: var(--ap-primary-dark) !important; font-weight: 600; font-size: .85rem; }
.featured-section-view-more:hover { color: var(--ap-primary) !important; }
.product-style-default, .product-section { border-radius: var(--ap-radius); }
.product-grid {
    background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius);
    overflow: hidden; box-shadow: var(--ap-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
    margin: .4rem;
}
.product-grid:hover { transform: translateY(-4px); box-shadow: var(--ap-shadow-lg); border-color: #d8ecdb; }
.product-grid .product-image img.pic-1 { transition: transform .3s ease; }
.product-grid:hover .product-image img.pic-1 { transform: scale(1.05); }
.product-grid .product-content { padding: .75rem .85rem 1rem; }
.product-grid .product-content .title { font-size: .95rem; font-weight: 600; margin-bottom: .35rem; }
.product-grid .product-content .title a { color: var(--ap-ink); text-decoration: none; }
.product-grid .product-content .title a:hover { color: var(--ap-primary-dark); }
.product-grid .product-content .price { color: var(--ap-primary-dark); font-weight: 700; }
.product-grid .add-to-cart, .product-grid .add_to_cart.add-to-cart {
    display: inline-block; margin-top: .6rem; background: var(--ap-primary); color: #fff !important;
    border-radius: 8px; padding: .45rem .9rem; font-weight: 600; font-size: .85rem; text-decoration: none; transition: background .16s;
}
.product-grid .add-to-cart:hover { background: var(--ap-primary-dark); color: #fff !important; }
.product-grid .add-favorite .add-to-fav-btn { background: #fff; border-radius: 50%; width: 34px; height: 34px; box-shadow: var(--ap-shadow); }

/* My-account sidebar (shared partial) — Gurukul-style rail */
.my-account-tab {
    display: block !important;
    align-self: flex-start;
    border: 1px solid var(--ap-line) !important;
    border-radius: var(--ap-radius) !important;
    box-shadow: var(--ap-shadow) !important;
    padding: .4rem !important;
}
.my-account-tab .ap-side-section {
    list-style: none;
    font-size: .66rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
    color: #9aa4b1; padding: .5rem .7rem .35rem;
}
.my-account-tab .nav-item { margin: 0 !important; }
.my-account-tab .nav-link {
    display: block; padding: 0 !important; margin: 1px 0;
    border-radius: 10px !important; text-decoration: none; position: relative;
    transition: background .15s ease;
}
.my-account-tab .ap-side-item {
    display: flex; align-items: center;
    padding: .5rem .65rem; gap: .65rem;
}
.my-account-tab .ap-side-ico {
    flex: 0 0 36px; width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f2f4f7; border-radius: 10px; color: var(--ap-muted);
    font-size: 1rem; transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.my-account-tab .ap-side-label {
    font-size: .92rem; font-weight: 500; color: var(--ap-ink);
    letter-spacing: 0; text-transform: none; flex: 1 1 auto;
}
.my-account-tab .ap-side-badge {
    background: #e5484d; color: #fff; font-size: .68rem; font-weight: 600;
    min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}
.my-account-tab .nav-link:hover { background: #f5f7fa; }
.my-account-tab .nav-link:hover .ap-side-ico { background: var(--ap-primary-soft); color: var(--ap-primary-dark); }

/* Active — bolder Gurukul highlight: green tint, left accent bar, elevated icon */
.my-account-tab .nav-link.active {
    background: linear-gradient(90deg, var(--ap-primary-soft), #f4fbf5);
    box-shadow: inset 0 0 0 1px #d3ecd8;
}
.my-account-tab .nav-link.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 60%; border-radius: 0 4px 4px 0; background: var(--ap-primary);
}
.my-account-tab .nav-link.active .ap-side-ico {
    background: var(--ap-primary); color: #fff; box-shadow: 0 4px 10px rgba(58,174,75,.35);
}
.my-account-tab .nav-link.active .ap-side-label { color: var(--ap-primary-dark); font-weight: 700; }
.my-account-tab .ap-side-sep { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--ap-line); }

/* ============================================================
   Product order form (place-order page) — CSS-only modernization,
   scoped to .product-page-content. No markup/JS changes.
   ============================================================ */
.product-page-content { background: var(--ap-bg); border-radius: var(--ap-radius); padding: 1.5rem 1rem !important; margin-top: 1rem; }
.product-page-content .product-page-details,
.product-page-content .product-preview-image-section-md {
    background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow); padding: 1.4rem 1.5rem;
}
.product-page-content .product-preview-image-section-md { padding: 1.2rem; }
@media (min-width: 768px) { .product-page-content .product-page-details { margin-right: .75rem; } }

.product-page-content .product-title {
    font-weight: 700; color: var(--ap-ink); font-size: 1.05rem; letter-spacing: .3px;
    text-transform: uppercase; padding-bottom: .6rem; margin-bottom: 1rem; border-bottom: 2px solid var(--ap-primary-soft);
}

/* Product header (name / price / description) */
.product-page-content .ap-prod-head { border-bottom: 1px solid var(--ap-line); padding-bottom: 1rem; margin-bottom: 1.1rem; }
.product-page-content .ap-prod-title { font-size: 1.55rem; font-weight: 800; color: var(--ap-ink); margin: 0 0 .45rem; letter-spacing: -.4px; line-height: 1.2; }
.product-page-content .ap-prod-price-head { font-size: 1.3rem; font-weight: 800; color: var(--ap-primary-dark); margin-bottom: .5rem; }
.product-page-content .ap-prod-price-head i { font-style: normal; }
.product-page-content .ap-prod-desc-head { color: var(--ap-muted); font-size: .9rem; line-height: 1.6; margin: 0; }

/* Two-column layout via our own flex wrapper (theme grid is broken) */
.product-page-content { max-width: 1680px; width: 100%; margin: 1.25rem auto; padding-left: 16px !important; padding-right: 16px !important; }
.ap-pd-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
}
.ap-pd-flex > .product-preview-image-section-md {
    flex: 1 1 42% !important;
    max-width: 44% !important;
    min-width: 0 !important;
    padding: 0 !important;
}
.ap-pd-flex > .product-page-details {
    flex: 1 1 52% !important;
    max-width: 54% !important;
    min-width: 0 !important;
    /* keep the card's own inner padding — do NOT zero it */
    padding: 1.4rem 1.5rem !important;
}
/* 3-column layout on wide screens: details(24%) | selections | file+actions */
@media (min-width: 1100px) {
    .ap-pd-flex { gap: 1.25rem; }
    .ap-pd-flex > .product-preview-image-section-md { flex: 0 0 24% !important; max-width: 24% !important; }
    .ap-pd-flex > .product-page-details { flex: 0 0 74% !important; max-width: 74% !important; }
    .product-page-details.ap-form-split {
        display: flex !important; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;
    }
    .ap-form-split > .ap-col-select { flex: 1 1 47%; max-width: 48%; min-width: 0; }
    .ap-form-split > .ap-col-file   { flex: 1 1 47%; max-width: 48%; min-width: 0; }
}
@media (max-width: 767px) {
    .ap-pd-flex > .product-preview-image-section-md,
    .ap-pd-flex > .product-page-details {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}
.product-page-content .ap-product-media { background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow); padding: 1rem; text-align: center; }
.product-page-content .ap-product-img { width: 100%; max-height: 440px; object-fit: contain; border-radius: var(--ap-radius-sm); background: #f7f8fa; }
.product-page-content .ap-product-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; justify-content: center; }
.product-page-content .ap-thumb { width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--ap-line); border-radius: 8px; cursor: pointer; transition: border-color .15s, transform .15s; }
.product-page-content .ap-thumb:hover { border-color: var(--ap-primary); transform: translateY(-2px); }
.product-page-content .ap-product-detailbox { background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow); padding: 1.2rem 1.3rem; margin-top: 1rem; }
.product-page-content .ap-spec-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.product-page-content .ap-spec-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--ap-line); font-size: .9rem; }
.product-page-content .ap-spec-list li:last-child { border-bottom: none; }
.product-page-content .ap-spec-list li span { color: var(--ap-muted); }
.product-page-content .ap-spec-list li strong { color: var(--ap-ink); text-align: right; }
.product-page-content .ap-detail-title { font-weight: 700; color: var(--ap-ink); font-size: 1rem; margin-bottom: .6rem; padding-top: .3rem; }
.product-page-content .ap-product-detailbox .ap-rte { font-size: .88rem; line-height: 1.7; color: #3a4453; }

/* Fix the empty-looking "Select Details" bordered label → clean subheading */
.product-page-content label.headingview.borderview {
    display: block; border: none !important; padding: 0 0 .4rem !important;
    border-bottom: 2px solid var(--ap-primary-soft) !important;
    font-weight: 700; color: var(--ap-ink); font-size: .95rem;
    margin: 1.1rem 0 .7rem !important; text-transform: uppercase; letter-spacing: .3px;
}
/* Taller notes textarea (was rows=2, tiny) */
.product-page-content textarea.form-control { min-height: 92px !important; height: auto !important; resize: vertical; }
/* Left panel cards flow */
.ap-pd-flex > .product-preview-image-section-md .ap-product-detailbox { margin-top: 1rem; }

/* Compact the order form so it isn't so long */
.product-page-content .product-page-details .form-group { margin-bottom: .7rem; }
.product-page-content .product-page-details .headingview { display: block; margin: .55rem 0 .3rem; }
.product-page-content .num-block { margin: .5rem 0 !important; padding: .55rem .8rem !important; }
.product-page-content .alert { padding: .6rem .8rem; margin: .5rem 0; }

/* View Cart button */
.product-page-content #view_cart_btn { display: inline-block; text-align: center; background: #fff !important; color: var(--ap-primary) !important; border: 1.5px solid var(--ap-primary) !important; }
.product-page-content #view_cart_btn:hover { background: var(--ap-primary) !important; color: #fff !important; text-decoration: none; }
.product-page-content .headingview,
.product-page-content label.small,
.product-page-content .pr-title h4,
.product-page-content h4 { font-weight: 600; color: var(--ap-ink); font-size: .95rem; }

/* Quantity block */
.product-page-content .num-block { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #f8fafc; border: 1px solid var(--ap-line); border-radius: var(--ap-radius-sm); padding: .75rem 1rem; margin: .5rem 0; }
.product-page-content .num-block .pr-title h4 { margin: 0; }
.product-page-content .num-in { display: inline-flex; align-items: stretch; border: 1px solid var(--ap-line); border-radius: 9px; overflow: hidden; background: #fff; }
.product-page-content .num-in .minus,
.product-page-content .num-in .plus { display: inline-flex; align-items: center; justify-content: center; width: 38px; cursor: pointer; background: #f1f4f7; color: var(--ap-ink); font-size: 1.1rem; user-select: none; transition: background .14s; }
.product-page-content .num-in .minus:hover,
.product-page-content .num-in .plus:hover { background: var(--ap-primary-soft); color: var(--ap-primary-dark); }
.product-page-content .num-in .minus::before { content: '−'; }
.product-page-content .num-in .plus::before { content: '+'; }
.product-page-content .in-num { border: none !important; width: 90px; text-align: center; font-weight: 700; font-size: 1rem; color: var(--ap-ink); background: #fff; box-shadow: none !important; }
.product-page-content .in-num:focus { outline: none; }
.product-page-content .num-block > p { color: var(--ap-muted); font-size: .8rem; margin: 0; width: 100%; }

/* Price */
.product-page-content .price,
.product-page-content #price { font-size: 1.25rem; font-weight: 800; color: var(--ap-primary-dark); }
.product-page-content .striped-price { font-size: .95rem; }

/* Option groups: clear label-above-buttons layout, divided per group */
.product-page-content .prices {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 0 1rem !important;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--ap-line);
}
.product-page-content .prices .pr-title { order: -1 !important; margin: 0 0 .55rem !important; float: none !important; width: auto !important; }
.product-page-content .prices .pr-title h4 {
    margin: 0 !important; padding: 0 !important;
    font-size: .82rem !important; font-weight: 700 !important; line-height: 1.3 !important;
    text-transform: uppercase; letter-spacing: .4px; color: var(--ap-ink) !important;
}
.product-page-content .prices > div:not(.pr-title) { width: 100%; float: none !important; margin: 0 !important; }

/* Variant attribute swatches / buttons */
.product-page-content .btn-group { display: flex !important; flex-wrap: wrap !important; gap: .5rem !important; float: none !important; width: auto !important; }
.product-page-content .btn-group > .btn,
.product-page-content .btn-group > label.btn {
    border: 1.5px solid var(--ap-line) !important; border-radius: 9px !important; background: #fff !important;
    color: var(--ap-ink) !important; font-weight: 600; padding: .45rem .9rem; margin: 0 !important; box-shadow: none !important;
    transition: border-color .15s, background .15s, color .15s;
}
.product-page-content .btn-group > .btn:hover,
.product-page-content .btn-group > label.btn:hover { border-color: var(--ap-primary) !important; color: var(--ap-primary-dark) !important; }
.product-page-content .btn-group > .active,
.product-page-content .btn-group > label.btn.active { background: var(--ap-primary) !important; border-color: var(--ap-primary) !important; color: #fff !important; }
.product-page-content .fullCircle { border-radius: 50% !important; width: 40px; height: 40px; padding: 0 !important; }

/* Offer box */
.product-page-content #offer_box,
.product-page-content .alert-success { background: var(--ap-primary-soft); border: 1px solid #cfead4; color: var(--ap-primary-dark); border-radius: var(--ap-radius-sm); }

/* Action buttons */
.product-page-content .buttons { border-radius: 9px !important; font-weight: 600; padding: .7rem 1rem; width: 100%; text-align: center; margin-top: .6rem !important; border: 1.5px solid transparent; transition: all .16s ease; }
.product-page-content #add_cart { background: var(--ap-primary) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(58,174,75,.25); }
.product-page-content #add_cart:hover { background: var(--ap-primary-dark) !important; }
.product-page-content #save_draft_btn { background: #fff !important; color: var(--ap-primary) !important; border-color: var(--ap-primary) !important; }
.product-page-content #save_draft_btn:hover { background: var(--ap-primary) !important; color: #fff !important; }
.product-page-content .add-fav, .product-page-content .remove-fav { background: #fff !important; color: var(--ap-ink) !important; border-color: var(--ap-line) !important; }
.product-page-content #validate_zipcode { width: auto; }

/* Image gallery */
.product-page-content #show-img, .product-page-content .owl-carousel img { border-radius: var(--ap-radius-sm); }

/* Responsive */
@media (max-width: 767px) {
    .ap-page-head h1, .ap-page-head h2 { font-size: 1.4rem; }
    .product-page-content .product-preview-image-section-md { margin-top: 1rem; }
}
@media (max-width: 575px) {
    .ap-cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
    .ap-prod-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .8rem; }
    .ap-order-body { flex-direction: column; }
    .ap-summary { position: static; }
}

/* ============================================================
   Widen the header so it uses the screen width (less side gap)
   ============================================================ */
#header .topbar .main-content,
#header .navbar .main-content,
#header .header-bottom .main-content,
.navbar .main-content {
    max-width: 1720px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
}

/* ============================================================
   Header row: logo | product search | details (aligned one row)
   ============================================================ */
.navbar .top-row { align-items: center; flex-wrap: nowrap; }
.navbar .navbar-brand { display: flex; align-items: center; flex: 0 0 auto; }
.navbar .navbar-collapse { align-items: center; flex-wrap: nowrap; min-width: 0; }
/* search takes the leftover space and can shrink; details sizes to content */
.navbar .navbar-collapse > .col-md-9 {
    display: flex; align-items: center;
    flex: 1 1 auto; min-width: 0; max-width: none; margin-right: 1rem;
}
.navbar .navbar-collapse > .col-md-9 .search_product,
.navbar .navbar-collapse > .col-md-9 .select2 { width: 100% !important; }
.navbar .navbar-collapse > .col-md-3 {
    display: flex; align-items: center; justify-content: flex-end;
    flex: 0 0 auto; width: auto; max-width: none; padding: 0;
}
.navbar .navbar-collapse > .col-md-3 .navbar-nav { align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 991px) {
    .navbar .top-row, .navbar .navbar-collapse { flex-wrap: wrap; }
    .navbar .navbar-collapse > .col-md-9 { margin-right: 0; }
    .navbar .navbar-collapse > .col-md-3 { justify-content: flex-start; width: 100%; }
    .navbar .navbar-collapse > .col-md-3 .navbar-nav { justify-content: flex-start; flex-wrap: wrap; }
}

/* ============================================================
   Header user card (top-right account block)
   ============================================================ */
.ap-user-box {
    list-style: none;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .8rem;
    padding: .45rem .9rem;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    background: #fff;
    line-height: 1.2;
    white-space: nowrap;
}
.ap-user-box .ap-user-head { display: inline-flex; align-items: center; gap: .45rem; }
.ap-user-box .ap-user-hi { font-weight: 700; font-size: .9rem; color: #1f2733; }
.ap-user-box .ap-user-role {
    display: inline-block; background: #eaf7ec; color: #2e8c3c;
    font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: .18em .6em; border-radius: 999px;
}
.ap-user-box .ap-user-sep { width: 1px; align-self: stretch; background: #e6e9f0; margin: 2px 0; }
.ap-user-box .ap-user-meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: #8a94a6; }
.ap-user-box .ap-user-meta b { color: #4a5568; font-weight: 700; }
.ap-user-box .ap-user-meta .ap-dot { color: #cbd2dc; }
.ap-user-box .ap-user-bal { font-size: .84rem; font-weight: 800; color: #2e8c3c; }
.ap-user-box .ap-user-bal i { font-size: .76rem; opacity: .8; }
.ap-user-box .ap-user-signout { font-size: .74rem; font-weight: 700; color: #c0392b; text-decoration: none; }
.ap-user-box .ap-user-signout:hover { color: #a5281b; text-decoration: underline; }

/* Responsive: wrap neatly, drop dividers when stacked */
@media (max-width: 1199px) {
    .ap-user-box { flex-wrap: wrap; justify-content: flex-end; white-space: normal; row-gap: .3rem; }
    .ap-user-box .ap-user-sep { display: none; }
}
@media (max-width: 991px) {
    .ap-user-box { justify-content: flex-start; margin-top: .5rem; width: 100%; }
}

/* ============================================================
   Cart item — selected options display (like the product page)
   ============================================================ */
.ap-cart-selection { display: flex; flex-wrap: wrap; gap: .45rem; }
.ap-cart-optchip {
    display: inline-block; background: #f2f6f3; border: 1px solid #e2e8e4;
    color: #2b3342; font-size: .82rem; padding: .32em .75em; border-radius: 8px; line-height: 1.3;
}
.ap-cart-optchip .k { color: #8a94a6; font-weight: 600; }
.ap-cart-qtychip { background: #eaf7ec; border-color: #cfe9d4; }
.ap-cart-qtychip .k { color: #2e8c3c; }

/* Per-item "include in this order" selection */
.ap-item-select { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .8rem; font-weight: 700; color: #2e8c3c; user-select: none; }
.ap-item-select input { width: 17px; height: 17px; accent-color: #3aae4b; cursor: pointer; margin: 0; }
.ap-order-card.ap-item-unselected { opacity: .5; }
.ap-order-card.ap-item-unselected .ap-item-select { color: #8a94a6; }

/* ============================================================
   TASK-02 — artwork-required highlighting
   ============================================================ */
.ap-file-error input[type="file"],
.ap-file-error .form-control-file {
    outline: 2px solid #e74c3c;
    outline-offset: 3px;
    border-radius: 6px;
    background: #fff6f5;
}
.ap-file-error label { color: #c0392b !important; }
.ap-order-card.ap-card-error {
    border: 1.5px solid #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, .12) !important;
}

/* ============================================================
   TASK-04 — Recent Orders structured table (navy header)
   ============================================================ */
.ap-orders-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    overflow: hidden;
}
.ap-orders-table thead th {
    background: #17181c;            /* black header (matches reference) */
    color: #fff;
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .85rem 1rem;
    white-space: nowrap;
    border: none;
}
.ap-orders-table tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid #eef1f6;
    color: #2b3342;
    vertical-align: middle;
}
.ap-orders-table tbody tr:nth-child(even) { background: #f7f9fc; }
.ap-orders-table tbody tr:hover { background: #eef6f0; }
.ap-orders-table tbody tr:last-child td { border-bottom: none; }
.ap-orders-table .ap-od-detail {
    display: inline-block;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5a6577;
    vertical-align: bottom;
}
.ap-badge {
    display: inline-block;
    padding: .34em .8em;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: capitalize;
    line-height: 1.4;
}
.ap-badge-green { background: #e4f7e8; color: #1c8a3b; }
.ap-badge-blue  { background: #e8f0ff; color: #2b59c3; }
.ap-badge-amber { background: #fff3e0; color: #b26a00; }
.ap-badge-red   { background: #fdecec; color: #c0392b; }
.ap-pdf-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: #fdecec; color: #d0392b; font-size: 1.05rem;
    transition: background .15s, color .15s;
}
.ap-pdf-link:hover { background: #d0392b; color: #fff; }
.ap-showmore-btn {
    min-width: 190px; background: #17a2b8 !important; border-color: #17a2b8 !important; color: #fff !important;
}
.ap-showmore-btn:hover { background: #138496 !important; border-color: #138496 !important; color: #fff !important; }
@media (max-width: 767px) {
    /* stacked card view on small screens */
    .ap-orders-table, .ap-orders-table tbody, .ap-orders-table tr, .ap-orders-table td { display: block; width: 100%; }
    .ap-orders-table thead { display: none; }
    .ap-orders-table tr { border: 1px solid #e6e9f0; border-radius: 10px; margin-bottom: .8rem; overflow: hidden; }
    .ap-orders-table tbody td { border-bottom: 1px solid #f0f2f7; text-align: right; padding-left: 42%; position: relative; }
    .ap-orders-table tbody td::before {
        content: attr(data-label); position: absolute; left: 1rem; top: .85rem;
        font-weight: 700; font-size: .72rem; text-transform: uppercase; color: #8a94a6; text-align: left;
    }
    .ap-orders-table .ap-od-detail { max-width: 100%; white-space: normal; }
}

/* ============================================================
   TASK-05 — Free Design Files library
   ============================================================ */
.ap-fd-band {
    background: #f3f4f6; border-bottom: 1px solid #e6e9f0;
    padding: 2.2rem 1rem 1.6rem; margin-bottom: 1.8rem;
}
.ap-fd-band h1 { font-weight: 800; letter-spacing: .04em; color: #2b3342; margin: 0; }
.ap-fd-band-sub { color: #9aa4b2; margin: .35rem 0 .5rem; }
.ap-fd-crumbs { font-size: .82rem; font-weight: 600; color: #5a6577; }
.ap-fd-crumbs a { color: #5a6577; }
.ap-fd-crumbs span { margin: 0 .35rem; color: #b7c0cd; }
.ap-fd-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.ap-fd-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.ap-fd-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16,24,40,.10); border-color: #3aae4b; color: inherit; text-decoration: none; }
.ap-fd-thumb {
    height: 140px; display: flex; align-items: center; justify-content: center;
    background: #f2f6f3; color: #b7c6bb; font-size: 2.6rem; overflow: hidden;
}
.ap-fd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ap-fd-body { padding: .9rem 1rem .8rem; flex-grow: 1; text-align: center; }
.ap-fd-body h5 { font-size: 1rem; font-weight: 700; margin: 0 0 .35rem; color: #1f2733; }
.ap-fd-count { font-size: .82rem; color: #e08a1e; font-weight: 700; }
.ap-fd-go {
    display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
    padding: .6rem 1rem; margin: 0 1rem 1rem; border-radius: 9px;
    background: #eaf7ec; color: #2e8c3c; font-weight: 700; font-size: .85rem;
}
.ap-fd-card:hover .ap-fd-go { background: #3aae4b; color: #fff; }
.ap-fd-file .ap-btn-block { margin: 0 1rem 1rem; width: calc(100% - 2rem); }

/* Home promo card — white, bordered, centered (matches reference) */
.ap-fd-promo {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    max-width: 360px; margin: 1.8rem auto; padding: 1.6rem 1.8rem;
    background: #fff; border: 1px solid #e0e4ea; border-radius: 12px;
    color: #2b3342; text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s;
}
.ap-fd-promo:hover { color: #2b3342; text-decoration: none; box-shadow: 0 12px 30px rgba(16,24,40,.12); transform: translateY(-2px); border-color: #17a2b8; }
.ap-fd-promo h3 { margin: 0 0 .9rem; font-weight: 800; letter-spacing: .03em; color: #2b3342; font-size: 1.15rem; }
.ap-fd-promo-ico {
    width: 84px; height: 84px; border-radius: 16px; margin-bottom: .9rem;
    display: flex; align-items: center; justify-content: center;
    background: #e9f7f9; color: #17a2b8; font-size: 2.4rem;
}
.ap-fd-promo p { margin: 0; color: #9aa4b2; font-size: .92rem; line-height: 1.5; }