@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//roseepro.com/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=7.6.0") format("woff2");
}

:root {
	--wd-text-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 400;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 400;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Cairo", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 14px;
	--wd-primary-color: rgb(212,175,55);
	--wd-alternative-color: rgb(212,175,55);
	--wd-link-color: rgb(212,175,55);
	--wd-link-color-hover: rgb(212,175,55);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: #d4af37;
	--btn-accented-bgcolor-hover: #d4af37;
	--wd-form-brd-width: 1px;
	--notices-success-bg: rgb(212,175,55);
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 200px;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(255,255,255);
	background-image: url(https://roseepro.com/wp-content/uploads/2021/10/flowers-popup.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	--wd-popup-width: 800px;
}
.page-title-default {
	background-color: rgb(255,255,255);
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.footer-container {
	background-color: #ffffff;
	background-image: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
}
html .wd-dropdown-menu.wd-design-sized .wd-sub-menu > li > a, body .wd-dropdown-menu.wd-design-full-width .wd-sub-menu > li > a, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu > li > a, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu > li > a {
	font-family: "Cairo", Arial, Helvetica, sans-serif;
	font-weight: 600;
}
.page .main-page-wrapper {
	background-image: none;
	background-size: cover;
	background-attachment: scroll;
	background-position: center center;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 1000px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 20px;
}
.wd-builder-off .wd-fbt.wd-design-side {
	--wd-form-width: 250px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 35px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 12px;
}

@media (min-width: 1239px) {
.platform-Windows .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}

@media (min-width: 1222px) {
html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


/* ==========================================
   1. المتغيرات الأساسية (CSS Variables)
   ========================================== */
:root {
    --bg: #dde4ec;
    --card: #e7edf5;
    --shadow-dark: #b8c0cc;
    --shadow-light: #ffffff;
    --text: #2f3c4d;
    --muted: #6b7787;
    --primary: #cda851;
    --primary-dark: #b8923d;
    --success: #1fbf75;
    --danger: #ef4d67;
    --warning: #ffb347;
}

/* ==========================================
   2. إخفاء العناصر الافتراضية والتأطير العام
   ========================================== */
body:not(.logged-in) .woocommerce-account .woocommerce-MyAccount-content > div:not(.scene-wrapper),
body:not(.logged-in) .woocommerce-account .u-columns,
body:not(.logged-in) .woocommerce-account form.woocommerce-form-login,
body:not(.logged-in) .woocommerce-account form.woocommerce-form-register,
body:not(.logged-in) .woocommerce-account .woodmart-registration-page,
body:not(.logged-in) .woocommerce-account .woodmart-login-form,
body:not(.logged-in) .woocommerce-account .create-account-question,
body:not(.logged-in) .woodmart-login-side,
body:not(.logged-in) .cart-widget-side {
    display: none !important;
}

#toggle {
    display: none !important;
}

.woocommerce-account .elementor-element,
.woocommerce-account .elementor-widget,
.woocommerce-account .elementor-widget-container,
.woocommerce-account .elementor-widget-text-editor,
.woocommerce-account .elementor-widget-shortcode,
.woocommerce-account .elementor-widget-html,
.woocommerce-account .elementor-column,
.woocommerce-account .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================
   3. الحاوية الرئيسية والكارت (Account Card)
   — نسخة واحدة موحّدة، بدون min-width ثابت يكسر التجاوب —
   ========================================== */
.woocommerce-account .scene,
.elementor-widget-text-editor .scene,
.scene {
    width: 100% !important;
    max-width: 1050px !important;
    margin: 40px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

.scene .wrapper {
    position: relative !important;
    width: 100% !important;
    min-height: 650px !important;
    border-radius: 36px !important;
    background: var(--card) !important;
    box-shadow: 18px 18px 35px var(--shadow-dark), -18px -18px 35px var(--shadow-light) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ==========================================
   4. التقسيم والشريحة الذهبية المتحركة
   ========================================== */
.scene .forms {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    min-height: 650px !important;
    box-sizing: border-box !important;
}

.scene .panel {
    position: relative !important;
    z-index: 25 !important;
    width: 100% !important;
    padding: 40px 35px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.scene .slider {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    width: calc(50% - 20px) !important;
    height: calc(100% - 40px) !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, #cda851, #b8923d) !important;
    z-index: 10 !important;
    pointer-events: none !important; /* عشان الشريحة متمنعش الضغط على اللي تحتها */
    transition: all .7s cubic-bezier(.77,0,.18,1) !important;
    color: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#toggle:checked ~ .slider {
    left: calc(50%) !important;
}

/* السماح بالتفاعل مع أي زرار/رابط داخل الشريحة نفسها (مثل Create Account) */
.scene .slider button,
.scene .slider a,
.scene .slider label {
    pointer-events: auto !important;
}

/* ==========================================
   5. إدارة رؤية النماذج والطبقات (Form Overlap Fix)
   ========================================== */
.scene .form-box,
.scene form {
    width: 100% !important;
    max-width: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.login-panel .form-box {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.signup-panel .form-box {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#toggle:checked ~ .forms .login-panel .form-box {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#toggle:checked ~ .forms .signup-panel .form-box {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==========================================
   6. حقول المدخلات والعناصر التفاعلية
   ========================================== */
.scene .input-group {
    width: 100% !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 50 !important;
}

.scene .input {
    width: 100% !important;
    height: 50px !important;
    border: none !important;
    outline: none !important;
    border-radius: 16px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
    color: var(--text) !important;
    background: var(--card) !important;
    box-shadow: inset 4px 4px 8px rgba(184,192,204,.8), inset -4px -4px 8px rgba(255,255,255,.95) !important;
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: text !important;
    box-sizing: border-box !important;
}

.scene input:focus {
    border-color: #cda851 !important;
    outline: none !important;
}

.scene .input-group,
.scene .input,
.scene h1,
.scene h2,
.scene p,
.scene span,
.scene button,
.scene label {
    position: relative !important;
    z-index: 100 !important;
    color: var(--text) !important;
}

.scene .blue-bg,
.scene button,
.scene .submit-btn,
.scene #login-btn,
.scene .toggle-btn,
.scene .container-btn {
    background-color: #cda851 !important;
    background: #cda851 !important;
    border-color: #cda851 !important;
}

/* تفعيل التفاعل والضغط 100% على كل عناصر النموذج، الأزرار، وروابط التواصل */
.scene form,
.scene input,
.scene button,
.scene a,
.scene label,
.scene .social-container,
.scene .social-container a,
.scene .woodmart-social-icon {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.scene a[class*="google"],
.scene a[class*="social"] {
    display: inline-flex !important;
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

/* ==========================================
   7. تنسيقات صفحة إنهاء الطلب (Checkout)
   ========================================== */
#sender-card .card-grid,
#recipient-card .card-grid,
#delivery-card .card-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 15px 0 !important;
    width: 100% !important;
}

html[dir="ltr"] .woocommerce-checkout p.form-row,
html[lang^="en"] .woocommerce-checkout p.form-row,
body.ltr .woocommerce-checkout p.form-row {
    direction: ltr !important;
    text-align: left !important;
}

.woocommerce-checkout p.form-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.woocommerce-checkout p.form-row label {
    display: block !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    font-weight: 600 !important;
}

.woocommerce-checkout p.form-row .woocommerce-input-wrapper {
    width: 100% !important;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

#billing_first_name_field, #billing_last_name_field,
#billing_email_field, #billing_phone_field,
#recipient_name_field, #recipient_phone_field,
#billing_governoratea_field, #billing_area_field {
    width: 48.5% !important;
    max-width: 48.5% !important;
    flex: 0 0 48.5% !important;
}

#billing_details_field,
#anonymous_sender_wrapper,
#rosee_pickup_wrapper,
#order_comments_field {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

#order_comments_field textarea,
textarea#order_comments {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 120px !important;
    padding: 10px 15px !important;
    resize: vertical !important;
}

#anonymous_sender_wrapper,
#rosee_pickup_wrapper {
    margin-top: 10px !important;
    box-sizing: border-box !important;
}

#anonymous_sender_wrapper label.checkbox,
#rosee_pickup_wrapper label.checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

#anonymous_sender_wrapper input[type="checkbox"],
#rosee_pickup_wrapper input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

html[dir="rtl"] #anonymous_notice_box {
    border-right: 4px solid #ffb800 !important;
    border-left: none !important;
}

html[dir="ltr"] #anonymous_notice_box {
    border-left: 4px solid #ffb800 !important;
    border-right: none !important;
}

.pickup-fields-grid .form-row-first,
.pickup-fields-grid .form-row-last,
#rosee_pickup_details_box .form-row-first,
#rosee_pickup_details_box .form-row-last {
    width: 48.5% !important;
    flex: 0 0 48.5% !important;
    margin: 0 !important;
}

#delivery_time_slot_field .select2-container,
#billing_time_field .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

#delivery_time_slot_field .select2-selection--single,
#billing_time_field .select2-selection--single {
    position: relative !important;
    overflow: hidden !important;
    height: 48px !important;
    border-radius: 50px !important;
    box-sizing: border-box !important;
    padding-right: 40px !important;
    padding-left: 34px !important;
}

#delivery_time_slot_field .select2-selection__arrow,
#billing_time_field .select2-selection__arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 12px !important;
    right: auto !important;
}

#delivery_time_slot_field .select2-selection__clear,
#billing_time_field .select2-selection__clear {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 32px !important;
    right: auto !important;
}

body:not(.rtl) #delivery_time_slot_field .select2-selection__arrow,
body:not(.rtl) #billing_time_field .select2-selection__arrow {
    left: auto !important;
    right: 12px !important;
}

