/**
 * ECOIA — کامپوننت‌های قابل استفاده مجدد
 * Cards | Buttons | Badges | Forms | Alerts | Tabs | Misc
 * وابسته به: variables.css، base.css
 */

/* ════════════════════════════════════════════════════════════
   ۱. دکمه‌ها (Buttons)
════════════════════════════════════════════════════════════ */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         0.75rem 1.75rem;
    font-family:     var(--font-fa);
    font-size:       var(--text-base);
    font-weight:     600;
    line-height:     1;
    letter-spacing:  0.01em;
    border:          1px solid transparent;
    border-radius:   var(--radius-md);
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background  0.32s cubic-bezier(0.23,1,0.32,1),
                     box-shadow  0.32s cubic-bezier(0.23,1,0.32,1),
                     border-color 0.32s ease,
                     color       0.25s ease,
                     transform   0.28s cubic-bezier(0.23,1,0.32,1);
    min-height:      48px;
    position:        relative;
    overflow:        hidden;
}

/* shimmer sweep */
.btn::after {
    content:        '';
    position:       absolute;
    top:            -10%;
    right:          -100%;
    width:          55%;
    height:         120%;
    background:     linear-gradient(105deg, transparent, rgba(255,255,255,0.10), transparent);
    transform:      skewX(-18deg);
    transition:     right 0.55s cubic-bezier(0.23,1,0.32,1);
    pointer-events: none;
}
.btn:hover::after { right: 120%; }

