/* QT-124: canonical popup heading, close control and round delete control.
   Visual geometry remains the same; active state no longer moves/scales the button shell. */

:root{--yf-popup-close-size:34px;}

/* QT-136: all popup table/header titles follow the compact About Us title scale. */
html body .yf-sheet .yf-sheet-head>span,
html body .yf-product-msg-head>span,
html body .yf-service-ui-head>b,
html body .yf-factory-v2-mask .yf-fc-head>b,
html body .yf-supplier-product-detail-head>b,
html body .yf-about-dismiss-head>b{
  min-width:0!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.25!important;
}

@media(max-width:767px){
  html body .yf-sheet .yf-sheet-head,
html body .yf-product-msg-head,
html body .yf-service-ui-head,
html body .yf-factory-v2-mask .yf-fc-head,
html body .yf-supplier-product-detail-head{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    box-sizing:border-box!important;
    padding:3px 5px 3px 12px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:var(--yf-brand-orange)!important;
    color:#fff!important;
    box-shadow:none!important;
    align-items:center!important;
  }
  html body .yf-sheet .yf-sheet-head>span,
html body .yf-product-msg-head>span,
html body .yf-service-ui-head>b,
html body .yf-factory-v2-mask .yf-fc-head>b,
html body .yf-supplier-product-detail-head>b{
    color:#fff!important;
    line-height:34px!important;
    margin:0!important;
  }
}

@media(min-width:768px){
  html body .yf-sheet .yf-sheet-head,
html body .yf-product-msg-head,
html body .yf-service-ui-head,
html body .yf-factory-v2-mask .yf-fc-head,
html body .yf-supplier-product-detail-head{
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:4px 8px 4px 14px!important;
    border:0!important;
    border-radius:0!important;
    background:var(--yf-brand-orange)!important;
    color:#fff!important;
    box-shadow:none!important;
    align-items:center!important;
  }
  html body .yf-factory-v2-mask .yf-fc-head{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 34px!important;
    gap:6px!important;
  }
  html body .yf-sheet .yf-sheet-head>span,
html body .yf-product-msg-head>span,
html body .yf-service-ui-head>b,
html body .yf-factory-v2-mask .yf-fc-head>b,
html body .yf-supplier-product-detail-head>b{
    color:#fff!important;
    line-height:34px!important;
    margin:0!important;
  }
}

