/* assets/css/abb-build-input.css */

:root{

    /* =========================
       ABB BUILD INPUT DESIGN SYSTEM
    ========================== */

    --abb-primary:#2563eb;
    --abb-success:#16a34a;
    --abb-danger:#ef3348;
    --abb-warning:#ffc400;
    --abb-dark:#111827;

    --abb-radius:14px;
    --abb-radius-pill:999px;

    --abb-shadow-soft:0 10px 24px rgba(0,0,0,.12);
    --abb-shadow-strong:0 12px 28px rgba(0,0,0,.25);

    --abb-font:"Arial", sans-serif;
}

.abb-build-input{
    max-width:920px;
    margin:0 auto;
    font-family:var(--abb-font);
    color:#222;
    line-height:1.75;
    padding:0 10px;

    position:relative;
    isolation:isolate;

    overflow-wrap:break-word;
    word-break:break-word;
}

.abb-build-input *{
    box-sizing:border-box;
}

.abb-build-input img{
    max-width:100%;
    height:auto;
    display:block;
    margin:24px auto;
}

.abb-build-input h1{
    font-size:42px;
    line-height:1.15;
    margin:30px 0 18px;
}

.abb-build-input h2{
    font-size:30px;
    line-height:1.25;
    margin:38px 0 14px;
}

.abb-build-input h3{
    font-size:22px;
    margin:28px 0 10px;
}

.abb-build-input p{
    margin:0 0 18px;
    font-size:18px;
}

.abb-build-input ul,
.abb-build-input ol{
    margin:16px 0 22px 24px;
}

.abb-build-input li{
    margin-bottom:10px;
    font-size:18px;
}

.abb-build-input table{
    width:100%;
    border-collapse:collapse;
    margin:26px 0;
    font-size:16px;
}

.abb-build-input th,
.abb-build-input td{
    border:1px solid #ddd;
    padding:12px;
    text-align:left;
}

.abb-build-input th{
    background:#f5f7fa;
    font-weight:800;
}

.abb-build-input .abb-callout,
.abb-build-input .abb-pros-cons,
.abb-build-input .abb-faq-box{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:20px;
    margin:24px 0;
}

.abb-build-input .abb-faq-box h3{
    margin-top:0;
}

.abb-build-input .abb-callout{
    border-left:5px solid #2563eb;
}

.abb-build-input .abb-stars{
    color:#f59e0b;
    font-size:20px;
    letter-spacing:2px;
}

.abb-build-input .abb-cta-wrap{
    text-align:center;
    margin:36px auto;
    padding:0 16px;
}

.abb-build-input .abb-cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:270px;
    max-width:100%;
    padding:17px 36px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:20px;
    font-weight:800;
    line-height:1.3;
    text-decoration:none!important;
    border-radius:14px;
    border:0;
    cursor:pointer;
    box-sizing:border-box;
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.abb-build-input .abb-cta-btn:hover{
    transform:translateY(-2px);
    text-decoration:none!important;
    opacity:.98;
}

.abb-build-input .abb-cta-red{
    background:var(--abb-danger);
    color:#fff!important;
    box-shadow:0 8px 0 #b51e2d;
}

