@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//medsurgpk.com/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=7.5.1") format("woff2");
}

:root {
	--wd-text-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #777777;
	--wd-text-font-size: 14px;
	--wd-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-primary-color: rgb(63,175,226);
	--wd-alternative-color: rgb(0,0,0);
	--wd-link-color: rgb(0,164,229);
	--wd-link-color-hover: rgb(0,0,0);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: #83b735;
	--btn-accented-bgcolor-hover: #74a32f;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://medsurgpk.com/wp-content/uploads/2024/04/fabric-grey.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	--wd-popup-width: 800px;
}
.page-title-default {
	background-color: #0a0a0a;
	background-image: url(https://medsurgpk.com/wp-content/uploads/2025/04/qtq80-2sPo1m.jpeg);
	background-size: cover;
	background-position: center center;
}
.footer-container {
	background-color: rgb(229,229,229);
	background-image: none;
}
html .product-image-summary-wrap .product_title, html .wd-single-title .product_title {
	font-weight: 600;
}
.product-labels .product-label.onsale {
	background-color: rgb(7,137,193);
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 0px;
}
.woocommerce-product-gallery.thumbs-position-left {
	--wd-thumbs-width: 0%;
	--wd-thumbs-height: 0px;
}
:root{
--wd-container-w: 1600px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1617px) {
.platform-Windows .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}

@media (min-width: 1600px) {
html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


<div class="top-bar-outer">
  <div class="top-bar-slider">
    <div class="message message1">Free Delivery on Orders above 3000/-</div>
    <div class="message message2">Delivery time is 3-5 working days</div>
    <div class="message message3">Customization Options for Embroidery and logos</div>
    <div class="message message4">Customized Orders Will be Charged in Advance</div>
  </div>
</div>

<style>
.top-bar-outer {
  width: 100vw;
  position: relative;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 99999;
}

.top-bar-slider {
  background-color: #33bbff;
  height: 35px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}

.message {
  position: absolute;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  padding: 0 20px;
  opacity: 0;
  transform: translateX(100%);
  animation-duration: 16s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  display: flex;
  align-items: center;
  height: 30px;
}

/* Assign animations */
.message1 { animation-name: slide1; }
.message2 { animation-name: slide2; }
.message3 { animation-name: slide3; }
.message4 { animation-name: slide4; }

/* Message 1 */
@keyframes slide1 {
  0%   { opacity: 0; transform: translateX(100%); }
  5%   { opacity: 1; transform: translateX(0); }
  20%  { opacity: 1; transform: translateX(0); }
  25%  { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 0; transform: translateX(-100%); }
}

/* Message 2 */
@keyframes slide2 {
  25%  { opacity: 0; transform: translateX(100%); }
  30%  { opacity: 1; transform: translateX(0); }
  45%  { opacity: 1; transform: translateX(0); }
  50%  { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 0; transform: translateX(-100%); }
}

/* Message 3 */
@keyframes slide3 {
  50%  { opacity: 0; transform: translateX(100%); }
  55%  { opacity: 1; transform: translateX(0); }
  70%  { opacity: 1; transform: translateX(0); }
  75%  { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 0; transform: translateX(-100%); }
}

/* Message 4 */
@keyframes slide4 {
  75%  { opacity: 0; transform: translateX(100%); }
  80%  { opacity: 1; transform: translateX(0); }
  95%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-100%); }
}
/*--------------------------------------------------------------------------------------*/
/* ==========================================================================
   1. WOODMART SIZE GUIDE: FULLSCREEN PINCH-TO-ZOOM MODAL
   ========================================================================== */

/* Keep size guide strictly hidden when modal is closed */
.mfp-hide,
div[id*="sizeguide"]:not(.mfp-wrap *) {
    display: none !important;
}

/* Hide unwanted size guide titles */
.mfp-content h1,
.mfp-content h2,
.mfp-content h3,
.mfp-content h4,
.mfp-content .entry-title,
.mfp-content .wd-sizeguide-title,
.wd-sizeguide-content h1,
.wd-sizeguide-content h2,
.wd-sizeguide-content h3,
.wd-sizeguide-content .entry-title {
    display: none !important;
}

