/*
 * 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{grid-template-columns:minmax(0,1fr)!important;gap:9px!important;}
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(585px,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:center;gap:4px!important;min-width:70px;}

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;width:70px!important;min-width:70px!important;max-width:70px!important;min-height:26px!important;height:26px!important;margin:0!important;padding:0 5px!important;border:1px solid #f0a16d;border-radius:6px;background:#fff!important;color:#ed6a12!important;font-size:9px!important;font-weight:600!important;line-height:1!important;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;
}

/* RELEASE-014: canonical single-column account application layout on phones.
 * Desktop keeps the existing two-column form. On phones the form is one scrollable
 * column, follows the requested field order, hides estimated quantity, and keeps
 * the calling code joined to the mobile-number field. */
@media (max-width:640px){
  html body .yf-account-application-mask .yf-service-ui-box.wide{
    width:100%!important;
    max-height:calc(100dvh - 12px)!important;
  }

  html body .yf-account-verification-form{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:12px!important;
  }

  html body .yf-account-verification-form .yf-account-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    row-gap:9px!important;
    column-gap:0!important;
    width:100%!important;
  }

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

  /* 手机端顺序：
     登录昵称 → 名称/公司名称 → 国家地区 → 联系方式/手机号
     → 感兴趣商品 → 密码/确认密码 → 邮箱/验证码。 */
  html body .yf-account-verification-form .yf-account-nickname{order:1!important;}
  html body .yf-account-verification-form .yf-account-company{order:2!important;}
  html body .yf-account-verification-form .yf-account-country{order:3!important;}
  html body .yf-account-verification-form .yf-account-contact{order:4!important;}
  html body .yf-account-verification-form .yf-account-interest{order:5!important;}
  html body .yf-account-verification-form .yf-account-password-stack{order:6!important;}
  html body .yf-account-verification-form .yf-account-email-stack{order:7!important;}
  html body .yf-account-verification-form .yf-account-quantity{display:none!important;}

  html body .yf-account-verification-form .yf-account-stack{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    width:100%!important;
  }

  html body .yf-account-verification-form .yf-account-grid input,
  html body .yf-account-verification-form .yf-account-grid textarea,
  html body .yf-account-verification-form .yf-country-trigger{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

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

  /* 第一行只选择 WhatsApp / WeChat，第二行是合并的区号与手机号码。 */
  html body .yf-account-verification-form .yf-account-contact .yf-contact-combined{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:40px 40px!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    margin-top:5px!important;
  }

  html body .yf-account-verification-form .yf-account-contact .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;
    margin:0!important;
  }

  html body .yf-account-verification-form .yf-account-contact .yf-contact-phone{
    grid-column:1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:max-content minmax(0,1fr)!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:0!important;
    border:1px solid #d8e0e9!important;
    border-radius:8px!important;
    background:#fff!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  html body .yf-account-verification-form .yf-account-contact .yf-contact-dial{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:max-content!important;
    min-width:28px!important;
    height:100%!important;
    margin:0!important;
    padding:0 7px!important;
    border:0!important;
    border-right:1px solid #e3e8ef!important;
    border-radius:0!important;
    background:#f7f9fc!important;
    box-sizing:border-box!important;
    direction:ltr!important;
    unicode-bidi:isolate!important;
    white-space:nowrap!important;
  }

  html body .yf-account-verification-form .yf-account-contact .yf-contact-phone input{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    margin:0!important;
    padding:0 10px!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    outline:0!important;
    box-sizing:border-box!important;
    direction:ltr!important;
    unicode-bidi:plaintext!important;
    text-align:left!important;
  }

  html.yf-lang-ar body .yf-account-verification-form .yf-account-contact .yf-contact-dial,
  body.yf-lang-ar .yf-account-verification-form .yf-account-contact .yf-contact-dial{
    border-right:0!important;
    border-left:1px solid #e3e8ef!important;
  }

  html body .yf-account-verification-form .yf-account-submit-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    margin-top:12px!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;}
}


/* QT-220: compact request-account field typography and single down-triangle selectors.
   Only the application form is affected; login/payment/order flows remain unchanged. */

/* All displayed values and placeholders in this form use one smaller 14px scale. */
html body .yf-account-verification-form .yf-country-trigger,
html body .yf-account-verification-form .yf-country-trigger-text,
html body .yf-account-verification-form .yf-contact-method-wrap select,
html body .yf-account-verification-form .yf-account-grid input,
html body .yf-account-verification-form .yf-account-grid textarea,
html body .yf-account-verification-form .yf-contact-dial{
  font-size:14px!important;
}

