/*
 * Account, authentication, registration and order history
 * Extracted from page-level and unified styles in QT-128.
 * Keep the source-layer order below: page foundations first, unified refinements last.
 */

/* Source layer: yf-home.css */

.yf-service-ui-mask{position:fixed;inset:0;z-index:2147483000;background:rgba(15,23,42,.52);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;opacity:0;visibility:hidden;transition:.18s}

.yf-service-ui-mask.show{opacity:1;visibility:visible}

.yf-service-ui-box{width:min(440px,100%);max-height:min(720px,calc(100vh - 24px));overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.28);display:flex;flex-direction:column}

.yf-service-ui-box.wide{width:min(620px,100%)}

.yf-service-ui-head{height:56px;flex:0 0 auto;padding:0 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9edf2;font-size:17px}

.yf-service-ui-head button{width:34px;height:34px;border:0;border-radius:50%;background:#f2f5f8;font-size:24px;line-height:1;cursor:pointer}

.yf-account-form,.yf-customer-summary{padding:17px;overflow:auto}

.yf-account-form>p{margin:0 0 14px;color:#697586;font-size:13px;line-height:1.55}

.yf-account-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}

.yf-account-grid label{font-size:12px;font-weight:800;color:#4b5667}

.yf-account-grid label.full{grid-column:1/-1}

.yf-account-grid input,.yf-account-grid select,.yf-account-grid textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;border:1px solid #d8e0e9;border-radius:8px;background:#fff;padding:9px 10px;font-size:16px;color:#1e293b}

.yf-account-grid input,.yf-account-grid select{height:40px}

.yf-account-grid textarea{resize:vertical}

.yf-customer-name{padding:14px;border-radius:10px;background:#f8fafc;font-size:18px;font-weight:900}

.yf-customer-name span{display:block;margin-top:4px;font-size:12px;color:#16a34a}

@media (max-width:640px){
.yf-service-ui-mask{align-items:center;padding:8px}
}

@media (max-width:640px){
.yf-service-ui-box,.yf-service-ui-box.wide{width:100%;max-height:calc(100dvh - 12px);border-radius:15px 15px 8px 8px}
}

@media (max-width:640px){
.yf-account-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
.yf-account-grid label.full{grid-column:auto}
}

@media (max-width:640px){
.yf-account-form{padding:14px}
}

@media (max-width:640px){
.yf-service-ui-head{height:52px}
}

.yf-customer-order b{color:#ff6a00}

.yf-password-form,
.yf-order-payment{padding:17px;overflow:auto}

.yf-password-form>p{margin:0 0 14px;color:#697586;font-size:13px;line-height:1.6}

.yf-password-form label,.yf-order-tx{display:block;margin-top:11px;color:#4b5667;font-size:12px;font-weight:800}

.yf-password-form input,.yf-order-tx input{display:block;width:100%;height:41px;box-sizing:border-box;margin-top:5px;padding:0 11px;border:1px solid #d8e0e9;border-radius:8px;background:#fff;color:#1e293b;font-size:16px}

.yf-password-form small{display:block;margin-top:8px;color:#7b8797;font-size:11px}

.yf-order-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 2px;border-bottom:1px dashed #dfe5ec;font-size:13px}

.yf-order-line span{color:#667085}

.yf-order-line b{text-align:right;color:#253244}

.yf-customer-orders{margin-top:0;border:1px solid #e6ebf1;border-radius:9px;overflow:hidden}

.yf-customer-order{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px solid #edf1f5;font-size:12px}

.yf-customer-order:last-child{border-bottom:0}

.yf-customer-order>div:first-child{min-width:0}

.yf-customer-order span,.yf-customer-order small{display:block}

.yf-customer-order span{font-weight:800;color:#334155;overflow-wrap:anywhere}

.yf-customer-order small{margin-top:3px;color:#7b8797}

.yf-customer-order-actions{display:flex;gap:6px;flex:0 0 auto}

.yf-customer-order-actions button{min-height:32px;padding:0 9px;border:1px solid #ff6a00;border-radius:7px;background:#fff;color:#ff6a00;font-size:11px;font-weight:800;cursor:pointer}

.yf-customer-order-actions button.cancel{border-color:#cbd5e1;color:#64748b}

html.yf-lang-ar .yf-order-payment,
body.yf-lang-ar .yf-order-payment,
html.yf-lang-ar .yf-password-form,
body.yf-lang-ar .yf-password-form{direction:rtl;text-align:right}

@media (max-width:640px){
.yf-password-form,
.yf-order-payment{padding:14px}
}

@media (max-width:640px){
.yf-customer-order{align-items:flex-start;flex-direction:column}
}

@media (max-width:640px){
.yf-customer-order-actions{width:100%}
}

@media (max-width:640px){
.yf-customer-order-actions button{flex:1}
}

.yf-account-grid label{display:flex!important;flex-direction:column!important;min-width:0!important}

.yf-account-grid label>span{display:flex!important;align-items:flex-end!important;min-height:32px!important;line-height:1.3!important}

.yf-account-grid label.full>span{min-height:auto!important}

@media (max-width:640px){
.yf-account-grid label>span{min-height:auto!important}
}

.yf-customer-account-head{background:#ff6a00!important;border-bottom-color:#ff6a00!important;color:#fff!important}

.yf-customer-account-head b{color:#fff!important;font-size:19px!important;font-weight:800!important}

.yf-customer-account-mask .yf-customer-summary{font-size:15px!important}

.yf-customer-account-mask .yf-customer-name{font-size:20px!important;font-weight:900!important}

.yf-customer-account-mask .yf-customer-name span{font-size:14px!important;font-weight:800!important}

.yf-customer-account-mask .yf-customer-order{font-size:14px!important;padding:13px!important}

.yf-customer-account-mask .yf-customer-order span{font-size:15px!important;font-weight:900!important}

.yf-customer-account-mask .yf-customer-order small{font-size:13px!important;line-height:1.45!important;font-weight:600!important}

.yf-customer-account-mask .yf-customer-order-actions button:not(.cancel){background:#ff6a00!important;color:#fff!important;border-color:#ff6a00!important;font-size:13px!important}

.yf-customer-account-mask .yf-customer-order-actions button.cancel{font-size:13px!important}

.yf-customer-logout{background:#ff6a00!important;color:#fff!important;border-color:#ff6a00!important;font-size:15px!important}

@media (max-width:640px){
.yf-customer-account-mask .yf-customer-order-actions button{font-size:13px!important;min-height:38px!important}
}


/* Source layer: yf-unified-ui.css */

html body .yf-password-mask .yf-password-form{
  overflow:auto;
}

html body .yf-password-mask .yf-password-form>p{
  margin:0 0 12px!important;
}

html body .yf-password-mask .yf-password-form label{
  display:block;
  margin-top:11px;
}

html body .yf-password-mask .yf-password-form>label>input{
  display:block;
  width:100%;
  height:42px;
  box-sizing:border-box;
  margin-top:5px;
  padding:0 12px;
  border:1px solid #d8e0e9;
  border-radius:9px;
  background:#fff;
  color:#1e293b;
  font-size:16px;
}

html body .yf-password-mask .yf-password-field{
  position:relative;
  display:block;
  margin-top:5px;
}

html body .yf-password-mask .yf-password-field input{
  display:block;
  width:100%;
  height:42px;
  box-sizing:border-box;
  margin:0!important;
  padding:0 48px 0 12px!important;
  border:1px solid #d8e0e9;
  border-radius:9px;
  background:#fff;
  color:#1e293b;
  font-size:16px;
}

html body .yf-password-mask .yf-password-toggle{
  position:absolute;
  top:50%;
  right:6px;
  width:34px;
  height:34px;
  margin:0;
  padding:7px;
  transform:translateY(-50%);
  border:0!important;
  border-radius:50%;
  background:transparent!important;
  color:#64748b!important;
  box-shadow:none!important;
  cursor:pointer;
}

html body .yf-password-mask .yf-password-toggle svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

html body .yf-password-mask .yf-password-toggle.is-visible{
  color:var(--yf-brand-orange)!important;
}

html body .yf-password-mask .yf-password-toggle:active{
  background:rgba(255,106,0,.08)!important;
}

html body .yf-password-mask .yf-username-rule{
  margin-top:6px!important;
}

html.yf-lang-ar body .yf-password-mask .yf-password-field input,
body.yf-lang-ar .yf-password-mask .yf-password-field input{
  padding:0 12px 0 48px!important;
  direction:ltr;
  text-align:left;
}

html.yf-lang-ar body .yf-password-mask .yf-password-toggle,
body.yf-lang-ar .yf-password-mask .yf-password-toggle{
  right:auto;
  left:6px;
}

@media (max-width:640px){
html body .yf-password-mask .yf-service-ui-box{
    max-height:calc(100dvh - 12px);
  }
}

html body .yf-customer-login-form label{
  display:block;
  margin-top:11px;
  color:#4b5667;
  font-size:12px;
  font-weight:800;
}

html body .yf-customer-login-form>label>input{
  display:block;
  width:100%;
  height:42px;
  box-sizing:border-box;
  margin-top:5px;
  padding:0 12px;
  border:1px solid #d8e0e9;
  border-radius:9px;
  background:#fff;
  color:#1e293b;
  font-size:16px;
}

html body .yf-customer-login-form .yf-password-field{
  position:relative;
  display:block;
  margin-top:5px;
}

html body .yf-customer-login-form .yf-password-field input{
  display:block;
  width:100%;
  height:42px;
  box-sizing:border-box;
  margin:0!important;
  padding:0 48px 0 12px!important;
  border:1px solid #d8e0e9;
  border-radius:9px;
  background:#fff;
  color:#1e293b;
  font-size:16px;
}

html body .yf-customer-login-form .yf-password-toggle{
  position:absolute;
  top:50%;
  right:6px;
  width:34px;
  height:34px;
  margin:0;
  padding:7px;
  transform:translateY(-50%);
  border:0!important;
  border-radius:50%;
  background:transparent!important;
  color:#64748b!important;
  box-shadow:none!important;
  cursor:pointer;
}

html body .yf-customer-login-form .yf-password-toggle svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

html body .yf-customer-login-form .yf-password-toggle.is-visible{color:var(--yf-brand-orange)!important;}

html body .yf-customer-login-form .yf-login-remember{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:13px;
  font-weight:600;
}

html body .yf-customer-login-form .yf-login-remember input{
  width:18px;
  height:18px;
  margin:0;
}

html body .yf-service-ui-box .yf-logout-actions .cancel{
  border:1px solid #cbd5e1!important;
  background:#f8fafc!important;
  color:#64748b!important;
  box-shadow:none!important;
}

html.yf-lang-ar body .yf-customer-login-form .yf-password-field input,
body.yf-lang-ar .yf-customer-login-form .yf-password-field input{
  padding:0 12px 0 48px!important;
  direction:ltr;
  text-align:left;
}

html.yf-lang-ar body .yf-customer-login-form .yf-password-toggle,
body.yf-lang-ar .yf-customer-login-form .yf-password-toggle{
  right:auto;
  left:6px;
}

html body .yf-customer-password-required{
  display:grid!important;gap:10px!important;margin:10px 0!important;padding:12px!important;
  border:1px solid #ffd4bc!important;border-radius:10px!important;background:#fffaf7!important;
}

html body .yf-customer-password-required p{margin:0!important;line-height:1.55!important;color:#6b7280!important;}

html body .yf-customer-password-required button{width:100%!important;margin:0!important;}

html body .yf-account-application-mask .yf-service-ui-box.wide{width:min(680px,100%)!important;}

html body .yf-account-verification-form,
html body .yf-password-reset-form{padding:17px;overflow:auto;}

html body .yf-password-reset-form>p{margin:0 0 14px;color:#697586;font-size:13px;line-height:1.55;}

html body .yf-account-verification-form .yf-account-grid,
html body .yf-password-reset-form .yf-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}

html body .yf-account-verification-form .yf-account-grid label.full,
html body .yf-password-reset-form .yf-account-grid label.full{grid-column:1/-1!important;}

html body .yf-account-verification-form .yf-password-field,
html body .yf-password-reset-form .yf-password-field{position:relative;display:block;margin-top:5px;}

html body .yf-account-verification-form .yf-password-field input,
html body .yf-password-reset-form .yf-password-field input{margin:0!important;padding:0 46px 0 10px!important;}

html body .yf-account-verification-form .yf-password-toggle,
html body .yf-password-reset-form .yf-password-toggle{position:absolute;top:50%;right:5px;width:32px;height:32px;margin:0;padding:7px;transform:translateY(-50%);border:0!important;border-radius:50%;background:transparent!important;color:#64748b!important;box-shadow:none!important;cursor:pointer;}

html body .yf-account-verification-form .yf-password-toggle svg,
html body .yf-password-reset-form .yf-password-toggle svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;}

html body .yf-account-verification-form .yf-password-toggle.is-visible,
html body .yf-password-reset-form .yf-password-toggle.is-visible{color:var(--yf-brand-orange)!important;}

html body .yf-account-submit-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px;}

html body .yf-account-submit-actions .yf-service-primary,
html body .yf-account-submit-actions .yf-service-secondary{width:100%!important;margin:0!important;min-width:0!important;}

html body .yf-account-submit-actions button:disabled{opacity:.58;cursor:not-allowed;transform:none!important;}

html body .yf-login-actions{display:block;}

html body .yf-login-actions .yf-login-reset{display:none;}

html body .yf-login-actions.show-reset{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px;}

html body .yf-login-actions.show-reset .yf-login-reset{display:flex;}

html body .yf-login-actions.show-reset .yf-service-primary,
html body .yf-login-actions.show-reset .yf-service-secondary{width:100%!important;margin:0!important;min-width:0!important;}

html.yf-lang-ar body .yf-account-verification-form .yf-password-field input,
body.yf-lang-ar .yf-account-verification-form .yf-password-field input,
html.yf-lang-ar body .yf-password-reset-form .yf-password-field input,
body.yf-lang-ar .yf-password-reset-form .yf-password-field input{padding:0 10px 0 46px!important;direction:ltr;text-align:left;}

html.yf-lang-ar body .yf-account-verification-form .yf-password-toggle,
body.yf-lang-ar .yf-account-verification-form .yf-password-toggle,
html.yf-lang-ar body .yf-password-reset-form .yf-password-toggle,
body.yf-lang-ar .yf-password-reset-form .yf-password-toggle{right:auto;left:5px;}

@media (max-width:640px){
html body .yf-account-verification-form,
  html body .yf-password-reset-form{padding:13px;}
}

@media (max-width:640px){
html body .yf-account-verification-form .yf-account-grid,
  html body .yf-password-reset-form .yf-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
}

@media (max-width:640px){
html body .yf-account-verification-form .yf-account-grid label,
  html body .yf-password-reset-form .yf-account-grid label{font-size:11px!important;min-width:0!important;}
}

@media (max-width:640px){
html body .yf-account-verification-form .yf-account-grid input,
  html body .yf-account-verification-form .yf-account-grid select,
  html body .yf-password-reset-form .yf-account-grid input{font-size:16px!important;padding-inline:8px!important;}
}

html body .yf-account-application-mask .yf-service-ui-box.wide{width:min(650px,100%)!important;height:auto!important;max-height:calc(100vh - 24px)!important;}

html body .yf-account-verification-form{padding:14px!important;}

html body .yf-account-verification-form>p{margin:0 0 7px!important;line-height:1.45!important;}

html body .yf-account-verification-form .yf-account-grid{gap:6px 8px!important;align-items:start!important;}

html body .yf-account-verification-form .yf-account-grid>label,
html body .yf-account-verification-form .yf-account-stack>label{margin:0!important;min-width:0!important;}

html body .yf-account-verification-form .yf-account-stack{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;min-width:0!important;}

html body .yf-account-verification-form .yf-contact-combined{display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;gap:6px!important;margin-top:5px!important;}

html body .yf-account-verification-form .yf-contact-combined select{width:112px!important;min-width:112px!important;padding-left:7px!important;padding-right:24px!important;}

html body .yf-account-verification-form .yf-contact-combined input{min-width:0!important;margin:0!important;}

html body .yf-account-verification-form .yf-account-interest textarea,
html body .yf-account-verification-form .yf-account-quantity textarea{height:54px!important;min-height:54px!important;max-height:54px!important;resize:none!important;}

html body .yf-account-verification-form .yf-account-interest textarea{width:100%!important;}

html body .yf-account-verification-form .yf-account-quantity textarea{width:100%!important;}

html body .yf-account-verification-form .yf-account-submit-actions{gap:8px!important;margin-top:6px!important;}

html body .yf-account-verification-form .yf-service-form-status{margin-top:6px!important;min-height:0!important;}

@media (max-width:640px){
html body .yf-account-verification-form{padding:11px!important;}
}

@media (max-width:640px){
html body .yf-account-verification-form .yf-account-grid{gap:5px 7px!important;}
}

@media (max-width:640px){
html body .yf-account-verification-form .yf-account-stack{gap:5px!important;}
}

@media (max-width:640px){
html body .yf-account-verification-form .yf-contact-combined{gap:5px!important;}
}

@media (max-width:640px){
html body .yf-account-verification-form .yf-contact-combined select{width:104px!important;min-width:104px!important;font-size:16px!important;}
}

@media (max-width:640px){
html body .yf-account-verification-form .yf-account-interest textarea,
  html body .yf-account-verification-form .yf-account-quantity textarea{height:50px!important;min-height:50px!important;max-height:50px!important;}
}

html body .yf-customer-account-mask .yf-service-ui-box.wide{width:min(780px,calc(100vw - 24px))!important;max-height:min(820px,calc(100dvh - 24px))!important;}

html body .yf-customer-account-mask .yf-customer-summary{padding:16px!important;background:#f6f8fb!important;overflow:auto!important;}

html body .yf-customer-account-mask .yf-customer-name{margin:0 0 12px!important;padding:14px 16px!important;border:1px solid #e7ebf0!important;border-radius:12px!important;background:#fff!important;color:#1f2937!important;font-size:19px!important;font-weight:800!important;line-height:1.35!important;}

html body .yf-customer-account-mask .yf-customer-name span{display:none!important;}

html body .yf-customer-account-mask .yf-account-section{margin-top:12px;padding:14px;border:1px solid #e3e8ef;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.035);}

html body .yf-customer-account-mask .yf-account-section:first-of-type{margin-top:0;}

html body .yf-customer-account-mask .yf-account-section>h3{margin:0 0 12px;color:#273449;font-size:16px;font-weight:800;line-height:1.25;}

html body .yf-customer-account-mask .yf-account-orders-section>h4{display:flex;align-items:center;gap:7px;margin:12px 0 7px;color:#566273;font-size:12px;font-weight:800;line-height:1.3;}

html body .yf-customer-account-mask .yf-account-orders-section>h4:first-of-type{margin-top:0;}

html body .yf-customer-account-mask .yf-account-orders-section>h4 em{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:#fff1e8;color:#e85f00;font-size:11px;font-style:normal;}

html body .yf-customer-account-mask .yf-customer-orders{margin:0!important;border:1px solid #e7ebf0!important;border-radius:10px!important;background:#fff!important;overflow:hidden!important;}

html body .yf-customer-account-mask .yf-customer-order{display:grid!important;grid-template-columns:58px minmax(0,1fr) auto!important;align-items:center!important;gap:11px!important;padding:11px!important;border-bottom:1px solid #edf0f4!important;background:#fff!important;font-size:12px!important;}

html body .yf-customer-account-mask .yf-customer-order:last-child{border-bottom:0!important;}

html body .yf-customer-account-mask .yf-customer-order-thumb{display:block;width:58px;height:58px;border:1px solid #e3e7ec;border-radius:8px;background:#f3f5f7;overflow:hidden;}

html body .yf-customer-account-mask .yf-customer-order-thumb img{display:block;width:100%;height:100%;object-fit:cover;}

html body .yf-customer-account-mask .yf-customer-order-thumb.is-empty{position:relative;}

html body .yf-customer-account-mask .yf-customer-order-thumb.is-empty:after{content:"";position:absolute;inset:18px;border:1px solid #cbd3dc;border-radius:3px;}

html body .yf-customer-account-mask .yf-customer-order-main{min-width:0;}

html body .yf-customer-account-mask .yf-customer-order-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}

html body .yf-customer-account-mask .yf-customer-order-service{min-width:0;color:#293548!important;font-size:13px!important;font-weight:800!important;line-height:1.35!important;}

html body .yf-customer-account-mask .yf-customer-order-status{flex:0 0 auto;padding:3px 7px;border-radius:999px;background:#f3f4f6;color:#5f6b7a;font-size:10px;font-weight:800;white-space:nowrap;}

html body .yf-customer-account-mask .yf-customer-order.status-pending .yf-customer-order-status{background:#fff1e8;color:#d95800;}

html body .yf-customer-account-mask .yf-customer-order.status-submitted .yf-customer-order-status{background:#eef5ff;color:#3567a8;}

html body .yf-customer-account-mask .yf-customer-order.status-approved .yf-customer-order-status,
html body .yf-customer-account-mask .yf-customer-order.status-sent .yf-customer-order-status{background:#edf8f0;color:#2f7d48;}

html body .yf-customer-account-mask .yf-customer-order.status-rejected .yf-customer-order-status{background:#fff0f0;color:#b64747;}

html body .yf-customer-account-mask .yf-customer-order.status-cancelled .yf-customer-order-status{background:#f1f3f5;color:#7b8490;}

html body .yf-customer-account-mask .yf-customer-order-product{margin-top:4px;color:#4f5c6d;font-size:12px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;}

html body .yf-customer-account-mask .yf-customer-order-meta{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:5px;color:#8a94a2;font-size:10.5px;font-weight:500;line-height:1.35;}

html body .yf-customer-account-mask .yf-customer-order-actions{display:flex!important;flex-direction:column;align-items:stretch;gap:5px!important;min-width:92px;}

html body .yf-customer-account-mask .yf-customer-order-actions button,
html body .yf-customer-account-mask .yf-customer-order-link{display:flex;align-items:center;justify-content:center;min-height:30px!important;margin:0!important;padding:0 9px;border:1px solid #f0a16d;border-radius:7px;background:#fff;color:#ed6a12;font-size:10.5px!important;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:none!important;}

html body .yf-customer-account-mask .yf-customer-order-actions button.cancel{border-color:#d6dce3!important;color:#66717f!important;background:#fff!important;}

html body .yf-customer-account-mask .yf-account-empty{padding:15px;text-align:center;color:#8a94a2;font-size:12px;line-height:1.45;}

html body .yf-customer-account-mask .yf-account-benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}

html body .yf-customer-account-mask .yf-account-benefit-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid #e7ebf0;border-radius:9px;background:#fafbfc;}

html body .yf-customer-account-mask .yf-account-benefit-card span{color:#647083;font-size:12px;font-weight:650;}

html body .yf-customer-account-mask .yf-account-benefit-card b{color:#263448;font-size:15px;font-weight:800;}

html body .yf-customer-account-mask .yf-account-access-list{margin-top:9px;border:1px solid #e7ebf0;border-radius:9px;overflow:hidden;}

html body .yf-customer-account-mask .yf-account-access-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:9px 10px;border-bottom:1px solid #edf0f4;font-size:11px;}

html body .yf-customer-account-mask .yf-account-access-row:last-child{border-bottom:0;}

html body .yf-customer-account-mask .yf-account-access-row span{min-width:0;color:#4c596a;font-weight:650;overflow-wrap:anywhere;}

html body .yf-customer-account-mask .yf-account-access-row b{color:#2f7d48;font-size:10.5px;white-space:nowrap;}

html body .yf-customer-account-mask .yf-account-access-row a{color:#ed6a12;font-size:10.5px;font-weight:750;text-decoration:none;white-space:nowrap;}

html body .yf-customer-account-mask .yf-account-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;}

html body .yf-customer-account-mask .yf-account-profile-item{min-width:0;padding:10px 11px;border:1px solid #e7ebf0;border-radius:9px;background:#fafbfc;}

html body .yf-customer-account-mask .yf-account-profile-item.wide{grid-column:1/-1;}

html body .yf-customer-account-mask .yf-account-profile-item span{display:block;margin-bottom:4px;color:#7c8795;font-size:10.5px;font-weight:650;line-height:1.3;}

html body .yf-customer-account-mask .yf-account-profile-item b{display:block;color:#303d50;font-size:12px;font-weight:700;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;}

html.yf-lang-ar body .yf-customer-account-mask .yf-customer-order-top,
body.yf-lang-ar .yf-customer-account-mask .yf-customer-order-top{direction:rtl;}

html.yf-lang-ar body .yf-customer-account-mask .yf-customer-order-meta,
body.yf-lang-ar .yf-customer-account-mask .yf-customer-order-meta{direction:rtl;}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-service-ui-box.wide{width:100%!important;max-height:calc(100dvh - 10px)!important;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-customer-summary{padding:10px!important;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-customer-name{margin-bottom:9px!important;padding:11px 12px!important;font-size:16px!important;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-account-section{margin-top:9px;padding:10px;border-radius:10px;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-account-section>h3{margin-bottom:9px;font-size:14px;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-customer-order{grid-template-columns:50px minmax(0,1fr)!important;gap:8px!important;padding:9px!important;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-customer-order-thumb{width:50px;height:50px;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-customer-order-actions{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));width:100%;min-width:0;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-customer-order-service{font-size:12px!important;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-customer-order-status{font-size:9.5px;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-customer-order-product{font-size:11px;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-customer-order-meta{font-size:9.5px;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-account-benefit-grid,
  html body .yf-customer-account-mask .yf-account-profile-grid{grid-template-columns:1fr;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-account-profile-item.wide{grid-column:auto;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-account-access-row{grid-template-columns:minmax(0,1fr) auto;}
}

@media (max-width:640px){
html body .yf-customer-account-mask .yf-account-access-row a{grid-column:1/-1;justify-self:start;}
}

/* QT-132 group 2: account application lives inside the login dialog and empty order groups stay hidden. */
html body .yf-customer-login-mask .yf-login-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:10px!important;
  margin-top:15px!important;
}
html body .yf-customer-login-mask .yf-login-actions.has-request{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
html body .yf-customer-login-mask .yf-login-actions .yf-service-primary,
html body .yf-customer-login-mask .yf-login-actions .yf-service-secondary{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
html body .yf-customer-login-mask .yf-login-actions .yf-login-reset{
  display:none!important;
  grid-column:1 / -1!important;
}
html body .yf-customer-login-mask .yf-login-actions.show-reset .yf-login-reset{
  display:flex!important;
}
html body .yf-customer-account-mask .yf-account-orders-section:empty{display:none!important}


/* QT-137: payment review disclosure and cancelled-order cleanup. */
.yf-payment-review-note{
  margin:0 0 10px;
  padding:10px 12px;
  border:1px solid rgba(255,106,0,.36);
  border-radius:9px;
  background:#fff8f2;
  color:#8a3b13;
  font-size:12px;
  line-height:1.55;
}
.yf-payment-review-note p{margin:0}
.yf-payment-review-note p+p{margin-top:4px}
.yf-payment-review-note a{color:#128c43;font-weight:900;text-decoration:none}
.yf-customer-order-actions button.delete{
  border-color:#cbd5e1!important;
  background:#fff!important;
  color:#64748b!important;
}


/* QT-142: approved supplier contacts are available only through an ownership-checked order modal. */
html body .yf-supplier-contact-mask .yf-service-ui-box.wide{
  width:min(720px,100%)!important;
  max-height:min(88vh,820px)!important;
}
html body .yf-supplier-contact-body{
  padding:14px;
  overflow:auto;
  background:#f6f8fb;
}
html body .yf-supplier-contact-order{
  margin:0 0 10px;
  padding:9px 11px;
  border:1px solid #e0e6ed;
  border-radius:9px;
  background:#fff;
  color:#697586;
  font-size:12px;
}
html body .yf-supplier-contact-order b{color:#273449;}
html body .yf-supplier-contact-card{
  margin:0 0 10px;
  padding:12px;
  border:1px solid #dfe5ec;
  border-radius:10px;
  background:#fff;
}
html body .yf-supplier-contact-card h3{
  margin:0 0 8px;
  color:#263448;
  font-size:16px;
  line-height:1.35;
}
html body .yf-supplier-contact-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-top:1px solid #edf1f5;
}
html body .yf-supplier-contact-row:first-of-type{border-top:0;}
html body .yf-supplier-contact-row>div{min-width:0;}
html body .yf-supplier-contact-row span{
  display:block;
  margin-bottom:2px;
  color:#7a8696;
  font-size:11px;
  font-weight:650;
}
html body .yf-supplier-contact-row b{
  display:block;
  color:#263448;
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
html body .yf-supplier-contact-row button{
  min-width:58px;
  height:30px;
  padding:0 10px;
  border:1px solid #f0a16d;
  border-radius:7px;
  background:#fff;
  color:#ed6a12;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
html body .yf-copy-all-contacts{width:100%!important;margin:2px 0 0!important;}
html body .yf-customer-account-mask .yf-customer-order-actions button.view-contacts{
  background:#ff6a00!important;
  border-color:#ff6a00!important;
  color:#fff!important;
}
html.yf-lang-ar body .yf-supplier-contact-body,
body.yf-lang-ar .yf-supplier-contact-body{direction:rtl;text-align:right;}
@media (max-width:640px){
  html body .yf-supplier-contact-mask .yf-service-ui-box.wide{width:100%!important;max-height:calc(100dvh - 10px)!important;}
  html body .yf-supplier-contact-body{padding:10px;}
  html body .yf-supplier-contact-card{padding:10px;}
  html body .yf-supplier-contact-row{gap:7px;}
  html body .yf-supplier-contact-row button{min-width:52px;padding:0 8px;}
}


/* QT-161: make the urgent-payment WhatsApp action visibly clickable. */
.yf-payment-review-note .yf-payment-whatsapp-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:26px!important;
  padding:2px 10px!important;
  margin-inline-start:4px!important;
  border:1px solid #128c43!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#128c43!important;
  font-weight:800!important;
  line-height:1.2!important;
  text-decoration:none!important;
  vertical-align:middle!important;
  box-sizing:border-box!important;
  transform:none!important;
}



/* QT-163: make login errors clearly visible without changing other form notices. */
html body .yf-customer-login-mask .yf-service-form-status{
  min-height:20px!important;
  margin-top:9px!important;
  font-size:14px!important;
  line-height:1.45!important;
  font-weight:800!important;
  color:#c62828!important;
}

/* QT-168: compact account application rows, searchable country and aligned phone controls. */
html body .yf-account-verification-form .yf-account-grid{
  row-gap:0!important;
  column-gap:8px!important;
}
html body .yf-account-verification-form .yf-account-grid>label,
html body .yf-account-verification-form .yf-account-stack{
  margin-bottom:0!important;
}
html body .yf-account-verification-form .yf-account-grid label>span:first-child{
  margin-bottom:0!important;
}
html body .yf-account-verification-form .yf-account-submit-actions{
  margin-top:16px!important;
  direction:ltr!important;
}
html body .yf-account-verification-form .yf-account-submit-actions>button{
  direction:initial!important;
}
html body .yf-account-verification-form .yf-country-picker{position:relative!important;display:block!important;margin-top:5px!important;min-height:40px!important;}
html body .yf-account-verification-form .yf-country-options{
  position:absolute!important;left:0!important;right:0!important;top:calc(100% + 3px)!important;z-index:2147483000!important;
  max-height:230px!important;overflow:auto!important;padding:4px!important;border:1px solid #d8e0e9!important;border-radius:8px!important;
  background:#fff!important;box-shadow:0 8px 24px rgba(15,23,42,.16)!important;
}
html body .yf-account-verification-form .yf-country-options[hidden]{display:none!important;}
html body .yf-account-verification-form .yf-country-options button{
  display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:34px!important;
  padding:6px 8px!important;border:0!important;border-radius:5px!important;background:#fff!important;color:#1e293b!important;text-align:left!important;cursor:pointer!important;
}
html body .yf-account-verification-form .yf-country-options button:hover,
html body .yf-account-verification-form .yf-country-options button:focus{background:#fff4eb!important;outline:0!important;}
html body .yf-account-verification-form .yf-country-options button small{margin-left:10px!important;color:#64748b!important;white-space:nowrap!important;}
html body .yf-account-verification-form .yf-country-empty{padding:9px!important;color:#64748b!important;text-align:center!important;}
html body .yf-account-verification-form .yf-contact-combined{
  grid-template-columns:112px minmax(0,1fr)!important;
  align-items:stretch!important;
}
html body .yf-account-verification-form .yf-contact-combined select,
html body .yf-account-verification-form .yf-contact-phone{height:40px!important;min-height:40px!important;max-height:40px!important;box-sizing:border-box!important;}
html body .yf-account-verification-form .yf-contact-phone{
  display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;
  border:1px solid #d8e0e9!important;border-radius:8px!important;background:#fff!important;overflow:hidden!important;
}
html body .yf-account-verification-form .yf-contact-dial{display:flex!important;align-items:center!important;height:100%!important;padding:0 7px!important;background:#f7f9fc!important;border-right:1px solid #e3e8ef!important;color:#475569!important;font-size:13px!important;white-space:nowrap!important;}
html body .yf-account-verification-form .yf-contact-phone input{height:38px!important;min-height:38px!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;}
html.yf-lang-ar body .yf-account-verification-form .yf-country-options button,
body.yf-lang-ar .yf-account-verification-form .yf-country-options button{text-align:right!important;}
html.yf-lang-ar body .yf-account-verification-form .yf-contact-dial,
body.yf-lang-ar .yf-account-verification-form .yf-contact-dial{border-right:0!important;border-left:1px solid #e3e8ef!important;}
@media(max-width:640px){
  html body .yf-account-verification-form .yf-account-grid{row-gap:0!important;column-gap:7px!important;}
  html body .yf-account-verification-form .yf-contact-combined{grid-template-columns:104px minmax(0,1fr)!important;}
  html body .yf-account-verification-form .yf-account-submit-actions{margin-top:16px!important;}
}

/* QT-168 final: remove the remaining nested-row gap; bottom actions retain the requested +10px breathing room. */
html body .yf-account-verification-form .yf-account-stack{gap:0!important;}
/* QT-168 final alignment: the contact method and phone field share the same top edge. */
html body .yf-account-verification-form .yf-contact-combined select,
html body .yf-account-verification-form .yf-contact-phone{
  margin:0!important;
  align-self:stretch!important;
}

/* QT-172: keep EN/ZH calling codes clear of the overlay scrollbar and stabilize the selected dial prefix. */
html body .yf-account-verification-form .yf-country-options{
  scrollbar-gutter:stable!important;
}
html.yf-lang-en body .yf-account-verification-form .yf-country-options button,
html.yf-lang-zh body .yf-account-verification-form .yf-country-options button{
  padding-right:24px!important;
}
html.yf-lang-en body .yf-account-verification-form .yf-country-options button small,
html.yf-lang-zh body .yf-account-verification-form .yf-country-options button small{
  flex:0 0 46px!important;
  min-width:46px!important;
  margin-left:12px!important;
  margin-right:0!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  text-align:right!important;
}
html.yf-lang-en body .yf-account-verification-form .yf-contact-phone,
html.yf-lang-zh body .yf-account-verification-form .yf-contact-phone{
  grid-template-columns:minmax(48px,max-content) minmax(0,1fr)!important;
}
html.yf-lang-en body .yf-account-verification-form .yf-contact-dial,
html.yf-lang-zh body .yf-account-verification-form .yf-contact-dial{
  justify-content:center!important;
  min-width:48px!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  font-variant-numeric:tabular-nums!important;
}
html body .yf-account-verification-form .yf-contact-phone input{
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
}

/* QT-174: on phones, keep the contact method and calling code on the first line,
 * then give the mobile number a full-width second line so the complete number stays visible. */
@media (max-width:640px){
  html body .yf-account-verification-form .yf-account-contact .yf-contact-combined{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 74px!important;
    grid-template-rows:40px 40px!important;
    column-gap:6px!important;
    row-gap:6px!important;
    width:100%!important;
    min-width:0!important;
  }
  html body .yf-account-verification-form .yf-account-contact .yf-contact-combined>select{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:40px!important;
    margin:0!important;
    font-size:16px!important;
  }
  html body .yf-account-verification-form .yf-account-contact .yf-contact-phone{
    display:contents!important;
  }
  html body .yf-account-verification-form .yf-account-contact .yf-contact-dial{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 8px!important;
    box-sizing:border-box!important;
    border:1px solid #d8e0e9!important;
    border-radius:8px!important;
    background:#f7f9fc!important;
    direction:ltr!important;
    unicode-bidi:isolate!important;
    font-size:13px!important;
    font-variant-numeric:tabular-nums!important;
    white-space:nowrap!important;
  }
  html body .yf-account-verification-form .yf-account-contact .yf-contact-phone input{
    grid-column:1 / -1!important;
    grid-row:2!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:0!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    border:1px solid #d8e0e9!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#1e293b!important;
    box-shadow:none!important;
    outline:0!important;
    direction:ltr!important;
    unicode-bidi:plaintext!important;
    text-align:left!important;
    font-size:16px!important;
    font-variant-numeric:tabular-nums!important;
  }
  html body .yf-account-verification-form .yf-account-contact .yf-contact-phone input::placeholder{
    color:#8b96a7!important;
    opacity:1!important;
  }
}



/* QT-175: stable closed country selector and custom, more legible double-chevron controls. */
html body .yf-account-verification-form .yf-country-trigger,
html body .yf-account-verification-form .yf-contact-method-wrap{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
html body .yf-account-verification-form .yf-country-trigger{
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 38px 0 10px!important;
  border:1px solid #d8e0e9!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#1e293b!important;
  font:inherit!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:38px!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  cursor:pointer!important;
  box-shadow:none!important;
  outline:0!important;
  -webkit-tap-highlight-color:transparent!important;
}
html body .yf-account-verification-form .yf-country-trigger:focus,
html body .yf-account-verification-form .yf-country-trigger:active{
  border-color:#1e293b!important;
  box-shadow:none!important;
  transform:none!important;
}
html body .yf-account-verification-form .yf-country-trigger.is-placeholder .yf-country-trigger-text{color:#8b96a7!important;}
html body .yf-account-verification-form .yf-country-trigger-text{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
html body .yf-account-verification-form .yf-select-chevron{
  position:absolute!important;
  right:9px!important;
  top:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:19px!important;
  height:25px!important;
  transform:translateY(-50%)!important;
  color:#1e293b!important;
  pointer-events:none!important;
}
html body .yf-account-verification-form .yf-select-chevron svg{
  display:block!important;
  width:18px!important;
  height:24px!important;
  overflow:visible!important;
}
html body .yf-account-verification-form .yf-select-chevron path{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.35!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
}
html body .yf-account-verification-form .yf-country-options{
  overflow:hidden!important;
  max-height:none!important;
  padding:5px!important;
}
html body .yf-account-verification-form .yf-country-filter{
  display:block!important;
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  margin:0 0 4px!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
  border:1px solid #d8e0e9!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#1e293b!important;
  font-size:14px!important;
  line-height:36px!important;
  outline:0!important;
  box-shadow:none!important;
  direction:auto!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
html body .yf-account-verification-form .yf-country-filter:focus{border-color:#1e293b!important;box-shadow:none!important;}
html body .yf-account-verification-form .yf-country-filter::-webkit-search-cancel-button{display:none!important;}
html body .yf-account-verification-form .yf-country-list{
  max-height:190px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
html body .yf-account-verification-form .yf-country-list .yf-country-empty{
  padding:12px 9px!important;
}
html body .yf-account-verification-form .yf-contact-method-wrap{
  width:112px!important;
  min-width:112px!important;
  height:40px!important;
}
html body .yf-account-verification-form .yf-contact-method-wrap select{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 38px 0 8px!important;
  box-sizing:border-box!important;
  border:1px solid #d8e0e9!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#1e293b!important;
  font-size:16px!important;
  line-height:38px!important;
  cursor:pointer!important;
  outline:0!important;
  box-shadow:none!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  background-image:none!important;
}
html body .yf-account-verification-form .yf-contact-method-wrap select:focus{border-color:#1e293b!important;box-shadow:none!important;}
html.yf-lang-ar body .yf-account-verification-form .yf-country-trigger,
body.yf-lang-ar .yf-account-verification-form .yf-country-trigger{
  padding-right:38px!important;
  padding-left:10px!important;
  text-align:right!important;
}
html.yf-lang-ar body .yf-account-verification-form .yf-country-trigger-text,
body.yf-lang-ar .yf-account-verification-form .yf-country-trigger-text{text-align:right!important;}
html.yf-lang-ar body .yf-account-verification-form .yf-contact-method-wrap select,
body.yf-lang-ar .yf-account-verification-form .yf-contact-method-wrap select{
  padding-right:38px!important;
  padding-left:8px!important;
  text-align:right!important;
}
@media (max-width:640px){
  html body .yf-account-verification-form .yf-account-contact .yf-contact-combined>.yf-contact-method-wrap{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    height:40px!important;
  }
  html body .yf-account-verification-form .yf-account-contact .yf-contact-method-wrap select{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    font-size:16px!important;
  }
  html body .yf-account-verification-form .yf-country-list{max-height:220px!important;}
}