@charset "UTF-8";

/* ==========================================================================
   1. Icon Font Definition
   ========================================================================== */
@font-face {
  font-family: 'cxc-chart';
  src: url('../fonts/cxc-chart.eot?3aii6m');
  src: url('../fonts/cxc-chart.eot?3aii6m#iefix') format('embedded-opentype'),
    url('../fonts/cxc-chart.ttf?3aii6m') format('truetype'),
    url('../fonts/cxc-chart.woff?3aii6m') format('woff'),
    url('../fonts/cxc-chart.svg?3aii6m#cxc-chart') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ==========================================================================
   2. Base Icon Styles
   ========================================================================== */
[class^="cxc-icon-"],
[class*=" cxc-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'cxc-chart' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  /* Ensure proper alignment */

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. Specific Icon Definitions
   ========================================================================== */


.cxc-icon-bell:before {
  content: "\e900";
}
.cxc-icon-bell-off:before {
  content: "\e901";
}
.cxc-icon-calendar:before {
  content: "\e902";
}
.cxc-icon-chevron-down:before {
  content: "\e903";
}
.cxc-icon-chevron-left:before {
  content: "\e904";
}
.cxc-icon-chevron-right:before {
  content: "\e905";
}
.cxc-icon-chevron-up:before {
  content: "\e906";
}
.cxc-icon-minus:before {
  content: "\e90a";
}
.cxc-icon-trending-down:before {
  content: "\e907";
}
.cxc-icon-trending-up:before {
  content: "\e908";
}
.cxc-icon-zap:before {
  content: "\e909";
}





/* ==========================================================================
   4. General Plugin Notices & Elements
   ========================================================================== */
.cxc-no-price-history {
  background-color: #fff3cd;
  /* Light yellow */
  border: 1px solid #ffeeba;
  border-radius: 5px;
  color: #856404;
  /* Dark yellow text */
  font-size: 14px;
  margin-top: 10px;
  padding: 10px 15px;
}

.cxc-wpl-notice {
  background-color: #FFF8E1;
  /* Light Amber */
  border: 1px solid #FFCA28;
  /* Amber */
  color: #c56f02;
  /* Dark Amber text */
  font-size: 15px;
  padding: 15px;
  border-radius: 5px;
  margin: 10px 0;
}

.cxc-wpl-error {
  background-color: #ffebee;
  /* Light Red */
  border: 1px solid #ef9a9a;
  /* Red */
  color: #c62828;
  /* Dark Red text */
  font-size: 15px;
  padding: 15px;
  border-radius: 5px;
  margin: 10px 0;
}

/* ==========================================================================
   5. Inline Price Change Info Styles (Next to price)
   ========================================================================== */
.cxc-wpl-change-info {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #ebebeb;
  /* Light gray default */
  border-radius: 25px;
  /* Pill shape */
  font-size: 0.85em;
  /* Slightly smaller than main price */
  font-weight: normal;
  line-height: 1.2;
  margin: 0 5px;
  padding: 4px 8px;
  /* Adjusted padding */
  position: relative;
  cursor: help;
  /* Indicate tooltip on hover */
  vertical-align: middle;
  /* Align nicely with price */
  white-space: nowrap;
}

/* Tooltip pseudo-element */
.cxc-wpl-change-info::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 125%;
  /* Position above the element */
  transform: translateX(-50%);
  background-color: #333;
  /* Dark background */
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  /* Use visibility for better transition */
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 100;
}

.cxc-wpl-change-info:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Color variations */
.cxc-wpl-change-info.green {
  background-color: #81C784;
  /* Material Green */
  color: #ffffff;
}

.cxc-wpl-change-info.red {
  background-color: #E57373;
  /* Material Red */
  color: #ffffff;
}

.cxc-wpl-change-info.gray {
  background-color: #B0BEC5;
  /* Material Blue Grey */
  color: #ffffff;
}

/* Icon styling within the info badge */
.cxc-wpl-change-info i {
  border-radius: 50%;
  /* Circular background for icon */
  padding: 4px;
  display: inline-flex;
  /* Ensure icon fits */
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  /* Slightly smaller icon */
  width: 16px;
  /* Fixed width */
  height: 16px;
  /* Fixed height */
}

.cxc-wpl-change-info.green i {
  background-color: #4CAF50;
  /* Darker Green */
}

.cxc-wpl-change-info.red i {
  background-color: #f44336;
  /* Darker Red */
}

.cxc-wpl-change-info.gray i {
  background-color: #78909C;
  /* Darker Blue Grey */
}

/* Text and Percentage styling */
.cxc-wpl-change-text {
  /* This class might not be needed if using flex gap */
  /* margin-left: 10px; Remove if using gap */
}

.cxc-wpl-change-info .percentage {
  margin-left: 5px;
  /* Space before percentage */
  font-size: 0.9em;
  opacity: 0.9;
}

/* Tooltip content styling (inside the tooltip itself) */
.cxc-wpl-tooltip-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.cxc-wpl-tooltip-item div {
  display: flex;
  gap: 5px;
  align-items: center;
}

/* ==========================================================================
   6. Chart Buttons Styles
   ========================================================================== */
.cxc-wpl-buttons {
  margin-top: 15px;
  text-align: center;
  /* Or adjust as needed */
}

.cxc-wpl-buttons button {
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
  color: #666;
  font-size: 14px;
  /* Slightly smaller */
  line-height: normal;
  padding: 6px 12px;
  margin: 0 3px 5px 3px;
  /* Spacing for buttons */
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cxc-wpl-buttons button:hover {
  background-color: #f5f5f5;
  /* Lighter hover */
  color: #333;
  border-color: #ccc;
}

.cxc-wpl-buttons button:focus {
  outline: 1px dotted #aaa;
  outline-offset: 2px;
}


/* ==========================================================================
   7. Price Table Styles
   ========================================================================== */
.cxc-wpl-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.95em;
  background: #fff;
  border: 1px solid #eee;
}

.cxc-wpl-table th,
.cxc-wpl-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.cxc-wpl-table th {
  background-color: #f9f9f9;
  font-weight: 600;
  color: #555;
}

.cxc-wpl-table tbody tr:nth-child(odd) {
  background-color: #fdfdfd;
  /* Very light alternate row */
}

.cxc-wpl-table tbody tr:hover {
  background-color: #f5f5f5;
  /* Hover effect */
}

.cxc-wpl-table .cxc-wpl-row-odd {
  /* Remove background if using nth-child above */
}

.cxc-wpl-table .cxc-wpl-row-even {
  /* Remove background if using nth-child above */
}

/* Product link */
.cxc-wpl-product-link {
  text-decoration: none !important;
  color: inherit;
  transition: color 0.2s ease;
}

.cxc-wpl-product-link:hover {
  color: #0073aa;
  /* WP blue or theme link color */
}

.cxc-wpl-expert {
  font-size: 0.9em;
  color: #777;
  display: block;
  margin-top: 2px;
}

/* Price change details in table */
.cxc-wpl-change {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Align start for table */
  gap: 8px;
}

.cxc-wpl-change .cxc-wpl-icon {
  /* Icon already styled, no extra needed here */
}

.cxc-wpl-change .cxc-wpl-price {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cxc-wpl-price-decrease {
  color: #379d3b;
  /* Green */
}

.cxc-wpl-price-increase {
  color: #F44336;
  /* Red */
}

.cxc-wpl-change .cxc-wpl-percentage {
  /* Note the space, corrected selector */
  color: #888;
  font-size: 0.9em;
  margin-left: 5px;
}

.cxc-wpl-no-change {
  color: #777;
  font-style: italic;
}

.cxc-wpl-table .cxc-wpl-col {
  text-align: center;
}

.cxc-wpl-table th.cxc-wpl-col {
  text-align: center;
}


/* ==========================================================================
   8. Price Alert Button/Trigger Styles
   ========================================================================== */
.cxc-wpl-alert-container {
  /* display: flex;
  flex-direction: column; */
  margin-top: 15px;
}

.cxc-wpl-subscribe-trigger {
  display: inline-flex;
  /* For aligning icon and text */
  align-items: center;
  gap: 6px;
  /* Space between icon and text */
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
  vertical-align: middle;
  /* Align with surrounding text/buttons */
  line-height: 1.4;
  /* Adjust line height for consistency */
}

/* Disabled state */
.cxc-wpl-subscribe-trigger[disabled="disabled"],
.cxc-wpl-subscribe-trigger.disabled {
  /* Helper class from JS */
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  /* Prevent clicks */
}

/* Icon-only style */
.cxc-wpl-display-icon-only {
  font-size: 1.4em;
  /* Adjust icon size */
  padding: 5px;
  /* Clickable area */
  color: #555;
  /* Default icon color */
  border: 1px solid transparent;
  /* Maintain layout */
}

.cxc-wpl-display-icon-only:hover {
  opacity: 0.8;
  color: #000;
}

/* Icon with text style */
.cxc-wpl-display-icon-text {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555;
  background-color: #f9f9f9;
}

.cxc-wpl-display-icon-text:hover {
  background-color: #f0f0f0;
  border-color: #999;
  color: #333;
}

.cxc-wpl-display-icon-text i {
  /* Adjust icon size if needed */
  /* font-size: 1.1em; */
}

/* Button style (often inherits from theme/WooCommerce) */
.cxc-wpl-display-button {
    margin-bottom: 0.5em !important;
}

/* Message area below the button */
.cxc-wpl-alert-message {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9em;
      text-align: justify;
  display: none;
  /* Hidden by default */
  border: 1px solid transparent;
}

.cxc-wpl-alert-message.cxc-wpl-success {
  background-color: #d4edda;
  /* Light green */
  color: #155724;
  /* Dark green */
  border-color: #c3e6cb;
}

.cxc-wpl-alert-message.cxc-wpl-error {
  background-color: #f8d7da;
  /* Light red */
  color: #721c24;
  /* Dark red */
  border-color: #f5c6cb;
}

.cxc-wpl-alert-message.cxc-wpl-info {
  background-color: #d1ecf1;
  /* Light blue */
  color: #0c5460;
  /* Dark blue */
  border-color: #bee5eb;
}


/* ==========================================================================
   9. Price Alert Modal Styles (Shared for Product & My Account)
   ========================================================================== */
.cxc-modal-overlay {
  display: none;
  /* Hidden by default */
  position: fixed;
  inset: 0;
  /* Replaces top, right, bottom, left */
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10040;
  /* High z-index, below modal */
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.cxc-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) scale(0.95);
  /* Start slightly above and smaller */
  background-color: #fff;
  padding: 25px 30px;
  /* More padding */
  border-radius: 6px;
  /* Slightly less rounded */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  /* Softer shadow */
  z-index: 10050;
  /* Above overlay */
  min-width: 320px;
  max-width: 90%;
  width: 450px;
  /* Max width for larger screens */
  opacity: 0;
  transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Smooth transition */
  box-sizing: border-box;
}

/* States when modal is open */
body.cxc-modal-is-open .cxc-modal-overlay {
  display: block;
  opacity: 1;
}

body.cxc-modal-is-open .cxc-modal {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  /* Center and scale to full size */
}

/* Optional: Prevent body scroll when modal is open */
body.cxc-modal-is-open {
  overflow: hidden;
}

.cxc-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cxc-wpl-modal-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cxc-modal-content {
  position: relative;
}

/* Close Button */
.cxc-modal-close-btn {
  border: none;
  font-size: 26px;
  cursor: pointer;
  padding: 0 5px;
  color: #fff !important;
  transition: color 0.2s ease;
}

.cxc-modal-close-btn:hover {
  color: #555;
}

/* Modal Title */
.cxc-modal h5,
#cxc-modal-title-myaccount {
  /* Target specific modal titles */
  margin-top: 0;
  margin-bottom: 0;
  /* More space after title */
  font-size: 1.3em;
  font-weight: 600;
  /* Bolder title */
  color: #333;
  line-height: 1.3;
}