html body .yf-sheet .yf-sheet-close,
html body .yf-product-msg-head .yf-product-msg-close,
html body .yf-service-ui-head [data-yf-service-close],
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close],
html body .yf-interest-preview-box .yf-interest-preview-close,
html body .yf-supplier-product-detail-close,
html body .yf-detail-video-close,
html body .yf-detail-video-error-close,
html body .yf-supplier-photo-stage .yf-supplier-photo-close,
html body #yfLightbox .yf-lightbox-close{
  position:relative!important;
  width:var(--yf-popup-close-size)!important;
  height:var(--yf-popup-close-size)!important;
  min-width:var(--yf-popup-close-size)!important;
  min-height:var(--yf-popup-close-size)!important;
  flex:0 0 var(--yf-popup-close-size)!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.96)!important;
  color:transparent!important;
  box-shadow:0 1px 5px rgba(0,0,0,.10)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  text-indent:-9999px!important;
  font-size:0!important;
  line-height:0!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  transform:scale(.9)!important;
  transform-origin:center center!important;
}
html body .yf-sheet .yf-sheet-close::before,
html body .yf-sheet .yf-sheet-close::after,
html body .yf-product-msg-head .yf-product-msg-close::before,
html body .yf-product-msg-head .yf-product-msg-close::after,
html body .yf-service-ui-head [data-yf-service-close]::before,
html body .yf-service-ui-head [data-yf-service-close]::after,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::before,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::after,
html body .yf-interest-preview-box .yf-interest-preview-close::before,
html body .yf-interest-preview-box .yf-interest-preview-close::after,
html body .yf-supplier-product-detail-close::before,
html body .yf-supplier-product-detail-close::after,
html body .yf-detail-video-close::before,
html body .yf-detail-video-close::after,
html body .yf-detail-video-error-close::before,
html body .yf-detail-video-error-close::after,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::before,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:16px!important;
  height:2px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#111827!important;
  transform-origin:center center!important;
  pointer-events:none!important;
}
html body .yf-sheet .yf-sheet-close::before,
html body .yf-product-msg-head .yf-product-msg-close::before,
html body .yf-service-ui-head [data-yf-service-close]::before,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::before,
html body .yf-interest-preview-box .yf-interest-preview-close::before,
html body .yf-supplier-product-detail-close::before,
html body .yf-detail-video-close::before,
html body .yf-detail-video-error-close::before,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}
html body .yf-sheet .yf-sheet-close::after,
html body .yf-product-msg-head .yf-product-msg-close::after,
html body .yf-service-ui-head [data-yf-service-close]::after,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]::after,
html body .yf-interest-preview-box .yf-interest-preview-close::after,
html body .yf-supplier-product-detail-close::after,
html body .yf-detail-video-close::after,
html body .yf-detail-video-error-close::after,
html body .yf-supplier-photo-stage .yf-supplier-photo-close::after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}
html body .yf-sheet .yf-sheet-close:active,
html body .yf-product-msg-head .yf-product-msg-close:active,
html body .yf-service-ui-head [data-yf-service-close]:active,
html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]:active,
html body .yf-interest-preview-box .yf-interest-preview-close:active,
html body .yf-supplier-product-detail-close:active,
html body .yf-detail-video-close:active,
html body .yf-detail-video-error-close:active,
html body .yf-supplier-photo-stage .yf-supplier-photo-close:active,
html body #yfLightbox .yf-lightbox-close:active{
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 1px 5px rgba(0,0,0,.10)!important;
}

html body .yf-sheet.sheet-contact .yf-contact-interest-list .yf-interest-del,
html body .yf-sheet.sheet-interest button.yf-interest-del{
  position:relative!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  flex:0 0 34px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#f2f5f8!important;
  color:#111827!important;
  box-shadow:0 1px 3px rgba(15,23,42,.10)!important;
  font-size:0!important;
  line-height:0!important;
  transform:scale(.9)!important;
  transform-origin:center center!important;
}
html body .yf-sheet.sheet-contact .yf-contact-interest-list .yf-interest-del::before,
html body .yf-sheet.sheet-interest button.yf-interest-del::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:14px!important;
  height:2px!important;
  border-radius:999px!important;
  background:#111827!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
}
html body .yf-sheet.sheet-contact .yf-contact-interest-list .yf-interest-del::after,
html body .yf-sheet.sheet-interest button.yf-interest-del::after{content:none!important;display:none!important;}
html body .yf-sheet.sheet-contact .yf-contact-interest-list .yf-interest-del:active,
html body .yf-sheet.sheet-interest button.yf-interest-del:active{
  background:#f2f5f8!important;
  box-shadow:0 1px 3px rgba(15,23,42,.10)!important;
}

@media(max-width:767px){
  html body .yf-sheet .yf-sheet-close,
  html body .yf-product-msg-head .yf-product-msg-close,
  html body .yf-service-ui-head [data-yf-service-close],
  html body .yf-factory-v2-mask .yf-fc-head [data-fc-close],
  html body .yf-interest-preview-box .yf-interest-preview-close,
  html body .yf-supplier-product-detail-close{background:rgba(255,255,255,.94)!important;}
  html body .yf-sheet .yf-sheet-close:active,
  html body .yf-product-msg-head .yf-product-msg-close:active,
  html body .yf-service-ui-head [data-yf-service-close]:active,
  html body .yf-factory-v2-mask .yf-fc-head [data-fc-close]:active,
  html body .yf-interest-preview-box .yf-interest-preview-close:active,
  html body .yf-supplier-product-detail-close:active{background:rgba(255,255,255,.94)!important;}
}


