/* =====================================================
   AZAL Airlines - Component Styles
   ===================================================== */

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-arabic);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.5;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: var(--color-primary); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3); }

.btn-secondary { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn-secondary:hover { background: var(--color-accent); color: var(--color-primary); }

.btn-dark { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-dark:hover { background: var(--color-primary-light); }

.btn-white { background: #fff; color: var(--color-primary); border-color: #fff; }
.btn-white:hover { background: var(--color-bg); }

.btn-ghost { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-bg); color: var(--color-text); }

.btn-success { background: var(--color-success); color: #fff; }
.btn-error { background: var(--color-error); color: #fff; }

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn-xl { padding: var(--space-5) var(--space-10); font-size: var(--text-md); }
.btn-block { width: 100%; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-md); }

.btn-loading { pointer-events: none; color: transparent !important; }
.btn-loading::before { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }

/* ========== CARDS ========== */
.card { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; transition: all var(--transition-base); }
.card:hover { box-shadow: var(--shadow-card-hover); }
.card-clickable:hover { transform: translateY(-2px); }
.card-img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: var(--space-6); }
.card-title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-2); color: var(--color-text); }
.card-text { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border-light); display: flex; align-items: center; justify-content: space-between; }
.card-bordered { border: 1px solid var(--color-border); box-shadow: none; }
.card-bordered:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }

/* Icon Card */
.icon-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); text-align: center; transition: all var(--transition-base); cursor: pointer; }
.icon-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.icon-card .icon-wrapper { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); background: var(--color-accent-light); border-radius: var(--radius-lg); color: var(--color-accent); transition: all var(--transition-base); }
.icon-card:hover .icon-wrapper { background: var(--color-accent); color: var(--color-primary); }
.icon-card .icon-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); margin-bottom: var(--space-2); }
.icon-card .icon-desc { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ========== FORMS ========== */
.form-group { margin-bottom: var(--space-5); }
.form-label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); margin-bottom: var(--space-2); }
.form-control { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-family: var(--font-arabic); color: var(--color-text); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); transition: all var(--transition-fast); direction: rtl; }
.form-control:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15); }
.form-control::placeholder { color: var(--color-text-muted); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 36px; }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-check { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); cursor: pointer; }
.form-check input[type="checkbox"], .form-check input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; flex-shrink: 0; }
.form-error { font-size: var(--text-xs); color: var(--color-error); margin-top: var(--space-1); }
.form-control.is-invalid { border-color: var(--color-error); }

/* ========== BADGES ========== */
.badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-semibold); border-radius: var(--radius-full); }
.badge-primary { background: var(--color-primary); color: #fff; }
.badge-accent { background: var(--color-accent-light); color: var(--color-accent-dark); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }

/* ========== TABS ========== */
.tabs { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--color-border-light); margin-bottom: var(--space-6); }
.tab-item { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-secondary); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition-fast); }
.tab-item:hover { color: var(--color-text); }
.tab-item.active { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: var(--font-semibold); }

.tabs-pills { border-bottom: none; background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-1); display: inline-flex; }
.tabs-pills .tab-item { border-bottom: none; border-radius: var(--radius-md); margin-bottom: 0; padding: var(--space-2) var(--space-5); }
.tabs-pills .tab-item.active { background: var(--color-accent); color: var(--color-primary); }

/* ========== TABLES ========== */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { background: var(--color-bg); padding: var(--space-4) var(--space-5); font-weight: var(--font-semibold); color: var(--color-text-secondary); text-align: right; border-bottom: 1px solid var(--color-border); }
.table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-light); }
.table tbody tr:hover { background: var(--color-surface-hover); }

/* ========== MODAL ========== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: all var(--transition-base); display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.modal-backdrop.active { opacity: 1; visibility: visible; }
.modal { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 500px; transform: translateY(20px) scale(0.95); transition: transform var(--transition-base); }
.modal-backdrop.active .modal { transform: translateY(0) scale(1); }
.modal-header { padding: var(--space-6); border-bottom: 1px solid var(--color-border-light); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: 0; }
.modal-body { padding: var(--space-6); }
.modal-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border-light); display: flex; gap: var(--space-3); }

/* ========== DIVIDER ========== */
.divider { height: 1px; background: var(--color-border-light); margin: var(--space-6) 0; }

/* ========== FLOATING CONTACT BUTTONS ========== */
.floating-contact-wrapper {
    position: fixed;
    bottom: 30px;
    left: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999;
}

.floating-menu {
    position: absolute;
    bottom: 75px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    align-items: center;
}

.floating-contact-wrapper:hover .floating-menu,
.floating-contact-wrapper.active .floating-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-btn {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    position: relative;
    border: none;
    cursor: pointer;
}

.floating-main {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #d4a017, #e6b32b);
    z-index: 2;
}

.floating-main:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(212, 160, 23, 0.4);
}

.floating-main svg {
    width: 30px;
    height: 30px;
    transition: all 0.3s ease;
}

.floating-contact-wrapper:hover .floating-main .chat-icon,
.floating-contact-wrapper.active .floating-main .chat-icon {
    display: none;
}

.floating-contact-wrapper:hover .floating-main .close-icon,
.floating-contact-wrapper.active .floating-main .close-icon {
    display: block !important;
}

.floating-sub {
    width: 50px;
    height: 50px;
}

.floating-sub:hover {
    transform: translateY(-5px) scale(1.1);
}

.floating-sub svg {
    width: 24px;
    height: 24px;
}

.floating-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.floating-email {
    background: linear-gradient(135deg, #0a1f4a, #020c24);
    border: 2px solid #d4a017;
}

/* Tooltips */
.floating-sub::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 65px;
    background: rgba(2, 12, 36, 0.9);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateX(-10px);
    pointer-events: none;
    direction: rtl;
}

.floating-sub:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@media (max-width: 768px) {
    /* Floating Contact */
    .floating-contact-wrapper {
        bottom: 20px;
        left: 20px;
    }
    .floating-main {
        width: 50px;
        height: 50px;
    }
    .floating-main svg {
        width: 24px;
        height: 24px;
    }
    .floating-menu {
        bottom: 60px;
    }
    .floating-sub {
        width: 44px;
        height: 44px;
    }
    .floating-sub svg {
        width: 20px;
        height: 20px;
    }
    .floating-sub::before {
        display: none;
    }
    
    /* Buttons */
    .btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
    .btn-xl { padding: var(--space-4) var(--space-8); font-size: var(--text-sm); }
    
    /* Cards */
    .card-body { padding: var(--space-4); }
    .card-img { height: 160px; }
    .card-title { font-size: var(--text-base); }
    .card-footer { padding: var(--space-3) var(--space-4); }
    .icon-card { padding: var(--space-5) var(--space-4); }
    .icon-card .icon-wrapper { width: 50px; height: 50px; }
    
    /* Forms */
    .form-control { padding: var(--space-3); font-size: var(--text-sm); }
    
    /* Badges */
    .badge { font-size: 0.65rem; padding: 3px 8px; }
}

@media (max-width: 480px) {
    .floating-contact-wrapper { bottom: 15px; left: 15px; }
    .floating-main { width: 46px; height: 46px; }
    .floating-sub { width: 40px; height: 40px; }
    .card-body { padding: var(--space-3); }
    .card-img { height: 140px; }
    .icon-card { padding: var(--space-4) var(--space-3); }
}