/* Modal Body Text */
.cxc-modal p {
  margin-bottom: 15px;
  color: #555;
  line-height: 1.6;
}

/* Form Elements within Modal */
.cxc-modal label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #444;
}

.cxc-modal select,
.cxc-modal input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  /* Comfortable padding */
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 15px;
  /* Space below inputs */
  font-size: 1em;
}

.cxc-modal select:focus,
.cxc-modal input[type="email"]:focus {
  border-color: #999;
  outline: none;
  box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.3);
  /* Subtle focus outline */
}


/* Modal Actions (Button Container) */
.cxc-modal-actions {
  display: flex;
  justify-content: flex-end;
  /* Align buttons to the right */
  gap: 10px;
  /* Space between buttons */
  border-top: 1px solid #eee;
  /* Optional separator line */
  padding-top: 20px;
  /* More space above buttons */
  margin-top: 25px;
}

/* Modal Buttons (Inherit from .button or customize) */
.cxc-modal .button {
  padding: 8px 16px;
  /* Adjust button padding */
  font-size: 0.95em;
  /* Ensure theme/WooCommerce button styles apply */
}

.cxc-modal .button-primary {
  /* Primary button styles */
  /* Example: background-color: #0073aa; color: #fff; */
}

.cxc-modal .button.alt {
  /* Secondary/Cancel button styles */
  background-color: #f0f0f0;
  color: #555;
  border-color: #ddd;
}

