/* ==========================================================================
   BeeStore — شاشات حساب العميل
   طبقة تصميم موحّدة لكل الشاشات الموجودة في قائمة "التنقل" الجانبية:
   حسابي، طلباتي، إدارة العناوين، طرق الدفع، قسائمي، الإعدادات،
   الأسئلة الشائعة، سياسة الخصوصية، من نحن، والشروط والأحكام.

   تُحمَّل بعد beestore.css، ولذلك تستخدم !important فقط حيث توجد قواعد
   قديمة معلَّمة بـ !important في الملفات السابقة.
   ========================================================================== */

:root {
    --acc-ink: #3B2A12;
    --acc-ink-soft: #6B5B41;
    --acc-muted: #93866F;
    --acc-line: #F0E4C6;
    --acc-line-soft: #F6EEDC;
    --acc-cream: #FFF8E7;
    --acc-cream-deep: #FFF1CC;
    --acc-honey: #FFC928;
    --acc-honey-dark: #E6A900;
    --acc-surface: #FFFFFF;
    --acc-page: #FFFCF5;
    --acc-radius: 20px;
    --acc-radius-sm: 14px;
    --acc-shadow: 0 20px 46px -30px rgba(59, 42, 18, .45), 0 2px 8px -4px rgba(59, 42, 18, .08);
    --acc-shadow-hover: 0 26px 54px -28px rgba(59, 42, 18, .5), 0 4px 12px -6px rgba(59, 42, 18, .1);
}

/* ==========================================================================
   1) إطار الصفحة
   ========================================================================== */
.userPage {
    background:
        radial-gradient(circle at 88% -6%, rgba(255, 224, 138, .3), transparent 34%),
        var(--acc-page);
    padding-block: clamp(28px, 4vw, 56px);
    margin: 0 !important;
}

.userPage .fx-userPage { align-items: flex-start; }

/* العمود الجانبي يبقى مرئيًا أثناء تمرير المحتوى الطويل. */
@media (min-width: 992px) {
    .userPage .tabsList {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}

/* ==========================================================================
   2) القائمة الجانبية "التنقل"
   ========================================================================== */
.userPage .tabsList {
    padding: 14px !important;
    gap: 3px;
    border: 1px solid var(--acc-line) !important;
    border-radius: var(--acc-radius) !important;
    background: var(--acc-surface) !important;
    box-shadow: var(--acc-shadow);
}

.userPage .tabsList .fxHead-btns {
    margin-bottom: 10px;
    padding-inline: 8px;
}

.userPage .tabsList h2 {
    position: relative;
    margin: 0;
    padding: 0 0 0 0 !important;
    padding-inline-start: 14px !important;
    color: var(--acc-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
}

/* نقطة عسلية صغيرة تُعلِّم عنوان القائمة. */
.userPage .tabsList h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acc-honey), var(--acc-honey-dark));
    transform: translateY(-50%);
}

.userPage .tabsList .tabButton {
    position: relative;
    width: 100%;
    padding: 9px 10px !important;
    gap: 12px !important;
    border: 0;
    border-radius: var(--acc-radius-sm);
    background: transparent !important;
    box-shadow: none !important;
    text-align: start;
    transition: background-color .22s ease, color .22s ease;
}

/* الأيقونة داخل مربّع بحجم ثابت — يُلغي فلتر الرمادي القديم. */
.userPage .tabsList .tabButton svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
    filter: none !important;
    transition: none;
}

.userPage .tabsList .tabButton::before {
    content: "";
    position: absolute;
    inset-inline-start: 10px;
    top: 50%;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--acc-line-soft);
    transform: translateY(-50%);
    transition: background .22s ease, box-shadow .22s ease;
    z-index: 0;
}

.userPage .tabsList .tabButton > * { position: relative; z-index: 1; }

.userPage .tabsList .tabButton svg {
    margin-inline-start: 8px;
    margin-inline-end: 8px;
}

.userPage .tabsList .tabButton { color: #A2916F; }

.userPage .tabsList .tabButton span {
    color: var(--acc-ink-soft) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -.1px;
}

.userPage .tabsList .tabButton:hover {
    transform: none !important;
    background: var(--acc-cream) !important;
    box-shadow: none !important;
}

.userPage .tabsList .tabButton:hover::before {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--acc-line);
}

.userPage .tabsList .tabButton:hover { color: var(--acc-honey-dark); }
.userPage .tabsList .tabButton:hover span { color: var(--acc-ink) !important; }

.userPage .tabsList .tabButton.active,
.userPage .tabsList a.active {
    background: linear-gradient(90deg, var(--acc-cream-deep), rgba(255, 248, 231, .55)) !important;
    box-shadow: none !important;
}

.userPage .tabsList .tabButton.active::before {
    background: linear-gradient(135deg, var(--acc-honey), var(--acc-honey-dark));
    box-shadow: 0 6px 14px -8px rgba(191, 138, 0, .9);
}

.userPage .tabsList .tabButton.active { color: var(--acc-ink); }

.userPage .tabsList .tabButton.active span {
    color: var(--acc-ink) !important;
    font-weight: 700 !important;
}

/* شريط عسلي على حافة البند النشط في اتجاه القراءة. */
.userPage .tabsList .tabButton.active::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    width: 3px;
    height: 24px;
    border-radius: 3px;
    background: var(--acc-honey-dark);
    transform: translateY(-50%);
}