html body .yf-account-verification-form .yf-account-grid input::placeholder,
html body .yf-account-verification-form .yf-account-grid textarea::placeholder,
html body .yf-account-verification-form .yf-contact-phone input::placeholder{
  font-size:14px!important;
  color:#8b96a7!important;
  opacity:1!important;
}

/* Country and contact-method selectors use one centered solid down triangle. */
html body .yf-account-verification-form .yf-select-chevron{
  position:absolute!important;
  right:12px!important;
  left:auto!important;
  top:50%!important;
  display:block!important;
  width:12px!important;
  height:8px!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
}

html body .yf-account-verification-form .yf-select-chevron svg{
  display:none!important;
}

html body .yf-account-verification-form .yf-select-chevron::before{
  content:""!important;
  display:block!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  border-left:6px solid transparent!important;
  border-right:6px solid transparent!important;
  border-top:8px solid #1f2937!important;
  border-bottom:0!important;
}

/* Reserve only the space needed for the single triangle. */
html body .yf-account-verification-form .yf-country-trigger{
  padding-right:32px!important;
}

html body .yf-account-verification-form .yf-contact-method-wrap select{
  padding-right:30px!important;
  padding-left:8px!important;
}

/* The contact method stays readable without taking extra room. */
html body .yf-account-verification-form .yf-contact-method-wrap{
  width:112px!important;
  min-width:112px!important;
}

