/* ============================================================================
   BUTTON SYSTEM
   ----------------------------------------------------------------------------
   Primary  : Logo Blue bg / white text → hover Green
   Secondary: White bg / blue border / blue text → hover blue bg, white text
   Outline  : Transparent / blue border / blue text → hover green border
   Ghost    : Transparent / blue text → underline on hover
   Icon     : 48×48 circular, blue bg / white icon → hover green
   Height 54px · radius 12px · padding 18px 34px · transition 0.3s · hover scale 1.03
   ============================================================================ */

.btn-pci {
    --_bg: var(--color-primary);
    --_fg: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--btn-height);
    padding: 18px 34px;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--radius-button);
    border: 2px solid transparent;
    background-color: var(--_bg);
    color: var(--_fg);
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base);
    will-change: transform;
}

.btn-pci:hover,
.btn-pci:focus-visible {
    transform: scale(1.03);
}

.btn-pci:active {
    transform: scale(0.99);
}

/* Subtle ripple overlay on click (driven by buttons-ripple JS hook). */
.btn-pci .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    animation: pci-ripple 0.6s ease-out;
}

/* ---------- Variants ---------- */
.btn-primary-pci {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn-primary-pci:hover,
.btn-primary-pci:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-navy);
}

.btn-secondary-pci {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-secondary-pci:hover,
.btn-secondary-pci:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-outline-pci {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline-pci:hover,
.btn-outline-pci:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

/* On dark backgrounds, the outline turns white → green. */
.bg-navy .btn-outline-pci,
.bg-navy-deep .btn-outline-pci,
.cta-band .btn-outline-pci {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--color-white);
}
.bg-navy .btn-outline-pci:hover,
.bg-navy-deep .btn-outline-pci:hover,
.cta-band .btn-outline-pci:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-ghost-pci {
    background-color: transparent;
    color: var(--color-primary);
    padding: 12px 8px;
    min-height: auto;
}
.btn-ghost-pci::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}
.btn-ghost-pci:hover::after,
.btn-ghost-pci:focus-visible::after {
    transform: scaleX(1);
}
.btn-ghost-pci:hover { transform: none; }

/* Accent (green) solid button — used for "Book Inspection" CTA. */
.btn-accent-pci {
    background-color: var(--color-accent);
    color: var(--color-navy);
    box-shadow: var(--shadow-cta-glow);
}
.btn-accent-pci:hover,
.btn-accent-pci:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ---------- Sizes ---------- */
.btn-pci.btn-sm-pci {
    min-height: var(--btn-height-sm);
    padding: 14px 26px;
    font-size: 0.95rem;
}
.btn-pci.btn-lg-pci {
    min-height: 58px;
    padding: 20px 40px;
    font-size: 1.0625rem;
}
.btn-pci.btn-block-pci {
    width: 100%;
}

/* ---------- Icon button (circular) ---------- */
.btn-icon-pci {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-box-sm);
    height: var(--icon-box-sm);
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    transition: background-color var(--transition-base), transform var(--transition-base);
}
.btn-icon-pci:hover,
.btn-icon-pci:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-navy);
    transform: scale(1.05);
}

/* Disabled state. */
.btn-pci:disabled,
.btn-pci.is-loading {
    opacity: 0.65;
    pointer-events: none;
}

/* Inline loading spinner inside submit buttons. */
.btn-pci.is-loading .btn-label { visibility: hidden; }
.btn-pci.is-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pci-spin 0.7s linear infinite;
}