/* ===========================================================================
   Digital Menu — brand layer.
   The purchased theme ships a purple/orange palette; the brand is red on white.
   This layer recolours the surfaces that carry brand identity (footer, primary
   CTAs, accents) and leaves the multi-colour illustrative icons alone, since
   those read as illustration rather than chrome.
   Direction-agnostic: nothing here positions anything horizontally.
   =========================================================================== */

:root {
    --dm-red:        #d12627;   /* sampled from the logo */
    --dm-red-dark:   #a81d1e;
    --dm-red-light:  #ec4b46;
    --dm-ink:        #0b185f;   /* theme heading navy — pairs well with the red */
    --dm-ink-soft:   #5c6377;
    --dm-surface:    #f7f8fb;
}

/* --- Footer --------------------------------------------------------------- */
/* The purple band was baked into footer-bg4.png; drop the artwork and paint it. */
.rt-site-footer.bg_footer2 {
    background-image: none !important;
    background-color: #17172c;
    margin-top: 0;
}
.footer-callto {
    padding: 46px 0;
    background: linear-gradient(135deg, var(--dm-red-dark) 0%, var(--dm-red) 100%);
}
.footer-callto .media img { opacity: .95; }
.footer-bottom { border-top: 1px solid rgba(0, 0, 0, .06); }
.rt-copyright { color: var(--dm-ink-soft); }
.rt-heart { color: var(--dm-red); font-style: normal; }

/* The poster section already carries its own padding; the footer does not need
   to add another 93px of empty page on top of it. */
.dm-poster-area + .rt-site-footer,
.rt-site-footer.home-five { margin-top: 0; }

/* --- Primary calls to action ---------------------------------------------- */
.rt-btn.rt-app-parimary,
.rt-btn.rt-app-parimary:hover,
.rt-btn.rt-app-parimary:focus {
    background-image: linear-gradient(135deg, var(--dm-red) 0%, var(--dm-red-light) 100%);
    color: #fff;
}
.dm-poster-btn,
.dm-poster-btn:hover,
.dm-poster-btn:focus {
    background-color: var(--dm-red);
    border-color: var(--dm-red);
    color: #fff;
}
#scrollUp,
.rt-scrollup {
    background-image: linear-gradient(135deg, var(--dm-red) 0%, var(--dm-red-light) 100%) !important;
}

/* --- Navigation ----------------------------------------------------------- */
.main-header .navbar-nav > .nav-item > a:hover,
.main-header .navbar-nav > .nav-item.active > a { color: var(--dm-red); }
.main-header .navbar-nav > .nav-item > a.rt-register-link,
.main-header .navbar-nav > .nav-item > a[href*="register"] { color: var(--dm-red); }

/* --- Links ---------------------------------------------------------------- */
.dm-legal-body a,
.iconbox-content a { color: var(--dm-red); }
.dm-legal-body a:hover { color: var(--dm-red-dark); }

/* --- Shared rhythm -------------------------------------------------------- */
.rt-section-title { color: var(--dm-ink); }
.dm-legal-title { color: var(--dm-ink); }

/* --- Inner-page banner ---------------------------------------------------- */
/* The theme ships a 550px indigo→magenta breadcrumb block that fights the
   brand and pushes the real content below the fold. */
.rt-breadcump.default-breadcump,
.rt-breadcump {
    background-image: linear-gradient(135deg, var(--dm-red-dark) 0%, var(--dm-red) 55%, var(--dm-red-light) 100%) !important;
}
.rt-breadcump .rt-page-bg {
    /* bredcump-1.png is a full-bleed purple wash painted over the banner */
    display: none;
}
.rt-breadcump.rt-breadcump-height,
.rt-breadcump .row.rt-breadcump-height {
    height: auto;
    min-height: 0;
}
.rt-breadcump.rt-breadcump-height { padding: 74px 0 78px; }
/* The header is absolutely positioned over the top of the page. On inner pages
   that put a dark logo and dark nav links on the red banner, so start the
   banner below the header and leave white behind it. */