.userPage .tabsList .tabButton:focus-visible {
    outline: 2px solid var(--acc-honey-dark);
    outline-offset: 2px;
}

/* بند تسجيل الخروج يُفصل بخط ويأخذ تحذيرًا لونيًا عند التمرير. */
.userPage .tabsList .tabButton--logout {
    margin-top: 6px;
    padding-top: 13px !important;
}

.userPage .tabsList .tabButton--logout::after {
    content: "";
    position: absolute;
    inset-inline: 10px;
    top: 0;
    width: auto;
    height: 1px;
    border-radius: 0;
    background: var(--acc-line);
    transform: none;
}

.userPage .tabsList .tabButton--logout:hover { background: #FFF4F1 !important; }
.userPage .tabsList .tabButton--logout:hover::before { background: #FFE7E0; box-shadow: inset 0 0 0 1px #F7CFC3; }
.userPage .tabsList .tabButton--logout:hover span { color: #A8341A !important; }
.userPage .tabsList .tabButton--logout:hover { color: #A8341A; }

/* زرّ فتح القائمة على الشاشات الصغيرة. */
.userPage .btnTabs,
.btnTabs {
    height: 52px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: var(--acc-radius-sm) !important;
    background: linear-gradient(135deg, #FFE08A, #FFC928 45%, #F0B000) !important;
    box-shadow: 0 10px 24px -14px rgba(191, 138, 0, .85) !important;
}

.btnTabs span,
.btnTabs .fxFilterBtn span { color: var(--acc-ink) !important; font-weight: 700 !important; }
.btnTabs .fxFilterBtn svg { color: var(--acc-ink) !important; }
.btnTabs img { filter: none !important; }

/* ==========================================================================
   3) بطاقة المحتوى وعناوين الأقسام
   ========================================================================== */
.userPage .userPage-content > .profileStyle,
.userPage .userPage-content > .myOrders,
.userPage .userPage-content > .manageAddress,
.userPage .userPage-content > .paymentMethods,
.userPage .userPage-content > .myCoupons,
.userPage .userPage-content > .settingsDiv,
.userPage .userPage-content > .helpTopics,
.userPage .userPage-content > .staticPage {
    width: 100% !important;
    padding: clamp(18px, 2.4vw, 28px) !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: var(--acc-radius) !important;
    background: var(--acc-surface) !important;
    box-shadow: var(--acc-shadow) !important;
}

/* الإعدادات شبكة صفوف، فتحتاج فاصلًا داخليًا بدل الحشو المزدوج. */
.userPage .userPage-content > .settingsDiv { gap: 12px; }

.userPage .userPage-content .titles h1,
.userPage .userPage-content .headMyOrders h2 {
    position: relative;
    margin: 0;
    padding-inline-start: 15px;
    color: var(--acc-ink) !important;
    font-weight: 800 !important;
}

.userPage .userPage-content .titles h1::before,
.userPage .userPage-content .headMyOrders h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 5px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--acc-honey), var(--acc-honey-dark));
    transform: translateY(-50%);
}

.userPage .userPage-content .titles p { color: var(--acc-muted) !important; line-height: 1.75; }

.userPage .userPage-content .headMyOrders {
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--acc-line-soft);
}

/* ==========================================================================
   4) الحقول
   ========================================================================== */
.userPage .userPage-content label {
    margin-bottom: 6px;
    color: var(--acc-ink) !important;
    font-weight: 600 !important;
}

.userPage .userPage-content .input-public,
.userPage .userPage-content input[type="text"],
.userPage .userPage-content input[type="email"],
.userPage .userPage-content input[type="tel"],
.userPage .userPage-content input[type="date"],
.userPage .userPage-content input[type="number"],
.userPage .userPage-content input[type="password"],
.userPage .userPage-content textarea,
.userPage .userPage-content select,
.userPage .userPage-content .boxInput,
.userPage .userPage-content .phone-input-container {
    border: 1px solid var(--acc-line) !important;
    border-radius: 12px !important;
    background: #FFFDF8 !important;
    color: var(--acc-ink);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.userPage .userPage-content input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
.userPage .userPage-content select,
.userPage .userPage-content .boxInput {
    height: 48px !important;
}

.userPage .userPage-content textarea { padding: 12px 14px !important; }

.userPage .userPage-content .boxInput input,
.userPage .userPage-content .phone-input-container input {
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.userPage .userPage-content .input-public:focus,
.userPage .userPage-content input:focus,
.userPage .userPage-content textarea:focus,
.userPage .userPage-content select:focus,
.userPage .userPage-content .boxInput:focus-within,
.userPage .userPage-content .phone-input-container:focus-within {
    border-color: var(--acc-honey-dark) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(255, 201, 40, .2) !important;
    outline: none;
}

.userPage .userPage-content ::placeholder { color: #B3A891; }

.userPage .userPage-content .list-boxInput {
    height: auto;
    max-height: 190px;
    margin-top: 6px;
    padding: 8px !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--acc-shadow);
    top: 100%;
}

.userPage .userPage-content .list-boxInput span {
    padding: 8px 10px !important;
    border-radius: 9px;
    color: var(--acc-ink-soft);
    transition: background-color .18s ease, color .18s ease;
}

.userPage .userPage-content .list-boxInput span:hover {
    background: var(--acc-cream);
    color: var(--acc-ink);
}

/* ==========================================================================
   5) الأزرار
   ========================================================================== */
.userPage .userPage-content .btnLinear-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #FFE08A, #FFC928 45%, #F0B000) !important;
    box-shadow: 0 14px 30px -18px rgba(191, 138, 0, .95) !important;
    color: var(--acc-ink) !important;
    font-weight: 800 !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.userPage .userPage-content .btnLinear-gradient span,
.userPage .userPage-content .btnLinear-gradient .button-text { color: var(--acc-ink) !important; }

.userPage .userPage-content .btnLinear-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px -18px rgba(191, 138, 0, 1) !important;
    filter: saturate(1.05);
}

/* ==========================================================================
   6) الجداول
   ========================================================================== */
.userPage .userPage-content .divTable {
    border: 1px solid var(--acc-line-soft);
    border-radius: 16px;
    overflow: auto;
}

.userPage .userPage-content .divTable table { width: 100%; border-collapse: collapse; }

.userPage .userPage-content .divTable thead th {
    padding: 13px 14px !important;
    background: var(--acc-cream);
    color: var(--acc-ink) !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.userPage .userPage-content .divTable tbody td {
    padding: 14px !important;
    border-top: 1px solid var(--acc-line-soft);
    color: var(--acc-ink-soft);
    vertical-align: middle;
}

.userPage .userPage-content .divTable tbody tr { transition: background-color .18s ease; }
.userPage .userPage-content .divTable tbody tr:hover { background: #FFFDF4; }

/* ==========================================================================
   7) الحالة الفارغة
   ========================================================================== */
.acc-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: clamp(30px, 5vw, 56px) 20px;
    text-align: center;
}

.acc-empty__icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    color: var(--acc-honey-dark);
    /* شكل خلية النحل — عنصر بصري متكرّر في هوية BeeStore. */
    clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
    background: linear-gradient(145deg, var(--acc-cream-deep), #FFE8AE);
}

.acc-empty__icon svg { width: 32px; height: 32px; }
.acc-empty__title { margin: 4px 0 0; color: var(--acc-ink); font-size: 18px; font-weight: 800; }
.acc-empty__text { margin: 0; max-width: 42ch; color: var(--acc-muted); font-size: 14px; line-height: 1.8; }

.acc-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFE08A, #FFC928 45%, #F0B000);
    box-shadow: 0 12px 26px -16px rgba(191, 138, 0, .95);
    color: var(--acc-ink);
    font-weight: 800;
    text-decoration: none;
}

.acc-empty__cta:hover { color: var(--acc-ink); filter: saturate(1.06); }

/* ==========================================================================
   8) استجابة الشاشات الصغيرة
   ========================================================================== */
@media (max-width: 767px) {
    .userPage .userPage-content > .profileStyle,
    .userPage .userPage-content > .myOrders,
    .userPage .userPage-content > .manageAddress,
    .userPage .userPage-content > .paymentMethods,
    .userPage .userPage-content > .myCoupons,
    .userPage .userPage-content > .settingsDiv,
    .userPage .userPage-content > .helpTopics,
    .userPage .userPage-content > .staticPage {
        border-radius: 16px !important;
    }

    .userPage .userPage-content .headMyOrders { align-items: stretch; }
}

/* ==========================================================================
   شاشة «حسابي» — المعلومات الشخصية
   ========================================================================== */
.acc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--acc-line-soft);
}