/* Fullscreen overlay bounds */
.mfp-wrap {
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

.mfp-wrap .mfp-container {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.mfp-wrap .mfp-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Strip theme borders and background panels from size guide */
.mfp-content div[id*="sizeguide"],
.mfp-content .wd-sizeguide-content,
.mfp-content .woodmart-sizeguide-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* Reset figure/paragraph wrappers around the chart image */
.mfp-content p,
.mfp-content figure {
    margin: 0 !important;
    padding: 0 !important;
    display: contents !important;
}

/* Size chart image styling */
.mfp-content img {
    max-width: 95vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    will-change: transform;
    border-radius: 6px !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5) !important;
}

/* Floating Close Button for Size Guide */
.mfp-wrap .mfp-close {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    text-align: center !important;
    z-index: 1060 !important;
    cursor: pointer !important;
    opacity: 1 !important;
}


/* ==========================================================================
   2. "ADD CUSTOMIZATIONS" BUTTON ON PRODUCT PAGE (NO BOX / NO FRAME)
   ========================================================================== */

/* Remove any background boxes, shadows, or borders on the product page */
.summary .tc-extra-product-options,
.summary .tm-extra-product-options,
.summary .tm-box,
.summary .tc-box,
.summary .tm-collapse,
.summary .tc-collapse,
form.cart .tc-extra-product-options,
form.cart .tm-extra-product-options,
form.cart .tm-box,
form.cart .tc-box,
form.cart .tm-collapse,
form.cart .tc-collapse {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 15px 0 20px 0 !important;
    border-radius: 0 !important;
    width: auto !important;
}

/* Outline button on product page */
.summary .tc-extra-product-options button,
.summary .tc-extra-product-options .button,
form.cart .tc-extra-product-options button,
form.cart .tc-extra-product-options .button,
.summary button.tc-button,
form.cart button.tc-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    color: #0b2545 !important;
    border: 1.5px solid #0084d4 !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
}

/* Hover state: fills brand blue */
.summary .tc-extra-product-options button:hover,
.summary .tc-extra-product-options .button:hover,
form.cart .tc-extra-product-options button:hover,
form.cart .tc-extra-product-options .button:hover,
.summary button.tc-button:hover,
form.cart button.tc-button:hover {
    background-color: #0084d4 !important;
    color: #ffffff !important;
    border-color: #0084d4 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 132, 212, 0.25) !important;
}


/* ==========================================================================
   3. CUSTOMIZATIONS POP-UP WINDOW: SOLID WHITE & FULL READABILITY
   ========================================================================== */

/* Force solid opaque white background across the entire modal/lightbox */
div[class*="lightbox-content"],
div[class*="lightbox-box"],
div[class*="modal-content"],
div[class*="modal-box"],
div[class*="popup-content"],
div[class*="popup-box"],
div[class*="section-popup"],
div[class*="section-pop-up"],
div[class*="tm-modal"],
div[class*="tc-modal"],
div[class*="tm-popup"],
div[class*="tc-popup"],
div[class*="lightbox"] div[class*="extra-product-options"],
div[class*="modal"] div[class*="extra-product-options"],
div[class*="popup"] div[class*="extra-product-options"],
div[class*="overlay"] div[class*="extra-product-options"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1a202c !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
    padding: 24px !important;
}

/* Hide the duplicate "ADD CUSTOMIZATIONS" trigger button inside the popup */
div[class*="lightbox"] .tc-section-popup-button,
div[class*="modal"] .tc-section-popup-button,
div[class*="popup"] .tc-section-popup-button,
div[class*="lightbox"] .tm-section-popup-button,
div[class*="modal"] .tm-section-popup-button,
div[class*="popup"] .tm-section-popup-button,
div[class*="lightbox"] .tc-popup-button,
div[class*="modal"] .tc-popup-button,
div[class*="popup"] .tc-popup-button,
div[class*="lightbox"] .tm-popup-button,
div[class*="modal"] .tm-popup-button,
div[class*="popup"] .tm-popup-button,
div[class*="lightbox"] .tc-extra-product-options-button,
div[class*="modal"] .tc-extra-product-options-button,
div[class*="popup"] .tc-extra-product-options-button,
div[class*="lightbox"] .tm-extra-product-options-button,
div[class*="modal"] .tm-extra-product-options-button,
div[class*="popup"] .tm-extra-product-options-button,
div[class*="lightbox"] hr + button,
div[class*="modal"] hr + button,
div[class*="popup"] hr + button {
    display: none !important;
}

