/* Container & card */
.entry-content p {
  color: #0b0b0b;
}
/* .asf-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem;
}
.asf-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
} */

/* ======================
   BACKGROUND SECTION
   ====================== */
.asf-container {
  position: relative;
  padding: 60px 20px;
  background: linear-gradient(
    -165deg,
    #f3e8e8 0%,
    /* top-left corner */ #f3e8e8 40%,
    /* main white area */ #ffffff 40%,
    /* light peach tone start */ #ffffff 100% /* full background fill */
  );
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* Give the card shadow & spacing from background */
.asf-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  max-width: 1157px;
  width: 100%;
  padding: 30px 35px 40px 35px;
  margin-top: 40px;
}

/* Tabs */
.asf-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.asf-tab {
  flex: 1;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: #eee;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
}
.asf-tab:hover,
.asf-tab:focus {
  background: #ff9a3d !important;
  color: #fff !important;
}
.asf-tab--active {
  background: #ff9a3d;
  color: #fff;
}
.asf-form label {
  color: #797878 !important;
  margin-top: 25px !important;
}

/* Titles */
.asf-title {
  margin: 0.25rem 0 1rem;
  font-size: 30px !important;
  font-weight: 400;
  text-align: center;
  color: #636161 !important;
}
.asf-hidden {
  display: none !important;
}
.asf-form {
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
}
/* Form grid */
.asf-form label {
  display: block;
  font-size: 16px;
  margin: 0.4rem 0;
}
.asf-form input[type="text"],
.asf-form input[type="email"],
.asf-form input[type="tel"] {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  outline: 0;
}
.asf-row {
  display: flex;
}
.asf-gap {
  gap: 10px;
}
.asf-col {
  flex: 1;
}

.asf-note {
  margin-top: 0.6rem;
  color: #777;
  min-height: 1.2rem;
}

/* Upload */
.asf-upload {
  border: 1px dashed #e0e0e0;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  margin: 1rem 0;
  background: #fff;
}

#asfLogoBrowse span {
  max-width: 100% !important;
}
#asfCrBrowse,
#asfTaxBrowse,
#asfLogoBrowse,
#asfIdBrowse {
  width: auto !important;
}

.rtl h1,
.rtl h1,
h2,
.rtl h2,
h3,
.rtl h3,
h4,
.rtl h4,
h5,
.rtl h5,
h6,
.rtl h6,
.rtl p,
.rtl span,
.rtl label,
.rtl input,
.rtl button,
.rtl select,
.rtl textarea,
.rtl option,
.rtl .asf-field-error {
  font-family: "cairo", Sans-serif !important;
}
h1,
h1,
h2,
h2,
h3,
h3,
h4,
h4,
h5,
h5,
h6,
h6,
p,
span,
label,
input,
button,
select,
textarea,
.asf-field-error,
option {
  font-family: "Roboto", Sans-serif !important;
}
.asf-upload--hover {
  background: #fff9f0;
}
.asf-upload .asf-upload-inner span {
  display: block;
  margin: 0.25rem 0;
  color: #999;
}
.asf-upload-list {
  margin-top: 0.5rem;
  text-align: left;
  font-size: 0.9rem;
  color: #555;
}
.asf-upload-item {
  padding: 0.25rem 0;
  border-bottom: 1px dashed #f0f0f0;
}

