@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap);
#yaxiiSmartForm {
  --ysf-bg-color: var(--ysf-bg-color, #ffffff);
  --ysf-text-color: var(--ysf-text-color, #374151);
  --ysf-field-bg: var(--ysf-field-bg, #ffffff);
  --ysf-field-focus: var(--ysf-field-focus, #3b82f6);
  --ysf-summary-bg: var(--ysf-summary-bg, #f3f4f6);
  --ysf-summary-color: var(--ysf-summary-color, #1f2937);
  --ysf-total-color: var(--ysf-total-color, #3b82f6);
  font-family: Rubik, sans-serif;
  border-radius: 0.75rem;
}
.hidden {
  display: none !important;
}
.form-progress-bar {
  transition: width 0.3s ease-in-out;
}
#yaxiiSmartForm .form-control,
#yaxiiSmartForm .form-group label,
#yaxiiSmartForm .form-label,
#yaxiiSmartForm a:not(.has-icon),
#yaxiiSmartForm button,
#yaxiiSmartForm h1:not(.has-icon),
#yaxiiSmartForm h2:not(.has-icon),
#yaxiiSmartForm h3:not(.has-icon),
#yaxiiSmartForm h4:not(.has-icon),
#yaxiiSmartForm h5:not(.has-icon),
#yaxiiSmartForm h6:not(.has-icon),
#yaxiiSmartForm input,
#yaxiiSmartForm p:not(.has-icon),
#yaxiiSmartForm select,
#yaxiiSmartForm span:not(.has-icon),
#yaxiiSmartForm td,
#yaxiiSmartForm textarea,
#yaxiiSmartForm th {
  font-family: Rubik, sans-serif !important;
}
.rtl #yaxiiSmartForm h1:not(.has-icon),
.rtl #yaxiiSmartForm h2:not(.has-icon),
.rtl #yaxiiSmartForm h3:not(.has-icon),
.rtl #yaxiiSmartForm h4:not(.has-icon),
.rtl #yaxiiSmartForm h5:not(.has-icon),
.rtl #yaxiiSmartForm h6:not(.has-icon) {
  font-family: Rubik !important;
  font-weight: 600 !important;
}
#yaxiiSmartForm .table td {
  font-family: Rubik, sans-serif !important;
  font-weight: 400 !important;
}
#yaxiiSmartForm .fa,
#yaxiiSmartForm .fab,
#yaxiiSmartForm .fal,
#yaxiiSmartForm .far,
#yaxiiSmartForm .fas,
#yaxiiSmartForm [class*=" bi-"],
#yaxiiSmartForm [class*=" fa-"],
#yaxiiSmartForm [class^="bi-"],
#yaxiiSmartForm [class^="fa-"],
#yaxiiSmartForm i {
  font-family: inherit !important;
}
#yaxiiSmartForm [class*=" bi-"],
#yaxiiSmartForm [class^="bi-"] {
  font-family: bootstrap-icons !important;
}
.form-label {
  border-radius: 5px 5px 0 0 !important;
}
#yaxiiSmartForm .fa,
#yaxiiSmartForm .fab,
#yaxiiSmartForm .fal,
#yaxiiSmartForm .far,
#yaxiiSmartForm .fas,
#yaxiiSmartForm [class*=" fa-"],
#yaxiiSmartForm [class^="fa-"] {
  font-family: "Font Awesome 5 Free" !important;
}
#ysf_decrease_qty {
  border-radius: 9999px !important;
  background: #fff;
  color: #374151;
}
#ysf_increase_qty {
  border-radius: 9999px !important;
  background: #2563eb;
  color: #fff;
}
.quantity-btn {
  transition: 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.quantity-btn:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}
