/* =====================================================
HESHAM TV
FILE: css/components.css
===================================================== */

/* =====================================================
BADGE
===================================================== */

.badge {


display: inline-flex;

align-items: center;

padding: 10px 18px;

border-radius: var(--radius-full);

background:
    rgba(0,229,255,.12);

border:
    1px solid rgba(0,229,255,.25);

color: var(--primary);

font-size: var(--font-size-sm);

font-weight: var(--fw-semibold);


}

/* =====================================================
BUTTON SYSTEM
===================================================== */

.btn {


display: inline-flex;

align-items: center;

justify-content: center;

gap: 10px;

min-height: 52px;

padding:
    0 26px;

border: none;

cursor: pointer;

border-radius:
    var(--radius-full);

font-size:
    var(--font-size-md);

font-weight:
    var(--fw-semibold);

transition:
    all var(--transition-normal);


}

/* =====================================================
PRIMARY BUTTON
===================================================== */

.btn-primary {


color: white;

background:
    var(--gradient-primary);

box-shadow:
    0 10px 30px rgba(0,229,255,.25);


}

.btn-primary:hover {


transform:
    translateY(-3px);

box-shadow:
    0 15px 35px rgba(0,229,255,.35);


}

/* =====================================================
SECONDARY BUTTON
===================================================== */

.btn-secondary {


background:
    transparent;

color:
    var(--text-primary);

border:
    1px solid var(--border-color);


}

.btn-secondary:hover {


background:
    var(--bg-card);

border-color:
    var(--primary);


}

/* =====================================================
TELEGRAM BUTTON
===================================================== */

.btn-telegram {


background:
    #229ED9;

color: white;


}

.btn-telegram:hover {


transform:
    translateY(-3px);


}

/* =====================================================
HERO BUTTONS
===================================================== */

.hero-buttons {


display: flex;

gap: 15px;

flex-wrap: wrap;


}

/* =====================================================
CARD BASE
===================================================== */

.card {


background:
    var(--bg-card);

border:
    1px solid var(--border-color);

border-radius:
    var(--radius-lg);

padding: 30px;

transition:
    all var(--transition-normal);


}

.card:hover {


transform:
    translateY(-5px);

border-color:
    var(--border-hover);


}

/* =====================================================
STAT CARD
===================================================== */

.stat-card {


background:
    var(--bg-card);

border:
    1px solid var(--border-color);

border-radius:
    var(--radius-lg);

padding: 35px;

text-align: center;

transition:
    all var(--transition-normal);


}

.stat-card:hover {


transform:
    translateY(-5px);


}

.stat-card h2 {


color: var(--primary);

margin-bottom: 10px;


}

.stat-card p {


color: var(--text-muted);


}

/* =====================================================
FEATURE CARD
===================================================== */

.feature-card {


background:
    var(--bg-card);

border:
    1px solid var(--border-color);

border-radius:
    var(--radius-lg);

padding: 35px;

text-align: center;

transition:
    all var(--transition-normal);


}

.feature-card:hover {


transform:
    translateY(-8px);

border-color:
    rgba(0,229,255,.3);

box-shadow:
    var(--shadow-md);


}

/* =====================================================
GALLERY
===================================================== */

.gallery-grid img {


width: 100%;

border-radius:
    var(--radius-lg);

cursor: pointer;

transition:
    transform var(--transition-normal);


}

.gallery-grid img:hover {


transform:
    scale(1.03);


}

/* =====================================================
REVIEW CARD
===================================================== */

.review-card {


background:
    var(--bg-card);

border:
    1px solid var(--border-color);

border-radius:
    var(--radius-lg);

padding: 30px;

transition:
    all var(--transition-normal);


}

.review-card:hover {


transform:
    translateY(-5px);

border-color:
    var(--primary);


}

.review-card p {


margin-top: 12px;


}

/* =====================================================
FAQ
===================================================== */

.faq-item {


border:
    1px solid var(--border-color);

border-radius:
    var(--radius-md);

margin-bottom: 15px;

overflow: hidden;


}

.faq-question {


cursor: pointer;

padding: 20px;

background:
    var(--bg-card);

font-weight:
    var(--fw-semibold);


}

.faq-answer {


display: none;

padding: 20px;

background:
    var(--bg-surface);


}

.faq-item.active .faq-answer {


display: block;


}

/* =====================================================
INPUTS
===================================================== */

.input-group {


margin-bottom: 20px;


}

.input-group label {


display: block;

margin-bottom: 8px;


}

.input-group input,
.input-group textarea {


width: 100%;

border:
    1px solid var(--border-color);

background:
    var(--bg-input);

color:
    var(--text-primary);

padding: 15px;

border-radius:
    var(--radius-md);

outline: none;


}

.input-group textarea {


min-height: 140px;

resize: vertical;


}

/* =====================================================
DOWNLOAD SECTION
===================================================== */

.download-buttons {


display: flex;

justify-content: center;

gap: 15px;

flex-wrap: wrap;

margin-top: 25px;


}

/* =====================================================
FOOTER LINKS
===================================================== */

.footer-links a {


position: relative;


}

.footer-links a::after {


content: "";

position: absolute;

left: 0;
bottom: -4px;

width: 0;

height: 2px;

background:
    var(--primary);

transition:
    width var(--transition-normal);


}

.footer-links a:hover::after {


width: 100%;


}

/* =====================================================
WHATSAPP FLOAT
===================================================== */

.whatsapp-float {


position: fixed;

bottom: 25px;

right: 25px;

z-index:
    var(--z-fixed);

width: 80px;

height: 80px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background:
    #2588d3;

color: white;

font-size: 14px;

font-weight:
    var(--fw-bold);

box-shadow:
    var(--shadow-lg);

transition:
    all var(--transition-normal);


}

.whatsapp-float:hover {


transform:
    scale(1.08);


}

/* =====================================================
LANGUAGE TOGGLE
===================================================== */

#languageToggle,
#themeToggle {


width: 42px;

height: 42px;

border: none;

cursor: pointer;

border-radius: 50%;

background:
    var(--bg-card);

color:
    var(--text-primary);

transition:
    all var(--transition-normal);


}

#languageToggle:hover,
#themeToggle:hover {


background:
    var(--primary);

color: black;


}

/* =====================================================
MOBILE MENU BUTTON
===================================================== */

/* =====================================
MOBILE MENU BUTTON
===================================== */

.menu-toggle {


display: none;

width: 44px;

height: 44px;

border: none;

background: transparent;

cursor: pointer;

flex-direction: column;

justify-content: center;

gap: 6px;


}

.menu-toggle span {

```
width: 26px;

height: 3px;

border-radius: 999px;

background: var(--text-primary);

transition: .3s;


}


/* =====================================================
MOBILE
===================================================== */

@media (max-width: 768px) {


.hero-buttons {

    flex-direction: column;
}

.btn {

    width: 100%;
}

.whatsapp-float {

    width: 80px;

    height: 80px;

    right: 18px;

    bottom: 18px;
}


}