/* ============================================================
   KOL Advanced Subscription Suite - Front CSS
   START: kol-ass-front
   ============================================================ */

/* ---- TIERS GRID ---- */

.kol-ass-tiers-wrap {
    display: grid;
    gap: 24px;
    margin: 24px 0;
    align-items: start;
}

.kol-ass-cols-1 { grid-template-columns: 1fr; }
.kol-ass-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kol-ass-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kol-ass-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px) {
    .kol-ass-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .kol-ass-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .kol-ass-cols-2,
    .kol-ass-cols-3,
    .kol-ass-cols-4 { grid-template-columns: 1fr; }
}

/* ---- TIER COLORS ---- */

/* Copper */
.kol-ass-tier-copper  { --tier-color: #b87333; --tier-color-light: #d4956a; --tier-color-dark: #7a4a1e; --tier-bg-dark: #2a1e14; --tier-bg-light: #fdf6f0; }
/* Silver */
.kol-ass-tier-silver  { --tier-color: #9e9e9e; --tier-color-light: #c8c8c8; --tier-color-dark: #616161; --tier-bg-dark: #1e1e1e; --tier-bg-light: #f7f7f7; }
/* Gold */
.kol-ass-tier-gold    { --tier-color: #c9a227; --tier-color-light: #e8c84a; --tier-color-dark: #8a6d0e; --tier-bg-dark: #261f0a; --tier-bg-light: #fdf8e8; }
/* Platinum */
.kol-ass-tier-platinum { --tier-color: #78909c; --tier-color-light: #a7c0cd; --tier-color-dark: #4b636e; --tier-bg-dark: #141a1e; --tier-bg-light: #f0f4f6; }

/* ---- TIER CARD ---- */

.kol-ass-tier-card {
    position: relative;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* DARK MODE base */
html.dark-mode .kol-ass-tier-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #e0e0e0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

html.dark-mode .kol-ass-tier-card.kol-ass-tier-featured {
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    transform: translateY(-6px);
}

/* LIGHT MODE base */
html.light-mode .kol-ass-tier-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

html.light-mode .kol-ass-tier-card.kol-ass-tier-featured {
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    transform: translateY(-6px);
}

/* Tier-colored top bar */
.kol-ass-tier-card::before {
    content: '';
    display: block;
    height: 5px;
    background: var(--tier-color, #888888);
    flex-shrink: 0;
}

/* ---- CARD HEADER (colored band) ---- */

.kol-ass-tier-header {
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

html.dark-mode .kol-ass-tier-header {
    background: var(--tier-bg-dark, #1e1e1e);
    border-bottom: 1px solid #2a2a2a;
}

html.light-mode .kol-ass-tier-header {
    background: var(--tier-bg-light, #f9fafb);
    border-bottom: 1px solid #e5e7eb;
}

/* ---- TIER NAME ---- */

.kol-ass-tier-name {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    color: var(--tier-color, #888888);
}

/* ---- PRICE ---- */

.kol-ass-tier-price {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    margin: 4px 0 2px;
}

html.dark-mode .kol-ass-tier-price { color: #ffffff; }
html.light-mode .kol-ass-tier-price { color: #111827; }

.kol-ass-tier-price .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
}

.kol-ass-tier-price sup {
    font-size: 18px;
    font-weight: 700;
    vertical-align: top;
    margin-top: 8px;
    display: inline-block;
}

.kol-ass-tier-duration {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

html.dark-mode .kol-ass-tier-duration { color: #777777; }
html.light-mode .kol-ass-tier-duration { color: #9ca3af; }

/* ---- TIER SHORT DESC ---- */

.kol-ass-tier-tagline {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 4px;
}

html.dark-mode .kol-ass-tier-tagline { color: #999999; }
html.light-mode .kol-ass-tier-tagline { color: #6b7280; }

/* ---- BADGE (Popular / Your Plan) ---- */

.kol-ass-badge {
    position: absolute;
    top: 0;
    right: 24px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 0 0 8px 8px;
    color: #ffffff;
}

.kol-ass-badge-featured {
    background: var(--tier-color, #888888);
}

.kol-ass-badge-current {
    background: #2271b1;
}

/* ---- FEATURE LIST ---- */

.kol-ass-tier-features {
    padding: 14px 18px;
    flex: 1;
}

.kol-ass-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.kol-ass-feature-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    padding: 9px 0;
}

html.dark-mode .kol-ass-feature-row {
    border-bottom: 1px solid #242424;
    color: #cccccc;
}

html.light-mode .kol-ass-feature-row {
    border-bottom: 1px solid #f0f0f0;
    color: #374151;
}

html.dark-mode .kol-ass-feature-row:last-child,
html.light-mode .kol-ass-feature-row:last-child {
    border-bottom: none;
}

.kol-ass-feature-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
}

.kol-ass-feature-icon.check {
    background: rgba(45, 124, 45, 0.15);
    color: #2d9e2d;
}

.kol-ass-feature-icon.cross {
    background: rgba(185, 28, 28, 0.12);
    color: #dc2626;
}

html.dark-mode .kol-ass-feature-icon.check {
    background: rgba(45, 158, 45, 0.18);
    color: #4caf50;
}

html.dark-mode .kol-ass-feature-icon.cross {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

.kol-ass-feature-label {
    flex: 1;
}

html.dark-mode .kol-ass-feature-row.kol-ass-feature-no .kol-ass-feature-label {
    color: #555555;
}

html.light-mode .kol-ass-feature-row.kol-ass-feature-no .kol-ass-feature-label {
    color: #9ca3af;
}

/* ---- ACTION AREA ---- */

.kol-ass-tier-action {
    padding: 14px 18px 18px;
}

html.dark-mode .kol-ass-tier-action {
    border-top: 1px solid #242424;
}

html.light-mode .kol-ass-tier-action {
    border-top: 1px solid #f0f0f0;
}

.kol-ass-btn {
    display: block;
    text-align: center;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    letter-spacing: 0.3px;
    transition: opacity 0.15s, transform 0.1s;
}

.kol-ass-btn:hover {
    opacity: 0.88;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Tier-colored buy button */
html.dark-mode .kol-ass-btn-buy,
html.light-mode .kol-ass-btn-buy {
    background: var(--tier-color, #2d7c2d);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    border: none;
}

/* Gray default - dark mode */
html.dark-mode .kol-ass-btn-default {
    background: linear-gradient(#383838, #343434);
    border-top: 1px solid #555555;
    border-left: 1px solid #555555;
    border-right: 1px solid #282828;
    border-bottom: 1px solid #282828;
    color: #ffffff;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.4);
}

/* Gray default - light mode */
html.light-mode .kol-ass-btn-default {
    background: linear-gradient(#e2e2e2, #d4d4d4);
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;
    color: #2d2d2d;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

/* Active plan */
html.dark-mode .kol-ass-btn-active {
    background: rgba(45, 124, 45, 0.12);
    border: 1px solid rgba(45, 124, 45, 0.3);
    color: #4caf50 !important;
    cursor: default;
}

html.dark-mode .kol-ass-btn-active:hover {
    opacity: 1;
    transform: none;
}

html.light-mode .kol-ass-btn-active {
    background: #f0fdf4;
    border: 1px solid #a5d6a7;
    color: #2e7d32 !important;
    cursor: default;
}

html.light-mode .kol-ass-btn-active:hover {
    opacity: 1;
    transform: none;
}

/* ---- NOTICE ---- */

.kol-ass-notice {
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 6px;
}

html.dark-mode .kol-ass-notice {
    background: #1e1e1e;
    color: #888888;
    border: 1px solid #2e2e2e;
}

html.light-mode .kol-ass-notice {
    background: #f9fafb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* ============================================================
   STATUS BLOCK [kol_subscription_status]
   ============================================================ */

.kol-ass-status-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 10px;
    margin: 16px 0;
}

html.dark-mode .kol-ass-status-block {
    background: #1e1e1e;
    border: 1px solid #2e2e2e;
    color: #e0e0e0;
}

html.light-mode .kol-ass-status-block {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #1f2937;
}

.kol-ass-status-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.dark-mode .kol-ass-status-icon {
    background: #1a3a1a;
    color: #4caf50;
}

html.light-mode .kol-ass-status-icon {
    background: #e8f5e9;
    color: #2e7d32;
}

.kol-ass-status-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kol-ass-status-tier {
    font-size: 18px;
    font-weight: 700;
}

html.dark-mode .kol-ass-status-tier { color: #ffffff; }
html.light-mode .kol-ass-status-tier { color: #111827; }

.kol-ass-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 10px;
    border-radius: 20px;
    width: fit-content;
}

html.dark-mode .kol-ass-status-badge.active {
    background: #1a3a1a;
    color: #4caf50;
}

html.light-mode .kol-ass-status-badge.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.kol-ass-status-row {
    font-size: 13px;
}

html.dark-mode .kol-ass-status-row { color: #aaaaaa; }
html.light-mode .kol-ass-status-row { color: #4b5563; }

.kol-ass-status-row span {
    font-weight: 600;
}

html.dark-mode .kol-ass-status-row span { color: #cccccc; }
html.light-mode .kol-ass-status-row span { color: #374151; }

/* ============================================================
   WIDGET [kol_subscription_widget]
   ============================================================ */

.kol-ass-widget {
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
}

html.dark-mode .kol-ass-widget {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
}

html.light-mode .kol-ass-widget {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.kol-ass-widget-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
}

html.dark-mode .kol-ass-widget-title {
    color: #888888;
    border-bottom: 1px solid #2a2a2a;
}

html.light-mode .kol-ass-widget-title {
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.kol-ass-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kol-ass-widget-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 6px;
}

html.dark-mode .kol-ass-widget-item { color: #aaaaaa; }
html.light-mode .kol-ass-widget-item { color: #4b5563; }

html.dark-mode .kol-ass-widget-item.kol-ass-widget-active {
    background: #1a2e1a;
    color: #e0e0e0;
}

html.light-mode .kol-ass-widget-item.kol-ass-widget-active {
    background: #f0fdf4;
    color: #1f2937;
}

.kol-ass-widget-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

html.dark-mode .kol-ass-widget-dot { background: #2e2e2e; }
html.light-mode .kol-ass-widget-dot { background: #d1d5db; }

html.dark-mode .kol-ass-widget-active .kol-ass-widget-dot { background: #2d7c2d; }
html.light-mode .kol-ass-widget-active .kol-ass-widget-dot { background: #2d7c2d; }

.kol-ass-widget-name { flex: 1; }

.kol-ass-widget-price {
    font-size: 13px;
    font-weight: 600;
}

html.dark-mode .kol-ass-widget-price { color: #cccccc; }
html.light-mode .kol-ass-widget-price { color: #374151; }

.kol-ass-widget-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 20px;
}

html.dark-mode .kol-ass-widget-badge { background: #1a3a1a; color: #4caf50; }
html.light-mode .kol-ass-widget-badge { background: #e8f5e9; color: #2e7d32; }

.kol-ass-widget-login {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    padding: 6px;
    border-radius: 6px;
    text-decoration: none;
}

html.dark-mode .kol-ass-widget-login {
    background: linear-gradient(#383838, #343434);
    border-top: 1px solid #555555;
    border-left: 1px solid #555555;
    border-right: 1px solid #282828;
    border-bottom: 1px solid #282828;
    color: #ffffff;
}

html.light-mode .kol-ass-widget-login {
    background: linear-gradient(#e2e2e2, #d4d4d4);
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;
    color: #2d2d2d;
}

/* ============================================================
   END: kol-ass-front
   ============================================================ */