.quantity-input:focus + .input-underline {
  opacity: 1;
  animation: 1.5s infinite alternate underline-glow;
}
#ysf_quantity::-webkit-inner-spin-button,
#ysf_quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#ysf_quantity {
  -moz-appearance: textfield;
  appearance: none;
}
@keyframes underline-glow {
  from {
    opacity: 0.6;
    transform: scaleX(0.9);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes pulse-subtle {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes bounce-slight {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
.animate-pulse-waves {
  animation: 2s ease-in-out infinite pulse-waves;
}
@keyframes pulse-waves {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}
.wave-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(34, 197, 94, 0.3) 10%,
    transparent 70%
  );
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  animation: 2s ease-out infinite wave-ripple;
  pointer-events: none;
}
@keyframes wave-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}
.animate-pulse-subtle {
  animation: 2s ease-in-out infinite pulse-subtle;
}
.animate-bounce-slight {
  animation: 1.5s ease-in-out infinite bounce-slight;
}
.quantity-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: none;
  transform: none;
}
.quantity-btn:disabled i {
  color: #9ca3af;
}
.animate-stock-entry {
  animation: 0.5s ease-out stock-entry;
}
@keyframes stock-entry {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.rtl #ysf_increase_qty {
  border-radius: 9999px !important;
  margin-right: 0;
  background: #2563eb;
  color: #fff;
}
.rtl #ysf_decrease_qty {
  border-radius: 9999px !important;
  margin-left: 0;
  background: #fff;
  color: #374151;
}
@media (max-width: 640px) {
  .form-input {
    font-size: 0.875rem;
  }
  .yaxii-shipping-title {
    margin-bottom: -50px !important;
  }
  #ysf_quantity {
    width: 3.5rem;
    font-size: 1rem;
  }
  .quantity-btn {
    height: 2.5rem;
    width: 2.5rem;
  }
  .mobile-padding {
    padding: 8px 16px !important;
  }
  .bg-white.rounded-2xl.shadow-2xl.w-full.max-w-full.sm\:max-w-2xl.p-8.transform.hover\:scale-\[1\.01\].transition-transform.mx-auto {
    padding: 0 !important;
  }
  .custom-padding {
    padding: 0;
  }
  .form-group label {
    font-size: 0.875rem;
  }
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: 0 !important;
}
.text-xs.text-gray-600.peer-checked\:text-gray-200.mt-1 {
  color: #a2a2a2 !important;
}
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}
.form-input {
  border-radius: 0.75rem !important;
}
.form-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-group label {
  position: absolute;
  left: 2.5rem;
  top: 0.75rem;
  padding: 0 0.25rem;
  color: #64748b;
  font-size: 1rem;
  transition: 0.3s;
  pointer-events: none;
  background-color: #fff;
}
.form-input:focus + label,
.form-input:not(:placeholder-shown) + label {
  top: -0.5rem;
  left: 0.5rem;
  font-size: 0.875rem;
  color: #3b82f6;
}
.form-group i {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  transition: color 0.3s;
  font-family: bootstrap-icons !important;
}
.form-group:hover i {
  color: #3b82f6 !important;
}
.form-select {
  width: 100%;
  padding: 0.75rem 0.75rem 0.75rem 2.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 1rem;
  transition: 0.3s;
  background-color: #fff;
  outline: 0;
  appearance: none;
}
.form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-textarea {
  width: 100%;
  padding: 0.75rem 0.75rem 0.75rem 2.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 1rem;
  transition: 0.3s;
  background-color: #fff;
  outline: 0;
  resize: vertical;
}
.form-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  display: none;
}
.form-input.invalid + .form-error {
  display: block;
}
.rtl {
  direction: rtl;
  unicode-bidi: embed;
}
.rtl .form-group {
  text-align: right;
}
.rtl .form-input {
  padding-right: 0.75rem !important;
  padding-left: 2.5rem !important;
  border-radius: 0.75rem;
}
.rtl .form-group label {
  left: auto;
  right: 2.5rem;
}
.rtl .form-input:focus + label,
.rtl .form-input:not(:placeholder-shown) + label {
  left: auto;
  right: 0.5rem;
}
.rtl .form-group i {
  right: auto;
  left: 1rem;
}
.rtl .shine-button {
  flex-direction: row-reverse;
}
.rtl .shine-button::before {
  right: -50%;
  left: auto;
  animation: 2s infinite shine-rtl;
}
@keyframes shine-rtl {
  0% {
    transform: translateX(0);
  }
  100%,
  25% {
    transform: translateX(-350%);
  }
}
.shine-button {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}
.shine-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: 2s infinite shine;
}
@keyframes shine {
  0% {
    transform: translateX(0);
  }
  100%,
  25% {
    transform: translateX(350%);
  }
}
.shine-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.shine-button:active {
  transform: translateY(0);
}
.rtl .payment-content,
.rtl .shipping-content {
  flex-direction: row-reverse;
}
.rtl .toast {
  right: auto;
  left: 1rem;
}
.rtl .error-message {
  left: auto;
  right: 0;
}
.rtl #ysf_phone,
.rtl .text-left.py-2.text-gray-600 {
  text-align: right !important;
}
.no-select {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.form-control.is-invalid {
  border-color: #dc3545;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  padding-right: calc(1.5em + 0.75rem);
}
.form-control.is-valid {
  border-color: #198754 !important;
}
.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}
.alert {
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.no-copy-paste {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.is-invalid {
  border-color: #dc3545 !important;
  background-color: #fff !important;
}
.error-message {
  font-size: 0.875rem;
  color: #dc3545;
  margin-top: 0.25rem;
}
.secure-input {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.copy-disabled {
  cursor: not-allowed;
}
.has-error input {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-input {
  width: 100%;
  padding: 8px 2.5rem 8px 0.75rem !important;
  border: 2px solid #e2e8f0;
  font-size: 1rem;
  transition: 0.3s;
  background-color: #fff;
  outline: 0;
}
.bg-yellow-50.border-l-4.border-yellow-400.p-4.mb-4 {
  margin-top: 40px;
  margin-bottom: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.algerian-phone-input {
  padding-left: 4rem !important;
  position: relative;
}
.algerian-phone-input::before {
  content: "+213";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  pointer-events: none;
  z-index: 1;
}
.static-label {
  position: absolute !important;
  left: 0.75rem !important;
  top: -0.5rem !important;
  padding: 0 0.25rem !important;
  color: #6b7280 !important;
  font-size: 0.875rem !important;
  background-color: #fff !important;
  z-index: 10 !important;
  transform: none !important;
  transition: none !important;
}
@media (max-width: 640px) {
  .algerian-phone-input {
    padding-left: 3.5rem !important;
  }
  .algerian-phone-input::before {
    left: 0.5rem;
    font-size: 0.875rem;
  }
  .static-label {
    left: 0.5rem !important;
    font-size: 0.75rem !important;
  }
}
[dir="rtl"] .algerian-phone-input {
  padding-left: 2.5rem !important;
  padding-right: 4rem !important;
}
[dir="rtl"] .algerian-phone-input::before {
  left: auto;
  right: 0.75rem;
}
[dir="rtl"] .static-label {
  left: auto !important;
  right: 0.75rem !important;
}
@media (max-width: 640px) {
  [dir="rtl"] .algerian-phone-input {
    padding-right: 3.5rem !important;
  }
  [dir="rtl"] .algerian-phone-input::before {
    right: 0.5rem;
  }
  [dir="rtl"] .static-label {
    right: 0.5rem !important;
  }
} /* Add touch-manipulation for mobile */
.touch-manipulation {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
} /* Mobile-first responsive improvements */
@media (max-width: 640px) {
  .form-input {
    font-size: 1rem !important;
    padding: 0.875rem 2.5rem 0.875rem 0.75rem !important;
  }
  .form-label {
    font-size: 0.875rem !important;
  }
  .form-error {
    font-size: 0.875rem !important;
  }
  .quantity-input {
    min-width: 48px !important;
    font-size: 0.875rem !important;
  }
  .quantity-btn {
    height: 2.5rem !important;
    width: 2.5rem !important;
  }
  .mobile-padding {
    padding: 8px 16px !important;
  }
  .bg-white.rounded-2xl.shadow-2xl.w-full.max-w-full.sm\:max-w-2xl.p-8.transform.hover\:scale-\[1\.01\].transition-transform.mx-auto {
    padding: 1rem !important;
  }
  .custom-padding {
    padding: 0.5rem !important;
  }
  .form-group label {
    font-size: 0.875rem !important;
  }
  .space-y-4 > * + * {
    margin-top: 1rem !important;
  }
  .space-y-6 > * + * {
    margin-top: 1.5rem !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2 {
    gap: 0.75rem !important;
  }
  .py-3\.5 {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
  }
  .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .text-base {
    font-size: 1rem !important;
  }
  .text-sm {
    font-size: 0.875rem !important;
  }
  .text-xs {
    font-size: 0.75rem !important;
  }
} /* Mobile full-width overrides */
@media (max-width: 640px) {
  /* Override theme container constraints for mobile */
  #yaxiiSmartForm,
  .yaxii-smart-form-container {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
  }
  .yaxii-smart-form-container > div {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  } /* Ensure form takes full viewport width */
  body .yaxii-smart-form-container {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  } /* Override any theme container max-width */
  body .container .yaxii-smart-form-container,
  body .content .yaxii-smart-form-container,
  body .main .yaxii-smart-form-container,
  body .entry-content .yaxii-smart-form-container {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
  }
}