.cxc-modal .button.alt:hover {
  background-color: #e0e0e0;
  color: #333;
}

/* Loading state for submit button (added via JS) */
.cxc-modal .button.cxc-loading {
  opacity: 0.7;
  position: relative;
  pointer-events: none;
  /* Prevent clicks while loading */
}

.cxc-modal .button.cxc-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cxc-spinner 0.6s linear infinite;
}

@keyframes cxc-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
     10. My Account Specific Styles (Overrides or additions)
     ========================================================================== */

/* Adjust table cell padding/alignment if needed for My Account */
.woocommerce-account .cxc-wpl-subscriptions-table td {
  vertical-align: middle;
}

.woocommerce-account .cxc-wpl-subscriptions-table .cxc-subscribed-price,
.woocommerce-account .cxc-wpl-subscriptions-table .cxc-alert-type {
  /* Example: font-size: 0.9em; color: #666; */
}

.woocommerce-account .cxc-wpl-subscriptions-table .cxc-actions button {
  /* Ensure button looks good in the table context */
  /* Example: padding: 5px 10px; font-size: 0.85em; */
}

/* Style for the "no alerts" message container in My Account */
#cxc-wpl-myaccount-no-alerts-message .woocommerce-info {
  /* Customize the notice if needed */
}

/* Optional: Responsive Styles for Table and Modal */
@media screen and (max-width: 768px) {
  .cxc-modal {
    width: 90%;
    padding: 20px;
  }

  .cxc-modal h5,
  #cxc-modal-title-myaccount {
    font-size: 1.15em;
  }

  .cxc-modal-actions {
    flex-direction: column;
    /* Stack buttons on small screens */
    gap: 8px;
  }

  .cxc-modal .button {
    width: 100%;
    /* Make buttons full width */
    text-align: center;
  }

  /* Responsive table adjustments if needed (WooCommerce usually handles this) */
  /* Example:
      .woocommerce-account .cxc-wpl-subscriptions-table thead {
          display: none;
      }
      .woocommerce-account .cxc-wpl-subscriptions-table tbody tr {
          display: block;
          margin-bottom: 15px;
          border: 1px solid #eee;
      }
      .woocommerce-account .cxc-wpl-subscriptions-table tbody td {
          display: block;
          text-align: right !important;
          border-bottom: 1px dotted #eee;
      }
      .woocommerce-account .cxc-wpl-subscriptions-table tbody td::before {
          content: attr(data-title);
          float: left;
          font-weight: bold;
          margin-right: 10px;
      }
      .woocommerce-account .cxc-wpl-subscriptions-table .cxc-actions {
          text-align: center !important;
      }
      .woocommerce-account .cxc-wpl-subscriptions-table .cxc-actions::before {
          display: none;
      }
      */
}



