/*
Theme Name: AffiliateCMS Child
Theme URI: https://lat.vn/
Description: Child theme for AffiliateCMS Theme. Add your custom styles and overrides here.
Author: AffiliateCMS Team
Author URI: https://lat.vn/
Template: affiliateCMS-theme
Version: 1.0.6
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affiliatecms-child
*/

/* ==========================================================================
   Custom Styles - Add your overrides below
   ========================================================================== */

/* ==========================================================================
   Color tokens (single source for child theme colors, rule G2)
   ========================================================================== */
:root {
    --ctt-primary: var(--color-primary, #0d7377);
    --ctt-accent: #14b8a6;
    --ctt-accent-rgb: 20, 184, 166;
    --ctt-accent-hover: #2dd4bf;
    --ctt-accent-alt: #0ea5e9;
    --ctt-text: var(--color-text, #0f172a);
    --ctt-on-dark: #fff;
    --ctt-on-dark-rgb: 255, 255, 255;
    --ctt-shadow-rgb: 0, 0, 0;
    --ctt-footer-bg-start: #082342;
    --ctt-footer-bg-end: #061a31;
    --ctt-footer-text: #c9d5df;
    --ctt-footer-text-strong: #e2eaf1;
    --ctt-footer-text-muted: #9fb2c2;
    --ctt-footer-link: #b9c8d4;
    --ctt-footer-meta: #8197a8;
    --ctt-amazon-text: #111;
    --ctt-amazon-rgb: 232, 138, 0;
}

/* CarTechTalk editorial footer */
.ctt-footer {
    position: relative;
    background:
        radial-gradient(1200px 380px at 85% -10%, rgba(var(--ctt-accent-rgb), .14), transparent 60%),
        linear-gradient(180deg, var(--ctt-footer-bg-start) 0%, var(--ctt-footer-bg-end) 100%);
    color: var(--ctt-footer-text);
    padding: 64px 0 24px;
    margin-top: 48px;
}

.ctt-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ctt-accent), var(--ctt-accent-alt) 55%, var(--ctt-accent));
}

.ctt-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(150px, 1fr));
    gap: 48px;
    align-items: start;
}

.ctt-footer .footer__logo {
    display: inline-block;
    margin-bottom: 20px;
    border-radius: 10px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ctt-footer .footer__logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--ctt-shadow-rgb), .25);
}

.ctt-footer .footer__logo-img {
    display: block;
    width: 184px;
    height: auto;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--ctt-on-dark);
}

.ctt-footer__brand p {
    max-width: 440px;
    margin: 0 0 16px;
    line-height: 1.7;
}

.ctt-footer__brand .ctt-footer__tagline {
    color: var(--ctt-footer-text-strong);
    font-size: 1rem;
}

.ctt-footer__brand .ctt-footer__disclosure {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    color: var(--ctt-footer-text-muted);
    font-size: .82rem;
    line-height: 1.6;
    background: rgba(var(--ctt-on-dark-rgb), .04);
    border: 1px solid rgba(var(--ctt-on-dark-rgb), .08);
    border-radius: 10px;
}

.ctt-footer__disclosure .bi {
    flex: none;
    margin-top: 1px;
    color: var(--ctt-accent);
}

.ctt-footer__column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ctt-footer__column h2 {
    position: relative;
    margin: 0 0 8px;
    padding-bottom: 12px;
    color: var(--ctt-on-dark);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ctt-footer__column h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--ctt-accent);
}

.ctt-footer__column a {
    position: relative;
    width: fit-content;
    color: var(--ctt-footer-link);
    font-size: .94rem;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
}

.ctt-footer__column a:hover,
.ctt-footer__column a:focus-visible {
    color: var(--ctt-accent-hover);
    transform: translateX(3px);
}

.ctt-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid rgba(var(--ctt-on-dark-rgb), .1);
    color: var(--ctt-footer-meta);
    font-size: .84rem;
}

.ctt-footer__bottom p { margin: 0; }

.ctt-footer__motto { flex: 1; text-align: center; }

.ctt-footer__top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--ctt-footer-text);
    text-decoration: none;
    border: 1px solid rgba(var(--ctt-on-dark-rgb), .14);
    border-radius: 999px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ctt-footer__top:hover,
.ctt-footer__top:focus-visible {
    color: var(--ctt-on-dark);
    border-color: var(--ctt-accent);
    background: rgba(var(--ctt-accent-rgb), .15);
}

@media (max-width: 991px) {
    .ctt-footer { padding-top: 48px; }
    .ctt-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
    .ctt-footer__brand { grid-column: 1 / -1; }
    .ctt-footer__brand p { max-width: 640px; }
}

@media (max-width: 640px) {
    .ctt-footer__grid { grid-template-columns: 1fr 1fr; }
    .ctt-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ctt-footer__motto { text-align: left; }
}

@media (max-width: 420px) {
    .ctt-footer__grid { grid-template-columns: 1fr; }
}

/* Show complete review titles on archive and homepage cards. */
.post-card--grid-v2 .post-card__title {
    display: block;
    min-height: 0;
    overflow: visible;
    -webkit-line-clamp: unset;
}