.acc-card-head__title {
    position: relative;
    margin: 0;
    padding-inline-start: 15px;
    color: var(--acc-ink);
    font-size: 20px;
    font-weight: 800;
}

.acc-card-head__title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 5px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--acc-honey), var(--acc-honey-dark));
    transform: translateY(-50%);
}

.acc-card-head__sub {
    margin: 6px 0 0;
    color: var(--acc-muted);
    font-size: 13px;
    line-height: 1.7;
}

/* بطاقة الهوية أعلى النموذج: الصورة + الاسم + إجراء تغيير الصورة. */
.profileStyle .changeImageProfile {
    width: 100% !important;
    gap: 20px !important;
    margin-bottom: 22px !important;
    padding: 18px !important;
    border: 1px solid var(--acc-line);
    border-radius: 18px;
    background: linear-gradient(120deg, var(--acc-cream) 0%, #FFFDF7 60%);
}

/* الصورة نفسها هي زرّ الرفع، مع طبقة تظهر عند التمرير. */
.profileStyle .changeImageProfile .profileAvatar {
    position: relative;
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--acc-honey), 0 12px 26px -14px rgba(191, 138, 0, .9);
    cursor: pointer;
    overflow: hidden;
}

.profileStyle .changeImageProfile .profileAvatar .profileImage {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 50%;
    object-fit: cover;
    background: #FFFFFF;
}

.profileAvatar__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #FFFFFF;
    background: rgba(59, 42, 18, .58);
    opacity: 0;
    transition: opacity .22s ease;
}

.profileAvatar__overlayText { font-size: 12px; font-weight: 700; }

.profileStyle .changeImageProfile .profileAvatar:hover .profileAvatar__overlay,
.profileStyle .changeImageProfile .profileAvatar:focus-visible .profileAvatar__overlay { opacity: 1; }

.profileIdentity { min-width: 0; }