.rt-breadcump { margin-top: 102px; }
@media (max-width: 991.98px) {
    .rt-breadcump { margin-top: 84px; }
    .rt-breadcump.rt-breadcump-height { padding: 54px 0 56px; }
}
.rt-breadcump h1,
.rt-breadcump h2,
.rt-breadcump p { color: #fff; }
.rt-breadcump p { opacity: .92; }

/* --- Pricing -------------------------------------------------------------- */
/* Plans must line up whatever the length of each feature list.
   Scoped to .dm-plans: the register form also lives inside .price-area, and a
   broader selector turned its label/input pairs into flex rows. */
.dm-plans { align-items: stretch; }
.dm-plans > [class*="col-"] { display: flex; }
.rt-price-1 {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.rt-price-1 .price-body { flex: 1 1 auto; }
.dm-currency { font-size: .55em; font-weight: 600; margin: 0 .28em; }
.price-amount .d-block { margin-top: 2px; }

/* --- Forms: the theme's inputs are borderless on white, which reads as
       "nothing here" and fails contrast for the field boundary. ------------- */
.form-control {
    border: 1px solid #dfe3ea !important;
    background-color: #fff !important;
    min-height: 46px;
    color: #26304a;
}
.form-control:focus {
    border-color: var(--dm-red) !important;
    box-shadow: 0 0 0 3px rgba(209, 38, 39, .12);
    outline: none;
}
select.form-control {
    min-height: 46px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.6;
}
label { color: #2b3245; font-weight: 600; }

/* --- Buttons: theme teal/blue → brand red -------------------------------- */
.rt-btn.rt-gradient4,
.rt-btn.rt-gradient,
.rt-btn.rt-gradient2,
.rt-btn.rt-gradient3,
.rt-btn.rt-app-parimary2,
.rt-btn.gradient-btn,
button[type="submit"].rt-btn,
.rt-submit-btn,
.price-footer .rt-btn {
    background-image: linear-gradient(135deg, var(--dm-red) 0%, var(--dm-red-light) 100%) !important;
    border-color: transparent;
    color: #fff;
}

/* --- Vertical rhythm ------------------------------------------------------ */
/* The theme leaves 100–160px of empty page above every footer. */
.rt-site-footer { margin-top: 0 !important; }
.inner-content.dm-legal { max-width: 860px; padding-bottom: 24px; }

/* --- Select control -------------------------------------------------------- */
/* The theme's .form-control line-height clips descenders inside a native
   <select>, which made the plan names unreadable. */
select.form-control {
    height: auto;
    line-height: 1.9;
    padding: 10px 14px;
    -webkit-appearance: none;
       -moz-appearance: none;
            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 fill='%236b7280' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
[dir="rtl"] select.form-control {
    background-position: left 14px center;
    padding-right: 14px;
    padding-left: 36px;
}

/* --- Consent checkbox ------------------------------------------------------ */
.dm-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 26px;
}
.dm-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--dm-red);
}
.dm-consent label { margin: 0; font-weight: 500; }

/* --- Spacing between a banner and the content it introduces --------------- */
.rt-breadcump + .rt-spacer-70 { height: 46px; }

/* --- No horizontal scroll ------------------------------------------------- */
/* Several decorative blocks (banner blobs, scrollax drift, the .stra_image
   sparkles) are positioned outside the container by design. On a phone that
   turned into ~53px of horizontal scroll and pushed the logo and headline off
   the right edge in RTL. Nothing on the site scrolls sideways on purpose. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}
/* `clip` does the same job without turning <html> into a scroll container,
   which keeps sticky positioning and scroll anchoring behaving normally. */
@supports (overflow-x: clip) {
    html,
    body { overflow-x: clip; }
}
img,
svg,
video,
iframe { max-width: 100%; }

/* --- Demo strip ----------------------------------------------------------- */
.dm-demo-strip {
    display: flex;
    align-items: center;
    gap: 34px;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 34px;
    border: 1px solid #ecedf2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(20, 20, 45, .08);
}
.dm-demo-qr {
    flex: 0 0 auto;
    display: block;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eceef4;
}
.dm-demo-qr img { display: block; width: 160px; height: 160px; }
.dm-demo-body { flex: 1 1 auto; }
.dm-demo-title { margin-bottom: 10px; font-size: 24px; font-weight: 700; color: var(--dm-ink); }
.dm-demo-text { margin-bottom: 20px; font-size: 16px; line-height: 1.8; color: var(--dm-ink-soft); }
.dm-demo-btn { display: inline-block; }

@media (max-width: 767.98px) {
    .dm-demo-strip {
        flex-direction: column;
        gap: 22px;
        padding: 24px 20px;
        text-align: center;
    }
    .dm-demo-title { font-size: 20px; }
}

/* --- Demo CTA on the homepage -------------------------------------------- */
.dm-demo-btn { padding: 14px 34px; font-weight: 600; }

/* ===========================================================================
   Floating WhatsApp button
   Pinned to the trailing edge so it mirrors with the page and never covers the
   scroll-to-top control. Collapses to a circle on phones.
   =========================================================================== */
.dm-wa {
    position: fixed;
    z-index: 98;
    right: 24px;
    bottom: 96px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 22px 0 14px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
[dir="rtl"] .dm-wa {
    right: auto;
    left: 24px;
    padding: 0 14px 0 22px;
}
.dm-wa:hover,
.dm-wa:focus {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 14px 32px rgba(37, 211, 102, .46);
}
.dm-wa-icon { display: inline-flex; line-height: 0; }
.dm-wa-text { white-space: nowrap; }

@media (max-width: 767.98px) {
    .dm-wa {
        width: 56px;
        padding: 0;
        justify-content: center;
        bottom: 84px;
        right: 16px;
    }
    [dir="rtl"] .dm-wa { left: 16px; right: auto; padding: 0; }
    .dm-wa-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dm-wa { transition: none; }
    .dm-wa:hover { transform: none; }
}

/* --- WhatsApp CTA inside page content ------------------------------------ */
.dm-wa-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    background: #25d366;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease;
}
.dm-wa-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.dm-wa-cta svg { flex: 0 0 auto; }

/* --- WhatsApp panel on pricing / register --------------------------------- */
.dm-wa-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: 900px;
    margin: 0 auto;
    padding: 26px 32px;
    border: 1px solid #e6f7ec;
    border-radius: 20px;
    background: linear-gradient(135deg, #f4fdf7 0%, #eafaf0 100%);
}
.dm-wa-panel-title { margin-bottom: 6px; font-size: 21px; font-weight: 700; color: var(--dm-ink); }
.dm-wa-panel-text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--dm-ink-soft); }

