/* ==============================================
   almhdy.sd – Main Stylesheet
   Minimal, timeless design – no frameworks
   Arabic (RTL) – Colors: white, dark gray, blue
   ============================================== */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Tajawal', Arial, sans-serif;
    background: #fff;
    color: #333;
    line-height: 1.7;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    color: #1a73e8;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    text-decoration: underline;
    color: #1558b0;
}

h1, h2, h3 {
    font-family: Georgia, 'Times New Roman', serif;
    color: #111;
    margin-bottom: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }

img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */
.site-header {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem 0;
    margin-bottom: 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
}
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}
.main-nav a {
    color: #333;
    font-weight: 500;
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}
.main-nav a:hover {
    text-decoration: none;
    border-bottom-color: #1a73e8;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.6rem 1.3rem;
    background: #1a73e8;
    color: #fff;
    border-radius: 6px;
    margin-top: 0.5rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
    font-size: 0.95rem;
}
.btn:hover {
    background: #1558b0;
    text-decoration: none;
    transform: translateY(-1px);
}
.btn-secondary {
    background: #e9ecef;
    color: #333;
}
.btn-secondary:hover {
    background: #dee2e6;
}

/* ---------- Cards (articles, products, etc.) ---------- */
.card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* ---------- Grids ---------- */
.articles-grid,
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* ---------- Category Badge ---------- */
.category-badge {
    display: inline-block;
    background: #1a73e8;
    color: #fff;
    padding: 0.25rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
    font-weight: 500;
}

/* ---------- Meta (date, reading time) ---------- */
.meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.reading-time {
    color: #1a73e8;
    font-weight: 500;
}

.excerpt {
    color: #444;
    line-height: 1.6;
}

/* ---------- Product cards ---------- */
.product-card .product-image {
    height: 180px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 8px 0 0;
    margin: -1.5rem -1.5rem 1rem -1.5rem;
}
.product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.placeholder-image {
    font-size: 1rem;
    color: #999;
    background: #f5f5f5;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Product single page ---------- */
.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    color: #1a73e8;
    font-weight: 500;
}
.product-hero {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
}
.product-main-image {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}
.placeholder-large {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #999;
    font-size: 1.2rem;
}

.product-details h1 { font-size: 2rem; margin-top: 0; }
.platform { color: #555; margin-bottom: 0.8rem; }
.description { font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.5rem; }

/* ---------- Free / Price badges ---------- */
.free-badge {
    display: inline-block;
    background: #28a745;
    color: #fff;
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}
.price-badge {
    display: inline-block;
    background: #007bff;
    color: #fff;
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}
.large {
    font-size: 1.1rem;
    padding: 0.4rem 1.2rem;
}

/* ---------- Product gallery (single page) ---------- */
.product-gallery {
    margin-top: 2rem;
}
.product-gallery .gallery-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.product-gallery .gallery-grid img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* ---------- Article single page ---------- */
.article-header {
    margin-bottom: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 1rem;
}
.article-header h1 {
    font-size: 2.2rem;
    margin: 0.5rem 0;
}
.content {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #333;
    max-width: 700px;
}

/* ---------- Payment details ---------- */
.payment-details {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
}
.payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.payment-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.2rem;
}
.payment-card h3 {
    margin-top: 0;
    color: #1a73e8;
    font-size: 1.2rem;
}
.bank-info {
    margin-bottom: 0.8rem;
    color: #555;
}
.account-row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px dotted #eee;
}
.account-row .label { font-weight: 500; color: #333; }
.account-row .value { font-weight: bold; }

/* ---------- Forms (request-license, etc.) ---------- */
.request-form {
    max-width: 600px;
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.request-form h2 {
    margin-top: 0;
    font-size: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.8rem;
    margin-bottom: 1.5rem;
}
.form-group {
    margin-bottom: 1.2rem;
}
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: #333;
}
.form-group input[type="text"],
.form-group input[type="file"],
.form-group select {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;
}
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #1a73e8;
    background: #fff;
}
.form-group small {
    display: block;
    margin-top: 0.3rem;
    color: #777;
    font-size: 0.85rem;
}