.profileIdentity__name {
    margin: 0;
    color: var(--acc-ink);
    font-size: 20px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visually-hidden-file {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.profileIdentity__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.profileStyle .changeImageProfile .profileIdentity__pick {
    height: auto;
    padding: 9px 20px !important;
    border: 1px solid var(--acc-honey-dark) !important;
    border-radius: 11px !important;
    background: #FFFFFF !important;
    color: #92670A !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none !important;
    transition: background-color .2s ease, color .2s ease;
}

.profileStyle .changeImageProfile .profileIdentity__pick:hover {
    background: linear-gradient(135deg, var(--acc-honey), var(--acc-honey-dark)) !important;
    color: var(--acc-ink) !important;
}

.profileIdentity__hint { color: var(--acc-muted); font-size: 12px; }
.profileIdentity__hint.is-selected { color: #7A5A08; font-weight: 700; }

/* زرّ الحفظ يمتد بعرض النموذج بدل عرض ثابت 161px. */
.profileStyle form .btnLinear-gradient {
    width: 100% !important;
    height: auto !important;
    margin-top: 14px !important;
}

.profile-phone-hint { color: var(--acc-muted) !important; }

@media (max-width: 575px) {
    .profileStyle .changeImageProfile {
        flex-direction: column;
        text-align: center;
        gap: 14px !important;
    }
    .profileStyle .changeImageProfile .profileAvatar { width: 96px; height: 96px; }
    .profileIdentity__actions { justify-content: center; }
}

/* ==========================================================================
   شاشة «طلباتي»
   ========================================================================== */
.myOrders .headMyOrders .fxHeaderForm { margin: 0; }

.myOrders .headMyOrders .fxFormSearch {
    width: min(320px, 100%);
    height: 46px;
    padding-inline: 14px;
    gap: 10px;
    border: 1px solid var(--acc-line);
    border-radius: 12px;
    background: #FFFDF8;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.myOrders .headMyOrders .fxFormSearch:focus-within {
    border-color: var(--acc-honey-dark);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(255, 201, 40, .2);
}

.myOrders .headMyOrders .fxFormSearch input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.myOrders .divTable {
    border-color: var(--acc-line) !important;
    border-radius: 16px !important;
}

.myOrders .divTable th {
    background: var(--acc-cream) !important;
    border-bottom-color: var(--acc-line) !important;
    color: var(--acc-ink) !important;
}

.myOrders .divTable td { border-bottom-color: var(--acc-line-soft) !important; }
.myOrders .divTable tbody tr:hover { background: #FFFDF4 !important; }

/* كل حالة طلب بلون خاص — سابقًا كانت كل الحالات بخلفية صفراء واحدة. */
.order-status-pill {
    padding: 7px 14px !important;
    font-weight: 700;
    font-size: 13px;
    background: #FFF5D7;
    color: #9A6700 !important;
    box-shadow: inset 0 0 0 1px rgba(154, 103, 0, .18);
}

.order-status-pill.colorGreen3 {
    background: #E8F6E4;
    color: #2F6B25 !important;
    box-shadow: inset 0 0 0 1px rgba(47, 107, 37, .2);
}

.order-status-pill.colorBlue {
    background: #E7F0FB;
    color: #23558F !important;
    box-shadow: inset 0 0 0 1px rgba(35, 85, 143, .2);
}

.order-status-pill.colorRed2 {
    background: #FDECE8;
    color: #A8341A !important;
    box-shadow: inset 0 0 0 1px rgba(168, 52, 26, .2);
}

.order-status-pill.colorBlack5 {
    background: #F1EEE7;
    color: #5C5344 !important;
    box-shadow: inset 0 0 0 1px rgba(92, 83, 68, .18);
}

/* الحالة الفارغة تملأ عرض الجدول بدل خلية بسطر واحد. */
.myOrders .acc-empty-row td { padding: 0 !important; border-bottom: 0 !important; }
.myOrders .acc-empty-row:hover { background: transparent !important; }

/* على الجوال يتحوّل الجدول إلى بطاقات بدل التمرير الأفقي. */
@media (max-width: 768px) {
    .myOrders .divTable { overflow: visible; border: 0 !important; background: transparent; }
    .myOrders .divTable table { min-width: 0 !important; table-layout: auto !important; }
    .myOrders .divTable thead { display: none; }
    .myOrders .divTable tbody tr {
        display: block;
        margin-bottom: 12px;
        padding: 6px 14px;
        border: 1px solid var(--acc-line);
        border-radius: 16px;
        background: #FFFFFF;
        box-shadow: 0 10px 24px -20px rgba(59, 42, 18, .5);
    }
    .myOrders .divTable tbody tr td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: auto !important;
        padding: 11px 0 !important;
        text-align: start !important;
        border-bottom: 1px solid var(--acc-line-soft) !important;
    }
    .myOrders .divTable tbody tr td::before {
        content: attr(data-label);
        color: var(--acc-muted);
        font-size: 12px;
        font-weight: 700;
    }
    .myOrders .divTable tbody tr td.order-actions {
        display: flex !important;
        justify-content: stretch;
    }
    .myOrders .divTable tbody tr td.order-actions::before { content: none; }
    .myOrders .divTable tbody tr td.order-actions .order-action-btn { flex: 1 1 auto; margin: 0; }
    .myOrders .divTable tbody tr td:last-child { border-bottom: 0 !important; }
    .myOrders .acc-empty-row td { display: block !important; }
    .myOrders .acc-empty-row td::before { content: none; }
    .myOrders .divTable tbody tr.acc-empty-row {
        padding: 0;
        border-color: var(--acc-line);
    }
}

/* ==========================================================================
   شاشة «إدارة العناوين»
   ========================================================================== */
.manageAddress .titles { width: 100% !important; margin-bottom: 22px !important; }

.manageAddress form .form__group {
    gap: 0 !important;
    margin-bottom: 26px !important;
    padding: 8px !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: 18px !important;
    background: #FFFDF8 !important;
}

/* كل عنوان محفوظ يصبح بطاقة قائمة بذاتها تُبرز الخيار المحدَّد. */
.manageAddress .locationRow {
    padding: 14px 16px 14px 14px !important;
    padding-inline-start: 14px !important;
    padding-inline-end: 3.4rem !important;
    border: 1px solid transparent !important;
    border-radius: 14px;
    transition: background-color .2s ease, border-color .2s ease;
}

.manageAddress .locationRow + .locationRow { margin-top: 6px; }
.manageAddress .locationRow:hover { background: var(--acc-cream); }

.manageAddress .locationRow:has(.form__radio-input:checked) {
    border-color: rgba(230, 169, 0, .55) !important;
    background: var(--acc-cream);
}

.manageAddress .form__radio-button {
    inset-inline-end: 1rem;
    right: auto;
    border-color: var(--acc-honey-dark) !important;
}

.manageAddress .form__radio-button::after { background-color: var(--acc-honey-dark) !important; }

.manageAddress .form__radio-label h4 { margin: 0 0 3px; color: var(--acc-muted) !important; font-weight: 700; }
.manageAddress .form__radio-label span:not(.form__radio-button) { color: var(--acc-ink) !important; }

.manageAddress .buttons { gap: 8px; }

.manageAddress .buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--acc-line);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.manageAddress .buttons a:hover { background: var(--acc-cream-deep); box-shadow: inset 0 0 0 1px var(--acc-honey-dark); }
.manageAddress .buttons a.colorRed:hover { background: #FDECE8; box-shadow: inset 0 0 0 1px #E2A092; }

/* الخريطة وحقل البحث فوقها. */
.manageAddress #pac-input {
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: 12px !important;
}

.addressMapCanvas {
    height: 380px;
    width: 100%;
    border: 1px solid var(--acc-line);
    border-radius: 16px;
    overflow: hidden;
}

.manageAddress .locate-me-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 18px;
    border: 1px solid var(--acc-honey-dark);
    border-radius: 11px;
    background: #FFFFFF;
    color: #92670A;
    font-weight: 700;
    transition: background-color .2s ease, color .2s ease;
}

.manageAddress .locate-me-btn:hover {
    background: linear-gradient(135deg, var(--acc-honey), var(--acc-honey-dark));
    color: var(--acc-ink);
}

.manageAddressStyle .listInputs .btnLinear-gradient {
    width: min(280px, 100%) !important;
    border-radius: 14px !important;
}

@media (max-width: 575px) {
    .manageAddress .locationRow { padding-inline-end: 2.8rem !important; }
    .addressMapCanvas { height: 300px; }
    .manageAddressStyle .listInputs .btnLinear-gradient { width: 100% !important; }
}

/* ==========================================================================
   شاشة «طرق الدفع»
   ========================================================================== */
.paymentMethods .titles { margin-bottom: 22px !important; }

.paymentMethods fieldset { gap: 12px; }

.paymentMethods .radio-item {
    border: 1px solid var(--acc-line) !important;
    border-radius: 18px !important;
    background: #FFFDF8 !important;
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.paymentMethods .radio-item:hover {
    border-color: rgba(230, 169, 0, .55) !important;
    box-shadow: 0 12px 26px -22px rgba(59, 42, 18, .6);
}

/* البطاقة المفتوحة/المختارة تأخذ إطار العسل بدل الأخضر القديم. */
.paymentMethods .radio-item.selected {
    border: 1px solid var(--acc-honey-dark) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(255, 201, 40, .18);
}

.paymentMethods fieldset .labelRadio {
    padding: 16px 18px !important;
    border-radius: 18px !important;
}

.paymentMethods fieldset .labelRadio .fxLabel { gap: 14px !important; min-width: 0; }

/* شعار وسيلة الدفع داخل مربّع موحّد لأن الشعارات ترد بمقاسات مختلفة. */
.paymentMethods .payment-icon {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px;
    padding: 8px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--acc-line);
    object-fit: contain;
}

.paymentMethods .labelRadio .fxLabel span { color: var(--acc-ink) !important; font-weight: 700 !important; }
.paymentMethods .labelRadio .fxLabel p { color: var(--acc-muted) !important; direction: ltr; text-align: start; }

.paymentMethods .buttons .arrowBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--acc-cream) !important;
    transition: background-color .2s ease, transform .25s ease;
}

