/* 🌟 Basic container modification to match Blocksy header */ .btz-delivery-wrapper { position: relative !important; display: flex !important; align-items: center !important; /* Mandatory vertical centering */ height: 100% !important; /* Takes the available header height */ padding: 0 10px !important; /* Left and right safety space instead of margin */ } /* The button itself */ .btz-delivery-location { display: inline-flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; padding: 6px 12px !important; border-radius: 8px !important; background-color: transparent !important; border: 1px solid transparent !important; transition: all 0.3s ease !important; direction: rtl !important; font-family: inherit !important; max-width: 140px !important; /* 🌟 Prevent button from stretching excessively */ } .btz-delivery-location:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* Flag image design */ .btz-flag-icon { width: 22px !important; height: 15px !important; object-fit: cover !important; border-radius: 3px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; flex-shrink: 0 !important; /* 🌟 Prevents the flag from being compressed */ } /* Text container */ .btz-delivery-text { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; line-height: 1.1 !important; overflow: hidden !important; /* 🌟 Essential for hiding long texts */ } /* The word "Delivery to Me" */ .btz-delivery-subtitle { font-size: 10px !important; color: #cbd5e1 !important; margin-bottom: 2px !important; white-space: nowrap !important; } /* The word "Egypt" or "Saudi Arabia" (automatic truncating of long texts) */ .btz-delivery-country { font-size: 13px !important; font-weight: 800 !important; color: #ffffff !important; transition: color 0.3s ease !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* 🌟 Adds a period at the end if the name is long */ max-width: 75px !important; /* 🌟 Specifies a width for the text to be truncated before */ display: inline-block !important; } /* Arrow */ .btz-dropdown-arrow { font-size: 10px !important; color: #cbd5e1 !important; margin-right: 4px !important; transition: transform 0.3s ease, color 0.3s ease !important; flex-shrink: 0 !important; /* 🌟 Prevents the arrow from being compressed */ } .btz-delivery-location:hover .btz-dropdown-arrow, .btz-delivery-location:hover .btz-delivery-country { color: #e69c3a !important; } /* ================================== */ /* Dropdown Menu Design */ /* ================================== */ .btz-delivery-dropdown { display: none !important; position: absolute !important; top: 100% !important; right: 0 !important; margin-top: 5px !important; background-color: #ffffff !important; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; width: 180px !important; z-index: 9999 !important; direction: rtl !important; overflow: hidden !important; border: 1px solid #e2e8f0 !important; } .btz-delivery-dropdown.show { display: block !important; } .btz-dropdown-header { padding: 10px 15px !important; background-color: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; font-size: 11px !important; font-weight: 700 !important; color: #64748b !important; } .btz-country-list { list-style: none !important; margin: 0 !important; padding: 0 !important; max-height: 250px !important; overflow-y: auto !important; } .btz-country-item { padding: 10px 15px !important; font-size: 13px !important; color: #1a1947 !important; cursor: pointer !important; transition: background-color 0.2s ease!important; border-bottom: 1px solid #f1f5f9 !important; } .btz-country-item:last-child { border-bottom: none !important; } .btz-country-item:hover, .btz-country-item.active { background-color: #f1f5f9 !important; color: #e69c3a !important; font-weight: 700 !important; }