/* ── دکمه طلایی اصلی ── */
.btn--gold {
    background: linear-gradient(135deg, #D4B860 0%, #A07828 100%);
    color:      #0A0800;
    box-shadow: 0 4px 20px rgba(200,169,81,0.20),
                inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn--gold:hover {
    background: var(--gold-gradient-reverse);
    color:      #0A0800;
    box-shadow: 0 8px 32px rgba(200,169,81,0.38),
                inset 0 1px 0 rgba(255,255,255,0.20);
    transform:  translateY(-2px);
}
.btn--gold:active {
    transform:  translateY(0);
    box-shadow: 0 3px 12px rgba(200,169,81,0.22);
    transition-duration: 0.12s;
}

/* ── دکمه Outlined — glass border ── */
.btn--outline {
    background:   transparent;
    color:        var(--gold, #C8A951);
    border-color: rgba(200,169,81,0.35);
    box-shadow:   none;
}
.btn--outline::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse at center,
                    rgba(200,169,81,0.10) 0%,
                    transparent 70%);
    opacity:    0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.btn--outline:hover {
    color:        var(--gold-light, #E8D5A0);
    border-color: rgba(200,169,81,0.62);
    background:   rgba(200,169,81,0.06);
    box-shadow:   0 0 24px rgba(200,169,81,0.14),
                  0 4px 16px rgba(0,0,0,0.25);
    transform:    translateY(-2px);
}
.btn--outline:hover::before { opacity: 1; }
.btn--outline:active {
    transform:         translateY(0);
    transition-duration: 0.12s;
}

/* ── دکمه Ghost ── */
.btn--ghost {
    background:   transparent;
    color:        var(--text-secondary);
    border-color: var(--border-default);
}
.btn--ghost:hover {
    color:        var(--text-primary);
    border-color: rgba(200,169,81,0.25);
    background:   rgba(255,255,255,0.03);
    transform:    translateY(-1px);
}

/* اندازه‌ها */
.btn--sm {
    padding:    0.5rem 1.25rem;
    font-size:  var(--text-sm);
    min-height: 36px;
}

.btn--lg {
    padding:    1rem 2.25rem;
    font-size:  var(--text-lg);
    min-height: 56px;
}

.btn--xl {
    padding:    1.125rem 2.5rem;
    font-size:  var(--text-xl);
    min-height: 64px;
}

/* دکمه تمام‌عرض */
.btn--full { width: 100%; }

/* دکمه غیرفعال */
.btn:disabled,
.btn--disabled {
    opacity: 0.45;
    cursor:  not-allowed;
    transform: none !important;
}

.btn:disabled::after { display: none; }

/* آیکون دکمه */
.btn svg,
.btn .btn-icon {
    width:  18px;
    height: 18px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   ۲. کارت‌ها (Cards)
════════════════════════════════════════════════════════════ */

.card {
    background:    var(--bg-card);
    border:        1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    transition:    all var(--transition-smooth);
    position:      relative;
}

.card:hover {
    border-color: var(--border-hover);
    box-shadow:   var(--shadow-gold);
    transform:    translateY(-3px);
}

/* کارت با padding داخلی */
.card--padded {
    padding: var(--space-6);
}

/* کارت خدمات */
.card--service {
    padding:    var(--space-6);
    text-align: center;
}

.card--service .card__icon {
    width:         56px;
    height:        56px;
    border-radius: var(--radius-lg);
    background:    var(--gold-muted);
    border:        1px solid var(--border-gold-faint);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin:        0 auto var(--space-4);
    transition:    all var(--transition-smooth);
}

.card--service .card__icon svg {
    width:  26px;
    height: 26px;
    color:  var(--gold-main);
    stroke: var(--gold-main);
}

.card:hover .card--service .card__icon,
.card--service:hover .card__icon {
    background: var(--gold-muted-strong);
    box-shadow: var(--shadow-gold);
}

.card__title {
    font-size:     var(--text-lg);
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: var(--space-2);
}

.card__text {
    font-size:  var(--text-sm);
    color:      var(--text-secondary);
    line-height: 1.7;
    margin:     0;
}

/* کارت دستاورد با تصویر */
.card--achievement {
    display:        flex;
    flex-direction: column;
}

.card--achievement .card__image {
    width:    100%;
    height:   200px;
    overflow: hidden;
    position: relative;
}

.card--achievement .card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.card--achievement:hover .card__image img {
    transform: scale(1.05);
}

.card--achievement .card__image::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    transition: opacity var(--transition-base);
}

.card--achievement:hover .card__image::after {
    background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(212,175,55,0.08));
}

.card--achievement .card__body {
    padding: var(--space-5);
    flex:    1;
    display: flex;
    flex-direction: column;
}

.card__date {
    font-size:     var(--text-xs);
    color:         var(--gold-main);
    font-family:   var(--font-en-body);
    margin-bottom: var(--space-2);
    letter-spacing: 0.05em;
}

.card__link {
    margin-top:  auto;
    padding-top: var(--space-3);
    color:       var(--gold-main);
    font-size:   var(--text-sm);
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    transition:  gap var(--transition-base);
}

.card:hover .card__link {
    gap: var(--space-3);
}

/* ════════════════════════════════════════════════════════════
   ۳. Counter — آمار عددی
════════════════════════════════════════════════════════════ */

.counter-item {
    text-align: center;
    padding:    var(--space-6);
}

.counter-item__number {
    font-family:   var(--font-en-body);
    font-size:     clamp(2.5rem, 5vw, 3.75rem);
    font-weight:   700;
    color:         var(--gold-main);
    line-height:   1;
    display:       block;
    margin-bottom: var(--space-2);
    text-shadow:   0 0 30px rgba(212, 175, 55, 0.3);
}

.counter-item__label {
    font-size:   var(--text-base);
    color:       var(--text-secondary);
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   ۴. Badge — برچسب‌ها
════════════════════════════════════════════════════════════ */

.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       0.2rem 0.65rem;
    font-size:     var(--text-xs);
    font-weight:   600;
    border-radius: var(--radius-full);
    white-space:   nowrap;
    line-height:   1.5;
}

.badge--gold    { background: var(--gold-muted);         color: var(--gold-main);     border: 1px solid var(--border-gold-faint); }
.badge--success { background: var(--state-success-bg);   color: var(--state-success); }
.badge--warning { background: var(--state-warning-bg);   color: var(--state-warning); }
.badge--error   { background: var(--state-error-bg);     color: var(--state-error);   }
.badge--info    { background: var(--state-info-bg);      color: var(--state-info);    }
.badge--neutral { background: var(--bg-card);            color: var(--text-secondary); border: 1px solid var(--border-default); }

/* ════════════════════════════════════════════════════════════
   ۵. فرم‌ها (Forms)
════════════════════════════════════════════════════════════ */

.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display:       block;
    font-size:     var(--text-sm);
    font-weight:   600;
    color:         var(--text-secondary);
    margin-bottom: var(--space-2);
}

.form-label span.required {
    color:       var(--state-error);
    margin-right: 3px;
}

.form-control {
    width:         100%;
    padding:       0.75rem 1rem;
    background:    var(--bg-input);
    border:        1px solid var(--border-input);
    border-radius: var(--radius-md);
    color:         var(--text-primary);
    font-family:   var(--font-fa);
    font-size:     var(--text-base);
    direction:     rtl;
    transition:    border-color var(--transition-base), box-shadow var(--transition-base);
    min-height:    48px;
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:focus {
    outline:      none;
    border-color: var(--border-input-focus);
    box-shadow:   0 0 0 3px rgba(212, 175, 55, 0.12);
    background:   var(--bg-card);
}

.form-control:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

textarea.form-control {
    resize:     vertical;
    min-height: 120px;
}

select.form-control {
    cursor:      pointer;
    appearance:  none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF37' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: left 1rem center;
    padding-left:        2.5rem;
}

.form-hint {
    font-size:  var(--text-xs);
    color:      var(--text-muted);
    margin-top: var(--space-1);
}

.form-error {
    font-size:  var(--text-xs);
    color:      var(--state-error);
    margin-top: var(--space-1);
    display:    none;
}

.form-group.has-error .form-control {
    border-color: var(--state-error);
}

.form-group.has-error .form-error {
    display: block;
}

/* ════════════════════════════════════════════════════════════
   ۶. Alert — پیام‌های سیستمی
════════════════════════════════════════════════════════════ */

.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    padding:       var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border:        1px solid transparent;
    font-size:     var(--text-sm);
    margin-bottom: var(--space-4);
}

.alert--success { background: var(--state-success-bg); border-color: rgba(46,204,113,0.3);  color: var(--state-success); }
.alert--warning { background: var(--state-warning-bg); border-color: rgba(243,156,18,0.3);  color: var(--state-warning); }
.alert--error   { background: var(--state-error-bg);   border-color: rgba(231,76,60,0.3);   color: var(--state-error);   }
.alert--info    { background: var(--state-info-bg);    border-color: rgba(52,152,219,0.3);  color: var(--state-info);    }
.alert--gold    { background: var(--gold-muted);       border-color: var(--border-gold-faint); color: var(--gold-light); }

/* ════════════════════════════════════════════════════════════
   ۷. Divider — جداکننده‌های تزئینی
════════════════════════════════════════════════════════════ */

/* خط تزئینی طلایی افقی */
.gold-line {
    display:    block;
    width:      60px;
    height:     2px;
    background: var(--gold-gradient);
    margin:     var(--space-4) auto;
    border:     none;
}

.gold-line--right {
    margin-left:  0;
    margin-right: 0;
}

/* نقطه تزئینی */
.gold-dot {
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--gold-main);
    box-shadow:    0 0 8px var(--gold-glow);
}

