/* This is your custom Style Sheet. It's the last css resource loaded so you can easily overwrite css selectors from other style sheets. */ /* FemiFind (2026-10-06) — قسم «الميزات» بصفحة النشاط: لون النص والأيقونة = لون عناوين الصفحة. كان --highlight-base (#dda3b2) على خلفية الكبسولة ≈#fcf6f7 ⇒ 1.97:1. العناوين تستعمل --brand-base (#3b2a26 بالموقع). الأيقونة قناع بلون currentColor لعنصر .icon، والثيم يلوّن كل .icon بـ--highlight-base ⇒ قاعدة الأيقونة هنا محصورة بالميزات. لا تغيير للخلفية ولا للأحجام. ▸ لتغيير اللون: المتغير وحده. */ :root { --ff-feature-color: var(--brand-base, #3b2a26); } .details-default>.detail-body .detail-body-content .tab-content .banner-features .item-features, .details-default>.detail-body .detail-body-content .tab-content .tab-item-features .item-features, .details-default>.detail-body .detail-body-content .tab-content .banner-features .item-features .icon, .details-default>.detail-body .detail-body-content .tab-content .tab-item-features .item-features .icon { color: var(--ff-feature-color); } body { direction: rtl; text-align: right; } html { -webkit-locale: "ar-SA"; } .header[data-type="2"]>.header-content .header-navbar, .header>.header-content .content-right, .livebar .livebar-content .order-button, .header>.header-content .content-right .button, .header .header-navbar .navbar-link, .content-form .input-group-action, .content-form .input-group .input-group-icon, .header>.header-content .content-mobile .toggler-button:not(:first-child), .categories-base[data-type="2"] .categories-content>.categories-list .info, .categories-base[data-type="2"] .categories-content>.categories-list .categories-item, .cards-default[data-type=articles] .cards-list .categories .link, .hero-default[data-type="2"] .hero-form-wrapper .input-group, .thin-strip-base[data-type="6"] .wrapper>.content-stores .link-store:not(:first-child), .footer>.footer-content .footer-item[data-content=newsletter-content], .footer>.footer-content .footer-item[data-content=newsletter-content] .footer-item-content .form-newsletter .input, .footer[data-type="4"]>.footer-content .footer-bar .footer-powered .edirectory-link, .cards-default[data-type=articles] .cards-list .card-horizontal-full.list-horizontal .content .author .author-name, .details-default.details-blog .detail-body-content .blog-sidebar .blog-card .card-content .card-popular .popular-item .item-content, .contactus-block .wrapper .contactus-content .contactus-social .social-item:not(:first-child), .summary-list[list-type=list-view] .summary-card[summary-type="1"] .summary-content .section-heading .section-content-left .badge-review, .summary-list[list-type=list-view] .summary-card[summary-type="2"] .summary-content .section-heading .section-content-left .badge-review, .summary-list .summary-card .summary-actions .summary-actions-item:not(:first-child), .summary-list[list-type=list-view] .summary-card[summary-type="1"] .summary-content .summary-info .summary-info-item:not(:first-child), .summary-list[list-type=list-view] .summary-card[summary-type="2"] .summary-content .summary-info .summary-info-item:not(:first-child), .summary-list[list-type=list-view] .summary-card[summary-type="1"] .summary-content .summary-info .summary-info-item .summary-info-icon, .summary-list[list-type=list-view] .summary-card[summary-type="2"] .summary-content .summary-info .summary-info-item .summary-info-icon, .summary-list[list-type=list-view] .summary-card[summary-type="7"] .summary-content .summary-heading .summary-heading-left .review-stars, .summary-list[list-type=list-view] .summary-card[summary-type="9"] .summary-content .summary-footer .summary-info .summary-info-item:not(:last-child), .results-body .results-content .summary-list .summary-item .summary-content .summary-info .summary-title .actions .picture-title-actions:not(:first-child), .results-body .results-content .summary-list .summary-item .summary-content .summary-info .summary-title .actions .title-actions:not(:first-child), .results-body .results-content .summary-list .summary-item .summary-content .summary-info .summary-title .actions, .results-body .results-content .summary-list[list-type=grid-view] .summary-item .summary-content .summary-categories-grid .summary-grid-actions .picture-title-actions:not(:first-child), .results-body .results-content .summary-list[list-type=grid-view] .summary-item .summary-content .summary-categories-grid .summary-grid-actions .title-actions:not(:first-child), .details-default>.details-header .details-general .details-info .details-actions .button, .details-default>.details-header .details-general .details-info .details-reviews .reviews-stars, .details-default>.details-header .details-general .details-info .details-reviews .reviews-count, .details-default>.details-header .details-contact .contact-item .icon, .details-default .share-icon, .details-default>.detail-body .detail-body-content .tab-content .banner-social .social-item:not(:first-child), .details-default>.detail-body .detail-body-content .tab-content .tab-item-social .social-item:not(:first-child), .details-default>.detail-body .detail-body-content .tab-content .banner-hours .hours-heading .fa, .details-default>.detail-body .detail-body-content .tab-content .tab-item-hours .hours-heading .fa, .details-default>.details-header .details-header-navbar .tab-navbar, .details-default>.detail-body .detail-body-content .tab-content .banner-features .item-features .icon, .details-default>.detail-body .detail-body-content .tab-content .tab-item-features .item-features .icon, .details-default>.details-header[data-type=simple-header] .details-actions .button, .details-default>.details-header[data-type=vertical-header] .details-header-content .details-general .details-reviews .reviews-stars, .details-default.details-articles .tab-content .article-author .article-content, .details-default.details-articles .tab-content .article-author-full .author-full-about, .details-default.details-articles .article-header .article-actions .icon, .members-page .dashboard-header .dashboard-title .dashboard-icon, .members-page .members-panel .panel-body .content-list .content-item .content-info, .footer>.footer-content .footer-item[data-content=apps-content] .link-store .app-info, .pricing-plans .plan-comparison-table .table-frame .line .features .features-trigger, .header>.header-bar .bar-link.bar-button, .details-default>.detail-body .detail-body-content .tab-content .banner-contact-us .info-list div.contact-item i, .details-default>.detail-body .detail-body-content .tab-content .banner-contact-us .info-list li i, .details-default>.detail-body .detail-body-content .tab-content .tab-item-contact-us .info-list div.contact-item i, .details-default>.detail-body .detail-body-content .tab-content .tab-item-contact-us .info-list li i, .details-default>.detail-body .detail-body-content .tab-content .banner-check-list .check-list .check-item .check-icon, .details-default>.detail-body .detail-body-content .tab-content .tab-item-check-list .check-list .check-item .check-icon, .details-default>.detail-body .detail-body-content .tab-content .banner-reviews .reviews-header .details-reviews .reviews-summary .reviews-metrics .reviews-stats, .details-default>.detail-body .detail-body-content .tab-content .tab-item-reviews .reviews-header .details-reviews .reviews-summary .reviews-metrics .reviews-stats { margin: 0; } .cards-default .cards-list .card .content, .cards-default .cards-list .card.card-horizontal .content, .summary-list[list-type=list-view] .summary-card[summary-type="4"] .summary-content, .summary-list[list-type=list-view] .summary-card[summary-type="3"] .summary-picture, .pricing-plans .plan-comparison-table .table-frame .line { padding: 0; } .footer[data-type="4"]>.footer-content .footer-bar .footer-powered, .categories-base .categories-content>.categories-list .info .title, .results-body .results-content .summary-list .summary-item .summary-content .summary-info .summary-title .actions, .results-body .results-content .summary-list[list-type=grid-view] .summary-item .summary-content .summary-categories-grid .summary-grid-actions, .details-default>.detail-body .detail-body-content .tab-content .banner-hours .hours-heading.first-hours, .details-default>.detail-body .detail-body-content .tab-content .tab-item-hours .hours-heading.first-hours, .details-default>.details-header[data-type=simple-header] .details-actions, .details-default>.details-header[data-type=vertical-header] .details-header-navbar .container, .details-default>.details-header:not([data-type=simple-header]):not([data-type=vertical-header]):not([data-type=profile-header]) .details-header-navbar:not(.is-fixed) .container { display: flex; } .details-default>.detail-body .detail-body-content .tab-content .banner-hours .hours-heading.first-hours, .details-default>.detail-body .detail-body-content .tab-content .tab-item-hours .hours-heading.first-hours, .details-default>.details-header[data-type=simple-header] .details-actions { align-items: center; } .cards-default .cards-list .card .content .categories, .footer>.footer-content .footer-item .footer-item-content .footer-info, .categories-base .categories-content>.categories-list .info .title, .summary-list[list-type=list-view] .summary-card[summary-type="1"] .summary-content .summary-info .summary-info-item, .summary-list[list-type=list-view] .summary-card[summary-type="2"] .summary-content .summary-info .summary-info-item, .details-default>.detail-body .detail-body-content .tab-content .banner-features .item-features, .details-default>.detail-body .detail-body-content .tab-content .tab-item-features .item-features { gap: 0.25rem; } .footer>.footer-content .footer-item[data-content=newsletter-content] .footer-item-content .form-newsletter .form-newsletter-wrapper, .footer[data-type="4"]>.footer-content .footer-bar .footer-powered, .contactus-block .wrapper .contactus-content .contactus-info .info-item, .summary-list[list-type=list-view] .summary-card[summary-type="1"] .summary-content .section-heading .section-content-left, .summary-list[list-type=list-view] .summary-card[summary-type="2"] .summary-content .section-heading .section-content-left, .summary-list .summary-card .summary-actions, .results-body .results-content .summary-list .summary-item .summary-content .summary-info .summary-title .actions, .results-body .results-content .summary-list[list-type=grid-view] .summary-item .summary-content .summary-categories-grid .summary-grid-actions, .details-default>.details-header .details-contact .contact-item, .details-default>.detail-body .detail-body-content .tab-content .banner-social .tab-item-content, .details-default>.detail-body .detail-body-content .tab-content .tab-item-social .tab-item-content, .details-default>.detail-body .detail-body-content .tab-content .banner-hours .hours-heading.first-hours, .details-default>.detail-body .detail-body-content .tab-content .tab-item-hours .hours-heading.first-hours, .details-default.details-articles .article-header .article-actions, .pricing-plans .plan-comparison-table .table-frame .line, .admin-bar .admin-bar-content>.content-left .admin-bar-link, .details-default>.details-header .details-general .details-info .details-actions+.details-claim, .details-default>.detail-body .detail-body-content .tab-content .banner-check-list .check-list .check-item, .details-default>.detail-body .detail-body-content .tab-content .tab-item-check-list .check-list .check-item, .details-default>.detail-body .detail-body-content .tab-content .banner-reviews .reviews-header .details-reviews .reviews-summary .reviews-metrics, .details-default>.detail-body .detail-body-content .tab-content .tab-item-reviews .reviews-header .details-reviews .reviews-summary .reviews-metrics { gap: .5rem; } .header>.header-content .content-right, .livebar .livebar-content, .livebar .livebar-content .livebar-toll, .header>.header-content .content-mobile, .categories-base[data-type="2"] .categories-content>.categories-list .categories-item, .hero-default[data-type="2"] .hero-form-wrapper, .cards-default .cards-list .card, .thin-strip-base[data-type="6"] .wrapper>.content-stores, .thin-strip-base[data-type="6"] .wrapper>.content-stores .link-store, .cards-default .cards-list .card .content .author, .categories-base[data-type="6"] .categories-content, .details-default.details-blog .detail-body-content .blog-sidebar .blog-card .card-content .card-popular .popular-item, .contactus-block .wrapper .contactus-content .contactus-social, .summary-list[list-type=list-view] .summary-card[summary-type="1"] .summary-content .summary-info, .summary-list[list-type=list-view] .summary-card[summary-type="2"] .summary-content .summary-info, .results-body .results-content .results-type, .summary-list[list-type=list-view] .summary-card[summary-type="7"] .summary-content .summary-heading .summary-heading-left, .summary-list[list-type=list-view] .summary-card[summary-type="9"] .summary-content .summary-footer .summary-info, .details-default>.details-header .details-general .details-info .details-actions, .details-default>.details-header .details-general .details-info .details-reviews, .details-default>.details-header .details-general .details-info .details-title, .details-default>.details-header[data-type=simple-header] .details-actions, .details-default>.details-header[data-type=vertical-header] .details-header-content .details-general .details-reviews, .details-default>.details-header .details-general-mobile .details-title, .members-page .dashboard-header .dashboard-title, .header>.header-bar .wrapper, .members-page .members-panel .panel-body .content-list .content-item .content-header:not(.no-flex), .footer>.footer-content .footer-item[data-content=apps-content] .link-store { gap: 1rem; } .header[data-type="2"]>.header-content .header-navbar { gap: 1.5rem; } .header[data-type="2"]>.header-content .content-left, .categories-base .categories-content>.categories-list, .details-default>.details-header[data-type=vertical-header] .details-header-navbar .container, .details-default>.details-header:not([data-type=simple-header]):not([data-type=vertical-header]):not([data-type=profile-header]) .details-header-navbar:not(.is-fixed) .container { gap: 2rem; } .footer>.footer-content .footer-actions { gap: 4rem; } .input, .members-page .members-panel .panel-form-media.custom-file-upload .bootstrap-filestyle .form-control, .members-page .members-panel.edit-panel .panel-body .custom-edit-content .form-group .form-control, .members-page .members-panel.edit-panel .panel-body .custom-edit-content .selectize-control .selectize-input, .hero-default[data-type="2"] .wrapper .form-privacy, .profile-page .profile-user-description, .modal.modal-member.modal-ai .modal-dialog .modal-content .modal-header .modal-subtitle { text-align: right; } .content-form .input-group .input-group-icon, .summary-list[list-type=list-view] .summary-card[summary-type="3"] .summary-picture { padding: 0; padding-right: 16px; } .hero-wrapper [data-type="3"] .hero-slider .slider-content, .cards-default .cards-list .card .picture .badge, .cards-default .cards-list .card .picture .calendar-sm { left: inherit; } .cards-default .cards-list .card .picture .calendar-sm { right: 8px; } .hero-wrapper [data-type="3"] .hero-slider .slider-content { right: 24px; text-align: right; min-width: 300px; max-width: 100%; } .cards-default .cards-list .card .picture .badge { right: 16px; } .summary-list[list-type=list-view] .summary-card[summary-type="1"] .summary-picture picture, .summary-list[list-type=list-view] .summary-card[summary-type="1"] .summary-picture img { border-radius: 50px 0 0 50px; } .summary-list[list-type=list-view] .summary-card[summary-type="4"] .summary-picture { margin: 0; margin-right: -92px; } .summary-list[list-type=list-view] .summary-card[summary-type="3"]:hover .summary-content { padding-left: 16px; padding-right: 59px; } .summary-list[list-type=list-view] .summary-card[summary-type="3"] .summary-content { padding: 16px; padding-right: 79px; } .summary-list[list-type=list-view] .summary-card[summary-type="3"] .summary-picture img, .summary-list[list-type=list-view] .summary-card[summary-type="3"]:hover .summary-picture img { right: inherit; left: -43px; } .summary-list[list-type=list-view] .summary-card[summary-type="4"] { margin-left: 0; margin-right: 108px; } .summary-list[list-type=list-view] .summary-card[summary-type="6"] .summary-content { padding-right: 0; padding-left: 16px; } .summary-list[list-type=list-view] .summary-card[summary-type="8"] .summary-picture { margin-right: 0; margin-left: -38px; } .summary-list[list-type=list-view] .summary-card[summary-type="9"] .summary-content { padding: 24px; padding-right: 0; } .results-body .results-sidebar .sidebar-item .item-body .category-item .category-header .subcategory-toggler { left: inherit; right: 8px; } .results-body .results-sidebar .sidebar-item .item-body .category-item .category-subcategory .category-item .category-header, .results-body .results-sidebar .sidebar-item .item-body .category-item .category-header { padding: 8px; padding-right: 26px; } .summary-list:not([list-type=grid-view]) .summary-instant-messenger-link { margin-right: 18px; gap: .5rem; margin: 0; margin-left: 18px; } .details-default.details-articles .tab-content .article-author .article-content, .details-default.details-articles .tab-content .article-author-full .author-full-about { margin-right: 16px; } .details-default>.detail-body .detail-body-content .tab-content .tab-item-others .tab-item-content .other-name { gap: .25rem; display: inline-flex; align-items: center; justify-content: center; } .pricing-plans .plan-comparison-table .table-frame .line, .details-default>.detail-body .detail-body-content .tab-content .banner-reviews .reviews-header .details-reviews .reviews-summary .reviews-bars .review-bar-container, .details-default>.detail-body .detail-body-content .tab-content .tab-item-reviews .reviews-header .details-reviews .reviews-summary .reviews-bars .review-bar-container { padding-right: 16px; } .input-password-control .input, .input-password-control input, .modal-sign .modal-content .modal-body .modal-form .input-password-control .input { padding-right: 48px !important; } .members-page .members-panel.edit-panel .panel-body .custom-edit-content .custom-input-group .form-control { border-left: none; border-right: 1px solid; } .members-page .members-panel .panel-body .content-list .content-item .content-header .button-edit-reply { right: inherit; left: 0; } .members-page .members-panel .panel-body .favorite-item .favorite-content .remove-favorite { right: 0; left: -16px; text-align: left; } .pricing-plans .plan-comparison-table[amount-plans="3"] .table-frame .table-data { margin-right: 241px; margin-left: 0; } .pricing-plans[data-type=detail-preview] .container-preview .edir-plan-preview { right: inherit; left: 3%; } .pricing-plans .plan-comparison-table .table-header-wrapper.fixed { right: calc((100% - 1140px) / 2); left: 0; } .pricing-plans[data-type=cards-single] .pricing-plan-card .content-block .content-block-body .details-list li:before, .pricing-plans[data-type=cards-single] .pricing-plan-card .topics-block .content-block-body .details-list li:before, .checkout-wrapper .confirm-payment .fa, .members-page .members-panel.edit-panel .panel-body .custom-edit-content .panel-hours-of-work .hours-list .hours-item .hour.add-hour:before { margin-right: 0; margin-left: 8px; } .modal.modal-member.hours-of-work .modal-body .check-options .checkbox-control label { margin-left: 0; margin-right: 8px; } .claim-signup-breadcrumb .breadcrumb-item:not(:first-child):before, .claim-signup-breadcrumb .breadcrumb-item:not(:first-child):after { left: inherit; right: -4px; } .categories-list-block .categories-item .categories-name span { margin-left: 0; padding-left: 0; border-left: none; margin-right: 8px; padding-right: 8px; border-right: 1px solid #ccc; } .custom-members-category .category-search { border-right: none !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-left: 1px solid var(--neutral-transp-25) !important; border-top-left-radius: var(--border-radius-input) !important; border-bottom-left-radius: var(--border-radius-input) !important; } @media screen and (min-width: 1200px) { .pricing-plans .plan-comparison-table[amount-plans="3"] .table-frame .table-data { margin-right: 295px; margin-left: 0; } .pricing-plans .plan-comparison-table[amount-plans="3"] .table-header-wrapper { padding-right: 295px; padding-left: 0; } } @media screen and (min-width: 992px) { .content-form .input-group:nth-child(2), .content-form .input-group:nth-child(3), .thin-strip-base .wrapper>.content-form .input-group:nth-child(2), .thin-strip-base .wrapper>.content-form .input-group:nth-child(3) { border: none; border-right: 1px solid var(--neutral-transp-25, rgba(62, 69, 94, .25)); } .header .header-navbar { gap: 2rem; } } @media screen and (min-width: 768px) { .hero-wrapper [data-type="3"] .hero-slider .slider-content { left: inherit; right: 70px; text-align: right; width: 360px; max-width: 100%; margin: 0; } .results-body .results-content .summary-list .summary-item .summary-content { padding: 0; padding-left: 24px; border: none; border-left: 1px solid rgba(151, 151, 151, .62); } .results-body .results-content .summary-list .summary-item[data-type=article] .summary-content { border: none; } } /**Feedbacks */ .header>.header-content .wrapper { flex-direction: row-reverse; } .cards-default .cards-list .card .content .valid-time, .cards-default .cards-list .card .content .author .author-name, .details-default>.details-header .details-general .details-info .details-date-time { display: flex; gap: .5rem; align-items: center; } [data-type=events] .calendar-wrapper .calendar-events .events-item { gap: 1rem; } .details-default>.details-header .details-general .details-info .details-date-open, .details-default>.details-header .details-general .details-info .details-date-time { gap: .5rem; } .pricing-plans[data-type=cards] .pricing-plans-cards-list .pricing-plan-card-body .card-content-item .card-content-item-header .fa-times { right: inherit; left: 0; } .modal-sign .modal-content .modal-nav { gap: 2rem; } .modal-default .modal-content .modal-nav .modal-nav-link { margin: 0; } @media only screen and (min-width: 420px) and (max-width: 767px) { .categories-base[data-type="2"] .categories-content>.categories-list .categories-item { width: 45.5%; } } .categories-base[data-type="4"] .categories-content .toggle-item .toggle-header .more-info, .categories-base[data-type="4"] .categories-content .toggle-item .toggle-content .nav-wrapper .toggle-nav .nav-item .button-toggle-nav, .categories-base[data-type="4"] .categories-content .toggle-item .toggle-content .nav-wrapper .toggle-nav .nav-item .more-info-item { transform: rotate(180deg); } .categories-base[data-type="4"] .categories-content .toggle-item .toggle-content .nav-wrapper .toggle-nav:not(:first-child) { border-right: 1px solid rgba(151, 151, 151, .23); border-left: none; } .details-default>.details-header .details-contact .contact-item.item-phone.addition-phone { padding-right: 32px; padding-left: 0; } .sub-box .sub-box-body .sub-box-content .sub-list .sub-list-item .item-footer .count, .details-default>.details-header .details-contact .contact-item.item-phone a { direction: ltr; unicode-bidi: embed; } .categories-base[data-type="6"] .categories-content .trending-item:not(:first-child) { margin-left: inherit; margin-right: 40px; } .pull-right { float: left !important; } .details-default>.details-header .details-picture { margin-left: 32px; margin-right: 0; } @media (min-width: 767px) { .details-default>.details-modal .modal-form .form-actions .button { margin-left: 0; margin-right: 16px; } } @media (max-width: 767px) { .hero-default[data-type="3"] .hero-slider .slider-content .heading { font-size: 1.75rem; } .categories-base[data-type="6"] .categories-content .trending-item:not(:first-child) { margin-left: inherit; margin-right: 24px; } } .details-advanced-reviews-item { display: flex; } .details-default>.details-header.details-header-mobile .detail-info-mobile .details-certified, .details-default>.details-header .details-general .details-info .details-certified { align-items: flex-start; margin-top: 2rem; } .details-default>.details-header.details-header-mobile .detail-info-mobile .details-certified .item-certified, .details-default>.details-header .details-general .details-info .details-certified .item-certified { width: 80px; flex-direction: column; align-items: flex-start; gap: .5rem; justify-content: flex-start; } .details-default>.detail-body .detail-body-content .tab-content .tab-item-reviews .reviews-list .reviews-item .review-content .review-helpfull .review-helpfull-vote .like { gap: 0.5rem; } .form-captcha img { border: 1px solid var(--neutral-transp-25, rgba(62, 69, 94, .25)); border-left: none; } .members-page .members-title .manage-dropdown { right: inherit; left: 0; } .text-danger#limitAlert { text-align: left; } .text-danger#limitAlert .fa, .modal.modal-member.products-services .modal-dialog .modal-body .upload-images-container .upload-images-list .upload-images-item.add-image i { margin-left: 4px; margin-right: 0; } .members-page .members-panel.edit-panel .panel-body .custom-edit-content .panel-hours-of-work .hours-list .hours-item .hour.selected:after { margin-left: 8px; margin-right: 0; } @media screen and (min-width: 992px) { .header .header-navbar { justify-content: flex-start; } } table th { text-align: right; } .new-content-list.plans .new-content-item.product .title .fa { margin-right: 0; margin-left: 9px; } .new-content-list.plans .new-content-item.plan .fa { margin-right: 8px; margin-left: 0; } .members-page .members-panel.edit-panel .panel-body .custom-edit-content .account-custom-row .input-group .input-group-addon+.form-control, .members-page .members-panel.edit-panel .panel-body .custom-edit-content .custom-content-formgroup .input-group .input-group-addon+.form-control, .members-page .members-panel.edit-panel .panel-body .custom-edit-content .custom-content-row .input-group .input-group-addon+.form-control { border: 1px solid var(--neutral-transp-25, rgba(62, 69, 94, .25)); border-right: none; } .modal.modal-member.hours-of-work .modal-body .hours-list .list-hours .list-item-content .hours-list-item .delete-hour { position: absolute; left: -20px; right: inherit; } .modal.modal-member.hours-of-work .modal-body .hours-list .list-hours .list-item-content .hours-list-item input { margin-left: 8px; padding: 6px 8px; margin-right: 0; } .summary-list .summary-card .summary-actions .summary-actions-item .actions-item-dropdown .summary-share-item { margin: 0; width: 37px; height: 37px; line-height: 1; text-align: center; line-height: 38px; font-size: 18px; text-decoration: none; transition: .2s ease-in-out; } .details-default .share-icon .share-dropdown .social-likes__widget svg { width: 16px; -ms-transform: translate(-2px,-1px); transform: translate(2px, -1px); } .banner[type=large-mobile]:not([data-section=sidebar]) .banner-link.banner-sponsored-link, .input-categories-list .input-categories-item:not(:first-child) { margin: 0; } .custom-members-category .input-categories-list { gap: 0.25rem;} .members-page .linked-listing-container .linked-list-item .fa-plus-circle { margin-right: 0; margin-left: 8px; } .dl-horizontal dd { margin-right: 180px; margin-left: 0; } .dl-horizontal dt { float: right; clear: right; } @media (max-width: 768px) { .dl-horizontal dd { margin: 0; } } .hours-list .hour { display: flex; gap: .5rem; flex-direction: row-reverse; } .hours-list .hour, .hours-list .hour span { direction: ltr; } .details-default>.detail-body .detail-body-content .tab-content .tab-item-social .tab-item-content { flex-flow: row wrap; } .details-default>.detail-body .detail-body-content .tab-content .banner-social .social-item svg.svg-icon-whatsapp-channel, .details-default>.detail-body .detail-body-content .tab-content .tab-item-social .social-item svg.svg-icon-whatsapp-channel { max-width: 32px; height: auto; } /* Claude fix: Bug 17 - breadcrumb arrow direction */ .claim-signup-breadcrumb .breadcrumb-item:not(:first-child):before { transform: rotate(15deg); } .claim-signup-breadcrumb .breadcrumb-item:not(:first-child):after { transform: rotate(-15deg); } /* Claude fix: Bug 18 - hours widget hour/minute boxes swapped by RTL flex reversal */ .modal.modal-member.hours-of-work .modal-body .hours-list .list-hours .list-item-content .hours-list-item { direction: ltr; } /* Claude fix: Opening/Closing time modal - move AM/PM box next to Hour, not Minute (input modal only) */ .modal.modal-member.hours-of-work .modal-body .hours-list .list-hours .list-item-content .hours-list-item .day-period { order: -1; } /* Claude fix: Bug 4 - '+' and '@' render at wrong end (bidi isolate for phone/telegram) */ .summary-phone, .summary-instant-messenger-link a { unicode-bidi: isolate; } /* Claude fix: Bug 4 follow-up - isolate alone wasn't enough, force ltr direction too */ .summary-phone, .summary-instant-messenger-link a { direction: ltr; } /* Claude fix: Bug 4 correction - .summary-phone also matches the Facebook/Telegram/WhatsApp row wrapper div, not just the phone number link. Forcing ltr on it reversed icon/text order. Restore rtl on the wrapper only; the inner text link keeps ltr from the rule above. */ .summary-phone.summary-instant-messenger-link { direction: rtl; } /* Claude fix: Bug 10 - checkmark touches category label (margin-left should be margin-right in RTL) */ .category-link::after { margin-left: 0; margin-right: 4px; } /* Claude fix: Bug 10 - collapse toggle (-) overlaps category label, header padding was 4px short */ .category-header { padding-right: 34px; } /* Claude fix: Bug 10 correction - previous .category-header rule was too weak; an existing rule with a longer selector chain (26px) already wins. Match its specificity. */ .results-body .results-sidebar .sidebar-item .item-body .category-item .category-subcategory .category-item .category-header, .results-body .results-sidebar .sidebar-item .item-body .category-item .category-header { padding-right: 34px; } /* Claude fix: Modification 3 - reorder contact rows (grid view only): phone, WhatsApp, Telegram, Facebook, email. List view untouched via [list-type="grid-view"] scope. */ .summary-list[list-type="grid-view"] .summary-content { display: flex; flex-direction: column; } .summary-list[list-type="grid-view"] .summary-content > .section-heading { order: 1; } .summary-list[list-type="grid-view"] .summary-content > .summary-title { order: 2; } .summary-list[list-type="grid-view"] .summary-content > .summary-categories { order: 3; } .summary-list[list-type="grid-view"] .summary-content > .summary-info { display: contents; } .summary-list[list-type="grid-view"] .summary-content .summary-info-item:has(i.fa-phone) { order: 4; } .summary-list[list-type="grid-view"] .summary-content > .summary-phone.summary-instant-messenger-link:has(a[href*="wa.me"]) { order: 5; } .summary-list[list-type="grid-view"] .summary-content > .summary-phone.summary-instant-messenger-link:has(a[href*="t.me"]) { order: 6; } .summary-list[list-type="grid-view"] .summary-content > .summary-phone.summary-instant-messenger-link:has(a[href*="facebook.com"]), .summary-list[list-type="grid-view"] .summary-content > .summary-phone.summary-instant-messenger-link:has(a[href*="m.me"]) { order: 7; } .summary-list[list-type="grid-view"] .summary-content .summary-info-item:has(i.fa-envelope-o) { order: 8; } .summary-list[list-type="grid-view"] .summary-content > .summary-address { order: 9; } /* Claude fix: Modification 3 extended per client request - apply the same contact-row order to List View too */ .summary-list[list-type="list-view"] .summary-content { display: flex; flex-direction: column; } .summary-list[list-type="list-view"] .summary-content > .section-heading { order: 1; } .summary-list[list-type="list-view"] .summary-content > .summary-title { order: 2; } .summary-list[list-type="list-view"] .summary-content > .summary-categories { order: 3; } .summary-list[list-type="list-view"] .summary-content > .summary-info { order: 4 !important; } .summary-list[list-type="list-view"] .summary-content .summary-info-item:has(i.fa-phone) { order: 4; } .summary-list[list-type="list-view"] .summary-content > .summary-phone.summary-instant-messenger-link:has(a[href*="wa.me"]) { order: 5; } .summary-list[list-type="list-view"] .summary-content > .summary-phone.summary-instant-messenger-link:has(a[href*="t.me"]) { order: 6; } .summary-list[list-type="list-view"] .summary-content > .summary-phone.summary-instant-messenger-link:has(a[href*="facebook.com"]), .summary-list[list-type="list-view"] .summary-content > .summary-phone.summary-instant-messenger-link:has(a[href*="m.me"]) { order: 7; } .summary-list[list-type="list-view"] .summary-content .summary-info-item:has(i.fa-envelope-o) { order: 8; } .summary-list[list-type="list-view"] .summary-content > .summary-address { order: 9; } /* Claude fix: Bug 5 (v4) - List View: WhatsApp/Telegram/Facebook icons were already mutually centered on the same vertical line at their native sizes; only the phone icon (a different font-icon pattern) sat off that line. Nudge phone icon only, keep every icon's native size. */ .summary-list[list-type="list-view"] .summary-content .summary-info-item i.fa-phone { position: relative; left: -6px; } /* Claude fix: Bug 5 (v4 refinement) - widen gap between phone icon and phone number by 1px, moving the number left only; icon position untouched. */ .summary-list[list-type="list-view"] .summary-content .summary-info-item a[href^="tel:"] { position: relative; left: -2px; } /* Claude fix: Bug 9 - pagination previous/next arrows point the wrong direction under RTL, and previous button touches page number with 0px gap */ .results-pagination .item-pagination.is-previous i, .results-pagination .item-pagination.is-next i { display: inline-block; transform: scaleX(-1); } .results-pagination .item-pagination.is-previous + .item-pagination { margin-right: 4px; } /* Claude fix: Bug 11 - certification badges (.item-certified) were forced to 80px width / column layout (icon stacked above label) by a custom override; restore eDirectory's own default: 160px width, icon and label side by side (row), so 3 badges fit per row and labels don't wrap */ .details-default > .details-header.details-header-mobile .detail-info-mobile .details-certified .item-certified, .details-default > .details-header .details-general .details-info .details-certified .item-certified { width: 160px !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; } /* Claude fix: Bug 12 - Mobile account menu: default avatar (.user-picture) had no real width/height (only max-width/max-height:50px), so with no photo set it collapsed to the bare icon glyph's size (~13x27px) instead of a 50x50px circle; the fallback icon itself also had no centering. Give the container explicit 50x50 size and center the fallback icon inside it. */ .header > .navbar-mobile .navbar-user .user-picture { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .header > .navbar-mobile .navbar-user .user-picture i { font-size: 24px; } .header > .navbar-mobile .navbar-user img.user-picture { object-fit: cover; } /* Claude fix: Bug 13 - Mobile account menu: name/email (.user-info) touched the avatar photo with 0px gap. The row is RTL-reversed so .user-info actually sits on the LEFT of the avatar, but the existing margin-left:16px adds space on its far/outer left side, not on the side facing the photo. Move the 16px gap to margin-right instead. */ .header > .navbar-mobile .navbar-user .user-info { margin-left: 0; margin-right: 16px; } /* Claude fix: Bug 12/13 follow-up - when a real profile photo is set, the photo is an INSIDE .user-picture (not carrying the .user-picture class itself), with hardcoded HTML width/height attributes matching its original uploaded crop (e.g. 130x72). My earlier fix sized the .user-picture div to 50x50 with overflow:hidden, but the inner img kept its native size and only got flex-centered, so it overflowed the circle and got clipped to an off-center, non-circular fragment of the photo. Force the inner img to fill the 50x50 circle properly. */ .header > .navbar-mobile .navbar-user .user-picture img { width: 50px !important; height: 50px !important; object-fit: cover; border-radius: 50%; } /* Claude fix: Bug 14 - Visitor profile edit page: "Email not verified" indicator (.msg inside .input-group.verify-email) used a hardcoded right:-230px offset written for the original LTR layout. On this RTL page that value pushes it past the far edge of the field+button wrapper instead of hugging it. Reposition using a percentage-based offset relative to the wrapper so it always sits immediately adjacent, regardless of direction. */ .members-page .members-panel.edit-panel .panel-body .custom-edit-content .account-custom-row .input-group.verify-email .msg, .members-page .members-panel.edit-panel .panel-body .custom-edit-content .custom-content-formgroup .input-group.verify-email .msg, .members-page .members-panel.edit-panel .panel-body .custom-edit-content .custom-content-row .input-group.verify-email .msg { right: calc(100% + 8px) !important; left: auto !important; } /* Claude fix: Bug 4 family - Visitor profile "Favorites" list: phone number (.favorite-phone) renders as "96588009900+" instead of "+96588009900". The element inherits direction:rtl from body and already has unicode-bidi:isolate, but isolating an RTL-direction run doesn't fix internal digit order - the run itself must resolve as LTR. Force direction:ltr on the isolated run while keeping it right-aligned visually. */ .favorite-phone { direction: ltr; unicode-bidi: isolate; text-align: right; } /* Claude fix: Bug 16 - Blog post: share/bookmark icons (.actions) touch the date with 0px gap. On eDirectory's LTR default, .actions sits to the date's left and margin-left:32px correctly pushes it away. On this RTL page the row is mirrored so .actions still sits to the date's left, but margin-left adds space on its own far/outer side, not the side facing the date. Move the 32px gap to margin-right. */ .details-default.details-blog .detail-body-content .blog-content .blog-post-info .actions { margin-left: 0; margin-right: 32px; } /* Claude fix: Bug 17 - Business registration step arrows: a previous edit in this file swapped the ::before/::after rotation angles to "mirror" them for RTL, but that combined with the existing left->right position swap actually pointed the arrow the WRONG way (confirmed live: reverting to the ORIGINAL rotation angles, kept at the RTL right-edge position, produces the correct forward-pointing arrow). Restore the original angles. */ .claim-signup-breadcrumb .breadcrumb-item:not(:first-child)::before { transform: rotate(-15deg); } .claim-signup-breadcrumb .breadcrumb-item:not(:first-child)::after { transform: rotate(15deg); } /* Claude fix: Bug 17 REVERT - the previous edit above (rotate(-15deg)/rotate(15deg)) was confirmed WRONG by the client's live visual check on the actual site. Restoring the prior swapped values (rotate(15deg)/rotate(-15deg)) that the client confirmed as correct before my change. */ .claim-signup-breadcrumb .breadcrumb-item:not(:first-child)::before { transform: rotate(15deg) !important; } .claim-signup-breadcrumb .breadcrumb-item:not(:first-child)::after { transform: rotate(-15deg) !important; } /* Claude fix: Bug 17 RE-APPLY - client confirmed on live re-check that the very first fix (rotate(-15deg)/rotate(15deg)) was actually the correct one; the swapped values restored in the previous REVERT block above were wrong. Re-applying the original correct values with higher priority. */ .claim-signup-breadcrumb .breadcrumb-item:not(:first-child)::before { transform: rotate(-15deg) !important; } .claim-signup-breadcrumb .breadcrumb-item:not(:first-child)::after { transform: rotate(15deg) !important; } /* Claude fix: Bug 17 FINAL - client confirmed via her own screenshot after hard refresh that the chevron between steps pointed RIGHT (toward Identification/backward), which is wrong since RTL flow progresses right-to-left. Systematic isolated A/B/C/D testing of all 4 position+rotation combos showed: position must stay right:-4px (only side that touches the neighboring step correctly); of the two right-side rotation options, the previously-tried convex one (rotate(-15)/rotate(15)) is the one just confirmed wrong. Applying the other valid option now. */ .claim-signup-breadcrumb .breadcrumb-item:not(:first-child)::before { transform: rotate(15deg) !important; } .claim-signup-breadcrumb .breadcrumb-item:not(:first-child)::after { transform: rotate(-15deg) !important; } /* Claude fix: Bug 7 - Review date (.review-date) renders as "July, 2026 26" instead of "26 July, 2026". Same root cause as Bug 4 (favorite phone bidi): the element inherits direction:rtl and already has unicode-bidi:isolate, but isolating an RTL-direction run doesn't fix internal word order - the run itself must resolve as LTR. Force direction:ltr while keeping it right-aligned visually. */ .review-date { direction: ltr; unicode-bidi: isolate; text-align: right; } /* Claude fix: Bug 8 - Social icons (.social-item, Follow Us section) and the linked-listings carousel arrows (.sidebar-cards-nav) render off-center inside their circular backgrounds - measured 13px gap above / 15px below (7 large icons), 8px/10px (WhatsApp), and 3px/5px on the carousel arrows. Root cause: these elements use display:block with a line-height trick to vertically center inline content, which centers on the text baseline rather than the true visual center, and is inherently asymmetric for icon glyphs. Switching to flexbox centering fixes this properly. */ .social-item, .sidebar-cards-nav { display: flex !important; align-items: center !important; justify-content: center !important; } /* The 3 SVG icons (X, TikTok, WhatsApp channel) also carry an old translateY(-3px) transform tuned for the previous line-height layout; under flex centering that old offset pushes them off-center again, so it must be removed. */ .social-item svg { transform: none !important; } /* Claude fix: Bug 8 FOLLOW-UP - client reported the X (Twitter) and WhatsApp channel icons went blank on real mobile Safari after the flex-centering fix above (could not reproduce on desktop Chrome). Root cause identified by comparing the 3 SVG icons: the TikTok svg has explicit width/height="22px" HTML attributes and stayed visible, while the X and WhatsApp svgs have no such HTML attributes (size comes from CSS only) - this is a known WebKit/Safari flexbox bug where a replaced element (svg/img) with no intrinsic HTML width/height can be shrunk to 0x0 by the flex layout algorithm. Forcing explicit width/height and flex-shrink:0 with !important prevents that collapse. */ .social-item svg { flex-shrink: 0 !important; } .social-item svg.svg-icon-x { width: 22px !important; height: 22px !important; } .social-item svg.svg-icon-whatsapp-channel { width: 32px !important; height: 32px !important; } /* Claude fix: New item - address text (.item-location, e.g. "شارع 101، بناية 22...، 1234567890، الكويت") renders with the long unbroken digit run stacked vertically one/two digits per line on real Safari mobile, inside the narrow mobile header address block. Could not reproduce on desktop Chrome down to 250px width - this is a known WebKit-specific quirk where word-break:break-word combined with an RTL bidi context can mis-segment a long unbroken LTR digit run character-by-character instead of treating it as one unbreakable unit. Switching to the safer, more modern overflow-wrap:break-word (which only breaks a word if it truly cannot fit, and does so more predictably across browsers) and removing word-break:break-word avoids this. */ .contact-item.item-location { word-break: normal !important; overflow-wrap: break-word !important; } /* Claude fix: REVERT - the previous overflow-wrap:break-word / word-break:normal change made things worse on real Safari (every single word of the address wrapped onto its own line instead of just fixing the digit run). Restoring the original word-break:break-word behavior while investigation continues. */ .contact-item.item-location { word-break: break-word !important; overflow-wrap: normal !important; } /* Claude fix: Bug 9 - Pagination previous/next arrow icons point the wrong way. .is-previous uses fa-angle-left (renders "<") but sits on the far RIGHT of the row (next to page 1) where it should point right, toward smaller/earlier pages. .is-next uses fa-angle-right (renders ">") but sits on the far LEFT of the row where it should point left, continuing the direction pages increase in this RTL layout. Verified live: mirroring both icons horizontally makes each one point in the direction it actually navigates. */ .item-pagination.is-previous i, .item-pagination.is-next i { transform: scaleX(-1) !important; } /* Claude fix: Bug 5 follow-up - per client's earlier direction, increase the gap between the phone icon and the phone number on result cards (.summary-info-icon / .summary-info-content) by 1px, from 4px to 5px. Verified live before applying. */ .summary-info-icon { margin-left: 1px !important; } /* Claude fix: Bug 5 follow-up ADJUSTMENT - client wants the phone icon to stay exactly in its original position, and the phone number to shift 1px instead. Reverting the icon's margin-left and moving the gap to the number side via margin-right on .summary-info-content. Net effect is the same 4px->5px gap increase, but now only the number moves, not the icon. */ .summary-info-icon { margin-left: 0px !important; } .summary-info-content { margin-right: 1px !important; } /* Claude fix: Bug 5 follow-up - client wants the gap increased further to 7px total (icon stays fixed, number keeps moving left). Overriding the content's margin-right from 1px to 3px (4px base + 3px = 7px). */ .summary-info-content { margin-right: 3px !important; } /* Claude fix: listing detail page mobile contact sidebar - align the "(Mobile)" additional phone number with the main phone number above it. Main row has an icon before the number; addition-phone row has no icon, causing an 8px misalignment. Verified live: mainNumLeft=200, mobileNumLeft=208 before fix; margin-right:8px brings mobileNumLeft to 200 (diff=0). */ .contact-item.item-phone.addition-phone a { margin-right: 8px !important; } /* Claude fix: the previous Mobile-number-alignment fix above was too broad - it also shifted the SAME row's desktop copy (inside .details-header-desktop), which was already aligned correctly and did not need the 8px shift. Restore the desktop copy to its original margin-right so only the mobile version (.details-header-mobile) gets the 8px correction. */ .details-header-desktop .contact-item.item-phone.addition-phone a { margin-right: 0px !important; } /* Claude fix: Modification 2 - increase small sub-category tag text under homepage listing cards from ~13.8px to 15px for readability. Live-tested at 15px, reads clearly without competing with the card title above it. Scoped to .cards-default so it doesn't affect the sidebar filter widget, which uses a different class (.categories-base). */ .cards-default .categories .link { font-size: 15px !important; } /* Claude fix: results page (category listing) - increase small sub-category tag text under Grid/List view cards from ~11.8px to 14px for readability. Note: Grid and List views share the exact same .summary-categories .link element (confirmed live - no separate DOM per view), so this rule necessarily applies to both views identically; there is no CSS-only way to target Grid view alone. Live-tested at 14px in both views, no wrapping issues. */ .summary-categories .link { font-size: 14px !important; } /* Claude fix: client prefers 15px over 14px for the results page category tags - overriding the previous rule. */ .summary-categories .link { font-size: 15px !important; } /* Claude fix: Modification 7 - redesign multi-category ratings display (listing detail page) from a 2x2 wrapped grid into a single-column layout, one category per row, reading right-to-left as Label -> Score -> Stars. Live-tested and confirmed: all elements needed already exist as real nodes (label, score, stars are separate divs), no markup change required. Label column width sized to the widest live label ("الموظفين", ~76px natural text width) plus padding. */ .details-reviews { display: flex !important; flex-direction: column !important; align-items: flex-end !important; flex-wrap: nowrap !important; row-gap: 10px !important; width: auto !important; } .details-advanced-reviews-item { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; width: auto !important; flex: 0 0 auto !important; } .review-additional-title { width: 85px !important; flex-shrink: 0 !important; text-align: right !important; white-space: nowrap !important; order: -1 !important; } .advanced-reviews-content { width: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; } .advanced-reviews.reviews-rating { font-weight: bold !important; font-size: 17px !important; direction: ltr !important; } .advanced-reviews.reviews-stars { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; } .reviews-stars i { display: inline-block !important; flex-shrink: 0 !important; } /* Claude fix: Modification 7 mobile follow-up. Client reported on real phone (Safari mobile) that rows break onto 2 lines (score above, stars+label below) and the block isn't flush with the account name's right edge. Root cause: the theme has its own highly-specific selectors for .details-reviews and related classes that are scoped by viewport width (e.g. min-width:992px), which beat our plain class rules above at narrower widths. Boosting specificity here via repeated class selectors so our layout wins at every viewport width, not just desktop. Could not verify real mobile rendering myself (no mobile device access), relying on this specificity fix based on the reported behavior - please confirm on your phone after clearing cache. */ .details-reviews.details-reviews.details-reviews { width: 100% !important; flex-wrap: nowrap !important; } .details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item { flex-wrap: nowrap !important; width: 100% !important; } .advanced-reviews-content.advanced-reviews-content.advanced-reviews-content { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: auto !important; } .review-additional-title.review-additional-title.review-additional-title { width: 85px !important; flex-shrink: 0 !important; } /* Claude fix: REVERT - client reports the mobile follow-up above made the ratings layout look worse. Reverting these specific properties back to the pre-mobile-follow-up (Modification 7 base) values. Not guessing further until confirmed via a fresh screenshot. */ .details-reviews.details-reviews.details-reviews { width: auto !important; } .details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item { flex-wrap: wrap !important; width: auto !important; } .advanced-reviews-content.advanced-reviews-content.advanced-reviews-content { flex-wrap: wrap !important; } /* Claude fix: Modification 7 - client confirmed mobile now looks correct (single line, right-aligned) and asked to keep that, but restore the ORIGINAL 2x2 grid design on desktop only. Scoped to min-width:992px (the same breakpoint the theme itself uses for this widget) using boosted specificity so it wins over both the theme's own desktop rule and our own earlier unscoped Modification 7 rules above, without touching anything below 992px (mobile keeps the new single-column design). Values below are the exact original computed styles measured on desktop before Modification 7 was ever applied. */ @media (min-width: 992px) { .details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: normal !important; width: 573px !important; row-gap: 0 !important; } .details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item { display: flex !important; flex-direction: column !important; justify-content: normal !important; width: 275.031px !important; flex: 0 1 auto !important; gap: normal !important; } .review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title { width: auto !important; flex-shrink: 1 !important; text-align: right !important; white-space: normal !important; order: 0 !important; } .advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content { display: flex !important; flex-direction: row !important; width: 275.031px !important; gap: normal !important; } .advanced-reviews.reviews-rating { font-weight: 700 !important; font-size: 22.5px !important; direction: rtl !important; } .advanced-reviews.reviews-stars { display: block !important; flex-wrap: nowrap !important; white-space: normal !important; } } /* Claude fix: client says both desktop and mobile now look left-shifted/reversed - simplifying by centering everything instead of chasing left/right alignment. Applies to all widths (mobile/base) and repeated below inside the desktop media query too, so it wins over every earlier rule regardless of viewport. */ .details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews { justify-content: center !important; align-items: center !important; } .details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item { justify-content: center !important; align-items: center !important; } .advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content { justify-content: center !important; align-items: center !important; } .review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title { text-align: center !important; } @media (min-width: 992px) { .details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews { justify-content: center !important; align-items: center !important; } .details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item { justify-content: center !important; align-items: center !important; } .advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content { justify-content: center !important; align-items: center !important; } .review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title { text-align: center !important; } } /* Claude fix: NEUTRALIZE all Modification 7 CSS above (client no longer needs the custom multi-category layout - the site's native single-rating display is used instead). This editor doesn't support deleting existing text, only appending, so this final block restores every property touched above back to the exact original values measured live before Modification 7 was ever applied, making all the earlier rules functionally inert regardless of viewport width. */ .details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: normal !important; align-items: normal !important; width: 573px !important; row-gap: 0 !important; } .details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item { display: flex !important; flex-direction: column !important; flex-wrap: wrap !important; justify-content: normal !important; align-items: normal !important; width: 275.031px !important; flex: 0 1 auto !important; gap: normal !important; } .review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title.review-additional-title { width: auto !important; flex-shrink: 1 !important; text-align: right !important; white-space: normal !important; order: 0 !important; } .advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content { display: flex !important; flex-direction: row !important; justify-content: normal !important; align-items: normal !important; width: 275.031px !important; gap: normal !important; } .advanced-reviews.reviews-rating { font-weight: 700 !important; font-size: 22.5px !important; direction: rtl !important; } .advanced-reviews.reviews-stars { display: block !important; flex-wrap: nowrap !important; white-space: normal !important; } .reviews-stars.reviews-stars i { display: inline !important; flex-shrink: 1 !important; } /* Claude fix: mobile layout regression fix - the NEUTRALIZE block above forces fixed desktop pixel widths (573px and 275.031px) with no media query, which overflows and breaks the layout on narrow mobile viewports. Overriding to responsive 100% width so it fits any screen size while keeping all other neutralized properties intact. */ .details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews { width: 100% !important; max-width: 100% !important; } .details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item.details-advanced-reviews-item { width: auto !important; max-width: 100% !important; } .advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content.advanced-reviews-content { width: auto !important; max-width: 100% !important; } /* Claude fix: rearrange the single-aggregate rating display (.details-reviews) on the listing detail page to match the eDirectory default demo layout - rating number, stars, and review count stacked vertically and centered, instead of the current row layout. Keeps Arabic/RTL text direction intact (only the flex arrangement changes, not text direction). */ .details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews.details-reviews { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; row-gap: 4px !important; } .reviews-rating.reviews-rating.reviews-rating.reviews-rating.reviews-rating.reviews-rating.reviews-rating.reviews-rating.reviews-rating.reviews-rating.reviews-rating { text-align: center !important; } .reviews-stars.reviews-stars.reviews-stars.reviews-stars.reviews-stars.reviews-stars.reviews-stars.reviews-stars.reviews-stars.reviews-stars.reviews-stars { margin-right: 0 !important; text-align: center !important; } .reviews-count.reviews-count.reviews-count.reviews-count.reviews-count.reviews-count.reviews-count.reviews-count.reviews-count.reviews-count.reviews-count { text-align: center !important; } /* Claude fix: the homepage "Leaderboard" sponsored banner ad (.banner[type="leaderboard"]) has its image capped only at max-width:100% of its container, and the container itself has no width limit - so it stretches to the full page width instead of its intended 728x90 leaderboard ad size, making it look oversized. Capping the container to the standard leaderboard width and centering it. */ .banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"] { max-width: 728px !important; margin-left: auto !important; margin-right: auto !important; } .banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img { max-width: 100% !important; width: 100% !important; height: auto !important; } /* Claude fix: REVERT - client asked to put the leaderboard banner back exactly as it was before my previous change; she was still deciding on a size/direction and had not confirmed one, so undoing the max-width/centering override above. */ .banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"].banner[type="leaderboard"] { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img.banner[type="leaderboard"] img { width: auto !important; height: auto !important; } /* Homepage Leaderboard banner - custom stretch to 1900x200 (test banner) */ .banner[type="leaderboard"] { width: 100% !important; max-width: 100% !important; height: 150px !important; padding: 0 !important; } .banner[type="leaderboard"] picture { display: block !important; width: 100% !important; height: 100% !important; } .banner[type="leaderboard"] img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: fill !important; } /* تكبير خط اسماء الشركات بكروت العرض بالصفحة الرئيسية */ .content .title.h-4 { font-size: 20px; } /* Slider arrows RTL fix */ .flickity-prev-next-button.previous { left: auto !important; right: -39px !important; } .flickity-prev-next-button.next { right: auto !important; left: -39px !important; } .flickity-prev-next-button.previous .flickity-button-icon, .flickity-prev-next-button.next .flickity-button-icon { transform: scaleX(-1); } /* Hero slide subtitle: force one line */ .slider-content .heading.h-2 { font-size: 19px !important; white-space: nowrap; } /**/ @media (max-width: 767px) { .embedded-carousel-container { direction: initial; } .embedded-carousel .embedded-carousel-container { display: flex; justify-content: center; } .embedded-carousel .embedded-carousel-container .embedded-carousel-list { max-width: 280px; } .embedded-carousel .embedded-carousel-container .slick-prev { left: -40px !important; } .embedded-carousel .embedded-carousel-container .slick-next { right: -29px !important; } } .photo-gallery { direction: initial; } /* ===== MOBILE HOMEPAGE CARDS REDESIGN — "Direction A" (2026-08-04) ===== Applies ONLY on mobile (<=768px). To roll back, delete everything between these two marker comments — nothing else on the site is affected. */ @media (max-width: 768px) { .cards-default { padding: 20px 0 !important; } .cards-default .heading.h-4 { font-size: 20px !important; font-weight: 700 !important; } .cards-wrapper .cards-list { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 12px !important; scroll-snap-type: x mandatory !important; padding-bottom: 6px !important; } .cards-list .card { min-width: 72% !important; width: 72% !important; flex: 0 0 auto !important; margin: 0 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important; scroll-snap-align: start !important; } } /* ===== END MOBILE HOMEPAGE CARDS REDESIGN ===== */ /* ===================================================== TikTok Carousel — mobile layout fix (2026-08-06) Bug: frame too narrow (max-width:280px) vs actual TikTok embed card width, causing last card to be clipped and overlapping the next arrow. Fix: widen frame, move both arrows below the carousel instead of overlapping it. ===================================================== */ @media (max-width: 767px) { .embedded-carousel .embedded-carousel-container .embedded-carousel-list { max-width: 100% !important; width: 340px !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; } .embedded-carousel .embedded-carousel-container .slick-list { order: 1 !important; width: 100% !important; } .embedded-carousel .embedded-carousel-container .slick-prev, .embedded-carousel .embedded-carousel-container .slick-next { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; order: 2 !important; margin: 16px 8px 0 !important; } } /* 2026-08-13 - card content padding fix (homepage cards-default + search results grid) */ .cards-default .card .content { padding-left: 14px; padding-right: 14px; } .summary-content { padding-left: 0; padding-right: 24px; } /* 2026-08-13b important-override */ .cards-default .cards-list .card .content { padding-left: 14px !important; padding-right: 14px !important; } .summary-content { padding-left: 0 !important; padding-right: 24px !important; } /* 2026-08-13c - results-title mobile font-size fix (single line) */ @media (max-width: 768px) { .results-header .results-title.heading.h-1 { font-size: 24px !important; line-height: 1.3 !important; } } /* RTL fix: move attached buttons (Browse categories, Add file) to the right side of their input fields */ .input-group.custom-members-category .input-group-btn, .bootstrap-filestyle.input-group .input-group-btn { order: -1; } /* RTL fix: event start/end time block - reorder label/AM-PM/hour-minute, and fix rounded corners */ .custom-hour-block > .input-group { order: 2; } .custom-hour-block > .form-group { order: 1; } .custom-hour-block .input-group select.form-control:first-child { border-radius: 0 9px 9px 0; } .custom-hour-block .input-group select.form-control:last-child { border-radius: 9px 0 0 9px; } /* RTL fix: hide empty category-search dropdown placeholder div so it doesn't create a visual gap between the search input and its chevron button */ .input-categories-list:empty { display: none; } /* RTL fix: category-search input-group border was mirrored for LTR — the button sits to the LEFT of the input on screen in this RTL layout, so flip which side gets the border to avoid a doubled seam line */ .categories-list-block.create-categories-modal .categories-list-header .form-control.category-search { border-right: 1px solid var(--neutral-transp-25, rgba(58, 58, 58, 0.25)); border-left: 0; } .base-categories .categories-list-header .input-group .input-group-addon.open-create-categories { border-left: 1px solid var(--neutral-transp-25, rgba(58, 58, 58, 0.25)); border-right: 0; } /* RTL fix: category-search input-group border was mirrored for LTR — the button sits to the LEFT of the input on screen in this RTL layout, so flip which side gets the border to avoid a doubled seam line. Only affects the homepage-widget variant (.category-search + .open-create-categories); the /forum page's plain