


<style> 
#bottom-navigation > div.bottom-0.w-full.z-50.bg-white.p-2.border-t.flex.content-center.justify-center.rounded-t-2xl.pt-4 > button {

    background-color: #004080 !important;
}

#__next > div.flex.flex-1.flex-col > div.relative.flex.flex-col > div.mx-auto.flex.w-full.max-w-2xl.flex-col.py-12.px-4.sm\:py-16.sm\:px-6.lg\:max-w-7xl.lg\:px-5.xl\:px-8 > div > div.product_form_checkout.mt-6 > form > button {

    background-color: #004080 !important;
}
@keyframes borderGlow {
  0%, 100% {
    box-shadow: 0 0 10px yellow ;
  }
  50% {
    box-shadow: 0 0 10px  red ;
  }
}

@keyframes borderFlash {
  0%, 100% {
    border-color: blue;
  }
  50% {
    border-color: red;
  }
}





@keyframes pulse {
  0%, 100% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.1); /* 10% bigger */
  }
}



@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* Adjust the value as needed */
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes gentleShake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, -1px); }
    75% { transform: translate(1px, -1px); }
    100% { transform: translate(0, 0); }
}

p, h1, h2, h3, h4, h5, h6 ,span , .icon-text-container{
    direction: rtl !important;
}

#headlessui-radiogroup-option-\:r2\: , 
#headlessui-radiogroup-option-\:r4\: {
    color: #ffffff;
    cursor: pointer;
    font-weight: bold !important;
    border-radius: 100px;
    
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Checked State - Darker Colors */
#headlessui-radiogroup-option-\:r2\:[data-headlessui-state~="checked"], 
#headlessui-radiogroup-option-\:r4\:[data-headlessui-state~="checked"] {
    background: #0a192f !important;
    transform: scale(1.02);
    box-shadow: 0 4px 25px rgba(10, 25, 47, 0.4);
    border:2px solid #4a90e2 !important;
    border: 2 px white !important;
    color: white !important;    
  animation: borderFlash 1s infinite alternate !important;          
  animation: borderGlow 2s infinite ease-in-out !important;
}

/* Unchecked State - Lighter Colors */
#headlessui-radiogroup-option-\:r2\: , 
#headlessui-radiogroup-option-\:r4\: {
    color: #0a192f !important;
        border:2px solid #0a192f !important;

    
}

/* Hover states for unchecked buttons */
#headlessui-radiogroup-option-\:r2\:hover:not([data-headlessui-state~="checked"]), 
#headlessui-radiogroup-option-\:r4\:hover:not([data-headlessui-state~="checked"]) {
    transform: scale(1.3) !important;
}

.in-product-quantity-counter {
display:none !important;}

.product_form_checkout {
  max-width: 500px;
  margin: 0 auto;
  padding: 5px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(10, 25, 47, 0.1);
}

.global_input,
.global_textarea,
.gov_select .select__control {
  background: #f0f4f8 !important;
  border: 2px solid #1d4e89 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
}

.global_input:focus,
.global_textarea:focus {
  border-color: #1d4e89 !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 137, 0.2) !important;
}

.gov_select .select__control {
  background: linear-gradient(135deg, #f0f4f8, #ffffff) !important;
}

.gov_select .select__menu {
  border: 2px solid #1d4e89;
  border-radius: 8px;
  margin-top: 4px;
}

.gov_select .select__option--is-focused {
  background: #f0f4f8 !important;
  color: #1d4e89 !important;
}

.gov_select .select__option--is-selected {
  background: #1d4e89 !important;
  color: white !important;
}

.shipping_cost_container,
.total_price_container {
  background: #f0f4f8;
  padding: 5px;
  border-radius: 8px;
  margin: 5px 0;
}

.shipping_cost,
.total_price {
  color: #1d4e89;
  font-size: 1em;
}

.form_checkout_btn {
  background: #1d4e89 !important;
    font-weight: bold !important;

  border: none !important;
  transition: all 0.3s ease;
  animation: borderPulse 2s infinite ease-out;
}

.form_checkout_btn:hover {
  background: linear-gradient(135deg, #1d4e89, #2973ca) !important;
  transform: scale(1.02);
}

/* Add this to maintain React Select styling */
.gov_select .select__dropdown-indicator svg {
  fill: #1d4e89 !important;
}

.gov_select .select__dropdown-indicator:hover svg {
  fill: #4a90e2 !important;
}

.gov_select .select__placeholder {
  color: #4a90e2 !important;
}
#headlessui-radiogroup-option-\:r4\:{
    position: relative !important;
  overflow: visible !important; 
}

#headlessui-radiogroup-option-\:r4\:::before {
     content: "عرض التوفير";
  position: absolute !important;
  
  
  background: #e60023;
  color: yellow;

  font-size: 0.9rem;
  font-weight: bold;
  border-radius:111px;
  white-space: nowrap;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  
  
  top: -15px; /* Adjust as needed */
  left: -20px; /* Adjust as needed */
  padding:3px ; 

  font-weight: bold;
  
  
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    top: -5px !important;
    left: -5px !important;
    position: absolute !important;
    
  animation: borderFlash 1s infinite alternate !important;          
  animation: borderGlow 2s infinite ease-in-out !important;
    
}



 .ql-video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9999 !important;
    background: white !important;
}


.grid-cols-3 {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}


</style>