/* ════════════════════════════════════════════════════════════
   ۸. Skeleton Loading
════════════════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-card) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation:       skeleton-shimmer 1.5s infinite;
    border-radius:   var(--radius-md);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════
   ۹. Tooltip
════════════════════════════════════════════════════════════ */

[data-tooltip] {
    position: relative;
    cursor:   help;
}

[data-tooltip]::before {
    content:       attr(data-tooltip);
    position:      absolute;
    bottom:        calc(100% + 8px);
    right:         50%;
    transform:     translateX(50%);
    background:    var(--bg-card);
    color:         var(--text-primary);
    border:        1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding:       var(--space-2) var(--space-3);
    font-size:     var(--text-xs);
    white-space:   nowrap;
    pointer-events: none;
    opacity:       0;
    transition:    opacity var(--transition-base);
    z-index:       var(--z-tooltip, 999);
    box-shadow:    var(--shadow-card);
}

[data-tooltip]:hover::before {
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   ۱۰. کپی آدرس ولت (Membership)
════════════════════════════════════════════════════════════ */

.wallet-box {
    background:    var(--bg-input);
    border:        1px solid var(--border-gold-faint);
    border-radius: var(--radius-lg);
    padding:       var(--space-4) var(--space-5);
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    flex-wrap:     wrap;
}

.wallet-box__address {
    flex:        1;
    font-family: var(--font-en-body);
    font-size:   var(--text-sm);
    color:       var(--gold-light);
    word-break:  break-all;
    direction:   ltr;
    text-align:  left;
}

.wallet-box__copy {
    flex-shrink:   0;
    padding:       var(--space-2) var(--space-4);
    background:    var(--gold-muted);
    border:        1px solid var(--border-gold-faint);
    border-radius: var(--radius-md);
    color:         var(--gold-main);
    font-size:     var(--text-sm);
    font-weight:   600;
    cursor:        pointer;
    transition:    all var(--transition-base);
}

.wallet-box__copy:hover {
    background: var(--gold-muted-strong);
    box-shadow: var(--shadow-gold);
}

.wallet-box__copy.copied {
    background: var(--state-success-bg);
    color:      var(--state-success);
    border-color: rgba(46,204,113,0.3);
}

/* ════════════════════════════════════════════════════════════
   LIGHTBOX — global (used on all pages)
════════════════════════════════════════════════════════════ */
.lightbox {
    position:        fixed;
    inset:           0;
    z-index:         9000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         clamp(20px, 5vw, 60px);
    background:      rgba(7, 7, 7, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity:         0;
    visibility:      hidden;
    transition:      opacity 0.35s ease, visibility 0.35s ease;
}
.lightbox.is-open {
    opacity:    1;
    visibility: visible;
}
.lightbox__img {
    max-width:     90vw;
    max-height:    90vh;
    object-fit:    contain;
    border-radius: 4px;
    box-shadow:    0 24px 80px rgba(0, 0, 0, 0.7);
    transform:     scale(0.94);
    transition:    transform 0.4s var(--ease-cinematic, cubic-bezier(0.23, 1, 0.32, 1));
    border:        1px solid var(--border-gold, rgba(200,169,81,0.18));
}
.lightbox.is-open .lightbox__img {
    transform: scale(1);
}
.lightbox__close {
    position:        absolute;
    top:             clamp(16px, 3vw, 32px);
    left:            clamp(16px, 3vw, 32px);
    width:           48px;
    height:          48px;
    border-radius:   50%;
    background:      rgba(17, 17, 17, 0.8);
    border:          1px solid var(--border-gold, rgba(200,169,81,0.18));
    color:           var(--gold-light, #E8D5A0);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    font-size:       22px;
    line-height:     1;
    transition:      background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lightbox__close:hover {
    background:   rgba(200, 169, 81, 0.12);
    border-color: var(--border-gold-hover, rgba(200,169,81,0.40));
    transform:    rotate(45deg);
}
.lightbox__close:focus-visible {
    outline:        2px solid var(--gold, #C8A951);
    outline-offset: 2px;
}
.lightbox__caption {
    position:    absolute;
    bottom:      clamp(20px, 4vw, 40px);
    left:        50%;
    transform:   translateX(-50%);
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   var(--fs-small, 14px);
    color:       var(--text-secondary, #9A9590);
    text-align:  center;
    max-width:   80vw;
}
.lightbox__spinner {
    position:      absolute;
    width:         40px;
    height:        40px;
    border:        3px solid rgba(200,169,81,0.15);
    border-top:    3px solid var(--gold, #C8A951);
    border-radius: 50%;
    animation:     lb-spin 0.7s linear infinite;
    display:       none;
}
.lightbox.is-loading .lightbox__spinner { display: block; }
.lightbox.is-loading .lightbox__img    { opacity: 0; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .lightbox__spinner { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   BACK TO TOP — global (used on all pages)
════════════════════════════════════════════════════════════ */
.back-to-top {
    position:         fixed;
    bottom:           clamp(24px, 4vw, 40px);
    left:             clamp(24px, 4vw, 40px);
    width:            48px;
    height:           48px;
    border-radius:    50%;
    background:       rgba(17, 17, 17, 0.85);
    border:           1px solid var(--border-gold, rgba(200,169,81,0.25));
    color:            var(--gold-light, #E8D5A0);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    z-index:          500;
    opacity:          0;
    visibility:       hidden;
    transform:        translateY(12px);
    transition:       opacity 0.3s ease, visibility 0.3s ease,
                      transform 0.3s ease, background 0.25s ease,
                      border-color 0.25s ease;
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.back-to-top svg {
    width:  20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.back-to-top.is-visible {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}
.back-to-top:hover {
    background:   rgba(200, 169, 81, 0.15);
    border-color: rgba(200, 169, 81, 0.5);
    transform:    translateY(-3px);
    box-shadow: 0 0 20px rgba(200,169,81,0.20), 0 4px 16px rgba(0,0,0,0.5);
}
.back-to-top:focus-visible {
    outline:        2px solid var(--gold, #C8A951);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: none; }
}