/* =====================================================================
 * Al Reem Mall — Frontend styles (mobile-first, tablet & desktop ready)
 * ===================================================================== */

.arm-mall * { box-sizing: border-box; }

.arm-mall {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", "Noto Kufi Arabic", sans-serif;
    color: #0f172a;
    background: #f9fafb;
    direction: rtl;
    text-align: right;
}
html[dir="ltr"] .arm-mall { direction: ltr; text-align: left; }

/* --- Hero --- */
.arm-hero {
    background: linear-gradient(180deg, #053024 0%, #0f5132 60%, #146c43 100%);
    color: #fff;
    padding: 60px 16px 80px;
    position: relative;
    overflow: hidden;
}
.arm-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 60px;
    background: radial-gradient(120% 100% at 50% 0%, transparent 60%, #f9fafb 60%);
}
.arm-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.arm-hero-eyebrow { margin: 0 0 6px; color: #d1fae5; font-size: 14px; }
.arm-hero-title   { margin: 0; font-size: clamp(28px, 6vw, 56px); color: #fbbf24; font-weight: 800; letter-spacing: .5px; }
.arm-hero-sub     { margin: 4px 0 14px; font-size: clamp(20px, 4vw, 36px); font-weight: 700; }
.arm-hero-desc    { margin: 0 0 22px; color: #d1fae5; max-width: 420px; }
.arm-cta {
    display: inline-block; padding: 12px 22px;
    border: 2px solid rgba(251,191,36,.7); color: #fbbf24;
    border-radius: 8px; text-decoration: none; font-weight: 600;
    transition: background .2s ease;
}
.arm-cta:hover { background: rgba(251,191,36,.1); }

/* --- Floors --- */
.arm-floors { max-width: 1200px; margin: 0 auto; padding: 40px 16px; }
.arm-floor { margin-bottom: 60px; }
.arm-floor-head {
    text-align: center; margin: 0 auto 24px; max-width: 320px;
    background: linear-gradient(90deg, #0f5132, #146c43);
    border: 2px solid rgba(251,191,36,.6); border-radius: 10px;
    color: #fbbf24; padding: 12px 18px;
}
.arm-floor-head h2 { margin: 0; font-size: 22px; letter-spacing: 2px; }
.arm-floor-head p  { margin: 4px 0 0; color: #ecfdf5; font-size: 13px; }

/* --- Grid (mobile-first) --- */
.arm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 480px) { .arm-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 768px) { .arm-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1024px){ .arm-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; } }

/* --- Card --- */
.arm-card {
    background: #fff; border-radius: 14px; border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.arm-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: #fbbf24; }
.arm-card-main {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 18px 10px 12px; text-decoration: none; color: inherit; text-align: center;
}
.arm-card-logo {
    width: 56px; height: 56px; border-radius: 12px;
    background: #f3f4f6; display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px; overflow: hidden;
}
.arm-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.arm-card-initial { font-size: 26px; font-weight: 800; color: #0f5132; }
.arm-card-name { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .5px; }
.arm-card-cat  { margin: 2px 0 0; font-size: 11px; color: #6b7280; letter-spacing: 1px; }

/* WhatsApp button on card */
.arm-card-wa {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 10px; background: #25D366; color: #fff;
    text-decoration: none; font-size: 12px; font-weight: 600;
    transition: background .2s ease;
}
.arm-card-wa:hover { background: #1ebe57; color: #fff; }

/* --- Single store page --- */
.arm-single {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 18px; margin-bottom: 20px;
    display: grid; gap: 18px;
}
@media (min-width: 768px) { .arm-single { grid-template-columns: 1.4fr 1fr; } }
.arm-single-meta p { margin: 0 0 8px; }
.arm-single-actions { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.arm-btn {
    padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600;
    background: #0f5132; color: #fff; transition: opacity .2s ease;
}
.arm-btn:hover { opacity: .9; color: #fff; }
.arm-btn-wa { background: #25D366; }

/* --- WhatsApp big button (shortcode) --- */
.arm-wa-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-radius: 50px; background: #25D366;
    color: #fff !important; text-decoration: none; font-weight: 600;
    box-shadow: 0 6px 16px rgba(37,211,102,.35);
}
.arm-wa-btn:hover { background: #1ebe57; }

/* --- Footer strip --- */
.arm-footer-strip {
    background: #053024; color: #d1fae5; padding: 22px 16px;
    display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
    border-top: 2px solid #fbbf24;
}
.arm-feat { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.arm-feat span {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid rgba(251,191,36,.6); color: #fbbf24;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}

.arm-empty { color: #6b7280; }

/* --- Floating WhatsApp on single store, mobile --- */
@media (max-width: 600px) {
    .arm-single-actions .arm-btn-wa {
        position: fixed; right: 16px; bottom: 16px;
        z-index: 999; border-radius: 50px;
        box-shadow: 0 8px 20px rgba(37,211,102,.45);
    }
}