.paymentMethods .radio-item.selected .buttons .arrowBtn { transform: rotate(180deg); }

.paymentMethods .radio-item .gap-formGroup {
    padding: 20px 18px !important;
    border-top: 1px solid var(--acc-line) !important;
    background: #FFFCF4;
}

.paymentMethods .radio-item .form-group label { color: var(--acc-ink) !important; font-weight: 700 !important; }

.paymentMethods .delete-account span { font-weight: 700; }

@media (max-width: 575px) {
    .paymentMethods .radio-item .fx-formGroups .form-group { width: 100%; }
    .paymentMethods .payment-icon { width: 44px !important; height: 44px !important; flex-basis: 44px; }
}

/* ==========================================================================
   شاشة «قسائمي» — كل قسيمة على هيئة تذكرة خصم
   ========================================================================== */
.acc-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--acc-cream-deep);
    color: #8A6100;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* شبكة تملأ العرض بأعمدة متساوية بدل عناصر flex بنِسب مئوية. */
.myCoupons .listMyCoupons {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    align-items: stretch;
    gap: 18px !important;
    row-gap: 18px !important;
    width: 100%;
}

.myCoupons .boxCoupon {
    position: relative;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    border: 1px dashed rgba(230, 169, 0, .55) !important;
    border-radius: 18px !important;
    background: linear-gradient(160deg, #FFFDF6, #FFF7E4) !important;
    box-shadow: 0 14px 30px -26px rgba(59, 42, 18, .7) !important;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.myCoupons .boxCoupon:hover {
    transform: translateY(-3px);
    border-color: var(--acc-honey-dark) !important;
    box-shadow: 0 22px 40px -26px rgba(59, 42, 18, .8) !important;
}

.myCoupons .boxCoupon .boxCoupon-texts {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 18px 16px !important;
}

.boxCoupon__label {
    display: block;
    margin-bottom: 4px;
    color: var(--acc-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* الرمز نفسه في إطار متقطّع ليقرأ كقيمة قابلة للنسخ. */
.myCoupons .boxCoupon h3 {
    display: block;
    max-width: 100%;
    margin-bottom: 12px !important;
    overflow-wrap: anywhere;
    text-align: center;
    padding: 7px 14px;
    border: 1px dashed rgba(230, 169, 0, .8);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--acc-ink) !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    direction: ltr;
}

.myCoupons .boxCoupon p { color: var(--acc-muted) !important; line-height: 1.7; }

.myCoupons .boxCoupon .fx-boxCoupon {
    margin: 14px 0 !important;
    padding: 10px 12px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--acc-line);
}

.myCoupons .boxCoupon .fx-boxCoupon span { color: #8A6100 !important; font-weight: 800 !important; }
.myCoupons .boxCoupon h5 { margin: 0; color: var(--acc-ink-soft) !important; font-size: 13px !important; white-space: normal; line-height: 1.7; }
.myCoupons .boxCoupon h5 .colorGreen { color: #8A6100 !important; }

/* خطّ التمزيق بين جسم التذكرة وزرّ النسخ، مع نصف دائرتين على الحافتين. */
.myCoupons .boxCoupon button {
    position: relative;
    height: 52px !important;
    margin-top: 0 !important;
    border: 0;
    border-top: 1px dashed rgba(230, 169, 0, .7);
    border-radius: 0 !important;
    background: #FFFFFF !important;
    color: #8A6100;
    transition: background-color .22s ease, color .22s ease;
}

.myCoupons .boxCoupon button::before,
.myCoupons .boxCoupon button::after {
    content: "";
    position: absolute;
    top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--acc-surface);
}

.myCoupons .boxCoupon button::before { inset-inline-start: -8px; }
.myCoupons .boxCoupon button::after { inset-inline-end: -8px; }

.myCoupons .boxCoupon button span { color: #8A6100 !important; font-weight: 800 !important; }
.myCoupons .boxCoupon button svg { color: currentColor; }

.myCoupons .boxCoupon button:hover {
    transform: none !important;
    background: linear-gradient(135deg, var(--acc-honey), var(--acc-honey-dark)) !important;
}

.myCoupons .boxCoupon button:hover span { color: var(--acc-ink) !important; }
.myCoupons .boxCoupon button:hover svg { filter: none !important; }

@media (max-width: 575px) {
    .myCoupons .listMyCoupons { grid-template-columns: 1fr; }
}

/* ==========================================================================
   شاشة «الإعدادات»
   ========================================================================== */
.userPage .userPage-content > .settingsDiv .acc-card-head { margin-bottom: 4px; }
.userPage .userPage-content > .settingsDiv .boxSettings.settings-row { border-color: var(--acc-line) !important; }
.userPage .userPage-content > .settingsDiv .settings-row__title { color: var(--acc-ink) !important; }
.userPage .userPage-content > .settingsDiv .settings-row__description { color: var(--acc-muted) !important; }

/* ==========================================================================
   شاشة «الأسئلة الشائعة»
   ========================================================================== */
.userPage .userPage-content > .helpCenter {
    width: 100% !important;
    padding: clamp(18px, 2.4vw, 28px) !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: var(--acc-radius) !important;
    background: var(--acc-surface) !important;
    box-shadow: var(--acc-shadow) !important;
}

.helpCenter .filterTabs .filterTabs-names {
    gap: 8px !important;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--acc-line-soft);
}

.helpCenter .filterTabs .filterTab {
    width: auto !important;
    padding: 9px 18px !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: 999px !important;
    background: #FFFDF8 !important;
    color: var(--acc-ink-soft) !important;
    font-weight: 600;
    white-space: nowrap;
}

.helpCenter .filterTabs .filterTab:hover {
    transform: none !important;
    border-color: var(--acc-honey-dark) !important;
    background: var(--acc-cream) !important;
    color: var(--acc-ink) !important;
}

.helpCenter .filterTabs .filterTab.active {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--acc-honey), var(--acc-honey-dark)) !important;
    color: var(--acc-ink) !important;
    box-shadow: 0 10px 22px -14px rgba(191, 138, 0, .95);
}

/* كل سؤال بطاقة قابلة للطي بدل صفوف مفصولة بخطوط رمادية. */
.helpCenter .faq-item {
    margin-top: 10px;
    padding: 4px 16px !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: 14px;
    background: #FFFDF8;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.helpCenter .faq-item:last-child { border-bottom: 1px solid var(--acc-line) !important; }
.helpCenter .faq-item:hover { border-color: rgba(230, 169, 0, .5) !important; background: var(--acc-cream); }

.helpCenter .faq-item.active {
    padding-bottom: 14px !important;
    border-color: var(--acc-honey-dark) !important;
    background: #FFFFFF;
    box-shadow: 0 14px 30px -26px rgba(59, 42, 18, .7);
}

.helpCenter .faq-item .faq-title { padding: 14px 0; gap: 14px; }
.helpCenter .faq-item .faq-title span { color: var(--acc-ink) !important; line-height: 1.6; }
.helpCenter .faq-item.active .faq-title span { color: #8A6100 !important; }

/* علامة + / − داخل دائرة عسلية. */
.helpCenter .faq-item .faq-title .icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 8px;
    border-radius: 50%;
    background: var(--acc-cream-deep);
}

.helpCenter .faq-item.active .faq-title .icon { background: linear-gradient(135deg, var(--acc-honey), var(--acc-honey-dark)); }

.helpCenter .faq-item .faq-content p { color: var(--acc-ink-soft) !important; line-height: 1.9; }

/* ==========================================================================
   الصفحات النصّية: «سياسة الخصوصية» و«من نحن» و«الشروط والأحكام»
   المحتوى يأتي من لوحة الإدارة كـ HTML حرّ، فتُضبط طباعته هنا.
   ========================================================================== */
.userPage .userPage-content > .contantTexts {
    width: 100% !important;
    padding: clamp(20px, 2.6vw, 34px) !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: var(--acc-radius) !important;
    background: var(--acc-surface) !important;
    box-shadow: var(--acc-shadow) !important;
}

.contantTexts h2 {
    position: relative;
    margin-bottom: 20px !important;
    padding-bottom: 16px;
    padding-inline-start: 16px;
    border-bottom: 1px solid var(--acc-line-soft);
    color: var(--acc-ink) !important;
    font-weight: 800 !important;
}

.contantTexts h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    width: 5px;
    height: 24px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--acc-honey), var(--acc-honey-dark));
}