/* QT-139: every frontend popup heading is geometrically centered.
   Side controls no longer push the visible title left or right. */
html body .yf-sheet .yf-sheet-head,
html body .yf-product-msg-head,
html body .yf-service-ui-head,
html body .yf-supplier-product-detail-head,
html body .yf-about-dismiss-head{
  position:relative!important;
}
html body .yf-sheet .yf-sheet-head>span,
html body .yf-product-msg-head>span,
html body .yf-service-ui-head>b,
html body .yf-supplier-product-detail-head>b,
html body .yf-about-dismiss-head>b{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:auto!important;
  max-width:calc(100% - 96px)!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:1!important;
}
html body .yf-sheet .yf-sheet-head>.yf-sheet-back,
html body .yf-sheet .yf-sheet-head>.yf-sheet-close,
html body .yf-product-msg-head>.yf-product-msg-close,
html body .yf-service-ui-head>[data-yf-service-close],
html body .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
html body .yf-about-dismiss-head>button{
  position:relative!important;
  z-index:2!important;
}
html body .yf-sheet .yf-sheet-head>.yf-sheet-close,
html body .yf-product-msg-head>.yf-product-msg-close,
html body .yf-service-ui-head>[data-yf-service-close],
html body .yf-supplier-product-detail-head>.yf-supplier-product-detail-close,
html body .yf-about-dismiss-head>button{
  margin-left:auto!important;
}
html body .yf-factory-v2-mask .yf-fc-head>b{
  text-align:center!important;
  justify-self:stretch!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
html.yf-lang-ar body .yf-factory-v2-mask .yf-fc-head>b,
body.yf-lang-ar .yf-factory-v2-mask .yf-fc-head>b{
  text-align:center!important;
}

/* QT-139: symmetric header padding keeps the grid-based factory title exactly centered. */
html body .yf-factory-v2-mask .yf-fc-head{
  padding-left:8px!important;
  padding-right:8px!important;
}
@media(max-width:767px){
  html body .yf-factory-v2-mask .yf-fc-head{
    padding-left:5px!important;
    padding-right:5px!important;
  }
}


/* QT-141: About Us heading is centered on every viewport; service cards size to content. */
html body .yf-sheet.sheet-about .yf-about-summary,
html body .yf-sheet.sheet-about .yf-about-summary > div{
  display:block!important;
  width:100%!important;
  max-width:640px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  text-align:center!important;
}
html body .yf-sheet.sheet-about .yf-about-summary h2,
html body .yf-sheet.sheet-about .yf-about-summary p{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
html body .yf-sheet.sheet-about .yf-about-body{
  text-align:center!important;
}
html body .yf-sheet.sheet-about .yf-about-body-break{
  display:block!important;
  content:""!important;
}
html body .yf-sheet.sheet-about .yf-about-services{
  align-items:start!important;
}
html body .yf-sheet.sheet-about .yf-about-service{
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
  padding:9px 11px!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
}
html body .yf-sheet.sheet-about .yf-about-service span{
  margin-top:4px!important;
}
@media(max-width:767px){
  html body .yf-sheet.sheet-about .yf-about-summary,
  html body .yf-sheet.sheet-about .yf-about-summary > div{
    max-width:100%!important;
    text-align:center!important;
  }
  html body .yf-sheet.sheet-about .yf-about-service{
    min-height:0!important;
    padding:8px 10px!important;
  }
  html body .yf-sheet.sheet-about .yf-about-service span{
    margin-top:3px!important;
  }
}

/* QT-143: manual amount confirmation for non-PayPal.Me links. */
.yf-payment-amount-warning{margin:8px 0;padding:8px 10px;border-radius:7px;background:#fff7ed;color:#9a4a12;font-size:12px;line-height:1.45}
.yf-payment-amount-warning b{white-space:nowrap;color:#7c2d12}

/* QT-186: canonical About Us desktop dialog geometry and content layout.
   Position, final width, scrolling and service columns are owned here only. */
@media(min-width:768px){
  html body .yf-sheet.sheet-about.show{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    width:min(760px,calc(100vw - 40px))!important;
    max-width:760px!important;
    max-height:calc(100vh - 40px)!important;
    margin:0!important;
    transform:translate(-50%,-50%)!important;
    overflow:hidden!important;
  }
  html body .yf-sheet.sheet-about.show .yf-about-sheet-body{
    min-height:0!important;
    max-height:calc(100vh - 96px)!important;
  }
  html body .yf-sheet.sheet-about.show .yf-about-sheet-scroll{
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
  }
  html body .yf-sheet.sheet-about .yf-about-sheet-scroll{padding:18px 24px 14px!important;}
  html body .yf-sheet.sheet-about .yf-about-summary,
  html body .yf-sheet.sheet-about .yf-about-body,
  html body .yf-sheet.sheet-about .yf-about-services,
  html body .yf-sheet.sheet-about .yf-about-gallery{
    width:100%!important;
    max-width:680px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body .yf-sheet.sheet-about .yf-about-body{
    font-size:13px!important;
    line-height:1.72!important;
    text-align:center!important;
  }
  html body .yf-sheet.sheet-about .yf-about-body-line{display:block!important;white-space:nowrap!important;}
  html body .yf-sheet.sheet-about .yf-about-services{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,auto)!important;
    grid-auto-flow:column!important;
    gap:10px 14px!important;
    margin-top:14px!important;
    align-items:stretch!important;
  }
  html body .yf-sheet.sheet-about .yf-about-service{
    grid-column:auto!important;
    min-height:0!important;
    height:100%!important;
    padding:10px 13px!important;
  }
  html body .yf-sheet.sheet-about .yf-about-service:nth-child(1){grid-column:1!important;grid-row:1!important;}
  html body .yf-sheet.sheet-about .yf-about-service:nth-child(2){grid-column:1!important;grid-row:2!important;}
  html body .yf-sheet.sheet-about .yf-about-service:nth-child(3){grid-column:1!important;grid-row:3!important;}
  html body .yf-sheet.sheet-about .yf-about-service:nth-child(4){grid-column:2!important;grid-row:1!important;}
  html body .yf-sheet.sheet-about .yf-about-service:nth-child(5){grid-column:2!important;grid-row:2!important;}
}

/* QT-176: mobile dialogs are centered in the actually visible browser viewport.
   The trigger's document position must never influence a dialog, and Safari's
   top/bottom browser chrome must not cover the dialog footer. */
@media(max-width:767px){
  html body .yf-service-ui-mask,
  html body .yf-factory-v2-mask,
  html body .yf-product-msg-mask,
  html body .yf-supplier-product-modal,
  html body .yf-supplier-photo-lightbox,
  html body .yf-verification-notice-mask,
  html body .yf-about-dismiss-mask,
  html body .yf-success-tip-mask,
  html body .yf-interest-preview-mask{
    position:fixed!important;
    left:var(--yf-visible-viewport-left,0px)!important;
    top:var(--yf-visible-viewport-top,0px)!important;
    right:auto!important;
    bottom:auto!important;
    width:var(--yf-visible-viewport-width,100vw)!important;
    height:var(--yf-visible-viewport-height,100vh)!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    box-sizing:border-box!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px!important;
    overflow:hidden!important;
  }

  html body .yf-service-ui-box,
  html body .yf-service-ui-box.wide,
  html body .yf-factory-v2-box,
  html body .yf-product-msg-box,
  html body .yf-supplier-product-detail,
  html body .yf-verification-notice-box,
  html body .yf-about-dismiss-dialog,
  html body .yf-success-tip-box{
    width:min(100%,calc(var(--yf-visible-viewport-width,100vw) - 16px))!important;
    max-width:100%!important;
    height:auto!important;
    max-height:calc(var(--yf-visible-viewport-height,100vh) - 16px)!important;
    min-height:0!important;
    margin:0!important;
    border-radius:12px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    transform:none!important;
  }

  /* Long dialog contents scroll inside the fixed centered shell. */
  html body .yf-account-form,
  html body .yf-customer-summary,
  html body .yf-password-form,
  html body .yf-order-payment,
  html body .yf-customer-login-form,
  html body .yf-logout-confirm,
  html body .yf-fc-body,
  html body .yf-product-msg-body,
  html body .yf-supplier-product-detail-body{
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* Product inquiry was previously a bottom sheet with an unrestricted body. */
  html body .yf-product-msg-mask{
    padding:8px!important;
  }
  html body .yf-product-msg-box{
    width:min(430px,calc(var(--yf-visible-viewport-width,100vw) - 16px))!important;
    display:flex!important;
    flex-direction:column!important;
  }
  html body .yf-product-msg-body{
    flex:1 1 auto!important;
    max-height:none!important;
  }

  /* Supplier product preview remains large, but never extends behind Safari chrome. */
  html body .yf-supplier-product-detail{
    width:100%!important;
    height:calc(var(--yf-visible-viewport-height,100vh) - 16px)!important;
  }

  html body .yf-supplier-photo-stage{
    width:calc(var(--yf-visible-viewport-width,100vw) - 16px)!important;
    height:calc(var(--yf-visible-viewport-height,100vh) - 16px)!important;
    max-width:100%!important;
    max-height:100%!important;
  }

  /* Image/share preview uses an absolutely centered child inside its corrected mask. */
  html body .yf-interest-preview-box{
    max-width:calc(var(--yf-visible-viewport-width,100vw) - 16px)!important;
    max-height:calc(var(--yf-visible-viewport-height,100vh) - 16px)!important;
  }
  html body .yf-interest-preview-content img{
    max-width:calc(var(--yf-visible-viewport-width,100vw) - 36px)!important;
    max-height:calc(var(--yf-visible-viewport-height,100vh) - 36px)!important;
  }
}

/* QT-186: canonical mobile editable-control policy. iPhone Safari must not magnify a modal when an editable control
   receives focus. A computed size below 16px triggers Safari's focus zoom. */
@media(max-width:767px){
  html body .yf-service-ui-mask input,
  html body .yf-service-ui-mask textarea,
  html body .yf-service-ui-mask select,
  html body .yf-service-ui-mask [contenteditable="true"],
  html body .yf-factory-v2-mask input,
  html body .yf-factory-v2-mask textarea,
  html body .yf-factory-v2-mask select,
  html body .yf-factory-v2-mask [contenteditable="true"],
  html body .yf-product-msg-mask input,
  html body .yf-product-msg-mask textarea,
  html body .yf-product-msg-mask select,
  html body .yf-product-msg-mask [contenteditable="true"],
  html body .yf-sheet.show input,
  html body .yf-sheet.show textarea,
  html body .yf-sheet.show select,
  html body .yf-sheet.show [contenteditable="true"],
  html body .yf-about-dismiss-mask input,
  html body .yf-about-dismiss-mask textarea,
  html body .yf-about-dismiss-mask select,
  html body .yf-about-dismiss-mask [contenteditable="true"],
  html body .yf-supplier-product-modal input,
  html body .yf-supplier-product-modal textarea,
  html body .yf-supplier-product-modal select,
  html body .yf-supplier-product-modal [contenteditable="true"],
  html body .yf-modal input,
  html body .yf-modal textarea,
  html body .yf-modal select,
  html body .yf-modal [contenteditable="true"],
  html body .yf-popup input,
  html body .yf-popup textarea,
  html body .yf-popup select,
  html body .yf-popup [contenteditable="true"]{
    font-size:16px!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
    touch-action:manipulation!important;
  }
}