@media (max-width: 767.98px) {
    .dm-wa-panel {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 22px 20px;
    }
    .dm-wa-panel .dm-wa-cta { justify-content: center; }
}

/* ===========================================================================
   Stats · FAQ · plan comparison
   =========================================================================== */
.dm-stats-area { padding: 96px 0 66px; background: var(--dm-surface); }
.dm-stats-row { align-items: stretch; }
.dm-stat {
    height: 100%;
    padding: 30px 26px;
    border: 1px solid #ecedf2;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
.dm-stat:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11, 24, 95, .10); }
.dm-stat-value {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--dm-red);
}
.dm-stat-label { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--dm-ink); }
.dm-stat-note { margin: 10px 0 0; font-size: 14px; line-height: 1.75; color: var(--dm-ink-soft); }

.dm-faq-area { padding: 96px 0; }
.dm-faq-list { border-top: 1px solid #ecedf2; }
.dm-faq-item { border-bottom: 1px solid #ecedf2; }
.dm-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: var(--dm-ink);
    list-style: none;
}
.dm-faq-q::-webkit-details-marker { display: none; }
.dm-faq-q:hover { color: var(--dm-red); }
.dm-faq-chevron { flex: 0 0 auto; transition: transform .25s ease; color: var(--dm-red); }
.dm-faq-item[open] .dm-faq-chevron { transform: rotate(180deg); }
.dm-faq-a {
    padding: 0 4px 24px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--dm-ink-soft);
}
/* <details> cannot animate its own height; fade the panel in instead. */
.dm-faq-item[open] .dm-faq-a { animation: dm-faq-in .25s ease both; }
@keyframes dm-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .dm-faq-item[open] .dm-faq-a { animation: none; }
    .dm-faq-chevron { transition: none; }
}