body:not(.rtl) #delivery_time_slot_field .select2-selection__rendered,
body:not(.rtl) #billing_time_field .select2-selection__rendered {
    padding-right: 30px !important;
    padding-left: 10px !important;
}

/* ==========================================
   8. تجاوب الشاشات (Media Queries)
   ========================================== */
@media (min-width: 769px) {
    #billing_delivery_field {
        width: 40% !important;
        max-width: 40% !important;
        flex: 0 0 40% !important;
    }

    #delivery_time_slot_field {
        width: 55% !important;
        max-width: 55% !important;
        flex: 0 0 55% !important;
    }

    #delivery_time_slot_field .select2-selection__rendered {
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    #billing_first_name_field, #billing_last_name_field,
    #billing_email_field, #billing_phone_field,
    #recipient_name_field, #recipient_phone_field,
    #billing_governoratea_field, #billing_area_field,
    #billing_details_field, #billing_delivery_field,
    #delivery_time_slot_field,
    .pickup-fields-grid .form-row-first,
    .pickup-fields-grid .form-row-last,
    #rosee_pickup_details_box .form-row-first,
    #rosee_pickup_details_box .form-row-last {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .scene .wrapper {
        min-height: 750px !important;
    }

    .scene .forms {
        grid-template-columns: 1fr !important;
    }

    .scene .slider {
        width: calc(100% - 40px) !important;
        height: 200px !important;
    }

    #toggle:checked ~ .slider {
        left: 20px !important;
        top: calc(100% - 220px) !important;
    }
}

@media (max-width: 480px) {
    #delivery_time_slot_field .select2-selection--single,
    #billing_time_field .select2-selection--single {
        height: 46px !important;
        font-size: 13px !important;
    }
}