/* ==========================================================================
   AGP Card Row — mod_agp_cardrow v2.0.0
   Bootstrap-first with optional overrides via --agp-cr-*
   ========================================================================== */

.agp-cr {
    font-family: var(--agp-cr-font-body, var(--bs-body-font-family, -apple-system, sans-serif));
    color: var(--agp-cr-text, var(--bs-body-color, #212529));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.agp-cr *, .agp-cr *::before, .agp-cr *::after { box-sizing: border-box; }


/* ==========================================================================
   UNIFIED ICON SYSTEM
   ========================================================================== */

.agp-cr__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.agp-cr__icon i { font-size: 1.125rem; }
.agp-cr__icon svg {
    width: 20px; height: 20px;
    stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    fill: none;
}

/* Circle — Filled */
.agp-cr__icon--circle-fill {
    border-radius: 50%;
    background: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
    color: #fff;
}

/* Rounded Square — Filled (default for crosssell) */
.agp-cr__icon--rounded-fill {
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    background: var(--agp-cr-accent-light, var(--bs-light, #f8f9fa));
    border: 1px solid var(--agp-cr-accent-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
    color: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
}

/* Circle — Outline */
.agp-cr__icon--circle-outline {
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--agp-cr-accent, var(--bs-primary, #0d6efd));
    color: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
}

/* Bare — Icon Only */
.agp-cr__icon--bare {
    background: none;
    border: none;
    color: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
}
.agp-cr__icon--bare i { font-size: 1.75rem; }
.agp-cr__icon--bare svg { width: 32px; height: 32px; }


/* ==========================================================================
   RATE CALLOUT BOXES
   ========================================================================== */
.agp-cr__rate-card {
    background: var(--agp-cr-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    padding: 20px 24px;
    box-shadow: var(--bs-box-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.agp-cr__rate-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--agp-cr-secondary, var(--bs-secondary-color, rgba(0, 0, 0, 0.5)));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.agp-cr__rate-value-wrap {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.agp-cr__rate-value {
    font-family: var(--agp-cr-font-display, Georgia, serif);
    font-size: 2rem;
    color: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
    line-height: 1;
}

.agp-cr__rate-unit {
    font-size: 0.8125rem;
    color: var(--agp-cr-secondary, var(--bs-secondary-color, rgba(0, 0, 0, 0.5)));
    font-weight: 500;
}

.agp-cr__rate-note {
    font-size: 0.6875rem;
    color: var(--bs-tertiary-color, rgba(0, 0, 0, 0.35));
    margin-top: 4px;
}

.agp-cr__rate-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
    text-decoration: none;
    margin-top: 8px;
}
.agp-cr__rate-link:hover { text-decoration: underline; }
.agp-cr__rate-link i { font-size: 0.7rem; }


/* ==========================================================================
   TESTIMONIAL GRID
   ========================================================================== */
.agp-cr__testimonial-card {
    background: var(--agp-cr-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    padding: 24px;
    box-shadow: var(--bs-box-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    height: 100%;
}

.agp-cr__stars {
    display: flex;
    gap: 2px;
    color: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
}
.agp-cr__stars i { font-size: 0.875rem; }

.agp-cr__quote {
    font-size: 0.9375rem;
    color: var(--agp-cr-primary, var(--bs-body-color, #212529));
    line-height: 1.7;
    flex: 1;
    margin-bottom: 16px;
}

.agp-cr__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bs-light, rgba(0, 0, 0, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--agp-cr-secondary, var(--bs-secondary-color, rgba(0, 0, 0, 0.4)));
    flex-shrink: 0;
}

.agp-cr__author-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--agp-cr-primary, var(--bs-body-color, #212529));
}

.agp-cr__author-role {
    font-size: 0.75rem;
    color: var(--bs-tertiary-color, rgba(0, 0, 0, 0.35));
}


/* ==========================================================================
   TESTIMONIAL PULLQUOTE
   ========================================================================== */
.agp-cr__pullquote-mark {
    font-family: var(--agp-cr-font-display, Georgia, serif);
    font-size: 5rem;
    line-height: 1;
    color: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
    opacity: 0.15;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    user-select: none;
}

.agp-cr__pullquote-text {
    font-family: var(--agp-cr-font-display, Georgia, serif);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--agp-cr-primary, var(--bs-body-color, #212529));
    line-height: 1.7;
    margin-bottom: 24px;
    position: relative;
}

.agp-cr__pullquote-divider {
    width: 48px;
    height: 2px;
    background: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
    border-radius: 1px;
}

.agp-cr__pullquote-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bs-light, rgba(0, 0, 0, 0.05));
    border: 2px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--agp-cr-secondary, var(--bs-secondary-color, rgba(0, 0, 0, 0.4)));
}

.agp-cr__pullquote-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--agp-cr-primary, var(--bs-body-color, #212529));
}

.agp-cr__pullquote-role {
    font-size: 0.75rem;
    color: var(--bs-tertiary-color, rgba(0, 0, 0, 0.35));
}


/* ==========================================================================
   CROSS-SELL CARD ROW
   ========================================================================== */
.agp-cr__crosssell-card {
    background: var(--agp-cr-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    padding: 24px;
    box-shadow: var(--bs-box-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    transition: box-shadow 0.2s, transform 0.2s;
    color: inherit;
    height: 100%;
}
.agp-cr__crosssell-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    color: inherit;
}

.agp-cr__crosssell-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--agp-cr-primary, var(--bs-body-color, #212529));
    margin-bottom: 4px;
}

.agp-cr__crosssell-text {
    font-size: 0.8125rem;
    color: var(--agp-cr-secondary, var(--bs-secondary-color, rgba(0, 0, 0, 0.5)));
    line-height: 1.5;
    margin-bottom: 12px;
}

.agp-cr__crosssell-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--agp-cr-accent, var(--bs-primary, #0d6efd));
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.agp-cr__crosssell-link i { font-size: 0.7rem; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .agp-cr--testimonials .row { max-width: 480px; margin: 0 auto; }
    .agp-cr--testimonials .col-lg-4 { flex: 0 0 100%; max-width: 100%; }

    .agp-cr--crosssell .row { max-width: 400px; margin: 0 auto; }
    .agp-cr--crosssell .col-lg-4 { flex: 0 0 100%; max-width: 100%; }

    .agp-cr__pullquote-text { font-size: 1.25rem; }
}

@media (max-width: 767.98px) {
    .agp-cr--rate-boxes .col-md { flex: 0 0 100%; max-width: 100%; }
}