/* ---------- Tracking page ---------- */
.tracking-table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}
.tracking-table th,
.tracking-table td {
    padding: 0.8rem;
    border-bottom: 1px solid #eee;
    text-align: right;
}
.tracking-table th {
    width: 30%;
    color: #555;
}
.status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #fff;
}
.status-badge.pending { background: #ffc107; color: #333; }
.status-badge.approved { background: #28a745; }
.status-badge.rejected { background: #dc3545; }

/* ---------- Alerts ---------- */
.error-box {
    background: #f8d7da;
    color: #721c24;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    border: 1px solid #f5c6cb;
}
.success-box {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    border: 1px solid #c3e6cb;
}

/* ---------- Product preview card (payment page) ---------- */
.product-preview-card {
    display: flex;
    gap: 1.5rem;
    background: #fefefe;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    align-items: center;
}
.preview-image {
    flex: 0 0 150px;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-info {
    flex: 1;
}
.preview-info h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.6rem;
}
.preview-info .platform,
.preview-info .price {
    font-size: 1rem;
    color: #555;
    margin-bottom: 0.5rem;
}

/* ---------- Empty states ---------- */
.empty-state {
    text-align: center;
    padding: 3rem 0;
    color: #888;
}
.empty-state h2 {
    color: #555;
    margin-bottom: 0.5rem;
}

/* ---------- Pagination ---------- */
.pagination {
    margin-top: 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.pagination a {
    margin: 0 0.3rem;
}
.pagination span {
    color: #666;
    font-weight: 500;
}

/* ---------- Footer ---------- */
.site-footer {
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 3rem;
    font-size: 0.9rem;
    color: #666;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
        gap: 0.5rem;
    }
    .main-nav ul {
        gap: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .product-preview-card {
        flex-direction: column;
        text-align: center;
    }
    .preview-image {
        width: 100%;
        height: auto;
        max-height: 200px;
    }
}

@media (max-width: 500px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    .articles-grid,
    .products-grid {
        grid-template-columns: 1fr;
    }
    .request-form {
        padding: 1.5rem;
    }
}

/* Announcement banner */
.announcement-banner {
    background: #e8f0fe;
    border: 1px solid #d2e0f7;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-bottom: 2rem;
    color: #1a56db;
    font-size: 0.95rem;
    line-height: 1.6;
}
.announcement-item {
    margin-bottom: 0.4rem;
}
.announcement-item:last-child {
    margin-bottom: 0;
}

/* Product page layout */
.product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.product-gallery-column {
    position: sticky;
    top: 5rem;
}
.main-image-container {
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}
.main-image-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 450px;
}
.thumbnail-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
    overflow-x: auto;
}
.thumbnail {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}
.thumbnail:hover { border-color: #aaa; }
.thumbnail.active { border-color: #1a73e8; }
.product-details h1 {
    margin-top: 0;
    font-size: 2rem;
}
@media (max-width: 768px) {
    .product-layout {
        grid-template-columns: 1fr;
    }
    .product-gallery-column {
        position: static;
    }
}

/* Home page enhancements */
.hero {
    padding: 4rem 0 2rem;
    text-align: center;
}
.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}
.hero .highlight {
    color: #1a73e8;
}
.hero-sub {
    font-size: 1.2rem;
    color: #555;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    line-height: 1.8;
}
.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.stats-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0 3rem;
    flex-wrap: wrap;
}
.stat-item {
    text-align: center;
    background: #f8f9fa;
    padding: 1rem 2rem;
    border-radius: 8px;
    min-width: 120px;
}
.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #1a73e8;
    display: block;
}
.stat-label {
    font-size: 0.95rem;
    color: #555;
    margin-top: 0.2rem;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.see-all {
    font-size: 0.95rem;
    color: #1a73e8;
    font-weight: 500;
}
.read-more {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 500;
}
.home-about {
    margin: 3rem 0;
}
.about-card {
    background: #fefefe;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
.about-card p {
    margin-bottom: 1.5rem;
    color: #444;
    line-height: 1.8;
}
.about-card .btn {
    margin: 0 0.3rem;
}

@media (max-width: 600px) {
    .hero h1 {
        font-size: 2rem;
    }
    .stats-row {
        gap: 1rem;
    }
    .stat-item {
        padding: 0.8rem 1.2rem;
    }
}

.section-desc {
    color: #555;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===== Dark mode (automatic, based on system preference) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a1a;
        --text: #ddd;
        --heading: #eee;
        --card-bg: #2a2a2a;
        --border: #444;
        --header-bg: #222;
        --footer-bg: #222;
        --link: #6ba9f0;
        --btn-bg: #1a73e8;
        --btn-hover: #1558b0;
        --badge-bg: #1a73e8;
        --meta: #aaa;
        --excerpt: #bbb;
        --placeholder: #444;
    }
    body { background: var(--bg); color: var(--text); }
    h1,h2,h3 { color: var(--heading); }
    .site-header { background: var(--header-bg); border-color: var(--border); }
    .site-footer { background: var(--footer-bg); border-color: var(--border); color: var(--meta); }
    .logo { color: var(--heading); }
    .main-nav a { color: var(--text); }
    a { color: var(--link); }
    .card { background: var(--card-bg); border-color: var(--border); box-shadow: none; }
    .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    .category-badge { background: var(--badge-bg); color: #fff; }
    .meta { color: var(--meta); }
    .excerpt { color: var(--excerpt); }
    .btn-secondary { background: #555; color: #ddd; }
    .btn-secondary:hover { background: #666; }
    .pagination span { color: var(--meta); }
    .empty-state { color: var(--meta); }
    .empty-state h2 { color: var(--heading); }
    .placeholder-image, .placeholder-large { background: var(--placeholder); color: #888; }
    .product-image { background: var(--placeholder); }
    .product-hero { background: var(--placeholder); }
    .site-header { background: var(--header-bg); }
    .main-nav a:hover { border-color: var(--link); }
    .reading-time { color: var(--link); }
    .free-badge { background: #2d7a3f; }
    .price-badge { background: #0056b3; }
    .status-badge.pending { background: #b38b00; color: #fff; }
    .request-form, .payment-card, .product-preview-card { background: var(--card-bg); border-color: var(--border); }
    .payment-details { background: var(--header-bg); }
    .form-group input, .form-group select { background: #333; border-color: var(--border); color: var(--text); }
    .form-group input:focus, .form-group select:focus { background: #444; border-color: var(--link); }
    .btn { background: var(--btn-bg); }
    .btn:hover { background: var(--btn-hover); }
    .home-about .about-card { background: var(--card-bg); border-color: var(--border); }
    .stats-row .stat-item { background: var(--card-bg); }
    .announcement-banner { background: #1e2a3a; border-color: #2e3e4e; color: #6ba9f0; }
}

/* Search */
.search-form { display: flex; gap: 0.5rem; max-width: 400px; margin-bottom: 2rem; }
.search-form input { flex: 1; padding: 0.6rem; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; }
.search-results { list-style: none; padding: 0; }
.search-result-item { padding: 0.8rem 0; border-bottom: 1px solid #eee; }
.search-result-item a { font-weight: 500; }
.search-result-item small { color: #888; margin-left: 0.5rem; }

/* Article featured images */
.article-image {
    height: 180px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    margin: -1.5rem -1.5rem 1rem -1.5rem;
}
.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-featured-image {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
}
.article-featured-image img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

/* Announcement Banner */
.announcement-banner {
    background: #1a73e8;
    color: #fff;
    padding: 0.8rem 0;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
}
.announcement-banner .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner-inner {
    flex: 1;
}
.banner-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
    opacity: 0.8;
}
.banner-close:hover { opacity: 1; }
.announcement-item { margin-bottom: 0.2rem; }
.announcement-item:last-child { margin-bottom: 0; }

/* Comments */
.comments-section {
    margin-top: 3rem;
    border-top: 1px solid #eee;
    padding-top: 2rem;
}
.comment {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}
.comment-body {
    line-height: 1.6;
}
.comment-form {
    margin-top: 2rem;
    max-width: 500px;
}

/* Improved comment form */
.comment-form {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-top: 1.5rem;
}
.comment-form .form-group {
    margin-bottom: 1rem;
}
.comment-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
    color: #333;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.2s;
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}
.comment-form .btn {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
}

/* Dark mode adjustments for comment form */
@media (prefers-color-scheme: dark) {
    .comment-form {
        background: #2a2a2a;
        border-color: #444;
    }
    .comment-form label {
        color: #ddd;
    }
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form textarea {
        background: #333;
        border-color: #555;
        color: #ddd;
    }
    .comment-form input:focus,
    .comment-form textarea:focus {
        border-color: #6ba9f0;
        box-shadow: 0 0 0 2px rgba(107, 169, 240, 0.2);
    }
}

/* Comment form improvements */
.comment-form {
    background: #fafafa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-top: 1rem;
}
.comment-form .form-group {
    margin-bottom: 1rem;
}
.comment-form label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
    color: #333;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.2s;
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}
.comment-form .btn {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    margin-top: 0.5rem;
}

/* Dark mode for comment form */
@media (prefers-color-scheme: dark) {
    .comment-form {
        background: #2a2a2a;
        border-color: #444;
    }
    .comment-form label {
        color: #ddd;
    }
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form textarea {
        background: #333;
        border-color: #555;
        color: #ddd;
    }
    .comment-form input:focus,
    .comment-form textarea:focus {
        border-color: #6ba9f0;
        box-shadow: 0 0 0 2px rgba(107, 169, 240, 0.2);
    }
}