@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:wght@400;600&display=swap');

/* ===== BASE ===== */
.acb-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 12px 60px;
    font-family: 'Nunito Sans', sans-serif;
    color: #1e1e2e;
    box-sizing: border-box;
}
.acb-wrap *, .acb-wrap *::before, .acb-wrap *::after {
    box-sizing: border-box;
}

/* ===== HEADER ===== */
.acb-header {
    text-align: center;
    padding: 36px 0 18px;
}
.acb-header-icon {
    font-size: 44px;
    display: block;
    margin-bottom: 8px;
    animation: acb-bounce 2.4s ease-in-out infinite;
}
@keyframes acb-bounce {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.acb-title {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    font-weight: 900;
    margin: 0 0 4px;
    color: #1a1a2e;
}
.acb-subtitle {
    font-size: 0.8rem;
    color: #aaa;
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ===== INSTRUCTIONS ===== */
.acb-instructions {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fffbea;
    border: 2px solid #ffe98a;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #5a4200;
}
.acb-instr-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1.5;
}

/* ===== COUNTER ===== */
.acb-counter-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.acb-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef5ff;
    border: 2px solid #c5dcff;
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a5fa8;
    font-family: 'Nunito', sans-serif;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.acb-counter.depleted  { background:#fff0f0; border-color:#ffb8b8; color:#c0392b; }
.acb-counter.acb-admin { background:#f0fff4; border-color:#a3e6c0; color:#1a7a45; }

/* ===== FORM CARD ===== */
.acb-form-card {
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

/* ===== FIELDS ===== */
.acb-label {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    color: #1a1a2e;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.acb-field {
    margin-bottom: 20px;
}

/* ===== TEXTAREA ===== */
.acb-textarea {
    width: 100%;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 14px 15px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem; /* 1rem minimum — prevents iOS zoom on focus */
    line-height: 1.6;
    color: #222;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.acb-textarea:focus {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 4px rgba(74,144,217,0.12);
}
.acb-textarea::placeholder { color: #bbb; font-style: italic; }
.acb-char-count {
    text-align: right;
    font-size: 0.78rem;
    color: #ccc;
    margin-top: 4px;
    font-weight: 600;
}

/* ===== OPTIONS ROW ===== */
.acb-options-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Aspect Ratio — takes more space */
.acb-field-aspect {
    flex: 3;
}
/* No Background — fixed width */
.acb-field-nobg {
    flex: 2;
}

@media (max-width: 420px) {
    .acb-options-row {
        flex-direction: column;
        gap: 14px;
    }
    .acb-field-aspect,
    .acb-field-nobg { flex: 1; width: 100%; }
}

/* ===== SELECT ===== */
.acb-select {
    width: 100%;
    /* Mobile-friendly tap target: min 48px height */
    min-height: 52px;
    padding: 12px 42px 12px 16px;
    border: 2px solid #ddd;
    border-radius: 12px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    color: #222;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color 0.2s;
}
.acb-select:focus {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 4px rgba(74,144,217,0.12);
}

/* ===== TOGGLE SWITCH (No Background) ===== */
.acb-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    /* Mobile: tall enough to tap easily */
    min-height: 52px;
    background: #fafafa;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 10px 14px;
    transition: border-color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.acb-toggle-label:hover,
.acb-toggle-label:focus-within {
    border-color: #4a90d9;
    background: #f0f7ff;
}
.acb-toggle-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Track */
.acb-toggle-track {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    background: #d0d0d0;
    border-radius: 50px;
    flex-shrink: 0;
    transition: background 0.25s;
}
/* Thumb */
.acb-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: transform 0.25s;
}
/* Checked state */
.acb-toggle-label.is-checked .acb-toggle-track {
    background: #4a90d9;
}
.acb-toggle-label.is-checked .acb-toggle-thumb {
    transform: translateX(20px);
}
.acb-toggle-label.is-checked {
    border-color: #4a90d9;
    background: #eef5ff;
}
.acb-toggle-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    color: #1a1a2e;
    line-height: 1.3;
}

/* ===== BUTTONS ===== */
.acb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    /* Mobile tap target: min 52px */
    min-height: 54px;
    padding: 14px 20px;
    border: none;
    border-radius: 14px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.2px;
}
.acb-btn:active { transform: scale(0.97); }
.acb-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.acb-btn-primary {
    background: linear-gradient(135deg, #4a90d9, #2e6fb8);
    color: #fff;
    box-shadow: 0 4px 16px rgba(74,144,217,0.38);
}
.acb-btn-primary:hover { background: linear-gradient(135deg, #5a9fe8, #3a7fc8); box-shadow: 0 6px 20px rgba(74,144,217,0.5); }

.acb-btn-green {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: #fff;
    box-shadow: 0 4px 16px rgba(39,174,96,0.38);
    flex: 2;
}
.acb-btn-green:hover { background: linear-gradient(135deg, #2ecc71, #27ae60); }

.acb-btn-grey {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.13);
    flex: 1;
}
.acb-btn-grey:hover { background: linear-gradient(135deg, #a0b0b1, #8f9d9e); }

.acb-btn-red {
    background: #e74c3c;
    color: #fff;
    width: auto;
    padding: 12px 28px;
    min-height: 48px;
    box-shadow: none;
}
.acb-btn-red:hover { background: #c0392b; }

/* ===== LOADING ===== */
.acb-loading {
    text-align: center;
    padding: 50px 20px;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.acb-spinner {
    width: 52px;
    height: 52px;
    border: 5px solid #e0ecff;
    border-top-color: #4a90d9;
    border-radius: 50%;
    animation: acb-spin 0.8s linear infinite;
    margin: 0 auto 22px;
}
@keyframes acb-spin { to { transform: rotate(360deg); } }
.acb-loading-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 6px;
}
.acb-loading-sub { font-size: 0.85rem; color: #aaa; }

/* ===== ERROR ===== */
.acb-error-box {
    text-align: center;
    padding: 36px 24px;
    background: #fff8f8;
    border: 2px solid #ffcece;
    border-radius: 20px;
    margin-top: 20px;
}
.acb-error-icon { font-size: 34px; margin-bottom: 12px; }
.acb-error-text {
    font-size: 0.95rem;
    color: #c0392b;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 600;
}

/* ===== RESULT ===== */
.acb-result {
    margin-top: 20px;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    animation: acb-fade-up 0.4s ease-out;
}
@keyframes acb-fade-up {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}
.acb-result-header {
    text-align: center;
    padding: 20px 20px 0;
}
.acb-result-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 4px;
}
.acb-result-sub { font-size: 0.83rem; color: #aaa; margin-bottom: 16px; }
.acb-result-image-wrap {
    background: #f5f5f5;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
.acb-result-img {
    max-width: 100%;
    max-height: 560px;
    border-radius: 8px;
    display: block;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
}
.acb-result-actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
}

/* ===== LIMIT ===== */
.acb-limit {
    text-align: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, #fffdf0, #fff8e0);
    border: 2px solid #ffe090;
    border-radius: 20px;
    margin-top: 20px;
    animation: acb-fade-up 0.4s ease-out;
}
.acb-limit-icon { font-size: 50px; display: block; margin-bottom: 14px; }
.acb-limit-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    margin-bottom: 10px;
}
.acb-limit-text { font-size: 0.93rem; color: #666; line-height: 1.7; margin-bottom: 16px; }
.acb-limit-reset {
    display: inline-block;
    background: #fff;
    border: 2px solid #ffd080;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #d4820a;
    font-family: 'Nunito', sans-serif;
}