/**
 * 11-components.css
 * Shared components: buttons, forms, badges, callouts, ad slots, dividers.
 * Use these classes in widget content, page builder blocks, or template-parts.
 */

/* ─── Buttons ─── */
.adc-btn,
.adc-btn-primary,
.adc-btn-secondary,
.adc-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--adc-gap-2);
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--adc-radius);
    font-family: var(--site-font);
    font-size: var(--adc-text-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 200ms, color 200ms, border-color 200ms, transform 120ms;
    white-space: nowrap;
}
.adc-btn-primary {
    background: var(--adc-brand);
    color: #fff !important;
    border-color: var(--adc-brand);
}
.adc-btn-primary:hover {
    background: var(--adc-brand-dark);
    border-color: var(--adc-brand-dark);
    color: #fff !important;
}
.adc-btn-primary:active {
    transform: translateY(1px);
}

.adc-btn-secondary {
    background: transparent;
    color: var(--adc-brand-dark) !important;
    border-color: var(--adc-brand);
}
.adc-btn-secondary:hover {
    background: var(--adc-brand-soft);
    color: var(--adc-brand-dark) !important;
}

.adc-btn-ghost {
    background: transparent;
    color: var(--adc-text-muted) !important;
    border-color: transparent;
}
.adc-btn-ghost:hover {
    background: var(--adc-bg-hover);
    color: var(--adc-text) !important;
}

.adc-btn-sm  { padding: 6px 12px;  font-size: var(--adc-text-xs); }
.adc-btn-lg  { padding: 14px 28px; font-size: var(--adc-text-md); }
.adc-btn-block { display: flex; width: 100%; }

/* ─── Forms ─── */
.adc-input,
.adc-textarea,
.adc-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--adc-border);
    border-radius: var(--adc-radius);
    background: var(--adc-bg);
    color: var(--adc-text);
    font-family: var(--site-font);
    font-size: var(--adc-text-md);
    line-height: var(--adc-lh-body);
    transition: border-color 200ms, box-shadow 200ms;
}
.adc-input:focus,
.adc-textarea:focus,
.adc-select:focus {
    outline: none;
    border-color: var(--adc-brand);
    box-shadow: 0 0 0 3px rgba(110, 159, 68, .18);
}
.adc-input::placeholder,
.adc-textarea::placeholder {
    color: var(--adc-text-faint);
}
.adc-textarea {
    min-height: 120px;
    resize: vertical;
}
.adc-label {
    display: block;
    font-size: var(--adc-text-sm);
    font-weight: 600;
    color: var(--adc-text);
    margin-block-end: var(--adc-gap-2);
}
.adc-help {
    display: block;
    font-size: var(--adc-text-xs);
    color: var(--adc-text-muted);
    margin-block-start: var(--adc-gap-1);
}
.adc-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--adc-gap-1);
    margin-block-end: var(--adc-gap-4);
}

/* ─── Badges ─── */
.adc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--adc-radius-pill);
    background: var(--adc-brand);
    color: #fff;
    font-size: var(--adc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}
.adc-badge-soft {
    background: var(--adc-brand-soft);
    color: var(--adc-brand-dark);
}
.adc-badge-outline {
    background: transparent;
    color: var(--adc-brand-dark);
    border: 1px solid var(--adc-brand-mid);
}
.adc-badge-alert {
    background: var(--adc-alert);
    color: #fff;
}
.adc-badge-alert-soft {
    background: var(--adc-alert-soft);
    color: var(--adc-alert);
}

/* ─── Callout box ─── */
.adc-callout {
    padding: var(--adc-gap-5);
    border-inline-start: 4px solid var(--adc-brand);
    background: var(--adc-brand-soft);
    border-radius: var(--adc-radius);
    color: var(--adc-text);
    margin-block: var(--adc-gap-5);
}
.adc-callout > :first-child { margin-block-start: 0; }
.adc-callout > :last-child  { margin-block-end: 0; }
.adc-callout-title {
    font-weight: 700;
    color: var(--adc-brand-dark);
    margin-block-end: var(--adc-gap-2);
}
.adc-callout-alert {
    border-inline-start-color: var(--adc-alert);
    background: var(--adc-alert-soft);
}
.adc-callout-alert .adc-callout-title { color: var(--adc-alert); }

/* ─── Pull-quote ─── */
.adc-pullquote {
    margin-block: var(--adc-gap-7);
    padding-inline: var(--adc-gap-5);
    border-inline-start: 4px solid var(--adc-brand);
    font-size: var(--adc-text-2xl);
    font-weight: 600;
    line-height: var(--adc-lh-heading);
    color: var(--adc-text);
    font-style: italic;
}
.adc-pullquote cite {
    display: block;
    font-size: var(--adc-text-sm);
    font-weight: 500;
    font-style: normal;
    color: var(--adc-text-muted);
    margin-block-start: var(--adc-gap-3);
}
.adc-pullquote cite::before {
    content: '— ';
    color: var(--adc-text-faint);
}

/* ─── Advert placeholder ─── */
.adc-ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin-block: var(--adc-gap-6);
    padding: var(--adc-gap-4);
    border: 1px dashed var(--adc-border-mid);
    border-radius: var(--adc-radius);
    background: var(--adc-bg-alt);
    color: var(--adc-text-faint);
    font-size: var(--adc-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.adc-ad-slot::before {
    content: 'إعلان';
}
.adc-ad-slot:has(*)::before { content: none; }

/* ─── Dividers ─── */
.adc-divider {
    border: none;
    border-block-start: 1px solid var(--adc-border);
    margin-block: var(--adc-gap-7);
}
.adc-divider-fancy {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--adc-border-mid), transparent);
    margin-block: var(--adc-gap-7);
}
.adc-divider-section {
    border: none;
    border-block-start: 2px solid var(--adc-brand);
    margin-block: var(--adc-gap-8) var(--adc-gap-7);
    width: 60px;
    margin-inline: auto;
}

/* ─── Container utilities ─── */
.adc-container-narrow { max-width: 800px;  margin-inline: auto; }
.adc-container        { max-width: 1200px; margin-inline: auto; padding-inline: var(--adc-gap-4); }

/* ─── Newsletter box ─── */
.adc-newsletter {
    padding: var(--adc-gap-6);
    border: 1px solid var(--adc-border);
    border-radius: var(--adc-radius-lg);
    background: var(--adc-brand-soft);
    text-align: center;
}
.adc-newsletter h3 {
    font-size: var(--adc-text-2xl);
    font-weight: 800;
    color: var(--adc-brand-dark);
    margin-block-end: var(--adc-gap-2);
}
.adc-newsletter p {
    color: var(--adc-text-muted);
    font-size: var(--adc-text-sm);
    margin-block-end: var(--adc-gap-4);
}
.adc-newsletter form {
    display: flex;
    gap: var(--adc-gap-2);
    max-width: 480px;
    margin-inline: auto;
}
@media (max-width: 540px) {
    .adc-newsletter form { flex-direction: column; }
}

/* ─── Loading skeleton ─── */
.adc-skeleton {
    background: linear-gradient(90deg, var(--adc-bg-alt) 0%, var(--adc-bg-hover) 50%, var(--adc-bg-alt) 100%);
    background-size: 200% 100%;
    animation: adc-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--adc-radius);
}
@keyframes adc-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}