@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --g:     #1a5c3a;
    --gd:    #0f3d25;
    --gl:    #edf7f1;
    --gold:  #c9982a;
    --goldl: #fdf6e3;
    --txt:   #111827;
    --mute:  #6b7280;
    --bdr:   #e5e7eb;
    --err:   #dc2626;
    --rad:   12px;
    --sh:    0 2px 16px rgba(26,92,58,.09);
    --shh:   0 6px 28px rgba(26,92,58,.18);
    --ease:  all .2s cubic-bezier(.4,0,.2,1);
}

.bicc-wrap {
    font-family: 'Inter', sans-serif;
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--sh);
    border: 1px solid var(--bdr);
    overflow: hidden;
}

/* Test/Demo banner */
.bicc-test-banner {
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    padding: 10px 24px;
    font-size: 13px;
    color: #92400e;
    text-align: center;
}
.bicc-test-banner code {
    background: #fef3c7;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.bicc-demo-banner {
    background: #f0fdf4;
    border-bottom: 1px solid #bbf7d0;
    color: #166534;
}
/* Demo card placeholder */
.bicc-card-demo {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border: 2px dashed #d1fae5;
    border-radius: var(--rad); background: #f0fdf4;
    color: #166534; font-size: 14px; font-weight: 500;
}
.bicc-card-demo-icon { font-size: 20px; }

/* Progress */
.bicc-progress-bar {
    height: 4px;
    background: rgba(26,92,58,.12);
}
.bicc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--g), var(--gold));
    border-radius: 0 99px 99px 0;
    transition: width .4s cubic-bezier(.4,0,.2,1);
}
.bicc-progress-label {
    background: var(--gl);
    padding: 8px 28px;
    font-size: 11px;
    font-weight: 600;
    color: var(--g);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--bdr);
}

/* Steps */
.bicc-step { display:none; padding: 32px 32px 36px; animation: bfade .26s ease; }
.bicc-step.active { display:block; }
@keyframes bfade { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }

/* Header */
.bicc-emblem { font-size: 30px; margin-bottom: 8px; }
.bicc-header { margin-bottom: 26px; }
.bicc-header h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 28px !important; font-weight: 700 !important;
    color: var(--gd) !important; margin: 0 0 6px !important;
    line-height: 1.2 !important;
}
.bicc-header p { color: var(--mute) !important; font-size: 14px !important; margin: 0 !important; }

/* Back */
.bicc-back {
    background: none; border: none; color: var(--g);
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    cursor: pointer; padding: 0; margin-bottom: 18px;
    transition: var(--ease); opacity: .8;
}
.bicc-back:hover { opacity: 1; transform: translateX(-2px); }

