.elementor-877 .elementor-element.elementor-element-48a9320d:not(.elementor-motion-effects-element-type-background), .elementor-877 .elementor-element.elementor-element-48a9320d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://clothingfactory.pk/wp-content/uploads/2025/08/yjafnkltky0.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-877 .elementor-element.elementor-element-48a9320d > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, #2D2D2D80 0%, var( --e-global-color-bfd2f98 ) 85%);opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-877 .elementor-element.elementor-element-48a9320d{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;overflow:visible;}.elementor-877 .elementor-element.elementor-element-70bcb28f > .elementor-element-populated{padding:0em 0em 0em 0em;}.elementor-877 .elementor-element.elementor-element-20bb68ed > .elementor-container{max-width:720px;}.elementor-877 .elementor-element.elementor-element-20bb68ed{margin-top:8%;margin-bottom:0%;padding:5em 0em 5em 0em;overflow:visible;}.elementor-877 .elementor-element.elementor-element-61ace2ff > .elementor-element-populated{padding:2em 2em 2em 2em;}.elementor-877 .elementor-element.elementor-element-2685ba31{text-align:center;}.elementor-877 .elementor-element.elementor-element-560b82f{--display:flex;overflow:visible;}.elementor-877 .elementor-element.elementor-element-f8fc077{--display:flex;overflow:visible;}@media(max-width:1024px){.elementor-877 .elementor-element.elementor-element-20bb68ed{margin-top:7em;margin-bottom:0em;padding:3em 0em 3em 0em;}}/* Start custom CSS for shortcode, class: .elementor-element-7cdd52a *//* Optional: page canvas */
body { background: #121212; }



/* ==== Paper Generator – Dark Front-End ==== */

/* Remove white backgrounds */
#pg-wizard,
#pg-wizard .pg-card,
#pg-wizard .pg-multi,
#pg-wizard .pg-preview,
#pg-wizard .pg-paper {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Make text readable on dark sites */
#pg-wizard,
#pg-wizard *:not(.button):not(.button-primary) {
  color: #f2f2f2;
}

/* Inputs & dropdowns dark */
#pg-wizard select,
#pg-wizard input[type="text"],
#pg-wizard input[type="date"],
#pg-wizard input[type="number"],
#pg-wizard input[type="file"],
#pg-wizard textarea {
  background-color: #2c2c2c !important;
  color: #f1f1f1 !important;
  border: 1px solid #444 !important;
}

/* Dropdown options dark grey */
#pg-wizard select option {
  background-color: #333 !important; /* dark grey */
  color: #f1f1f1 !important;
}

/* Improve native select look on WebKit/Firefox/Edge */
#pg-wizard select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}
#pg-wizard select::-ms-expand { display: none; }

/* Buttons—subtle dark theme */
#pg-wizard .button {
  background: #2f2f2f;
  border-color: #444;
  color: #fff;
}
#pg-wizard .button.button-primary {
  background: #3a3a3a;
  border-color: #555;
  color: #fff;
}
#pg-wizard .button:hover {
  filter: brightness(1.1);
}

/* Urdu column keeps RTL + font but uses light text */
#pg-wizard .pg-row.bi .ur {
  color: #f1f1f1;
}

/* Optional: keep printed (Ctrl+P) pages white even if front-end is dark */
@media print {
  #pg-wizard .pg-paper {
    background: #ffffff !important;
    color: #000 !important;
  }
}




/* === Paper Generator: fix selects not opening/selecting === */

/* Make the dropdown menus render with the browser's native UI again */
#pg-wizard select {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  cursor: pointer;
  pointer-events: auto !important;
  position: relative;
  z-index: 5; /* keep above surrounding elements */
  background-color: #2e2e2e !important; /* dark input */
  color: #f1f1f1 !important;
  border: 1px solid #444 !important;
}

/* Ensure the dropdown list isn’t clipped by containers */
#pg-wizard,
#pg-wizard .pg-row,
#pg-wizard .pg-card,
#pg-wizard .pg-multi {
  overflow: visible !important;
}

/* Dark dropdown options */
#pg-wizard select option {
  background: #333 !important;   /* dark grey */
  color: #f1f1f1 !important;
}
#pg-wizard select option:checked,
#pg-wizard select option:focus {
  background: #444 !important;
}