.abb-build-input .abb-cta-gold{
    background:var(--abb-warning);
    color:#111!important;
    border-radius:999px;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.abb-build-input .abb-cta-blue{
    background:linear-gradient(135deg,var(--abb-primary),#06b6d4);
    color:#fff!important;
    box-shadow:0 12px 28px rgba(37,99,235,.30);
}

.abb-build-input .abb-cta-green{
    background:var(--abb-success);
    color:#fff!important;
    box-shadow:0 8px 0 #0d7331;
}

.abb-build-input .abb-cta-dark{
    background:var(--abb-dark);
    color:#fff!important;
    box-shadow:0 12px 26px rgba(0,0,0,.28);
}

.abb-build-input .abb-cta-glass{
    background:#fff;
    color:#111827!important;
    border:1px solid #d9d9d9;
    box-shadow:0 12px 30px rgba(15,23,42,.12);
}

.abb-build-input .abb-cta-glass:hover{
    box-shadow:0 16px 40px rgba(0,0,0,.18);
    transform:translateY(-2px);
}

.abb-build-input .abb-cta-outline{
    background:#fff;
    color:#2563eb!important;
    border:3px solid #2563eb;
}

.abb-build-input .abb-cta-hero{
    display:flex;
    flex-direction:column;
    gap:6px;
    background:linear-gradient(135deg,#ff6b00,#dc2626);
    color:#fff!important;
    padding:24px 36px;
    font-size:24px;
    font-weight:900;
    border-radius:18px;
    box-shadow:0 12px 0 #a23812;
}

.abb-build-input .abb-cta-hero span{
    font-size:14px;
    font-weight:600;
    opacity:.95;
}

/* =========================
   PRODUCT TYPE LAYER
========================= */

/* Digital products */
.abb-product-digital .abb-cta-btn{
    text-transform:uppercase;
    font-size:19px;
}

/* Physical products */
.abb-product-physical .abb-cta-btn{
    box-shadow:var(--abb-shadow-soft);
}

/* Service products */
.abb-product-service .abb-cta-btn{
    border-radius:var(--abb-radius-pill);
}

/* =========================
   NICHE LAYER
========================= */

.abb-niche-supplement .abb-callout{
    border-left:5px solid var(--abb-danger);
}

.abb-niche-saas .abb-callout{
    border-left:5px solid var(--abb-primary);
}

.abb-niche-service .abb-callout{
    border-left:5px solid var(--abb-success);
}

/* =========================
   NETWORK LAYER OVERRIDES
========================= */

/* Amazon */
.abb-network-amazon .abb-cta-btn{
    border-radius:999px;
}

/* Fiverr */
.abb-network-fiverr .abb-cta-btn{
    background:linear-gradient(135deg,#1dbf73,#19a463);
    position:relative;
}

.abb-network-fiverr .abb-cta-btn::before{
    content:"⚡ ";
}

/* ClickBank */
.abb-network-clickbank .abb-cta-btn{
    animation:pulse 1.8s infinite;
}

/* SaaS */
.abb-network-saas .abb-cta-btn{
    border-radius:10px;
    letter-spacing:.3px;
}

/* CPA */
.abb-network-cpa .abb-cta-btn{
    animation:pulse 2s infinite;
}

/* =========================
   FINAL CTA STYLE PRIORITY
   Selected button style must win over network/product layers
========================= */

.abb-build-input .abb-cta-red{
    background:var(--abb-danger)!important;
    color:#fff!important;
    box-shadow:0 8px 0 #b51e2d!important;
}

.abb-build-input .abb-cta-gold{
    background:var(--abb-warning)!important;
    color:#111!important;
    border-radius:999px!important;
    box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
}

.abb-build-input .abb-cta-blue{
    background:linear-gradient(135deg,var(--abb-primary),#06b6d4)!important;
    color:#fff!important;
    box-shadow:0 12px 28px rgba(37,99,235,.30)!important;
}

.abb-build-input .abb-cta-green{
    background:var(--abb-success)!important;
    color:#fff!important;
    box-shadow:0 8px 0 #0d7331!important;
}

.abb-build-input .abb-cta-dark{
    background:var(--abb-dark)!important;
    color:#fff!important;
    box-shadow:0 12px 26px rgba(0,0,0,.28)!important;
}

.abb-build-input .abb-cta-glass{
    background:#fff!important;
    color:#111827!important;
    border:1px solid #d9d9d9!important;
    box-shadow:0 12px 30px rgba(15,23,42,.12)!important;
}

.abb-build-input .abb-cta-outline{
    background:#fff!important;
    color:#2563eb!important;
    border:3px solid #2563eb!important;
    box-shadow:none!important;
}

.abb-build-input .abb-cta-hero{
    background:linear-gradient(135deg,#ff6b00,#dc2626)!important;
    color:#fff!important;
    box-shadow:0 12px 0 #a23812!important;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.02);}
    100%{transform:scale(1);}
}

.abb-build-input .abb-faq-box{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:24px;
    margin:32px 0;
}

.abb-build-input .abb-faq-box h2{
    margin-top:0;
}

.abb-build-input .abb-faq-item{
    border:1px solid #e2e8f0;
    border-radius:14px;
    margin-bottom:12px;
    overflow:hidden;
    background:#fff;
}

.abb-build-input .abb-faq-q{
    padding:16px 18px;
    font-weight:800;
    cursor:pointer;
    background:#fff;
    position:relative;
}

.abb-build-input .abb-faq-q::after{
    content:"+";
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    font-weight:900;
}

.abb-build-input .abb-faq-item.is-open .abb-faq-q::after{
    content:"−";
}

.abb-build-input .abb-faq-a{
    display:none;
    padding:16px 18px;
    border-top:1px solid #e2e8f0;
    background:#f8fafc;
}

@media(max-width:768px){
    .abb-build-input{
        padding:0 16px;
    }

    .abb-build-input h1{
        font-size:32px;
    }

    .abb-build-input h2{
        font-size:26px;
    }

    .abb-build-input p,
    .abb-build-input li{
        font-size:17px;
    }
	
	.abb-build-input .abb-callout,
.abb-build-input .abb-pros-cons,
.abb-build-input .abb-faq-box{
    padding:16px;
}

    .abb-build-input .abb-cta-btn{
        width:100%;
        min-width:0;
        font-size:18px;
        padding:15px 20px;
    }

    .abb-build-input .abb-cta-hero{
        font-size:20px;
        padding:20px;
    }
}