/* Card buttons (type select) */
.bicc-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bicc-grid-1x2 { grid-template-columns: 1fr 1fr; }
.bicc-card-btn {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 20px 18px; border: 2.5px solid #c8d5cc; background: #fff;
    border-radius: var(--rad); cursor: pointer; text-align: left;
    transition: var(--ease); font-family: 'Inter', sans-serif;
    position: relative; overflow: hidden;
    box-shadow: 0 2px 8px rgba(26,92,58,.07);
}
.bicc-card-btn::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg,var(--gl),transparent);
    opacity:0; transition: var(--ease);
}
.bicc-card-btn:hover, .bicc-card-btn.sel {
    border-color: var(--g); box-shadow: var(--shh);
    transform: translateY(-2px);
}
.bicc-card-btn:hover::after, .bicc-card-btn.sel::after { opacity:1; }
/* Featured BICC button */
.bicc-card-btn--featured {
    border-color: var(--g); border-width: 3px;
    background: linear-gradient(135deg, #f0faf4, #fff);
    box-shadow: 0 4px 16px rgba(26,92,58,.15);
}
.bicc-card-btn--featured .bicc-card-title { color: var(--g); }
.bicc-card-btn--featured::before {
    content: '★ Featured';
    position: absolute; top: 10px; right: 10px;
    background: var(--g); color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
    padding: 2px 7px; border-radius: 99px; text-transform: uppercase;
    z-index: 2;
}
.bicc-card-icon { font-size: 26px; margin-bottom: 10px; position:relative;z-index:1; }
.bicc-card-title { font-size: 15px; font-weight: 700; color: var(--txt); position:relative;z-index:1; margin-bottom:4px; }
.bicc-card-sub { font-size: 11px; color: var(--mute); position:relative;z-index:1; line-height:1.4; }

/* Amount grid */
.bicc-amount-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.bicc-amt-btn {
    padding: 14px 6px; border: 2px solid var(--bdr); background: #fff;
    border-radius: var(--rad); font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 600; color: var(--txt);
    cursor: pointer; transition: var(--ease); text-align: center;
}
.bicc-amt-btn:hover { border-color: var(--g); background: var(--gl); }
.bicc-amt-btn.sel { border-color: var(--g); background: var(--g); color: #fff; }

/* Custom amount */
.bicc-custom-row { margin-bottom: 18px; }
.bicc-custom-row label { display:block; font-size:12px; font-weight:600; color:var(--mute); margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em; }
.bicc-amount-input-wrap {
    display: flex; align-items: center;
    border: 2px solid var(--bdr); border-radius: var(--rad); overflow: hidden;
    transition: var(--ease);
}
.bicc-amount-input-wrap:focus-within { border-color: var(--g); box-shadow: 0 0 0 3px rgba(26,92,58,.1); }
.bicc-amount-input-wrap > span {
    padding: 0 14px; font-size: 18px; font-weight: 700; color: var(--g);
    background: var(--gl); border-right: 2px solid var(--bdr);
    height: 48px; display: flex; align-items: center;
}
.bicc-amount-input-wrap input {
    flex:1; border:none; outline:none; padding:0 14px; height:48px;
    font-family:'Inter',sans-serif; font-size:16px; font-weight:600; color:var(--txt); background:transparent;
}
.bicc-amount-input-wrap input::placeholder { color:var(--mute); font-weight:400; }

/* Preview */
.bicc-preview {
    background: var(--goldl); border: 1px solid rgba(201,152,42,.3);
    border-radius: 8px; padding: 10px 16px; font-size: 14px;
    color: var(--txt); margin-bottom: 18px; display:none;
}
.bicc-preview strong { color: var(--gd); }

/* Musallah */
.bicc-musallah-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bicc-mq-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px 10px; border: 2px solid var(--bdr); background: #fff;
    border-radius: var(--rad); cursor: pointer; transition: var(--ease);
    font-family: 'Inter', sans-serif; gap: 4px; width: 100%;
}
.bicc-mq-btn:hover,.bicc-mq-btn.sel { border-color: var(--gold); background: var(--goldl); }
.bicc-mq-btn--other { border-style: dashed; grid-column: 1 / -1; flex-direction: row; gap: 12px; padding: 16px 24px; justify-content: center; }
.bicc-mq-btn--other:hover, .bicc-mq-btn--other.sel { border-style: solid; }
.bicc-mq-num { font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:700; color:var(--gd); line-height:1; display:block; }
.bicc-mq-num--other { font-size:24px; color: var(--gold); }
.bicc-mq-lbl { font-size: 12px; color: var(--mute); display:block; }
.bicc-mq-price { font-size: 15px; font-weight: 700; color: var(--gold); margin-top:3px; display:block; }

/* Custom Musallah qty row */
.bicc-mq-custom-row { margin: -4px 0 16px; animation: bfade .2s ease; }
.bicc-mq-custom-row label { display:block; font-size:12px; font-weight:600; color:var(--mute); margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em; }
.bicc-mq-custom-wrap {
    display: flex; align-items: center;
    border: 2px solid var(--gold); border-radius: var(--rad);
    overflow: hidden; background: var(--goldl);
}
.bicc-mq-custom-wrap input {
    flex: 1; border: none; outline: none;
    padding: 0 18px; height: 52px;
    font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700;
    color: var(--gd); background: transparent; text-align: center; letter-spacing: 0.05em;
}

.bicc-musallah-total {
    display:flex; justify-content:space-between; align-items:center;
    background: var(--g); color:#fff; border-radius: var(--rad);
    padding: 16px 20px; margin-bottom: 18px; font-size: 15px;
}
.bicc-musallah-total strong { font-family:'Cormorant Garamond',serif; font-size:24px; }

/* Buttons */
.bicc-btn-primary {
    width:100%; padding:15px; border:none; border-radius:var(--rad);
    background: linear-gradient(135deg,var(--g),var(--gd));
    color:#fff; font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
    cursor:pointer; transition:var(--ease); box-shadow:0 4px 14px rgba(26,92,58,.28);
}
.bicc-btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 20px rgba(26,92,58,.38); }
.bicc-btn-primary:disabled { opacity:.38; cursor:not-allowed; transform:none; box-shadow:none; }
.bicc-btn-outline {
    width:100%; padding:14px; border:2px solid var(--g); border-radius:var(--rad);
    background:transparent; color:var(--g); font-family:'Inter',sans-serif;
    font-size:15px; font-weight:600; cursor:pointer; transition:var(--ease);
}
.bicc-btn-outline:hover { background:var(--gl); }