.dm-cmp-area { padding: 20px 0 90px; }
.dm-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dm-cmp-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #ecedf2;
    border-radius: 18px;
    overflow: hidden;
}
.dm-cmp-table th,
.dm-cmp-table td {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 1px solid #f1f2f6;
    font-size: 15px;
    vertical-align: middle;
}
.dm-cmp-table thead th {
    background: #fbfbfd;
    font-size: 16px;
    font-weight: 700;
    color: var(--dm-ink);
}
.dm-cmp-table tbody th {
    text-align: start;
    font-weight: 600;
    color: var(--dm-ink);
}
.dm-cmp-table tbody tr:last-child th,
.dm-cmp-table tbody tr:last-child td { border-bottom: 0; }
.dm-cmp-featured { background: rgba(209, 38, 39, .04); }
.dm-cmp-table thead .dm-cmp-featured { background: rgba(209, 38, 39, .08); color: var(--dm-red); }
.dm-cmp-yes { color: #17a137; font-size: 19px; font-weight: 700; }
.dm-cmp-no { color: #c3c7d1; font-size: 19px; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767.98px) {
    .dm-stats-area { padding: 64px 0 40px; }
    .dm-faq-area { padding: 64px 0; }
    .dm-stat-value { font-size: 34px; }
    .dm-faq-q { font-size: 16px; padding: 18px 2px; }
}

/* --- Social links (footer) ------------------------------------------------ */
.dm-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.dm-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e3e5ec;
    background: #fff;
    color: #58607a;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.dm-social a:hover {
    color: var(--dm-red);
    border-color: var(--dm-red);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .dm-social a { transition: none; } .dm-social a:hover { transform: none; } }

/* --- Testimonials ---------------------------------------------------------- */
/* The theme ships an indigo→magenta band here, which is the last large surface
   still fighting the red identity. */
.testimonials-area {
    background-image: linear-gradient(135deg, var(--dm-red-dark) 0%, var(--dm-red) 55%, #e8564f 100%) !important;
}
.testimonials-area .rt-section-title,
.testimonials-area .rt-section-title span { color: #fff; }
.rt-testimonials-single-item {
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(60, 8, 10, .18);
}

/* --- نقاط الإثبات: تصحيحان بعد اعتماد النصّ الجديد ونقل الكتلة ------------ */

/* العنوان يجب أن يظهر كما كُتب بالضبط. القاعدة العامة للقالب تفرض
   text-transform: capitalize على .rt-section-title فتحوّل
   "Why restaurants choose Digital Menu" إلى Title Case وتخالف النصّ المعتمد. */
.dm-stats-area .rt-section-title { text-transform: none; }

/* قيمة من كلمتين مثل "2 languages" تلتفّ إلى سطرين داخل عمود ربعي، فتهبط
   التسمية والملاحظة في تلك البطاقة وحدها وتختلّ المحاذاة بين البطاقات الأربع.
   نحجز ارتفاع سطرين دائماً (40px × 1.15 × 2) فتتحاذى الأسطر مهما طال النصّ. */
.dm-stats-area .dm-stat-value { min-height: 92px; }

@media (max-width: 991.98px) {
    /* عمودان في الصف: المحاذاة ما زالت مهمّة، لكن الخطّ أصغر */
    .dm-stats-area .dm-stat-value { min-height: 80px; }
}
@media (max-width: 575.98px) {
    /* بطاقة واحدة في الصف: لا جار تُحاذيه، فلا داعي لحجز فراغ */
    .dm-stats-area .dm-stat-value { min-height: 0; }
}