/* ==========================================================================
   11. Archive Product Badges Styles
   ========================================================================== */

/* Container for badges, positioned over the image link */
.woocommerce ul.products li.product a {
  position: relative;
  /* Ensure the link wrapper can contain absolute elements */
  display: block;
  /* Necessary for positioning context */
}

.cxc-wpl-archive-badges {
  position: absolute;
  top: 8px;
  /* Adjust as needed */
    right: 8px;
  /* Adjust as needed */
  z-index: 9;
  /* Above the image, below potential quick view buttons etc. */
  display: flex;
  flex-direction: column;
  /* Stack badges vertically */
  gap: 5px;
  /* Space between badges */
  pointer-events: none;
  /* Prevent badges from interfering with link clicks */
}

.cxc-wpl-badge {
  display: inline-flex;
  /* Use inline-flex for icon alignment */
  align-items: center;
  gap: 4px;
  /* Space between icon and text */
  background-color: rgba(0, 0, 0, 0.65);
  /* Semi-transparent background */
  color: #fff;
  padding: 3px 7px;
  /* Small padding */
  border-radius: 3px;
  font-size: 11px;
  /* Small font size */
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: auto;
  /* Allow text selection if needed, though unlikely */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Specific badge styling (optional colors) */
.cxc-wpl-badge.cxc-badge-drop {
  background-color: #d32f2f;
  /* Red for price drop */
  /* background-color: rgba(211, 47, 47, 0.85); /* Red with alpha */
}

.cxc-wpl-badge.cxc-badge-lowest {
  background-color: #1976d2;
  /* Blue for lowest price */
  /* background-color: rgba(25, 118, 210, 0.85); /* Blue with alpha */
}

.cxc-wpl-badge.cxc-badge-increase {
  background-color: #ff9800;
  /* Orange for price increase */
  /* background-color: rgba(255, 152, 0, 0.85); /* Orange with alpha */
  /* یا رنگ دیگری که ترجیح می‌دهید */
}

/* Icon styling within badge */
.cxc-wpl-badge i[class^="cxc-icon-"] {
  font-size: 1.1em;
  /* Slightly larger icon relative to text */
  line-height: 1;
  /* Ensure icon vertical alignment */
}

/* Ensure icon fonts are loaded if not already globally */
/* @font-face { ... } and [class^="cxc-icon-"] definitions should be present */

/* Example icon definitions if needed */
/* .cxc-icon-chevron-down:before { content: "\e900"; } */
/* .cxc-icon-star:before { content: "\e907"; } /* Replace with your star icon code */
/* .cxc-icon-tag:before { content: "\e908"; } /* Replace with your tag icon code */


/* ==========================================================================
   12. Sparkline Styles
   ========================================================================== */
.cxc-wpl-sparkline-container {
    display: flex
;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 10px;
}

.cxc-wpl-sparkline-last-price {
  font-size: 1.3em;
  font-weight: bold;
  color: #333;
  /* margin-bottom: 2px; Removed to reduce space if change is present */
  text-align: left;
}

.cxc-wpl-sparkline-price-change {
  font-size: 0.75em; /* فونت کوچکتر */
  margin-top: 1px;
  margin-bottom: 4px; /* فاصله زیر متن تغییر قیمت */
  text-align: left;
  line-height: 1.2;
}

.cxc-wpl-price-change-icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px; /* تنظیم دقیق عمودی آیکن */
  margin-right: 2px; /* فاصله کوچک بعد از آیکن */
}

.cxc-wpl-price-change-positive {
  color: #2E7D32; /* سبز تیره‌تر برای خوانایی بهتر */
}
.cxc-wpl-price-change-positive  {
  color: #4CAF50;
}

.cxc-wpl-price-change-negative {
  color: #C62828; /* قرمز تیره‌تر */
}
.cxc-wpl-price-change-negative  {
  color: #F44336;
}

.cxc-wpl-price-change-neutral {
  color: #555;
}
.cxc-wpl-price-change-neutral  {
  color: #777;
}


/* Ensure the chart div within sparkline takes available width */
.cxc-wpl-sparkline-container > div[id^="mainChart_"] {
  width: 100%; /* پیش‌فرض، اما توسط استایل inline قابل تغییر است */
}