/* Section titles (Navy Blue) */
div[class*="lightbox"] h2, div[class*="lightbox"] h3, div[class*="lightbox"] h4,
div[class*="modal"] h2, div[class*="modal"] h3, div[class*="modal"] h4,
div[class*="popup"] h2, div[class*="popup"] h3, div[class*="popup"] h4,
.tm-section-popup h2, .tc-section-popup h2,
.tm-section-popup h3, .tc-section-popup h3 {
    color: #0b2545 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* Divider line */
div[class*="lightbox"] hr,
div[class*="modal"] hr,
div[class*="popup"] hr {
    border: 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    margin: 15px 0 !important;
}

/* High-contrast dark charcoal text for all labels, terms, and explanations */
div[class*="lightbox"] p,
div[class*="modal"] p,
div[class*="popup"] p,
div[class*="lightbox"] label,
div[class*="modal"] label,
div[class*="popup"] label,
div[class*="lightbox"] span:not(.amount),
div[class*="modal"] span:not(.amount),
div[class*="popup"] span:not(.amount),
div[class*="lightbox"] li,
div[class*="modal"] li,
div[class*="popup"] li {
    color: #1f2937 !important;
    text-shadow: none !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}

/* Clean text input fields and textareas */
div[class*="lightbox"] input[type="text"],
div[class*="modal"] input[type="text"],
div[class*="popup"] input[type="text"],
div[class*="lightbox"] textarea,
div[class*="modal"] textarea,
div[class*="popup"] textarea {
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 6px !important;
    color: #0f172a !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 6px !important;
}

div[class*="lightbox"] input[type="text"]:focus,
div[class*="modal"] input[type="text"]:focus,
div[class*="popup"] input[type="text"]:focus,
div[class*="lightbox"] textarea:focus,
div[class*="modal"] textarea:focus,
div[class*="popup"] textarea:focus {
    background-color: #ffffff !important;
    border-color: #0084d4 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 132, 212, 0.15) !important;
}

div[class*="lightbox"] input::placeholder,
div[class*="modal"] input::placeholder,
div[class*="popup"] input::placeholder,
div[class*="lightbox"] textarea::placeholder,
div[class*="modal"] textarea::placeholder,
div[class*="popup"] textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* Price tags (e.g. Rs 200, Rs 100) */
div[class*="lightbox"] .price,
div[class*="modal"] .price,
div[class*="popup"] .price,
div[class*="lightbox"] .amount,
div[class*="modal"] .amount,
div[class*="popup"] .amount {
    color: #0084d4 !important;
    font-weight: 700 !important;
}

/* "ADD SELECTED OPTIONS" submit button */
div[class*="lightbox"] button[class*="add-to-cart"],
div[class*="modal"] button[class*="add-to-cart"],
div[class*="popup"] button[class*="add-to-cart"],
div[class*="lightbox"] button[class*="submit"],
div[class*="modal"] button[class*="submit"],
div[class*="popup"] button[class*="submit"],
div[class*="lightbox"] .tc-submit,
div[class*="modal"] .tc-submit,
div[class*="popup"] .tc-submit,
div[class*="lightbox"] .tc-add-to-cart,
div[class*="modal"] .tc-add-to-cart,
div[class*="popup"] .tc-add-to-cart {
    background-color: #0084d4 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 132, 212, 0.25) !important;
}

div[class*="lightbox"] button[class*="add-to-cart"]:hover,
div[class*="modal"] button[class*="add-to-cart"]:hover,
div[class*="popup"] button[class*="add-to-cart"]:hover,
div[class*="lightbox"] button[class*="submit"]:hover,
div[class*="modal"] button[class*="submit"]:hover,
div[class*="popup"] button[class*="submit"]:hover {
    background-color: #0b2545 !important;
}
/* ===================================================
   MEDSURG: FULLSCREEN RESPONSIVE SIZE CHART MODAL
   =================================================== */

/* 1. Prevent popup from showing on product page when closed */
.mfp-hide,
div[id*="sizeguide"]:not(.mfp-wrap *) {
    display: none !important;
}

/* 2. Fullscreen overlay bounds */
.mfp-wrap {
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

.mfp-wrap .mfp-container {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.mfp-wrap .mfp-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 3. Strip theme borders, paddings, and background panels */
.mfp-content div[id*="sizeguide"],
.mfp-content .wd-sizeguide-content,
.mfp-content .woodmart-sizeguide-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

/* 4. Hide title text */
.mfp-content h1,
.mfp-content h2,
.mfp-content h3,
.mfp-content h4,
.mfp-content .entry-title,
.mfp-content .wd-sizeguide-title {
    display: none !important;
}

/* 5. Clean up WordPress figure/paragraph wrappers */
.mfp-content p,
.mfp-content figure {
    margin: 0 !important;
    padding: 0 !important;
    display: contents !important;
}

/* 6. Size chart image styling */
.mfp-content img {
    max-width: 95vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    will-change: transform;
    border-radius: 6px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

/* 7. Floating Close Button */
.mfp-wrap .mfp-close {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    text-align: center !important;
    z-index: 1060 !important;
    cursor: pointer !important;
    opacity: 1 !important;
}
</style>