.wc-apf-form-wrapper {
    margin: 0px 0;

}

.wc-apf-form-title {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.wc-apf-form-description {
    margin: 0 0 15px 0;
    color: #666;
}

.wc-apf-fields {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 20px
}

.wc-apf-field {
    display: flex;
    flex-direction: column;
}
.woocommerce div.product form.cart {
    margin-bottom: 0px !important;
}
.summary.entry-summary button.single_add_to_cart_button{
margin-bottom: 23px !important;
}

.wc-apf-field-label {
    margin-bottom: 5px;
    font-weight: 600;
}

.wc-apf-field-label .required {
    color: #f00;
}

.wc-apf-input,
.wc-apf-textarea,
.wc-apf-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wc-apf-textarea {
    resize: vertical;
}

.wc-apf-radio-group,
.wc-apf-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wc-apf-radio-label,
.wc-apf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wc-apf-price {
    color: #666;
    font-size: 14px;
}

.wc-apf-file-upload {
    max-width: 100%;
}

.wc-apf-file-input {
    display: none; /* Hide the default file input */
}

.wc-apf-upload-area {
    background: #e2f6ff !important;
    border: 1px solid #28a4d9 !important;
    box-shadow: 0px 1px 5px 1px #28a4d9 !important;
    border-radius: 10px !important;
   


    /* border: 2px dashed #ddd;
    border-radius: 8px; */
    padding: 40px 20px;
    text-align: center;
    /* background: #fafafa; */
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}


.wc-apf-upload-area:hover {
    border-color: #999;
    background: #f5f5f5;
        box-shadow: 0px 1px 10px 5px #28a4d9c7 !important;
}

.wc-apf-upload-area.drag-over {
    border-color: #2ea2cc;
    background: #e8f4f8;
}

.wc-apf-upload-area .dashicons {
    font-size: 60px;
    width: 60px;
    height: 60px;
    color: #999;
    margin-bottom: 10px;
}

.wc-apf-upload-area p {
    margin: 10px 0 5px 0;
    color: #666;
    font-size: 14px;
}

.wc-apf-upload-area .upload-button {
    display: inline-block;
 
  

    color: #06f;
    text-decoration: underline;
   
    font-weight: 800;
    transition: background 0.3s ease;
}

.wc-apf-upload-area:hover .upload-button {
    color: rgb(16, 81, 112)
}

.wc-apf-upload-area small {
    display: block;
    margin-top: 10px;
    color: #999;
    font-size: 12px;
}

.wc-apf-upload-progress {
    margin: 15px 0;
}


.wc-apf-progress-bar {
    width: 100%;
    height: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.wc-apf-progress-fill {
    height: 100%;
    background: #2ea2cc;
    transition: width 0.3s ease;
    width: 0%;
}

.wc-apf-progress-text {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    color: #666;
}

.wc-apf-uploaded-files {
    margin-top: 10px;
    position: relative;
}

.wc-apf-uploaded-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.wc-apf-uploaded-file:hover {
    border-color: #999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.wc-apf-uploaded-file .file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.wc-apf-uploaded-file .dashicons-yes {
    color: #46b450;
    flex-shrink: 0;
}

.wc-apf-uploaded-file .file-remove {
    cursor: pointer;
    color: #dc3232;
    padding: 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wc-apf-uploaded-file .file-remove:hover {
    background: #dc3232;
    color: #fff;
    max-height: 25px;
}

.wc-apf-uploaded-file .file-remove .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.wc-apf-uploaded-file .dashicons {
    color: #46b450;
}

.wc-apf-field-error {
    color: #f00;
    font-size: 12px;
    margin-top: 5px;
}
.wc-apf-field select, .wc-apf-field input[type="text"], .wc-apf-field input[type="email"], .wc-apf-field input[type="url"], .wc-apf-field input[type="tel"], .wc-apf-field input[type="password"], .wc-apf-field textarea {
    box-shadow: none;
   
    line-height: 25px;
    padding: 5px 10px;
    outline: 0;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    background-color: #fff !important;
    border: 1px solid #918e8e;
    border-radius: 7px !important;
}
.wc-apf-field input[type="number"]{
    box-shadow: none;
   
    line-height: 25px;
    padding: 5px 10px;
    outline: 0;
    box-sizing: border-box;
    margin: 0;
    width: 100%;

    border-radius: 7px !important;
}

.wc-apf-uploaded-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.wc-apf-uploaded-file:hover {
    border-color: #999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.wc-apf-uploaded-file .file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.wc-apf-uploaded-file .file-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #ddd;
}

.wc-apf-uploaded-file .file-icon {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #666;
}

.wc-apf-uploaded-file .dashicons-yes {
    color: #46b450;
    flex-shrink: 0;
}

.wc-apf-uploaded-file .file-remove {
    cursor: pointer;
    color: #dc3232;
    padding: 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wc-apf-uploaded-file .file-remove:hover {
    background: #dc3232;
    color: #fff;
}

.wc-apf-uploaded-file .file-remove .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
.wc-apf-dim-minus{
    background-color: #f8f9fa;
    border: none;
    padding: 7px 3px;
    cursor: pointer;
    box-shadow: 0px 0px 2px 1px #28a4d9 !important;
    position: relative;
   
    border-radius: 5px 0px 0px 5px;
}

.wc-apf-dim-plus{
     background-color: #f8f9fa;
    border: none;
    padding: 7px 3px;
    cursor: pointer;
    box-shadow: 0px 0px 2px 1px #28a4d9 !important;
    position: relative;
    border-radius: 0px 5px 5px 0px;
}

input[type=number].wc-apf-dimension-input::-webkit-inner-spin-button,
input[type=number].wc-apf-dimension-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].wc-apf-dimension-input {
    -moz-appearance: textfield;
        text-align: center;

}

button.wc-apf-dim-minus:focus, button.wc-apf-dim-plus:focus{
    outline: none;
}



.wc-apf-designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.wc-apf-design-card {
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
        position: relative;
    padding: 4px;
}

.wc-apf-design-card:hover {
    /* border-color: #0073aa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
    border-color: #929292;
    box-shadow: 0 2px 4px rgb(0 0 0 / 64%);
}

.wc-apf-design-card.active {
    border-color: rgb(255 0 0 / 70%);
    background: #f0f8ff;
}

.wc-apf-design-preview {
    cursor: pointer;
    text-align: center;
    width: 80px;
    height: 80px;
}

.wc-apf-remove-design {
    background: #dc3545;
    color: white;
    border: none;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.wc-apf-remove-design:hover {
    background: #c82333;
}
.wc-apf-design-quantity button {
    font-family: "PT Sans";
    text-transform: uppercase;
    height: 22px;
    width: 22px;
    font-size: 12px;
    box-shadow: 0px 0px 3px #4d4d4d;
    border-radius: 5px;
    display: flex;
    align-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    color: #119948;
    font-weight: 900;
    background: #66F7A1;
    border: 2px solid #119948;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.wc-apf-design-quantity button:hover {
    background: #0b5f2c;
    color: #ffffff !important;
}
 button.single_add_to_cart_button{
    display: none !important
                        }
 button.single_add_to_cart_button.buttonaddcarttoggle{
    display: block !important
                        }

.modal-dialog.modal-dialog-centered.modal-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100% - (.5 * 2));
    height: 100%;
    width: 100%;
}

.wc-apf-ai-example-image, wc-apf-ai-example-image-{
        display: inline-block;
    box-shadow: 0 0 3px rgb(221, 221, 221);
    overflow: hidden;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}
@media (max-width: 600px) {
    .modal-dialog.modal-dialog-centered.modal-lg{
  
    height: 100%;
    width: 98%;
    margin: auto;
    }
}


/* === AI Tools: Tooltip + Disclaimer (custom) === */
.ai-tooltip{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  cursor: help;
}
.ai-tooltip-icon{
  font-size: 13px;
  line-height: 1;
  color: #1a89b8;
  user-select: none;
}
.ai-tooltiptext{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(17, 17, 17, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  z-index: 999999;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}
.ai-tooltiptext:after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(17, 17, 17, 0.92) transparent transparent transparent;
}
.ai-tooltip:hover .ai-tooltiptext,
.ai-tooltip:focus .ai-tooltiptext,
.ai-tooltip.ai-tooltip-show .ai-tooltiptext{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Prevent clipping inside the AI tools box */
.ai-tools-box, .ai-tools-box *{
  overflow: visible;
}

/* Modern disclaimer */
.ai-disclaimer{
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  /* Match the left/right gutters of the blue AI rows (10px left, 14px right) */
  padding: 10px 14px 10px 10px;
  border-radius: 12px;
  background: #f3f4f6; /* light grey */
  border: 1px solid #e5e7eb;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ai-disclaimer-icon{
  color: #f59e0b; /* orange */
  font-size: 18px;
  line-height: 1;
  margin-top: 1px;
}
.ai-disclaimer-text{
  display: block;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.1px;
  color: #374151;
}


/* Ensure tooltip isn't clipped by tables/rows */
.wc-apf-file-upload table,
.wc-apf-file-upload thead,
.wc-apf-file-upload tbody,
.wc-apf-file-upload tfoot,
.wc-apf-file-upload tr,
.wc-apf-file-upload th,
.wc-apf-file-upload td{
  overflow: visible !important;
}



/* --- Halftone Controls (Density / Angle) --- */
.wc-apf-halftone-controls-row { box-sizing: border-box; }
.wc-apf-halftone-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.wc-apf-halftone-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.wc-apf-halftone-control-label {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    min-width: 70px;
}

.wc-apf-halftone-control-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.wc-apf-halftone-control-inputs input[type="number"]{
    width: 80px;
    max-width: 90px;
    padding: 8px 10px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
}

.wc-apf-halftone-control-inputs input[type="range"]{
    flex: 1;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Dimension locking (multi-design uploads / AI tool toggles)
   -------------------------------------------------------------------------- */
.wc-apf-dimensions-wrapper.wc-apf-dim-locked {
    opacity: 0.55;
}

.wc-apf-dimensions-wrapper.wc-apf-dim-locked input,
.wc-apf-dimensions-wrapper.wc-apf-dim-locked button {
    cursor: not-allowed !important;
}

.wc-apf-dimensions-wrapper.wc-apf-dim-locked input:disabled,
.wc-apf-dimensions-wrapper.wc-apf-dim-locked button:disabled {
    pointer-events: none;
}

/* Optional: any nearby "type" field we lock gets the same treatment */
.wc-apf-dim-locked-field {
    opacity: 0.55;
    cursor: not-allowed !important;
}

/* Ensure tooltips/controls aren't clipped by parent table rows */
.drop-shipping-select, .drop-shipping-select td, .drop-shipping-select th { overflow: visible !important; }

/* === FIX: AI disclaimer container & frame === */
.ai-tools-box{
  border: 2px solid #000000 !important;
  border-radius: 12px;
}

.ai-disclaimer{
  background: #e2f6ff !important;
  border: none !important;
  border-radius: 0 !important;
}


/* === FIX v4: Force AI tools outer frame + consistent spacing === */

/* Force outer frame (higher specificity + fallback selectors) */
.wc-apf-file-upload .ai-tools-box,
.ai-tools-box,
.ai-tools-container {
  border: 2px solid #000000 !important;
  border-radius: 12px;
}

/* Match spacing between all AI rows */
.ai-tools-box > * {
  margin-bottom: 10px !important;
}

/* Disclaimer: same spacing + square edges */
.ai-disclaimer {
  background: #e2f6ff !important;
  border-radius: 0 !important;
  margin-bottom: 10px !important;
}


/* ==============================
 * Upload area: NEW Multiple File Uploads badge
 * Reuses existing .uts-new-mockups-badge styles for font/background.
 * ============================== */
.wc-apf-upload-area .uts-multi-upload-pill{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: uts-pill-pop 0.35s ease-out both, uts-pill-pulse 2.8s ease-in-out infinite 1.1s;
}

@keyframes uts-pill-pop{
  from{ transform: translateY(4px) scale(0.95); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes uts-pill-pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.03); }
}


/* --- Font match for upload-pill (reuse guide badge typography) --- */
.wc-apf-upload-area .uts-new-mockups-badge{
  font-size: 11px;
  line-height: 1;
  font-family: inherit;
}
.wc-apf-upload-area .uts-new-mockups-badge__new{
  font-size: 10px;
}



/* --- Upload Transfers Studio tweaks: guide vs upload pill typography --- */
/* Guide pill: keep smaller typography (NEW 8px / text 9px) */
.uts-new-mockups-badge:not(.uts-multi-upload-pill){
  font-size: 9px;
}
.uts-new-mockups-badge:not(.uts-multi-upload-pill) .uts-new-mockups-badge__new{
  font-size: 8px;
}
.uts-new-mockups-badge:not(.uts-multi-upload-pill) .uts-new-mockups-badge__text{
  font-size: 9px;
}


@media (max-width: 767px){
  /* Upload pill: do NOT hide NEW on mobile */
  .uts-multi-upload-pill .uts-new-mockups-badge__new{
    display: inline-block !important;
  }
}


.namefile {
    display: block !important;
}

/* =============================
   Canva Import Modal
   ============================= */

body.wc-apf-canva-modal-open {
    overflow: hidden;
}

.wc-apf-canva-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
}

.wc-apf-canva-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.wc-apf-canva-modal__panel {
    position: relative;
    width: min(920px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    margin: 12px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

.wc-apf-canva-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.wc-apf-canva-modal__close {
    appearance: none;
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.wc-apf-canva-modal__body {
    padding: 14px 16px;
    overflow: auto;
}

.wc-apf-canva-modal__search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 0;
}

.wc-apf-canva-modal__search input {
    flex: 1;
    min-width: 180px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.wc-apf-canva-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.wc-apf-canva-item {
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}

.wc-apf-canva-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-apf-canva-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wc-apf-canva-thumb--empty {
    opacity: 0.7;
    font-size: 12px;
}

.wc-apf-canva-title {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
}