/* ============================================
   Design Revamp Overwrite Styles
   For CPX Project - Temporary Styling Override
   ============================================ */

/* imports*/
@import url("./overwrite-homepage.css");
@import url("./overwrite-order-details.css");
@import url("./overwrite-footer.css");
@import url("./overwrite-chronological-index.css");
@import url("./overwrite-create-orders-modals.css");
@import url("./my-orders-overwrite.css");
@import url("./overwrite-share-and-merge.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/* ============================================
   CSS Variables - Design Tokens
   ============================================ */
*:not([class*="icon"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.ui-icon), 
*:not([class*="icon"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.ui-icon)::before, 
*:not([class*="icon"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.ui-icon)::after {
  font-family: var(--overwrite-font-family-font-sans) !important;
  letter-spacing: -0.5px;
}

:root {
  /* Color Variables */
  --overwrite-color-card-foreground: #09090b;
  --overwrite-color-muted-foreground: #6d6d6d;
  --overwrite-color-primary: #00b3d8;
  --overwrite-color-primary-foreground: #fafafa;
  --overwrite-color-foreground: #18181b;
  --overwrite-color-accent-foreground: #18181b;
  --overwrite-color-input: #e4e4e7;
  --overwrite-color-border: #e4e4e7;
  --overwrite-color-cyan-50: #ebfdff;
  --overwrite-color-popover-foreground: #09090b;
  --overwrite-color-muted: #f4f4f5;
  --overwrite-color-destructive: #dc2626;
  --overwrite-color-secondary: #f4f4f5;
  --overwrite-color-secondary-foreground: #18181b;
  --overwrite-color-base-background: #fff;
  --overwrite-color-destructive: #dc2626;
  --overwrite-color-border: #e4e4e7;
  --overwrite-color-cyan-300: #63e7fd;
  --overwrite-color-base-input: #e4e4e7;
  --overwrite-color-accent: #f4f4f5;
  /* Typography Variables */
  --overwrite-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --overwrite-font-family-font-sans: Inter, ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* Font Sizes */
  --overwrite-font-size-2xl: 24px;
  --overwrite-font-size-xl: 20px;
  --overwrite-font-size-lg: 18px;
  --overwrite-font-size-small: 14px;
  --overwrite-font-size-colon: 11px;
  --overwrite-font-size-button: 8px;
  --overwrite-font-size-base: 16px;
  --overwrite-font-size-xs: 12px;

  /* Font Weights */
  --overwrite-font-weight-normal: 400;
  --overwrite-font-weight-medium: 500;
  --overwrite-font-weight-semibold: 600;
  --overwrite-font-weight-bold: 700;

  /* Line Heights */
  --overwrite-line-height-2xl: 32px;
  --overwrite-line-height-xl: 26px;
  --overwrite-line-height-small: 20px;
  --overwrite-line-height-tight: 120%;
  --overwrite-line-height-none: 100%;
  --overwrite-line-height-xs: 16px;

  /* Spacing Variables */
  --overwrite-spacing-1: 4px;
  --overwrite-spacing-2: 8px;
  --overwrite-spacing-3: 12px;
  --overwrite-spacing-4: 16px;
  --overwrite-spacing-10: 40px;

  /* Height Variables */
  --overwrite-height-9: 36px;
  --overwrite-height-10: 40px;

  /* Border Radius Variables */
  --overwrite-border-radius-lg: 8px;
  --overwrite-border-radius-md: 6px;
  --overwrite-border-radius-sm: 2px;
}

#cpx-react-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 0.3s ease-out;
}

#cpx-react-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

#cpx-react-loader svg {
  width: 48px;
  height: 48px;
  color: #052664;
  animation: spin 1s linear infinite;
}

#cpx-react-loader-text {
  margin-left: 8px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   Utility Classes (Optional)
   ============================================ */

/* Use these if you need to apply specific properties individually */
.color-primary-overwrite {
  color: var(--overwrite-color-primary) !important;
}

.color-foreground-overwrite {
  color: var(--overwrite-color-foreground) !important;
}

.color-muted-overwrite {
  color: var(--overwrite-color-muted-foreground) !important;
}

.font-inter-overwrite {
  font-family: var(--overwrite-font-family) !important;
}

.font-sans-overwrite {
  font-family: var(--overwrite-font-family-font-sans) !important;
}
.ui-icon-closethick {
  background-position: -97.5px -130px !important;
}

.tighter-letter-spacing-overwrite {
  letter-spacing: -0.5px !important;
}
.col-315-overwrite {
  width: 315px;
}