/* Summary box */
.bicc-summary-box {
    background: var(--gl); border-left: 4px solid var(--g);
    border-radius: 0 10px 10px 0; padding: 14px 18px; margin-bottom: 24px;
}
.bicc-summary-box .st { font-size:12px; color:var(--mute); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.bicc-summary-box .sa { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:700; color:var(--gd); }

/* Fields */
.bicc-field { margin-bottom: 18px; }
.bicc-field label { display:block; font-size:12px; font-weight:600; color:var(--txt); margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em; }
.bicc-field small { display:block; font-size:11px; color:var(--mute); margin-top:4px; }
.req { color:var(--err); }
.bicc-field input[type="text"], .bicc-field input[type="email"] {
    width:100%; height:48px; padding:0 14px; border:2px solid var(--bdr);
    border-radius:var(--rad); font-family:'Inter',sans-serif; font-size:14px;
    color:var(--txt); background:#fff; transition:var(--ease); outline:none; box-sizing:border-box;
}
.bicc-field input:focus { border-color:var(--g); box-shadow:0 0 0 3px rgba(26,92,58,.1); }
.bicc-field input.err { border-color:var(--err); }
.bicc-card-el {
    padding:14px 16px; border:2px solid var(--bdr); border-radius:var(--rad);
    background:#fff; transition:var(--ease); min-height:48px;
}
.bicc-card-el.focus { border-color:var(--g); box-shadow:0 0 0 3px rgba(26,92,58,.1); }
.bicc-card-err { color:var(--err); font-size:12px; margin-top:5px; min-height:16px; }
.bicc-secure-note { text-align:center; font-size:12px; color:var(--mute); background:#f9fafb; border-radius:8px; padding:10px; margin:14px 0; }

/* Submit */
.bicc-btn-submit {
    width:100%; padding:17px; border:none; border-radius:var(--rad);
    background:linear-gradient(135deg,var(--g),var(--gd));
    color:#fff; font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
    cursor:pointer; transition:var(--ease); box-shadow:0 4px 16px rgba(26,92,58,.32);
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.bicc-btn-submit:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,92,58,.42); }
.bicc-btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.bicc-spinner {
    width:20px; height:20px; border:2.5px solid rgba(255,255,255,.35);
    border-top-color:#fff; border-radius:50%; animation:bspin .65s linear infinite;
}
@keyframes bspin { to { transform:rotate(360deg); } }
.bicc-global-err {
    margin-top:12px; padding:12px 16px; background:#fef2f2;
    border:1px solid #fecaca; border-radius:8px; color:var(--err); font-size:13px;
}

/* Success */
.bicc-success-step { text-align:center; padding:52px 32px !important; }
.bicc-success-check {
    width:72px; height:72px; background:linear-gradient(135deg,var(--g),var(--gd));
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:30px; color:#fff; margin:0 auto 20px;
    box-shadow:0 8px 24px rgba(26,92,58,.35);
    animation:bpop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bpop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.bicc-success-step h2 { font-family:'Cormorant Garamond',serif !important; font-size:30px !important; color:var(--gd) !important; margin-bottom:8px !important; }
.bicc-success-step p { color:var(--mute) !important; font-size:15px !important; margin-bottom:18px !important; }
.bicc-success-detail { background:var(--gl); border-radius:var(--rad); padding:14px 20px; font-size:14px; color:var(--txt); margin-bottom:24px; }

@media(max-width:480px) {
    .bicc-step { padding:22px 18px 28px; }
    .bicc-grid-2x2 { grid-template-columns:1fr; }
    .bicc-amount-grid { grid-template-columns:repeat(2,1fr); }
    .bicc-musallah-grid { grid-template-columns:1fr 1fr; }
}

/* ─── Gift Aid ───────────────────────────────────────────────── */
.bicc-gift-aid-box {
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: var(--rad);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.bicc-gift-aid-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.bicc-gift-aid-label input[type="checkbox"] {
    display: none;
}
.bicc-gift-aid-checkmark {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border: 2.5px solid #86efac;
    border-radius: 5px;
    background: #fff;
    margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    transition: var(--ease);
    position: relative;
}
.bicc-gift-aid-label input:checked ~ .bicc-gift-aid-checkmark {
    background: var(--g);
    border-color: var(--g);
}
.bicc-gift-aid-label input:checked ~ .bicc-gift-aid-checkmark::after {
    content: '';
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
    display: block;
    margin-top: -2px;
}
.bicc-gift-aid-text {
    font-size: 13px;
    color: #166534;
    line-height: 1.55;
}
.bicc-gift-aid-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--gd);
}
.bicc-gift-aid-note {
    margin: 12px 0 0 34px;
    font-size: 12px;
    color: var(--g);
    font-weight: 500;
}