html body .yf-account-verification-form .yf-contact-method-wrap select{
  font-size:14px!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

/* Calling-code block grows only with the number of digits.
   "+" remains narrow; +1 / +86 / +971 expand naturally. */
html body .yf-account-verification-form .yf-contact-phone{
  grid-template-columns:max-content minmax(0,1fr)!important;
}

html body .yf-account-verification-form .yf-contact-dial{
  width:auto!important;
  min-width:30px!important;
  max-width:none!important;
  padding:0 7px!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-variant-numeric:tabular-nums!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
}

/* Give the phone-number field every remaining pixel. */
html body .yf-account-verification-form .yf-contact-phone input{
  min-width:0!important;
  width:100%!important;
  padding-left:9px!important;
  padding-right:9px!important;
  font-size:14px!important;
}

/* Arabic mirrors the single triangle and keeps the calling code isolated. */
html.yf-lang-ar body .yf-account-verification-form .yf-select-chevron,
body.yf-lang-ar .yf-account-verification-form .yf-select-chevron{
  left:12px!important;
  right:auto!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-left:32px!important;
  padding-right:10px!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-left:30px!important;
  padding-right:8px!important;
}

@media(max-width:640px){
  html body .yf-account-verification-form .yf-account-contact .yf-contact-method-wrap select{
    font-size:14px!important;
  }
}


/* RELEASE-003: calling-code block uses content-driven width.
   Empty "+" is compact; +1 / +86 / +374 expand only as much as the text needs. */
html body .yf-account-verification-form .yf-contact-phone,
html.yf-lang-en body .yf-account-verification-form .yf-contact-phone,
html.yf-lang-zh body .yf-account-verification-form .yf-contact-phone,
html.yf-lang-ar body .yf-account-verification-form .yf-contact-phone,
body.yf-lang-ar .yf-account-verification-form .yf-contact-phone{
  grid-template-columns:max-content minmax(0,1fr)!important;
}

html body .yf-account-verification-form .yf-contact-dial,
html.yf-lang-en body .yf-account-verification-form .yf-contact-dial,
html.yf-lang-zh body .yf-account-verification-form .yf-contact-dial,
html.yf-lang-ar body .yf-account-verification-form .yf-contact-dial,
body.yf-lang-ar .yf-account-verification-form .yf-contact-dial{
  width:max-content!important;
  min-width:28px!important;
  max-width:none!important;
  padding-left:6px!important;
  padding-right:6px!important;
  flex:0 0 auto!important;
  justify-content:center!important;
  white-space:nowrap!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;
}


/* RELEASE-058: one visible password policy for registration, reset and forced change. */
html body .yf-customer-password-rule{
  display:block!important;
  grid-column:1/-1!important;
  margin:2px 0 0!important;
  color:#7b8797!important;
  font-size:11px!important;
  line-height:1.45!important;
  font-weight:500!important;
}
html body .yf-account-password-stack>.yf-customer-password-rule{
  width:100%!important;
}

/* 001: order payment methods and two-button payment workflow. */
html body .yf-order-payment-actions,
html body .yf-fc-payment .yf-order-payment-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;margin-top:12px!important;}
html body .yf-order-payment-actions>button,
html body .yf-fc-payment .yf-order-payment-actions>button{width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;max-height:42px!important;margin:0!important;}
.yf-payment-methods-mask{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.48);z-index:2147483000;box-sizing:border-box;}
.yf-payment-methods-mask.show{display:flex;}
.yf-payment-methods-box{width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 36px);overflow:auto;background:#fff;border-radius:14px;box-shadow:0 22px 70px rgba(0,0,0,.28);}
.yf-payment-methods-head{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;height:48px;padding:0 8px;background:#ff6a00;color:#fff;box-sizing:border-box;}
.yf-payment-methods-head>b{grid-column:2;text-align:center;font-size:17px;font-weight:900;}
.yf-payment-methods-head>button{grid-column:3;position:relative;width:34px;height:34px;border:0;border-radius:50%;background:#fff;cursor:pointer;}
.yf-payment-methods-head>button:before,.yf-payment-methods-head>button:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:#1f2937;transform-origin:center;}
.yf-payment-methods-head>button:before{transform:translate(-50%,-50%) rotate(45deg)}
.yf-payment-methods-head>button:after{transform:translate(-50%,-50%) rotate(-45deg)}
.yf-payment-methods-amount{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 16px 0;padding:11px 13px;border:1px solid #f1d4c2;border-radius:9px;background:#fff8f2;}
.yf-payment-methods-amount span{color:#6b7280;font-size:13px}.yf-payment-methods-amount b{color:#d85f1d;font-size:17px}
.yf-payment-methods-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 16px 18px;}
.yf-payment-method-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa;text-align:center;}
.yf-payment-method-card>b{font-size:15px;color:#111827}.yf-payment-method-card>span{font-size:12px;color:#6b7280}
.yf-payment-method-card>img{display:block;width:min(100%,210px);aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid #edf1f5;border-radius:8px;}
.yf-payment-provider-button{grid-column:1/-1;display:flex;align-items:center;justify-content:center;height:42px;padding:0 16px;border-radius:8px;background:#ff6a00;color:#fff!important;text-decoration:none!important;font-size:15px;font-weight:900;}
.yf-payment-method-empty{grid-column:1/-1;padding:22px 12px;text-align:center;color:#6b7280;}
@media(max-width:600px){.yf-payment-methods-mask{padding:14px}.yf-payment-methods-box{width:100%;max-height:calc(100dvh - 28px)}.yf-payment-methods-body{grid-template-columns:1fr}.yf-payment-provider-button{grid-column:auto}.yf-payment-method-card>img{width:min(72vw,280px)}}

/* 001: compact My Account order actions and editable registration profile. */
html body .yf-customer-account-mask .yf-customer-order-actions button,
html body .yf-customer-account-mask .yf-customer-order-actions .yf-customer-order-link{
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  padding:0 10px!important;
  border:1px solid #f0a16d!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#ed6a12!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:28px!important;
  box-shadow:none!important;
}
html body .yf-customer-account-mask .yf-customer-order-actions button.delete,
html body .yf-customer-account-mask .yf-customer-order-actions button.refresh-status,
html body .yf-customer-account-mask .yf-customer-order-actions button.view-contacts{
  background:#fff!important;
  color:#ed6a12!important;
  border-color:#f0a16d!important;
}

html body .yf-customer-account-mask .yf-account-profile-form{
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-account-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-account-grid>label{
  min-width:0!important;
  margin:0!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-account-interest{
  grid-column:1/-1!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-account-grid>label>span:first-child{
  display:block!important;
  margin:0 0 5px!important;
  color:#566273!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1.3!important;
}
html body .yf-customer-account-mask .yf-account-profile-form input,
html body .yf-customer-account-mask .yf-account-profile-form textarea,
html body .yf-customer-account-mask .yf-account-profile-form select,
html body .yf-customer-account-mask .yf-account-profile-form .yf-country-trigger{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  border:1px solid #dfe4ea!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#303d50!important;
  box-shadow:none!important;
  font-size:13px!important;
}
html body .yf-customer-account-mask .yf-account-profile-form input,
html body .yf-customer-account-mask .yf-account-profile-form select,
html body .yf-customer-account-mask .yf-account-profile-form .yf-country-trigger{
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
}
html body .yf-customer-account-mask .yf-account-profile-form textarea{
  min-height:72px!important;
  resize:vertical!important;
  padding:9px 10px!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-contact-combined{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  gap:7px!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-contact-phone{
  min-width:0!important;
}
html body .yf-customer-account-mask .yf-account-profile-readonly{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:10px!important;
  padding:10px 11px!important;
  border:1px solid #e7ebf0!important;
  border-radius:8px!important;
  background:#fafbfc!important;
}
html body .yf-customer-account-mask .yf-account-profile-readonly span{
  color:#7c8795!important;
  font-size:11px!important;
  font-weight:650!important;
}
html body .yf-customer-account-mask .yf-account-profile-readonly b{
  color:#303d50!important;
  font-size:12px!important;
}
html body .yf-customer-account-mask .yf-account-profile-actions{
  display:flex!important;
  justify-content:center!important;
  margin-top:12px!important;
}
html body .yf-customer-account-mask .yf-account-profile-actions .yf-service-primary{
  width:min(260px,100%)!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  margin:0!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-service-form-status{
  min-height:18px!important;
  margin-top:7px!important;
  text-align:center!important;
}
@media(max-width:640px){
  html body .yf-customer-account-mask .yf-account-profile-form .yf-account-grid{
    grid-template-columns:1fr!important;
  }
  html body .yf-customer-account-mask .yf-account-profile-form .yf-account-interest{
    grid-column:auto!important;
  }
}


/* 001: login dialog keeps Register on the left and gives Login more room. */
html body .yf-customer-login-mask .yf-login-actions.has-request{
  grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;
  gap:10px!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{
  height:38px!important;
  min-height:38px!important;
  padding:0 10px!important;
  line-height:1.2!important;
}


/* 001 final: generic login entry first opens the same two-choice layout. */
html body .yf-customer-access-choice-mask .yf-service-ui{
  width:min(430px,calc(100vw - 24px))!important;
}
html body .yf-customer-access-choice{
  padding:24px 18px 18px!important;
  text-align:center!important;
}
html body .yf-customer-access-choice>p{
  max-width:320px!important;
  margin:0 auto 20px!important;
  color:#667085!important;
  line-height:1.7!important;
  text-align:center!important;
}
html body .yf-customer-access-actions{
  width:min(320px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
}
html body .yf-customer-access-actions>button{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  box-sizing:border-box!important;
  border-radius:9px!important;
  line-height:1.2!important;
}
html.yf-lang-ar body .yf-customer-access-choice-mask,
body.yf-lang-ar .yf-customer-access-choice-mask{
  direction:rtl!important;
}

/* ACCOUNT-PROFILE-061: post-login profile field rhythm and single-outline phone control. */
html body .yf-customer-account-mask .yf-account-profile-form .yf-account-grid{
  row-gap:14px!important;
  column-gap:10px!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-account-grid>label>span:first-child{
  min-height:0!important;
  height:auto!important;
  margin:0 0 3px!important;
  align-items:initial!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-contact-phone{
  display:grid!important;
  grid-template-columns:max-content minmax(0,1fr)!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  border:1px solid #dfe4ea!important;
  border-radius:8px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
html body .yf-customer-account-mask .yf-account-profile-form .yf-contact-phone input,
html body .yf-customer-account-mask .yf-account-profile-form .yf-contact-phone input:focus,
html body .yf-customer-account-mask .yf-account-profile-form .yf-contact-phone input:focus-visible{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  box-sizing:border-box!important;
}


/* 2026-07-15: only My Account Pay/Delete use the compact backend-delete appearance. */
html body .yf-customer-account-mask .yf-customer-order-actions button[data-continue-order],
html body .yf-customer-account-mask .yf-customer-order-actions button.delete{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:26px!important;
  min-height:26px!important;
  max-height:26px!important;
  margin:0!important;
  padding:0 8px!important;
  border:1px solid #fecaca!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#e85d75!important;
  font-size:9px!important;
  font-weight:500!important;
  line-height:24px!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
  box-shadow:none!important;
}
html body .yf-customer-account-mask .yf-customer-order-actions button[data-continue-order] *,
html body .yf-customer-account-mask .yf-customer-order-actions button.delete *{
  color:inherit!important;
  font-size:inherit!important;
  font-weight:inherit!important;
}