.contantTexts,
.contantTexts p,
.contantTexts li,
.contantTexts div {
    color: var(--acc-ink-soft);
    line-height: 1.95;
}

.contantTexts p { margin: 0 0 1rem; }

.contantTexts h1,
.contantTexts h3,
.contantTexts h4,
.contantTexts h5 {
    margin: 1.7rem 0 .7rem;
    color: var(--acc-ink);
    font-weight: 800;
}

.contantTexts h3 { font-size: 1.15rem; }
.contantTexts h4 { font-size: 1.02rem; }

.contantTexts ul,
.contantTexts ol { margin: .4rem 0 1.1rem; padding-inline-start: 1.3rem; }
.contantTexts li { margin-bottom: .5rem; }

/* نقاط القوائم بلون العسل بدل النقطة الافتراضية. */
.contantTexts ul { list-style: none; padding-inline-start: 0; }

.contantTexts ul > li {
    position: relative;
    padding-inline-start: 22px;
}

.contantTexts ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--acc-honey-dark);
    transform: rotate(45deg);
}

.contantTexts a { color: #8A6100; text-decoration: underline; text-underline-offset: 3px; }
.contantTexts a:hover { color: var(--acc-honey-dark); }

.contantTexts strong, .contantTexts b { color: var(--acc-ink); }

.contantTexts blockquote {
    margin: 1.2rem 0;
    padding: 14px 18px;
    border-inline-start: 4px solid var(--acc-honey);
    border-radius: 0 12px 12px 0;
    background: var(--acc-cream);
    color: var(--acc-ink);
}

.contantTexts img { border-radius: 14px; }

.contantTexts table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    border: 1px solid var(--acc-line);
    border-radius: 12px;
    overflow: hidden;
}