.post-card--grid-v2 .post-card__title a {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

/* ==========================================================================
   CarTechTalk crawl structure (2026-10-09): numbered pagination, category
   A-Z index and homepage category shelf. Uses the parent theme tokens.
   ========================================================================== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-top: var(--space-6);
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
}

.pagination__item:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.pagination__item--current {
    color: var(--color-surface);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.pagination + .load-more {
    margin-top: var(--space-4);
}

.ctt-shelf__title,
.ctt-hub__title {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-4);
}

.ctt-shelf__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.ctt-shelf__card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
}

.ctt-shelf__name {
    font-size: var(--text-lg);
    margin: 0;
}

.ctt-shelf__name a,
.ctt-shelf__links a,
.ctt-hub__list a {
    color: var(--color-text);
    text-decoration: none;
}

.ctt-shelf__name a:hover,
.ctt-shelf__links a:hover,
.ctt-hub__list a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.ctt-shelf__count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 var(--space-2);
}

.ctt-shelf__links,
.ctt-hub__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.ctt-hub {
    padding-block: var(--space-8, 2rem);
}

.ctt-hub__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
}

@media (max-width: 1080px) {
    .ctt-shelf__grid,
    .ctt-hub__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .ctt-shelf__grid,
    .ctt-hub__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   CarTechTalk guide finder (2026-10-11): [ctt_guide_finder]. Without
   JavaScript every group shows as a plain list; .is-ready turns it into a
   two-step picker. Uses the parent theme tokens.
   ========================================================================== */
.ctt-finder {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin: var(--space-6) 0;
}

.ctt-finder__title {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-4);
}

.ctt-finder__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: var(--space-4) 0 var(--space-2);
}

.ctt-finder__chips {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ctt-finder.is-ready .ctt-finder__chips {
    display: flex;
}

.ctt-finder__chip {
    font: inherit;
    font-size: var(--text-sm);
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
}

.ctt-finder__chip:hover,
.ctt-finder__chip:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.ctt-finder__chip[aria-pressed="true"] {
    color: var(--color-surface);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.ctt-finder.is-ready [data-pane] {
    display: none;
}

.ctt-finder.is-ready [data-pane].is-active {
    display: block;
}

.ctt-finder__panel-title {
    font-size: var(--text-lg);
    margin: var(--space-6) 0 0;
}

.ctt-finder.is-ready .ctt-finder__panel-title,
.ctt-finder.is-ready .ctt-finder__group {
    display: none;
}

.ctt-finder__group {
    font-size: var(--text-base);
    margin: var(--space-4) 0 var(--space-2);
}

.ctt-finder__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-6);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.ctt-finder__list a,
.ctt-finder__all {
    color: var(--color-text);
    text-decoration: none;
}

.ctt-finder__list a:hover,
.ctt-finder__all:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.ctt-finder__all {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}

@media (max-width: 760px) {
    .ctt-finder {
        padding: var(--space-4);
    }

    .ctt-finder__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Simplified product cards (2026-10-18): no prices, fewer detail panels,
   and a larger "View on Amazon" call to action.
   ========================================================================== */
.acms-list__discount,
.acms-list__price-group,
.acms-list__meta,
.acms-list__item .blkos-product-insights,
.acms-list__row--toggle:has(+ .acms-list__row--details[id*="-tab-"]),
.acms-list__row--details[id*="-tab-"] {
    display: none !important;
}

.acms-list__row--main {
    grid-template-columns: 140px minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 20px !important;
    row-gap: 14px !important;
}

.acms-list__row--main .acms-list__image {
    grid-row: 1 / span 2;
}

.acms-list__row--main .acms-list__info {
    align-self: end;
}

.acms-list__title {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.4;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

.acms-list__title a {
    color: var(--ctt-text);
    text-decoration: none;
}

.acms-list__title a:hover {
    color: var(--ctt-primary);
}

.acms-list__price-action {
    grid-column: 2;
    align-self: start;
    align-items: flex-start !important;
    width: auto !important;
}

.acms-list__item .acms-btn--amazon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 210px;
    padding: 13px 22px !important;
    font-size: 15px !important;
    font-weight: 700;
    color: var(--ctt-amazon-text) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(var(--ctt-amazon-rgb), .35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.acms-list__item .acms-btn--amazon:hover,
.acms-list__item .acms-btn--amazon:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(var(--ctt-amazon-rgb), .45);
}

.acms-list__row--review {
    font-size: .95rem;
}

@media (max-width: 640px) {
    .acms-list__row--main {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        column-gap: 14px !important;
    }

    .acms-list__row--main .acms-list__image {
        grid-row: 1;
    }

    .acms-list__row--main .acms-list__info {
        align-self: center;
    }

    .acms-list__image {
        width: 96px !important;
        height: 96px !important;
    }

    .acms-list__price-action {
        grid-column: 1 / -1;
        width: 100% !important;
        align-items: stretch !important;
    }

    .acms-list__item .acms-btn--amazon {
        width: 100%;
        min-width: 0;
        padding: 14px 18px !important;
        font-size: 16px !important;
    }
}