/* Buttons */
.asf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}
.asf-btn--ghost {
  background: #ffffff;
  border: 1px solid #ff9a3d;
  color: #ff7a3d;
}
.asf-btn--primary {
  width: 163px;
  background: linear-gradient(90deg, #ff9a3d, #ff6a3d);
  color: #fff;
  border: none;
  margin-top: 0.6rem;
  float: right;
  margin-top: 25px;
  font-size: 18px;

  margin-bottom: 50px;
}

/* RTL tweaks */
.asf-rtl .asf-form label {
  text-align: right;
}
/* .asf-rtl .asf-row {
  flex-direction: row-reverse;
} */
.asf-note {
  margin-top: 0.8rem;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
.asf-success {
  color: #00875a !important; /* green */
}
.asf-error {
  color: #d93025 !important; /* red */
  margin-bottom: 20px !important;
}
/* Hide browser default "No file chosen" UI */
.asf-hidden-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

/* Drop area styling */
.asf-upload {
  position: relative;
  border: 1px dashed #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  background: #fff;
  transition: background-color 0.3s ease;
}
.asf-upload--hover {
  background-color: #fff9f0;
}

/* Custom PNG icon above text */
.asf-upload-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Upload button */
.asf-btn--ghost {
  border: 1px solid #ff9a3d;
  color: #ff7a3d;
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}
.asf-btn--ghost:hover {
  background: #ff9a3d;
  color: #fff;
}

/* Uploaded file list */
.asf-upload-list {
  margin-top: 0.75rem;
  text-align: left;
  font-size: 0.9rem;
  color: #555;
}
.asf-upload-item {
  padding: 0.25rem 0;
  border-bottom: 1px dashed #f0f0f0;
}

.asf-card {
  padding: 0;
} /* let tabs sit at the very top */
.asf-tabs {
  /* display:flex; */
  border-radius: 10px 10px 0 0; /* round top corners */
  overflow: hidden; /* clip inner button corners */
  background: #eee; /* light gray left side */
  border: 1px solid #ececec;
  border-bottom: none; /* merge with the white card body */
  margin: 0 0 8px 0;
}

.asf-tab {
  /* flex:1; */
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  color: #555;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
/* .asf-tab + .asf-tab{ border-left:1px solid #ffffff; } */

.asf-tab:first-child {
  border-radius: 0;
} /* round left corner */
.asf-tab:last-child {
  border-radius: 0;
}
.asf-tab--active {
  background: #e7780a; /* orange active */
  color: #fff;
  border-left-color: transparent;
}

/* optional: tiny underline separator below tabs to match card edge */
.asf-title {
  padding-top: 16px;
}

/* --- Centered "OR" with full horizontal lines --- */
.asf-upload-inner span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  color: #777;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 10px 0;
}

.asf-upload-inner span::before,
.asf-upload-inner span::after {
  content: "";
  display: inline-block;
  flex-grow: 1;
  height: 1px;
  width: 100px;
  position: relative;
  top: -5px;
  background-color: #e5e5e5;
}

/* Optional: tweak margins to control how long the line appears */
.asf-upload-inner span::before {
  margin-right: 8px;
}
.asf-upload-inner span::after {
  margin-left: 8px;
}

/* RTL: flip automatically if needed */
.asf-rtl .asf-upload-inner span {
  flex-direction: row-reverse;
}

.asf-error,
.asf-success {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

label.required::after {
  content: " *";
  color: #e63946; /* red */
  font-weight: bold;
}

/* highlight invalid input & upload area */
.asf-form .asf-invalid,
.asf-upload.asf-invalid {
  border-color: #d92d20 !important;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.08);
  outline: 0;
}

/* upload area default look (if not already defined) */
.asf-upload {
  border: 1px dashed #ccc;
  border-radius: 8px;
  padding: 20px;
  transition: border-color 0.3s ease;
}

/* inline error text */
.asf-field-error {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: #d92d20;
}

/* === Saudi phone input === */
.asf-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d1d5db; /* tailwind gray-300 */
  border-radius: 8px;
  padding: 0px 10px;
  background: #fff;
  direction: ltr; /* keep numbers LTR even on RTL pages */
}

.asf-phone:focus-within {
  border-color: #3b82f6; /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* small green flag chip (Saudi feel) */
.asf-phone-flag {
  width: 20px;
  height: 13px;
  background: url("https://flagcdn.com/w20/sa.png") no-repeat center center;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex: 0 0 20px;
}

/* fixed +966 text */
.asf-phone-code {
  font-weight: 400;
  color: #374151; /* gray-700 */
  user-select: none;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* the actual input */
.asf-phone-input {
  border: none !important;
  outline: 0 !important;
  flex: 1 1 auto;
  min-width: 120px;
  padding: 6px 4px;
  font-size: 15px;
  box-shadow: none !important;
}

/* invalid state (integrates with your existing .asf-invalid) */
.asf-phone.asf-invalid {
  border-color: #d92d20 !important;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.08);
}

/* error text below the phone control (reuse your class) */
.asf-phone + .asf-field-error {
  margin-top: 6px;
}

/* Global overlay loader */
.asf-global-loader {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5); /* subtle white veil */
  z-index: 999999; /* above everything */
}

.asf-global-loader.is-visible {
  display: flex;
}

.asf-global-loader__inner {
  text-align: center;
}

.asf-global-loader__logo {
  width: 96px;
  height: 96px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* gentle pulse */
  animation: asfPulse 1.2s ease-in-out infinite;
}

/* Screen-reader only text */
.asf-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Responsive */
@media (max-width: 1024px) {
  .asf-row {
    display: block;
  }
  .asf-form {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
  }
}
@keyframes asfPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

/* Input with inline "Browse files" button */
.asf-inputwrap {
  position: relative;
}

.asf-inputwrap > input[type="text"],
.asf-inputwrap > input[type="email"],
.asf-inputwrap > input[type="url"],
.asf-inputwrap > textarea {
  width: 100%;
  padding-right: 120px; /* room for the button */
  box-sizing: border-box;
}

/* The inline browse button sits inside the field on the right */
.asf-inline-browse {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 32px; /* visually balanced with your inputs */
  padding: 6px 12px;
  line-height: 1;
  border-radius: 8px;
}

/* Tighten when inputs are taller on some themes */
.asf-form .asf-inputwrap input[type="text"],
.asf-form .asf-inputwrap input[type="url"] {
  height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* RTL: keep the button on the left and pad-left instead of right */
.asf-rtl .asf-inputwrap > input[type="text"],
.asf-rtl .asf-inputwrap > input[type="email"],
.asf-rtl .asf-inputwrap > input[type="url"],
.asf-rtl .asf-inputwrap > textarea {
  padding-right: 15px;
  padding-left: 120px;
}
.asf-rtl .asf-inline-browse {
  right: auto;
  left: 6px;
}
.asf-inputwrap.asf-invalid {
  border: 1px solid #d92d20 !important;
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.08);
}
.asf-field-error {
  color: #d92d20;
  font-size: 13px;
  margin-top: 4px;
}

.rtl .asf-inline-browse img {
  margin-right: 0 !important;
  margin-left: 6px !important;
}

/* 50/50 right column with filename chip + Browse button */
.asf-filewrap {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* filename on left, button on right */
  gap: 10px;
  min-height: 40px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 0px 8px;
  background: #fff;
}

/* hide when empty (JS toggles) */
.asf-namechip.hidden {
  display: none;
}

.asf-namechip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  max-width: 100%;
  padding: 0.65rem 0.5rem;
  border-radius: 999px;
  /* background: #f7f7f7; */
  /* border: 1px solid #ececec; */
  font-size: 13px;
  color: #444;
  flex: auto;
  /* float: left; */
  left: 0;
  /* overflow: hidden; */
}

.asf-namechip__name {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 260px;
}

/* small × clear button */
.asf-namechip__x,
.asf-namechip__x:hover {
  margin-left: 8px;
  border: 0;
  background: transparent;
  /* width: 18px; */
  /* height: 18px; */
  line-height: 18px;
  /* border-radius: 50%; */
  cursor: pointer;
  font-weight: 700;
  color: #636161;
  display: inline-block;
  box-shadow: none;
  padding: 0;
  margin-left: 25px;
}
.asf-namechip__x:hover {
  color: #ff6a3d;
}

.asf-btn--primary:hover {
  background: linear-gradient(90deg, #ff6a3d, #ff9a3d) !important;
  color: #fff !important;
  font-size: 18px;
}
/* keep your orange ghost button look */
.asf-filewrap .asf-btn--ghost {
  height: 25px;
  padding: 6px 10px;
}

/* RTL swap order gracefully */
.asf-rtl .asf-filewrap {
  flex-direction: row-reverse;
}
.asf-rtl .asf-namechip__x {
  margin-left: 0;
  margin-right: 8px;
}

.asf-err {
  margin: 6px 0 0;
  color: #d92d20 !important;
  font-size: 12px;
}
.asf-invalid {
  border-color: #d92d20 !important;
  box-shadow: none !important;
}
/* Small screens: let the button float over cleanly */
@media (max-width: 480px) {
  .asf-inline-browse {
    height: 34px;
    padding: 6px 10px;
  }
  .asf-inputwrap > input[type="text"],
  .asf-inputwrap > input[type="url"] {
    padding-right: 112px;
  }
  .asf-rtl .asf-inputwrap > input[type="text"],
  .asf-rtl .asf-inputwrap > input[type="url"] {
    padding-left: 112px;
  }
}

/* intl-tel-input container width */
.iti {
  width: 100%;
}
.asf-phone-intl {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  outline: 0;
}

/* Lock phone field layout to LTR even on RTL pages */
html[dir="rtl"] .iti {
  direction: ltr !important;
  text-align: left !important;
}
html[dir="rtl"] .iti input[type="tel"] {
  direction: ltr !important;
  unicode-bidi: plaintext;
}

/* Fix padding when separateDialCode is on (flag/code on the left) */
html[dir="rtl"] #asfPhone {
  padding-left: 81px !important; /* match your dial code width */
  padding-right: 6px !important;
}

/* Keep the flag container on the left */
html[dir="rtl"] .iti__country-container {
  left: 0 !important;
  right: auto !important;
}

.asf-form .asf-invalid.asf-phone-intl,
.iti.asf-invalid .asf-phone-intl {
  border-color: #d92d20 !important;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.08);
}
/* public/asf-phone-intl.css — lock intl-tel-input direction */
.iti {
  direction: ltr !important; /* ✅ keep dropdown and flag left-to-right */
  text-align: left !important;
}
.iti__country-list {
  direction: ltr !important;
  text-align: left !important;
}

.asf-file-name {
  font-size: 13px;
  color: #444;
  margin-top: 4px;
  padding-left: 4px;
}

button:focus,
.menu-toggle:hover,
button:hover,
.ast-button:hover,
.ast-custom-button:hover .button:hover,
.ast-custom-button:hover,
input[type="reset"]:hover,
input[type="reset"]:focus,
input#submit:hover,
input#submit:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
form[CLASS*="wp-block-search__"].wp-block-search
  .wp-block-search__inside-wrapper
  .wp-block-search__button:hover,
form[CLASS*="wp-block-search__"].wp-block-search
  .wp-block-search__inside-wrapper
  .wp-block-search__button:focus,
body .wp-block-file .wp-block-file__button:hover,
body .wp-block-file .wp-block-file__button:focus,
.woocommerce-js a.button:hover,
.woocommerce button.button:hover,
.woocommerce .woocommerce-message a.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt.disabled:hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover,
[CLASS*="wc-block"] button:hover,
.woocommerce-js
  .astra-cart-drawer
  .astra-cart-drawer-content
  .woocommerce-mini-cart__buttons
  .button:not(.checkout):not(.ast-continue-shopping):hover,
.woocommerce-js
  .astra-cart-drawer
  .astra-cart-drawer-content
  .woocommerce-mini-cart__buttons
  a.checkout:hover,
.woocommerce button.button.alt.disabled.wc-variation-selection-needed:hover,
[CLASS*="wc-block"] .wc-block-components-button:hover,
[CLASS*="wc-block"] .wc-block-components-button:focus {
  background-color: #ff9a3d;
  border-color: #ff9a3d;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* simple caret as inline SVG */
  background: #fff
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
      <path fill='currentColor' d='M4 6l4 4 4-4z'/></svg>")
    no-repeat;

  /* ← move arrow inward from the right edge */
  background-position: right 0.5rem center; /* space from right border */
  background-size: 12px 12px;

  padding-right: 2rem; /* make room so text doesn't overlap the arrow */
  border-radius: 6px; /* optional: match your UI */
}
.asf-select::-ms-expand {
  display: none;
} /* hide old IE arrow */