.contantTexts th { padding: 12px; background: var(--acc-cream); color: var(--acc-ink); }
.contantTexts td { padding: 12px; border-top: 1px solid var(--acc-line-soft); }

/* ==========================================================================
   شاشة «تفاصيل الطلب»
   ========================================================================== */

/* بطاقة تتبّع الحالة — لم تكن الصفحة تُظهر للزبون أين وصل طلبه. */
.order-track {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--acc-line);
    border-radius: 18px;
    background: linear-gradient(160deg, #FFFDF6, #FFF8E7);
}

.order-track__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.order-track__status,
.order-track__pay {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
}

.order-track__status--live { background: #FFF1CC; color: #8A6100; box-shadow: inset 0 0 0 1px rgba(138, 97, 0, .22); }
.order-track__status--done { background: #E8F6E4; color: #2F6B25; box-shadow: inset 0 0 0 1px rgba(47, 107, 37, .22); }
.order-track__status--bad { background: #FDECE8; color: #A8341A; box-shadow: inset 0 0 0 1px rgba(168, 52, 26, .22); }

.order-track__pay { font-size: 13px; }
.order-track__pay--paid { background: #E8F6E4; color: #2F6B25; }
.order-track__pay--due { background: #FFFFFF; color: var(--acc-ink-soft); box-shadow: inset 0 0 0 1px var(--acc-line); }

/* المسار: نقاط موصولة بخط يمتلئ حتى المرحلة الحالية. */
.order-steps {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.order-steps__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* الخط الواصل يُرسم من كل خطوة نحو التالية في اتجاه القراءة. */
.order-steps__item::before {
    content: "";
    position: absolute;
    top: 13px;
    inset-inline-start: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 3px;
    border-radius: 3px;
    background: #F0E4C6;
}

.order-steps__item:last-child::before { content: none; }
.order-steps__item.is-done::before { background: var(--acc-honey-dark); }

.order-steps__dot {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 2px #F0E4C6;
    color: #FFFFFF;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.order-steps__dot svg { width: 15px; height: 15px; }

.order-steps__item.is-done .order-steps__dot {
    background: var(--acc-honey-dark);
    box-shadow: inset 0 0 0 2px var(--acc-honey-dark);
}

.order-steps__item.is-current .order-steps__dot {
    background: linear-gradient(135deg, var(--acc-honey), var(--acc-honey-dark));
    box-shadow: inset 0 0 0 2px var(--acc-honey-dark), 0 0 0 5px rgba(255, 201, 40, .28);
}

.order-steps__label { color: var(--acc-muted); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.order-steps__item.is-done .order-steps__label,
.order-steps__item.is-current .order-steps__label { color: var(--acc-ink); font-weight: 700; }

/* شريط بيانات الطلب: كان تدرّجًا عنبريًا صلبًا بنص أبيض ضعيف التباين. */
.userPage .order-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2px;
    padding: 6px !important;
    border: 1px solid var(--acc-line);
    border-radius: 16px;
    background: #FFFFFF !important;
}

.userPage .order-header-item { padding: 12px 14px; border-radius: 12px; background: #FFFDF8; }
.userPage .order-header-label { color: var(--acc-muted) !important; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.userPage .order-header-value { color: var(--acc-ink) !important; font-size: 15px; font-weight: 700; line-height: 1.6; }

/* أصناف الطلب. */
.userPage .summary-title {
    position: relative;
    margin: 0 0 16px;
    padding-inline-start: 15px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--acc-line-soft);
    color: var(--acc-ink) !important;
    font-size: 19px;
    font-weight: 800;
}

.userPage .summary-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 3px;
    width: 5px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--acc-honey), var(--acc-honey-dark));
}

.userPage .product-item-card {
    gap: 14px;
    padding: 14px !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: 16px !important;
    background: #FFFDF8 !important;
    transition: border-color .2s ease, background-color .2s ease;
}

.userPage .product-item-card:hover { border-color: rgba(230, 169, 0, .55) !important; background: #FFFFFF !important; }

.userPage .product-item-card .product-thumb,
.userPage .product-item-card img {
    width: 68px !important;
    height: 68px !important;
    flex: 0 0 68px;
    padding: 6px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--acc-line);
    object-fit: contain;
}

.userPage .product-name { color: var(--acc-ink) !important; font-weight: 700; text-decoration: none !important; }
.userPage .product-name:hover { color: #92670A !important; }
.userPage .product-variant { color: var(--acc-muted); font-size: 12.5px; }
.userPage .product-price { color: var(--acc-ink) !important; font-size: 17px; font-weight: 800; }
.userPage .product-qty { color: var(--acc-muted) !important; font-size: 12.5px; }

.userPage .btn-sm-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--acc-line);
    border-radius: 11px;
    background: #FFFFFF;
    color: #92670A !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: border-color .2s ease, background-color .2s ease;
}

.userPage .btn-sm-action:hover { border-color: var(--acc-honey-dark); background: var(--acc-cream); }

/* بطاقتا معلومات التوصيل وملاحظة الطلب. */
.userPage .delivery-info-card {
    margin-top: 16px;
    padding: 18px !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: 16px !important;
    background: #FFFDF8 !important;
}

.userPage .delivery-title { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: var(--acc-ink) !important; font-weight: 800; }
.userPage .delivery-title i { color: var(--acc-honey-dark); }
.userPage .delivery-text { margin: 0; color: var(--acc-ink-soft) !important; line-height: 1.9; }
.userPage .delivery-text strong { color: var(--acc-ink); }

/* ملخّص الطلب: الإجمالي هو الرقم الذي يبحث عنه الزبون فيُبرز. */
.userPage .order-summary-card {
    margin-top: 16px;
    padding: 20px !important;
    border: 1px solid var(--acc-line) !important;
    border-radius: 18px !important;
    background: linear-gradient(160deg, #FFFDF6, #FFF8E7) !important;
}

.userPage .summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
}

.userPage .summary-row + .summary-row { border-top: 1px solid rgba(240, 228, 198, .8); }
.userPage .summary-label { color: var(--acc-muted) !important; font-size: 14px; }
.userPage .summary-value { color: var(--acc-ink) !important; font-size: 14px; font-weight: 700; }

.userPage .summary-row.summary-total,
.userPage .summary-row:last-child {
    margin-top: 6px;
    padding: 14px 16px;
    border-top: 0;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--acc-line);
}

.userPage .summary-row:last-child .summary-label { color: var(--acc-ink) !important; font-size: 15px; font-weight: 800; }
.userPage .summary-row:last-child .summary-value { color: #8A6100 !important; font-size: 20px; font-weight: 800; }

@media (max-width: 640px) {
    .order-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
    .order-steps__item { flex-direction: row; align-items: center; gap: 12px; padding: 9px 0; text-align: start; }
    .order-steps__item::before {
        top: 34px;
        inset-inline-start: 13px;
        width: 3px;
        height: calc(100% - 28px);
    }
    .order-steps__dot { flex: 0 0 28px; }
    .userPage .product-item-card { flex-wrap: wrap; }
}