/* Disabled state visible (if any) */
#pg-wizard select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}




/* Elementor containers sometimes clip native dropdowns */
.elementor-widget-container,
.elementor-column,
.elementor-section {
  overflow: visible !important;
}



/* Make selects usable + prevent clipping in Elementor */
.pg-wizard label{ pointer-events:none; }          /* label wrapper won't steal clicks */
.pg-wizard select{
  pointer-events:auto;
  appearance:auto !important;
  -webkit-appearance:auto !important;
  -moz-appearance:auto !important;
  position:relative;
  z-index:10001;
  background:#2f2f2f; color:#fff; border:1px solid #444;
}
.pg-wizard select option{ background:#2f2f2f; color:#fff; }

/* stop containers from hiding the dropdown */
.elementor-widget-container, .elementor-column, .elementor-section,
.pg-wizard, .pg-row, .pg-card, .pg-multi{ overflow:visible !important; }





/* Re-enable clicking on chapter/topic labels */
.pg-wizard label{
  pointer-events:auto !important;
}

/* Make labels nicely clickable */
.pg-wizard .pg-multi label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

/* Keep the select fixes */
.pg-wizard select{
  appearance:auto !important;
  -webkit-appearance:auto !important;
  -moz-appearance:auto !important;
  position:relative;
  z-index:10000;
}
.elementor-widget-container, .elementor-column, .elementor-section,
.pg-wizard, .pg-row, .pg-card, .pg-multi{
  overflow:visible !important;
}





/* Ensure all inputs/buttons/selects are clickable and not clipped by Elementor wrappers */
.pg-wizard, .pg-row, .pg-card, .pg-multi,
.elementor-widget-container, .elementor-column, .elementor-section { 
  overflow: visible !important;
}

.pg-wizard select,
.pg-wizard input,
.pg-wizard button {
  pointer-events: auto !important;
  position: relative;
  z-index: 10010;  /* raise above surrounding wrappers */
}

/* Native dropdown & dark option list */
.pg-wizard select{
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  background:#2f2f2f; color:#fff; border:1px solid #444;
}
.pg-wizard select option{ background:#2f2f2f; color:#fff; }

/* Labels should be clickable for checkboxes */
.pg-wizard .pg-multi label{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  pointer-events: auto !important;
}


/* Screen (dark UI stays) */
.pg-paper{
  background:#111; color:#f1f1f1; padding:28px; border:1px solid #333; position:relative;
  font-family: Inter, system-ui, Arial, sans-serif;
}
.pg-paper [lang="ur"], .pg-paper .ur{
  font-family:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
  direction:rtl;
}

/* Header/Footer */
.pg-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.pg-header h2{ margin:0 0 4px; }
.pg-meta{ font-size:12px; opacity:.85; }
.pg-footer{ margin-top:12px; font-size:11px; opacity:.8; text-align:center; }

/* Watermark (captured in PDF) */
.pg-watermark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-30deg);
  font-size:96px; letter-spacing:3px; color:#000; opacity:.06; pointer-events:none; white-space:nowrap;
}

/* PRINT THEME applied temporarily during export */
.pg-paper.pg-print{ background:#fff !important; color:#000 !important; border-color:#000 !important; }
.pg-paper.pg-print *{ color:#000 !important; border-color:#000 !important; box-shadow:none !important; }
.pg-paper.pg-print .pg-watermark{ color:#000 !important; opacity:.06 !important; }

/* Keep UI elements usable in Elementor */
.pg-wizard, .pg-row, .pg-card, .pg-multi,
.elementor-widget-container, .elementor-column, .elementor-section{
  overflow:visible !important;
}
.pg-wizard select, .pg-wizard input, .pg-wizard button{
  pointer-events:auto !important; position:relative; z-index:10010;
}
.pg-wizard select{ appearance:auto !important; -webkit-appearance:auto !important; -moz-appearance:auto !important; background:#2f2f2f; color:#fff; border:1px solid #444; }
.pg-wizard select option{ background:#2f2f2f; color:#fff; }/* End custom CSS */