/*
 * Interaktive Custom WooCommerce Dashboard Styles - Final Version
 */

/* --- Force Theme's Borderless Style on Recent Orders Table --- */




.purple-dashboard-container .table{margin-top: 10px !important;}

.purple-dashboard-container .card .table {
    border-collapse: collapse;
    border-style: hidden;
  }
  .purple-dashboard-container .card .table th,
  .purple-dashboard-container .card .table td {
    border: none;
    border-bottom: 1px solid #ebedf2;
  }
  .purple-dashboard-container .card .table thead th {
    border-bottom-width: 2px;
  }
  
/*
 * ===================================================================
 * FINAL & COMPLETE Fix for Sidebar Profile Layout (Name and Image)
 * ===================================================================
 */

/* 1. Target the main link element to ensure flex properties are set */
.purple-dashboard-container .sidebar .nav-profile .nav-link {
    display: flex;
    align-items: center; /* Vertically align image and text */
}

/* 2. Target the image container and prevent it from shrinking */
.purple-dashboard-container .sidebar .nav-profile .nav-profile-image {
    flex-shrink: 0; /* This is the key: prevents the image from being squished */
    margin-right: 15px; /* Add some space between the image and the text */
}

/* 3. Target the text container, allowing it to shrink and wrap */
.purple-dashboard-container .sidebar .nav-profile .nav-profile-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow the text container to take up remaining space */
    min-width: 0; /* Crucial for allowing flex items to shrink below their content size */
}

/* 4. Target the user's name specifically to force wrapping */
.purple-dashboard-container .sidebar .nav-profile .nav-profile-text .font-weight-bold {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal; /* Allow text to wrap naturally */
    line-height: 1.2; /* Adjust line height for wrapped text */
}
  /* --- NEW: White Background & Black Text for Recent Orders Table --- */
  
    /* 1. Set the background of the table body, all rows, and cells to white */
    .purple-dashboard-container .card .table tbody,
    .purple-dashboard-container .card .table tr,
    .purple-dashboard-container .card .table td,
    .purple-dashboard-container .card .table tr:hover,
    .purple-dashboard-container .card .table tr:hover > * {
        background-color: #ffffff !important;
    }
  
  /* 2. Set the default text color for all table cells to black */
  .purple-dashboard-container .card .table th,
  .purple-dashboard-container .card .table td {
      color: #000000 !important;
  }
  
  /* 3. Set the link color inside the cells to black */
  .purple-dashboard-container .card .table a {
      color: #000000 !important;
      text-decoration: none;
  }
      
  /* 4. IMPORTANT: Override the text color for the badge to be white for readability */
  .purple-dashboard-container .card .table .badge {
      color: #ffffff !important;
  }
  
  
  /* --- Gradient Text for Active Sidebar Link --- */
  .sidebar .nav .nav-item.is-active > .nav-link .menu-title,
  .sidebar .nav .nav-item.is-active > .nav-link .menu-icon {
      background-image: linear-gradient(to right, #da8cff, #9a55ff);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
  }
  .sidebar .nav .nav-item.is-active > .nav-link .menu-icon::before {
      background-image: linear-gradient(to right, #da8cff, #9a55ff);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .purple-dashboard-container .table .order-actions .btn .mdi {
    color: #ffffff !important; /* Force the icon color to be white */
    font-size: 1rem; /* Adjust icon size if needed */
}
a.btn.btn-gradient-primary.btn-sm {
    color: #fff !important;
}
.badge{
    font-size: 12px;
    padding: 10px;
    
}

/* --- Fix navbar logo area --- */
.purple-dashboard-container .navbar .navbar-brand-wrapper .navbar-brand {
    color: #27367f;
    font-size: 1.5rem;
    line-height: 48px;
    margin-right: 0;
    padding: 0.25rem 0;
    width: 100%;
    text-align: left;
    padding-left: 1.25rem;
}
.purple-dashboard-container .navbar .navbar-brand-wrapper .navbar-brand img {
    width: 100%;
    max-width: 100%;
    height: 28px;
    margin: auto;
    vertical-align: middle;
}

/* --- Fix hamburger icon sidebar --- */
.purple-dashboard-container button {
    transition: 
        transform 0.2s ease,
        box-shadow 0.3s ease;
}
.purple-dashboard-container button:focus {
    background-color: unset !important;
}
.purple-dashboard-container button:hover {
    background-color: unset !important;
    text-decoration: none;
    transform: translateY(-2px) scale(1.03);
}

table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color: hsl(0deg 0% 100% / 7.1%) !important;
}

.woocommerce-MyAccount-navigation-link--services .menu-title .iccad-new-service-badge {
  flex: 0 0 auto;
  margin-left: 6px;
}

.iccad-new-service-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 5px;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  background: #e63946;
  border-radius: 9999px;
  position: relative;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.iccad-new-service-badge::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(230,57,70,.55);
  animation:iccad-badge-pulse 1.6s ease-out infinite;
  pointer-events:none;
}

@keyframes iccad-badge-pulse{
  0%   { box-shadow:0 0 0 0 rgba(230,57,70,.55); }
  70%  { box-shadow:0 0 0 10px rgba(230,57,70,0); }
  100% { box-shadow:0 0 0 0 rgba(230,57,70,0); }
}

.iccad-new-service-badge{
  animation:iccad-badge-pop 1.6s ease-in-out infinite;
  will-change:transform;
}
@keyframes iccad-badge-pop{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.06); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .iccad-new-service-badge,
  .iccad-new-service-badge::after{
    animation:none !important;
  }
}


.woocommerce-MyAccount-navigation-link--services .menu-title .igcad-new-service-badge {
  flex: 0 0 auto;
  margin-left: 6px;
}

.igcad-new-service-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 5px;
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  background: #e63946;
  border-radius: 9999px;
  position: relative;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.igcad-new-service-badge::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(230,57,70,.55);
  animation:iccad-badge-pulse 1.6s ease-out infinite;
  pointer-events:none;
}

@keyframes iccad-badge-pulse{
  0%   { box-shadow:0 0 0 0 rgba(230,57,70,.55); }
  70%  { box-shadow:0 0 0 10px rgba(230,57,70,0); }
  100% { box-shadow:0 0 0 0 rgba(230,57,70,0); }
}

.igcad-new-service-badge{
  animation:iccad-badge-pop 1.6s ease-in-out infinite;
  will-change:transform;
}
@keyframes iccad-badge-pop{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.06); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .igcad-new-service-badge,
  .igcad-new-service-badge::after{
    animation:none !important;
  }
}


/*
 * FINAL Fixes for WooCommerce Login Form Styling
 */

/* The .auth class is present on our form-login.php template.
   We will use it as the main hook. The !important declarations are
   necessary to override WooCommerce's default stylesheets. */

/* Style the main login button to match the theme's gradient */
.auth .auth-form-light button.woocommerce-button {
    background: linear-gradient(to right, #da8cff, #9a55ff) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out;
    padding: 1rem 2rem !important; /* Ensure padding is correct */
}

/* Add the hover shadow effect */
.auth .auth-form-light button.woocommerce-button:hover {
    box-shadow: 0 4px 15px 0 rgba(218, 140, 255, 0.75) !important;
    color: #ffffff !important;
}

/* Style the "Forgot password?" and "Create" links */
.auth .auth-form-light a {
    color: #9a55ff !important; /* Use the theme's primary purple */
    text-decoration: none !important;
}

.auth .auth-form-light a:hover {
    text-decoration: underline !important;
}

/* Style the form input fields (Username and Password) */
.auth .auth-form-light .form-control {
    background-color: #fbfbfb !important;
    border: 1px solid #e6e6e6 !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 0.875rem 1.375rem !important;
    font-size: 0.875rem !important;
    border-radius: 4px !important;
    color: #333 !important;
}

/* Style the "Keep me signed in" checkbox and label */
.auth .auth-form-light .form-check-label {
    color: #6c757d !important; /* Use the theme's muted text color */
}

.auth .auth-form-light .form-check-input {
    border-color: #cecece !important;
    margin-top: 0.2em;
}

.auth .auth-form-light .form-check-input:checked {
    background-color: #9a55ff !important;
    border-color: #9a55ff !important;
}

form.pt-3.woocommerce-form.woocommerce-form-login.login {
    border: unset;
}
.auth-form-light.text-left.p-5 {
    border-radius: 20px;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    float: left;
    margin-right: 0px !important;
}

/*
 * FINAL Elegant Styling for the "View Order" Page
 */

/* Style the main "Order details" heading to match the theme */
.purple-dashboard-container section.woocommerce-order-details > .woocommerce-order-details__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #343a40;
    margin-bottom: 1.5rem;
}

/* Target the main order details table and remove all default borders */
.purple-dashboard-container table.woocommerce-table--order-details,
.purple-dashboard-container table.woocommerce-table--order-details th,
.purple-dashboard-container table.woocommerce-table--order-details td {
    border: none !important;
}

/* Style the table header (thead) with the light purple background */
.purple-dashboard-container table.woocommerce-table--order-details thead {
    background-color: #f9f7ff;
}

.purple-dashboard-container table.woocommerce-table--order-details thead th {
    font-weight: 500;
    color: #343a40;
    padding: 1rem;
    text-align: left;
}

/* Style the table body (tbody) and footer (tfoot) rows */
.purple-dashboard-container table.woocommerce-table--order-details tbody tr,
.purple-dashboard-container table.woocommerce-table--order-details tfoot tr {
    border-bottom: 1px solid #ebedf2; /* Add ONLY a bottom border to the entire row */
}

/* Remove the bottom border from the very last row in the table for a clean finish */
.purple-dashboard-container table.woocommerce-table--order-details tfoot tr:last-of-type {
    border-bottom: none;
}

.purple-dashboard-container table.woocommerce-table--order-details td {
    padding: 1rem;
    vertical-align: middle;
}

/* Style the Billing and Shipping Address section */
.purple-dashboard-container .woocommerce-customer-details {
    margin-top: 3rem; /* Add more space above the addresses */
}

.purple-dashboard-container .woocommerce-customer-details h2 {
    font-size: 1.125rem;
    font-weight: 500;
    color: #343a40;
    margin-bottom: 1rem;
}

.purple-dashboard-container .woocommerce-customer-details address {
    line-height: 1.6;
    color: #6c757d;
    font-style: normal; /* Remove italics from address */
    border: 1px solid #ebedf2; /* Add a light border around the address block */
    padding: 1rem;
    border-radius: 4px;
}

/*
 * ===================================================================
 * Polished Styling for the Downloads Search Bars (KBIS + Visure)
 * ===================================================================
 */

/* Scoped for the Custom Woo Dashboard (Purple) */
.purple-dashboard-container .card #kbis-search-input,
.purple-dashboard-container .card #visura-search-input {
  background-color: #fbfbfb;
  border: 1px solid #ebedf2;
  border-radius: 4px;
  padding: 0.8rem 1.2rem;
  color: #343a40;
  transition: all 0.2s ease-in-out;
}

.purple-dashboard-container .card #kbis-search-input::placeholder,
.purple-dashboard-container .card #visura-search-input::placeholder {
  color: #b0b0b0;
  font-weight: 400;
}

.purple-dashboard-container .card #kbis-search-input:focus,
.purple-dashboard-container .card #visura-search-input:focus {
  background-color: #ffffff;
  border-color: #d0a7ff;
  box-shadow: 0 0 0 0.2rem rgba(154, 85, 255, 0.25);
  outline: 0;
}

/* -------- Optional fallback (non-Purple pages) -------- */
#kbis-search-input,
#visura-search-input {
  background-color: #fbfbfb;
  border: 1px solid #ebedf2;
  border-radius: 4px;
  padding: 0.8rem 1.2rem;
  color: #343a40;
  transition: all 0.2s ease-in-out;
}

#kbis-search-input::placeholder,
#visura-search-input::placeholder {
  color: #b0b0b0;
  font-weight: 400;
}

#kbis-search-input:focus,
#visura-search-input:focus {
  background-color: #ffffff;
  border-color: #c7d2fe; /* softer fallback */
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.20);
  outline: 0;
}

/*
 * ===================================================================
 * FINAL CSS for Edit Address Form (Floating Labels & Country Refresh)
 * ===================================================================
 */

/* Row wrapper */
.purple-dashboard-container .woocommerce-address-fields .form-row {
    position: relative;
    margin-bottom: 1.5rem;
}

/* Inputs / selects */
.purple-dashboard-container .woocommerce-address-fields .form-row input,
.purple-dashboard-container .woocommerce-address-fields .form-row select,
.purple-dashboard-container .select2-container--default .select2-selection--single {
    border: 1px solid #ebedf2 !important;
    border-radius: 8px !important;
    padding: 1.1rem 0.95rem !important;  /* extra top room for floating label */
    height: auto !important;
    background: #fff !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    width: 100%;
}

/* Select2 visual */
.purple-dashboard-container .select2-container--default .select2-selection--single {
    padding: 0.7rem 0.95rem !important;
}

/* Labels (come BEFORE the control in Woo) */
.purple-dashboard-container .woocommerce-address-fields .form-row > label {
    position: absolute;
    top: 0.9rem;
    left: 0.8rem;
    font-size: 0.95rem;
    color: #999;
    background: #fff;
    padding: 0 6px;
    pointer-events: none;
    transition: all .18s ease-in-out;
    margin: 0;
}

/* Floating state */
.purple-dashboard-container .woocommerce-address-fields .form-row.is-focused > label,
.purple-dashboard-container .woocommerce-address-fields .form-row.has-value > label {
    top: -0.55rem;
    left: 0.6rem;
    font-size: 0.75rem;
    color: #9a55ff;
    z-index: 999;
}


/* Hide (optional) indicator in label */
.purple-dashboard-container .woocommerce-address-fields .form-row > label .optional {
    display: none;
}

/* Floating state: on focus or when field has value */
.purple-dashboard-container .woocommerce-address-fields .form-row.is-focused > label,
.purple-dashboard-container .woocommerce-address-fields .form-row.has-value > label {
    top: -0.55rem;
    left: 0.6rem;
    font-size: 0.75rem;
    color: #9a55ff;
    z-index: 999;
}

/* Focus ring */
.purple-dashboard-container .woocommerce-address-fields .form-row.is-focused input,
.purple-dashboard-container .woocommerce-address-fields .form-row.is-focused select,
.purple-dashboard-container .woocommerce-address-fields .form-row.is-focused .select2-selection--single {
    border-color: #9a55ff !important;
    box-shadow: 0 0 0 0.2rem rgba(154, 85, 255, 0.18) !important;
    outline: 0;
}

/* Error state alignment (Woo adds .woocommerce-invalid) */
.purple-dashboard-container .woocommerce-address-fields .form-row.woocommerce-invalid input,
.purple-dashboard-container .woocommerce-address-fields .form-row.woocommerce-invalid select,
.purple-dashboard-container .woocommerce-address-fields .form-row.woocommerce-invalid .select2-selection--single {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.15) !important;
}



/*
 * ===================================================================
 * FINAL Styling for All Payment Method Pages & Notices
 * ===================================================================
 */

/* --- General Styling for WooCommerce Notices --- */
/* This rule will make ALL notices (success, info, error) beautiful */
.purple-dashboard-container .woocommerce-notices-wrapper .woocommerce-message,
.purple-dashboard-container .woocommerce-notices-wrapper .woocommerce-info,
.purple-dashboard-container .card .woocommerce-info,
.purple-dashboard-container .woocommerce-notices-wrapper .woocommerce-error {
    border-radius: 8px !important;
    border-left-width: 5px !important;
    padding: 1rem 1.5rem !important;
    margin-bottom: 2rem !important;
    background-color: #f8f9fa !important;
}

/* Style the "info" notice (e.g., "No saved methods") */
.purple-dashboard-container .woocommerce-info {
    border-left-color: #9a55ff !important; /* Purple */
}
.purple-dashboard-container .woocommerce-info::before {
    color: #9a55ff !important;
}

/* Style the "success" notice (e.g., "Address saved successfully") */
.purple-dashboard-container .woocommerce-message {
    border-left-color: #19d895 !important; /* Green */
}
.purple-dashboard-container .woocommerce-message::before {
    color: #19d895 !important;
}

/* Style the "error" notice */
.purple-dashboard-container .woocommerce-error {
    border-left-color: #fe527a !important; /* Red */
}
.purple-dashboard-container .woocommerce-error::before {
    color: #fe527a !important;
}


/* --- Styling for Payment Methods Page --- */

/* Style the "Add payment method" button on the overview page */
.purple-dashboard-container .card-body > a.button {
    background: linear-gradient(to right, #da8cff, #9a55ff) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 4px;
    padding: 0.8rem 1.5rem;
    font-weight: 500;
    margin-top: 1.5rem;
    display: inline-block;
}

/* Style the main "Add payment method" form container on its own page */
.purple-dashboard-container .card #add_payment_method {
    border-top: 1px solid #ebedf2;
    padding-top: 2rem;
    margin-top: 2rem;
}

/* Style the submit button on the Add Payment Method page */
.purple-dashboard-container .card #add_payment_method .woocommerce-Button.button {
    background: linear-gradient(to right, #da8cff, #9a55ff) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 4px;
    padding: 0.8rem 1.5rem;
    font-weight: 500;
}

/*
 * ===================================================================
 * FINAL, Corrected Styling for All WooCommerce Notices
 * ===================================================================
 */

/* Base style for all notice boxes */
.purple-dashboard-container .card .woocommerce-info,
.purple-dashboard-container .card .woocommerce-message,
.purple-dashboard-container .card .woocommerce-error {
    position: relative; /* Required for absolute positioning of the icon */
    background-color: #fdfcff !important;
    border: 1px solid #e9e1f8 !important;
    border-left-width: 5px !important;
    border-radius: 8px !important;
    margin: 0 0 1.5rem 0 !important;
    color: #495057 !important;
    list-style: none !important;
    
    /* THE FIX: Adjust padding to make room for the icon */
    padding: 1.25rem 1.5rem 1.25rem 3.5rem !important; 
}

/* Position and style the icon using the ::before pseudo-element */
.purple-dashboard-container .card .woocommerce-info::before,
.purple-dashboard-container .card .woocommerce-message::before,
.purple-dashboard-container .card .woocommerce-error::before {
    position: absolute;
    top: 50%;
    left: 1rem; /* Position it within the new padding area */
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
}

/* --- Color Specifics --- */
.purple-dashboard-container .card .woocommerce-info { border-left-color: #9a55ff !important; }
.purple-dashboard-container .card .woocommerce-info::before { color: #9a55ff !important; }
.purple-dashboard-container .card .woocommerce-message { border-left-color: #19d895 !important; }
.purple-dashboard-container .card .woocommerce-message::before { color: #19d895 !important; }
.purple-dashboard-container .card .woocommerce-error { border-left-color: #fe527a !important; }
.purple-dashboard-container .card .woocommerce-error::before { color: #fe527a !important; }

/*
 * ===================================================================
 * FINAL, CSS-ONLY Styling for Payment Method "Delete" Button
 * ===================================================================
 */

/* Target the default WooCommerce "Delete" link */
.purple-dashboard-container .wc-payment-method-actions a.button.delete {
    /* 1. Apply the theme's button base styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Makes it a circle */
    width: 32px;
    height: 32px;
    padding: 0;
    
    /* 2. Apply the red gradient background */
    background: linear-gradient(to right, #fe7c96, #fe527a) !important;
    border: none;
    
    /* 3. Hide the original "Delete" text */
    font-size: 0;
    color: transparent;
    
    /* 4. Add the trash can icon using a ::before pseudo-element */
    position: relative;
}

.purple-dashboard-container .wc-payment-method-actions a.button.delete::before {
    /* Use the Material Design Icons font */
    font-family: "Material Design Icons";
    content: "\F0A7A"; /* This is the MDI code for the trash-can icon */
    
    /* 5. Style the icon */
    font-size: 1rem;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*
 * ===================================================================
 * Elegant Styling for the "Add Payment Method" Form
 * ===================================================================
 */

/* Style the container for the payment gateway options (e.g., "Credit Card") */
.purple-dashboard-container .card #add_payment_method ul.wc_payment_methods {
    list-style: none;
    padding-left: 0;
    border-bottom: 1px solid #ebedf2;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

/* Style the actual form fields container that appears when you select a method */
.purple-dashboard-container .card #add_payment_method .payment_box {
    background-color: #fbfbfb !important;
    padding: 1.5rem !important;
    border-radius: 8px;
    margin-top: 1rem;
}

/* Style the final "Add payment method" submit button */
.purple-dashboard-container .card #add_payment_method .woocommerce-Button.button {
    background: linear-gradient(to right, #da8cff, #9a55ff) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 4px;
    padding: 0.8rem 1.5rem;
    font-weight: 500;
    margin-top: 1.5rem;
}

/* General styling for input fields within the form */
.purple-dashboard-container .card #add_payment_method .form-row input.input-text {
    border: 1px solid #ebedf2 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    height: auto !important;
    width: 100%;
}

/*
 * ================================================================
 * Elegant Styling for "Add Payment Method" (Stripe UPE compatible)
 * ================================================================
 */

/* Container for the entire form */
.purple-dashboard-container .card #add_payment_method {
    margin-top: .5rem;
  }
  
  /* Normalize the gateway block */
  .purple-dashboard-container .card #add_payment_method .wc_payment_method {
    border: 1px solid #ebedf2;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    background: #fff;
  }
  
  /* Test mode notice */
  .purple-dashboard-container .card #add_payment_method .wc_payment_method .testmode-info {
    background: #f8f5ff;
    border: 1px dashed #e7dcff;
    color: #6f42c1;
    padding: .75rem 1rem;
    border-radius: 8px;
    margin: 0 0 1rem 0;
  }
  
  /* Stripe UPE field wrapper (the element that hosts the iframe) */
  .purple-dashboard-container .card #add_payment_method .wc-stripe-upe-element,
  .purple-dashboard-container .card #add_payment_method .wc-upe-form .StripeElement {
    border: 1px solid #ebedf2 !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: .9rem !important;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  
  /* Focus ring for the element (Stripe toggles focus on the container) */
  .purple-dashboard-container .card #add_payment_method .wc-upe-form .StripeElement--focus,
  .purple-dashboard-container .card #add_payment_method .wc-upe-form .is-focused .StripeElement {
    border-color: #9a55ff !important;
    box-shadow: 0 0 0 0.2rem rgba(154, 85, 255, 0.18) !important;
    outline: 0;
  }
  
  /* Error state */
  .purple-dashboard-container .card #add_payment_method #wc-stripe-upe-errors,
  .purple-dashboard-container .card #add_payment_method .woocommerce-error,
  .purple-dashboard-container .card #add_payment_method .wc-stripe-error,
  .purple-dashboard-container .card #add_payment_method .StripeElement--invalid {
    color: #c0392b;
  }
  
  .purple-dashboard-container .card #add_payment_method .StripeElement--invalid {
    border-color: #fe527a !important;
    box-shadow: 0 0 0 0.2rem rgba(254, 82, 122, 0.12) !important;
  }
  
  /* Space the fieldset nicely */
  .purple-dashboard-container .card #add_payment_method fieldset.wc-upe-form {
    margin: .25rem 0 0;
    padding: 0;
    border: 0;
  }
  
  /* General inputs inside the form (fallback for non-UPE fields) */
  .purple-dashboard-container .card #add_payment_method .form-row input.input-text {
    border: 1px solid #ebedf2 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    height: auto !important;
    width: 100%;
  }
  
  /* Submit button */
  .purple-dashboard-container .card #add_payment_method .woocommerce-Button.button,
  .purple-dashboard-container .card #add_payment_method .button.btn.btn-gradient-primary,
  .purple-dashboard-container .card #add_payment_method #place_order.button {
    background: linear-gradient(to right, #da8cff, #9a55ff) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: .8rem 1.5rem !important;
    font-weight: 600;
    margin-top: 1.25rem;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  }
  
  .purple-dashboard-container .card #add_payment_method .woocommerce-Button.button:hover,
  .purple-dashboard-container .card #add_payment_method .button.btn.btn-gradient-primary:hover,
  .purple-dashboard-container .card #add_payment_method #place_order.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(154, 85, 255, 0.25);
    opacity: .95;
  }
  
  /* Optional: style the gateway container list if present */
  .purple-dashboard-container .card #add_payment_method ul.wc_payment_methods {
    list-style: none;
    padding-left: 0;
    border-bottom: 1px solid #ebedf2;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }
  
  /* Optional: add spacing between multiple gateways (if enabled later) */
  .purple-dashboard-container .card #add_payment_method .wc_payment_method + .wc_payment_method {
    margin-top: 1rem;
  }
  
  /* Payment section wrapper spacing */
  .purple-dashboard-container .card #add_payment_method #payment.woocommerce-Payment {
    margin-top: .75rem;
  }

  #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: rgb(255 255 255 / 0%) !important;
    border-radius: 5px;
  }  

 

  /*
 * ================================================================
 * ICCAD PLUGINEXCLUSIVE STYLES
 * ================================================================
 */


/* ================================
   ICCAD – IDs Strip (P.IVA / CF)
   ================================ */
   .iccad-order-ids {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    margin: 1rem 0 1.25rem;
    background: #ffffff;
    border: 1px solid #ebedf2;
    border-radius: 12px;
  }
  
  .purple-dashboard-container .card .iccad-order-ids {
    background: #ffffff;                 /* keep light */
    border: 1px solid #ebedf2;
  }
  
  .iccad-id-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8f9fc;
    border: 1px solid #eef1f6;
  }
  
  .iccad-id-chip i.mdi {
    font-size: 18px;
    color: #9a55ff;                      /* Purple primary */
    line-height: 1;
  }
  
  .iccad-id-label {
    font-weight: 600;
    color: #4b5563;
  }
  
  .iccad-id-key {
    font-weight: 600;
    color: #374151;
  }
  
  .iccad-id-value {
    color: #111827;
  }
  
  /* =========================================
     ICCAD – Status Cards (Light Theme)
     ========================================= */
  
  /* wrapper keeps space around cards */
  .iccad-status-wrap { margin: 1.25rem 0 2rem; }
  
  /* Light card base */
  .iccad-status-card {
    border-radius: 16px;
    padding: 22px;
    display: block;
    background: #ffffff;
    border: 1px solid #ebedf2;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    color: #2b2f33;
  }
  
  /* Ensure light card in Purple container too */
  .theme-purple .iccad-status-card {
    background: #ffffff;
    border: 1px solid #ebedf2;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    color: #2b2f33;
  }
  
  /* Layout */
  .iccad-status-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "media text actions";
    gap: 20px;
    align-items: center;
  }
  
  /* Waiting layout */
  .iccad-status-card.is-waiting .iccad-status-content {
    grid-template-columns: 160px 1fr;
    grid-template-areas: "media text";
  }
  
  .iccad-status-media {
    grid-area: media;
    display: flex; align-items: center; justify-content: center;
  }
  
  .iccad-status-text { grid-area: text; }
  
  .iccad-status-title {
    margin: 0 0 .25rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .2px;
    color: #1f2937;
  }
  
  .iccad-status-subtitle,
  .iccad-status-message {
    margin: 0;
    font-size: .96rem;
    color: #4b5563;
  }
  
  /* Ready header */
  .iccad-status-header {
    grid-area: text;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  
  /* Success icon (mdi) */
  .iccad-status-icon.ic-success {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #e6f9f2;
    border: 1px solid #c9f1e4;
    color: #059669; /* emerald-600 */
  }
  
  .iccad-status-icon.ic-success .mdi {
    font-size: 22px;
    line-height: 1;
  }
  
  /* Actions */
  .iccad-status-actions { grid-area: actions; }
  
  /* Download button (gradient, mdi icon) */
  .iccad-btn-download-lg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .2px;
    transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
    box-shadow: 0 8px 18px rgba(154,85,255,.22);
    background: linear-gradient(to right, #da8cff, #9a55ff);
    color: #fff;
  }
  
  .iccad-btn-download-lg:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(154,85,255,.32);
    opacity: .98;
  }
  
  .iccad-btn-download-lg .mdi { font-size: 20px; line-height: 1; }
  
  /* Responsive */
  @media (max-width: 680px) {
    .iccad-status-content {
      grid-template-columns: 1fr;
      grid-template-areas: "media" "text" "actions";
      text-align: center;
    }
    .iccad-status-header { justify-content: center; }
    .iccad-status-actions { margin-top: 10px; }
    .iccad-btn-download-lg {
      width: 100%;
      justify-content: center;
    }
  }
  
  /* Subtle animated border glow only for waiting (light variant) */
  .iccad-status-card.is-waiting {
    position: relative; overflow: hidden;
  }
  .iccad-status-card.is-waiting::after {
    content: "";
    position: absolute; inset: -1px; border-radius: 16px; padding: 1px;
    background:
      radial-gradient(1200px 1200px at 10% -20%, rgba(154,85,255,.12), transparent 40%),
      radial-gradient(900px 900px at 100% 20%, rgba(99,102,241,.12), transparent 35%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
    animation: iccadGlowLight 4s ease-in-out infinite;
  }
  @keyframes iccadGlowLight {
    0%, 100% { opacity: .5; }
    50%      { opacity: .9; }
  }

/*
 * ===================================================================
 * FINAL, ROBUST STYLING for Dropdowns & Buttons on Edit Address Page
 * ===================================================================
 */

/* --- 1. Styling for Enhanced Dropdowns (Select2) --- */

/* Main container for the dropdown */
.purple-dashboard-container .select2-container {
    width: 100% !important; /* Force full width */
}

/* The visible part of the dropdown before it's opened */
.purple-dashboard-container .select2-container--default .select2-selection--single {
    border: 1px solid #ebedf2 !important;
    border-radius: 8px !important;
    height: auto !important;
    background-color: #fff !important;
    padding: 0.95rem !important; /* Vertical alignment fix */
}

/* Text inside the dropdown */
.purple-dashboard-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #495057 !important;
    line-height: 1.5 !important;
    padding-left: 0 !important;
}

/* The dropdown arrow */
.purple-dashboard-container .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    position: absolute;
    top: 0;
    right: 10px; /* Adjust spacing */
    width: 20px;
}

/* Focus state for the dropdown */
.purple-dashboard-container .form-row.is-focused .select2-container--default .select2-selection--single {
    border-color: #9a55ff !important;
    box-shadow: 0 0 0 0.2rem rgba(154, 85, 255, 0.18) !important;
}

/* The actual dropdown panel that opens */
.select2-dropdown {
    border: 1px solid #ebedf2 !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Search bar inside the dropdown */
.select2-search--dropdown .select2-search__field {
    border: 1px solid #ebedf2 !important;
    border-radius: 4px !important;
    padding: 0.75rem !important;
}

/* Highlighted/selected option */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected {
    background-color: #9a55ff !important;
    color: white !important;
}


/* --- 2. Styling for the "Save Address" and "Cancel" Buttons --- */

/* Base style for BOTH buttons to ensure consistent size and alignment */
.purple-dashboard-container .woocommerce-address-fields .button,
.purple-dashboard-container .woocommerce-address-fields .btn-light {
    padding: 0.8rem 1.5rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    border: none !important; /* Remove default borders */
    box-shadow: none !important; /* Remove default shadows */
    text-transform: none !important; /* Prevent uppercase text */
    font-size: 0.875rem;
    line-height: 1.5;
    transition: all 0.2s ease-in-out;
}

/* Specific style for the PRIMARY "Save Address" button */
.purple-dashboard-container .woocommerce-address-fields button.button[name="save_address"] {
    background: linear-gradient(to right, #da8cff, #9a55ff) !important;
    color: #ffffff !important;
}

/* Hover effect for the primary button */
.purple-dashboard-container .woocommerce-address-fields button.button[name="save_address"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(154, 85, 255, 0.25) !important;
}

/* Specific style for the SECONDARY "Cancel" button */
.purple-dashboard-container .woocommerce-address-fields a.btn-light {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #ebedf2 !important; /* Add a light border for definition */
}

/* Hover effect for the secondary button */
.purple-dashboard-container .woocommerce-address-fields a.btn-light:hover {
    background-color: #f1f3f5 !important;
    border-color: #dee2e6 !important;
}

/*
 * ===================================================================
 * FINAL FIX for "Save changes" and Other Primary Buttons
 * ===================================================================
 */

/*
  This rule targets any WooCommerce button that is also meant to be a
  primary gradient button, but only inside your dashboard's cards.
  This makes it specific enough to override the general theme styles.
*/
.purple-dashboard-container .card .woocommerce-Button.btn-gradient-primary {
    /* 1. Force the correct background and text color */
    background: linear-gradient(to right, #da8cff, #9a55ff) !important;
    color: #ffffff !important;

    /* 2. Remove the unwanted border and shadow from the generic style */
    border: none !important;
    box-shadow: none !important;

    /* 3. Enforce consistent padding, font, and border-radius */
    padding: 0.8rem 1.5rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    text-transform: none !important; /* Optional: keeps text in normal case */
    line-height: 1.5;
    
    /* 4. Add a smooth transition for the hover effect */
    transition: all 0.2s ease-in-out;
}

.sidebar .nav .nav-item.is-active > .nav-link .menu-title, .sidebar .nav .nav-item.is-active > .nav-link .menu-icon {
    background-image: linear-gradient(to right, #da8cff, #9a55ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color:unset !important;
    color: transparent;
}

/* ================================
   ICCAD – "Ordina di nuovo" button
   ================================ */

/* container spacing + alignment */
.purple-dashboard-container .card .order-again {
    margin: 1rem 0 0.25rem;
    text-align: right; /* change to left if you prefer */
  }
  
  /* themed gradient button */
  .purple-dashboard-container .card .order-again .button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(to right, #da8cff, #9a55ff);
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(154,85,255,.22);
    transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
  }
  
  /* mdi icon via pseudo-element (requires MDI font already loaded by the dashboard) */
  .purple-dashboard-container .card .order-again .button::before {
    font-family: "Material Design Icons";
    content: "\F0453"; /* mdi-reload */
    font-size: 18px;
    line-height: 1;
  }
  
  /* hover / focus / active states */
  .purple-dashboard-container .card .order-again .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(154,85,255,.32);
    opacity: .98;
  }
  .purple-dashboard-container .card .order-again .button:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(154,85,255,.22);
  }
  .purple-dashboard-container .card .order-again .button:focus {
    outline: none;
    box-shadow:
      0 0 0 0.2rem rgba(154,85,255,.25),
      0 10px 22px rgba(154,85,255,.28);
  }
  
  /* mobile: make it full-width and center the container */
  @media (max-width: 680px) {
    .purple-dashboard-container .card .order-again { text-align: center; }
    .purple-dashboard-container .card .order-again .button {
      width: 100%;
      justify-content: center;
    }
  }


    /* Keep number + unit on one line and centered */
.purple-dashboard-container .card .iccad-countdown-number {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;                 /* was grid */
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    white-space: nowrap !important;           /* prevent 60 / s wrap */
    font-weight: 800 !important;
    color: #1f2937 !important;
  }
  
  .purple-dashboard-container .card .iccad-countdown-number .secs {
    font-size: 22px;
    line-height: 1;
  }
  
  .purple-dashboard-container .card .iccad-countdown-number .unit {
    font-size: 14px;               /* slightly smaller unit */
    line-height: 1;
    margin-left: 2px;
  }
  
  /* Give the note a little more gap under the circle */
  .purple-dashboard-container .card .iccad-countdown-note {
    bottom: -25px !important;                 /* was -8px */
    white-space: nowrap;           /* keep “60s” together here, too */
  }
  
  /* (Optional a11y) reduce motion: freeze the border glow */
  @media (prefers-reduced-motion: reduce) {
    .iccad-status-card.is-waiting::after { animation: none; opacity: .6; }
  }

/* ===== Purple-only: waiting card with 3 columns (media | text | timer) ===== */
.purple-dashboard-container .card .iccad-status-card.is-waiting .iccad-status-content {
    grid-template-columns: 160px 1fr 160px;
    grid-template-areas: "media text timer";
  }
  .purple-dashboard-container .card .iccad-status-media { grid-area: media; }
  .purple-dashboard-container .card .iccad-status-text  { grid-area: text; }
  .purple-dashboard-container .card .iccad-status-timer {
    grid-area: timer;
    display: flex; align-items: center; justify-content: center;
  }
  
  /* Circular countdown */
  .purple-dashboard-container .card .iccad-countdown { position: relative; width: 140px; height: 140px; }
  .purple-dashboard-container .card .iccad-countdown-ring { width: 140px; height: 140px; transform: rotate(-90deg); }
  .purple-dashboard-container .card .iccad-countdown .ring-bg   { fill: none; stroke: #eef1f6; stroke-width: 10; }
  .purple-dashboard-container .card .iccad-countdown .ring-prog { fill: none; stroke: #9a55ff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 339.292; stroke-dashoffset: 0; transition: stroke-dashoffset .25s linear; }
  .purple-dashboard-container .card .iccad-countdown-number {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;                 /* was grid */
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    white-space: nowrap !important;           /* prevent 60 / s wrap */
    font-weight: 800 !important;
    color: #1f2937 !important;
  }  
  .purple-dashboard-container .card .iccad-countdown-note .mdi { font-size: 14px; vertical-align: -2px; }
  
  /* Mobile: stack timer under text */
  @media (max-width: 680px) {
    .purple-dashboard-container .card .iccad-status-card.is-waiting .iccad-status-content {
      grid-template-columns: 1fr;
      grid-template-areas: "media" "text" "timer";
      text-align: center;
    }
    .purple-dashboard-container .card .iccad-status-timer { margin-top: 10px; }
  }  


/* ===================================================================
   FINAL v3: COMPLETE THEME-ADAPTED NOTIFICATION STYLES
   =================================================================== */

/* ===========================
   1. Navbar Bell & Indicator
   =========================== */
   .navbar .cwd-notifs .cwd-bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; transition: transform 0.15s ease;
  }
  .navbar .cwd-notifs .cwd-bell:hover { transform: scale(1.03); }
  .navbar .cwd-notifs .cwd-bell .mdi { font-size: 22px; color: #4b5563; }
  .navbar .cwd-notifs .cwd-bell-dot {
    position: absolute; right: -2px; top: -2px;
    width: 10px; height: 10px; border-radius: 50%;
    background: linear-gradient(to right, #da8cff, #9a55ff);
    box-shadow: 0 0 0 4px rgba(154, 85, 255, 0.18);
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .navbar .cwd-notifs.has-unread .cwd-bell-dot { opacity: 1; transform: scale(1); }
  @keyframes cwd-bell-shake { 0% { transform: rotate(0deg); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } }
  .navbar .cwd-notifs.shake .cwd-bell { animation: cwd-bell-shake 0.9s ease both; transform-origin: 50% 5%; }
  
 
/* ===========================
   2. Notification Dropdown Panel -- WITH FIX
   =========================== */
   .cwd-notifs-panel {
    position: absolute !important; /* Crucial for positioning */
    top: 70%; /* FIX: Anchor the top of the panel to the bottom of the navbar item */
    right: 0; /* Align to the right */
    width: 360px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid #ebedf2;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-top: 0.75rem;
    /* Prevent interaction until shown */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  /* Style for when the panel is shown on hover */
  .cwd-notifs-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .cwd-notifs-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #ffffff; border-bottom: 1px solid #ebedf2;
    position: relative; z-index: 1; /* Keep header above the scrolling list */
  }
  .cwd-notifs-title { font-weight: 700; color: #1f2937; }
  .cwd-notifs-header .cwd-read-all {
    border: none; outline: none; font-family: inherit; margin: 0; text-shadow: none; -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 8px; font-size: 0.8rem; font-weight: 600; text-decoration: none;
    line-height: 1.5; cursor: pointer; background: linear-gradient(to right, #da8cff, #9a55ff);
    color: #fff !important; box-shadow: 0 4px 10px rgba(154, 85, 255, 0.15);
    transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  }
  .cwd-notifs-header .cwd-read-all:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(154, 85, 255, 0.25); opacity: 0.98; }
  .cwd-notifs-list {
    /* FIX: Dynamically calculate max-height using CSS variables set by JS */
    max-height: 380px; 
    overflow-y: auto; 
    background-color: #f8f9fc;
  }  .cwd-notifs-empty { padding: 24px 16px; text-align: center; color: #6b7280; font-size: 0.95rem; background-color: #f8f9fc; }
  
  /* ===========================
     3. Individual Notification Item
     =========================== */
  .cwd-notif-item {
    display: flex; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid #ebedf2; background-color: #ffffff;
  }
  .cwd-notif-item:last-child { border-bottom: none; }
  .cwd-notif-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
    background: #f8f9fc; border: 1px solid #eef1f6;
    color: #9a55ff; /* Default color */
  }
  .cwd-notif-body { flex: 1; min-width: 0; }
  .cwd-notif-title { font-weight: 600; color: #1f2937; margin: 0; font-size: 0.97rem; }
  .cwd-notif-msg { margin: 2px 0 0; color: #4b5563; font-size: 0.9rem; line-height: 1.4; }
  .cwd-notif-meta { margin-top: 4px; color: #9aa0a6; font-size: 0.78rem; }
  .cwd-notif-item.unread .cwd-notif-title { color: #111827; }
  .cwd-notif-actions { display: flex; align-items: flex-start; }
  .cwd-notif-item .cwd-mark-read {
    outline: none; font-family: inherit; margin: 0; text-shadow: none; -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e8eaf0;
    color: #6b7280; background: #fff !important; cursor: pointer; transition: all 0.2s ease;
  }
  .cwd-notif-item .cwd-mark-read:hover { color: #059669; border-color: #c9f1e4; background: #e6f9f2 !important; transform: scale(1.05); }
  
  /* ===========================
     4. Notification Type Styles
     =========================== */
  .cwd-notif-item .cwd-notif-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  
  /* --- Color definitions for DOTS and ICONS --- */
  /* Success (Green) */
  .cwd-notif-item.type-success .cwd-notif-type-dot { background-color: #10b981; }
  .cwd-notif-item.type-success .cwd-notif-icon { background-color: #e6f9f2; color: #059669; }
  /* Warning (Amber) */
  .cwd-notif-item.type-warning .cwd-notif-type-dot { background-color: #f59e0b; }
  .cwd-notif-item.type-warning .cwd-notif-icon { background-color: #fffbeb; color: #d97706; }
  /* Error (Red) */
  .cwd-notif-item.type-error .cwd-notif-type-dot { background-color: #ef4444; }
  .cwd-notif-item.type-error .cwd-notif-icon { background-color: #fee2e2; color: #dc2626; }
  /* Info (Blue) */
  .cwd-notif-item.type-info .cwd-notif-type-dot { background-color: #3b82f6; }
  .cwd-notif-item.type-info .cwd-notif-icon { background-color: #dbeafe; color: #2563eb; }
  /* Default (Purple) */
  .cwd-notif-item.type-default .cwd-notif-type-dot { background-color: #9a55ff; }
  .cwd-notif-item.type-default .cwd-notif-icon { background-color: #f5f3ff; color: #6a5acd; }
  
  /* ===========================
     5. Toast Notification (Popup)
     =========================== */
  #cwd-toast { position: fixed; z-index: 1055; top: 90px; right: 24px; pointer-events: none; }
  .cwd-toast-item {
    min-width: 280px; max-width: 360px; background: #ffffff;
    border: 1px solid #ebedf2; border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    padding: 14px 16px; margin-bottom: 12px; display: flex; gap: 12px;
    opacity: 0; transform: translateX(20px);
    transition: all 0.25s ease-in-out; pointer-events: auto;
  }
  .cwd-toast-item.show { opacity: 1; transform: translateX(0); }
  .cwd-toast-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(to right, #da8cff, #9a55ff); color: #fff;
  }
  .cwd-toast-title { font-weight: 700; margin: 0; color: #1f2937; font-size: 0.95rem; }
  .cwd-toast-msg { margin: 2px 0 0; color: #4b5563; font-size: 0.88rem; }
  
  /* --- Toast Icon Colors --- */
  #cwd-toast .cwd-toast-item.type-success .cwd-toast-icon { background: #10b981; }
  #cwd-toast .cwd-toast-item.type-warning .cwd-toast-icon { background: #f59e0b; }
  #cwd-toast .cwd-toast-item.type-error   .cwd-toast-icon { background: #ef4444; }
  #cwd-toast .cwd-toast-item.type-info    .cwd-toast-icon { background: #3b82f6; }
  
  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .navbar .cwd-notifs.shake .cwd-bell, .cwd-read-all:hover, .cwd-mark-read:hover, .cwd-toast-item {
      animation: none; transition: none; transform: none;
    }
  }

  .cwd-form-section {
    clear: both; /* This is the critical property that fixes the layout */
    width: 100%;
    box-sizing: border-box;
}

/*
 * ===================================================================
 * Shake Animation for Highlighting Incomplete Sections
 * ===================================================================
 */
 .shake-animation {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
10%, 90% {
  transform: translate3d(-1px, 0, 0);
}

20%, 80% {
  transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
  transform: translate3d(-4px, 0, 0);
}

40%, 60% {
  transform: translate3d(4px, 0, 0);
}
}


/* ================================================================
   ICCAD PLUGIN INTEGRATION STYLES
   ================================================================ */

/* --- 1. Adapt the Search Component to the Card --- */

.purple-dashboard-container .card #ic-company-search {
  max-width: none;
  margin: 0;
  padding: 0;
}
.purple-dashboard-container .card #ic-company-search .ic-input-group {
  border-radius: 12px;
  border: 1px solid #ebedf2;
  box-shadow: none;
  height: 56px;
  margin-bottom: 1.5rem;
  display: flex; /* Ensure flexbox is used for layout */
}
.purple-dashboard-container .card #ic-company-search .ic-input-group:focus-within {
  border-color: #9a55ff;
  box-shadow: 0 0 0 3px rgba(154, 85, 255, 0.2);
}
.purple-dashboard-container .card #ic-company-search[data-mode="results"] {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* --- 2. Adapt the Results Table --- */

.purple-dashboard-container .card .ic-results-table {
  margin-top: 0 !important;
  border: 1px solid #ebedf2;
  border-radius: 12px;
  width: 100%;
}
.purple-dashboard-container .card .ic-results-table thead th {
  background: #f8f9fa;
  color: #343a40;
  border-bottom-width: 2px !important;
  padding: 1rem;
}
.purple-dashboard-container .card .ic-results-table tbody tr {
  background-color: #ffffff !important;
  border-bottom: 1px solid #ebedf2;
}
.purple-dashboard-container .card .ic-results-table tbody tr:last-of-type {
  border-bottom: none;
}
.purple-dashboard-container .card .ic-results-table tbody tr:hover {
  background-color: #f9f7ff !important;
}
.purple-dashboard-container .card .ic-results-table td,
.purple-dashboard-container .card .ic-results-table th {
   color: #000000 !important;
   padding: 1rem;
   vertical-align: middle;
}

/* --- 3. Adapt the Action Buttons to Match the Purple Theme --- */

.purple-dashboard-container .card .ic-btn--details,
.purple-dashboard-container .card .ic-btn--buy {
  background: linear-gradient(to right, #da8cff, #9a55ff);
  color: #ffffff !important;
  border-color: transparent;
  padding: 0.75rem 1rem;
}
.purple-dashboard-container .card .ic-btn--details:hover,
.purple-dashboard-container .card .ic-btn--buy:hover {
  box-shadow: 0 4px 15px 0 rgba(218, 140, 255, 0.75) !important;
}
.purple-dashboard-container .card .ic-results-pagination .ic-visura-btn {
  background: linear-gradient(to right, #da8cff, #9a55ff);
  padding: 0.8rem 1.5rem;
}

/* --- 4. Adapt the Expandable Details Row --- */

.purple-dashboard-container .card .icd-hdr {
  color: #27367f;
}
.purple-dashboard-container .card .icd-headbar .ic-btn {
  font-size: 0.875rem;
}
.purple-dashboard-container .card .icd-wrap {
    background: #ffffff;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
}
.purple-dashboard-container .card .icd-left {
    flex: 1 1 60%;
}
.purple-dashboard-container .card .icd-map {
    flex: 1 1 40%;
    min-height: 250px;
}
.purple-dashboard-container .card .icd-map iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #ebedf2;
    border-radius: 12px;
}


/* --- Other Styles --- */
.ic-input-group .select2-container--default .select2-selection--single {
    height: 100% !important;
    width: 100%;
    display: flex;
    align-items: center;
    border: none !important;
    border-left: 1px solid #dee2e6 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    outline: none;
}
.ic-input-group .ic-search-btn:hover {
    background: #b53029 !important;
}
/* Give the main text input flex properties to grow */
#ic-company-name {
    flex: 1 1 auto;
    min-width: 0; /* Prevents overflow issues in flex containers */
    border: none;
    background: transparent;
    padding: 0 1rem;
    font-size: 1rem;
}
#ic-company-name:focus {
    outline: none;
}


/* ================================================================
 5. MOBILE RESPONSIVE STYLES
 ================================================================ */

 @media screen and (max-width: 768px) {
  /* Hide the table header on mobile */
  .purple-dashboard-container .card .ic-results-table thead {
      display: none;
  }

  /* Make table elements block-level */
  .purple-dashboard-container .card .ic-results-table,
  .purple-dashboard-container .card .ic-results-table tbody,
  .purple-dashboard-container .card .ic-results-table tr,
  .purple-dashboard-container .card .ic-results-table td {
      display: block;
      width: 100%;
  }

  /* Style rows to look like cards */
  .purple-dashboard-container .card .ic-results-table tr {
      margin-bottom: 1.5rem;
      border: 1px solid #ebedf2;
      border-radius: 12px;
      overflow: hidden;
  }
  .purple-dashboard-container .card .ic-results-table tr:last-child {
      margin-bottom: 0;
  }
  .purple-dashboard-container .card .ic-results-table tbody tr {
      border-bottom: none;
  }

  /* Style the cells */
  .purple-dashboard-container .card .ic-results-table td {
      text-align: right;
      position: relative;
      padding-left: 50%;
      border-bottom: 1px solid #ebedf2;
      font-size: 0.9rem;
  }
  .purple-dashboard-container .card .ic-results-table td:last-of-type {
      border-bottom: 0;
  }

  /* Add the data label before the cell content */
  .purple-dashboard-container .card .ic-results-table td:before {
      content: attr(data-label);
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      width: calc(50% - 2rem);
      text-align: left;
      font-weight: bold;
      color: #343a40;
      font-size: 0.9rem;
  }

  /* Center the action buttons in their cell */
  .purple-dashboard-container .card .ic-results-table td:last-of-type {
      text-align: center;
      padding: 1rem;
  }
  .purple-dashboard-container .card .ic-results-table td:last-of-type .ic-action-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
  }
   .purple-dashboard-container .card .ic-results-table td:last-of-type .ic-btn {
      width: 100%;
  }

  /* Hide the label for the actions cell */
  .purple-dashboard-container .card .ic-results-table td:last-of-type:before {
      display: none;
  }

  /* Stack details and map on mobile */
  .purple-dashboard-container .card .icd-wrap {
      flex-direction: column;
      padding: 1rem;
  }

  .purple-dashboard-container .card .icd-map {
      height: 250px;
  }

  /* Adjustments for Details Grid on Mobile */
  .purple-dashboard-container .card .icd-data-grid strong,
  .purple-dashboard-container .card .icd-data-grid span {
      display: block;
      width: 100%;
      text-align: left;
  }
  .purple-dashboard-container .card .icd-data-grid strong {
      font-size: 0.875rem;
      color: #343a40;
      margin-top: 0.75rem;
  }
  .purple-dashboard-container .card .icd-data-grid span {
      font-size: 0.875rem;
      color: #000000;
      margin-bottom: 0.25rem;
      word-wrap: break-word;
  }
  .purple-dashboard-container .card .icd-data-grid strong:first-of-type {
      margin-top: 0;
  }

  /* --- NEW: Search Bar Adjustments on Mobile --- */
  .purple-dashboard-container .card #ic-company-search .ic-input-group {
      height: auto; /* Allow height to be flexible */
  }

  /* Make the text input field take up the most space */
  .purple-dashboard-container .card #ic-company-search .ic-input-group #ic-company-name {
      flex-grow: 1; /* Allow this item to grow */
      flex-basis: 50%; /* Start at 50% width */
      height: 54px; /* Maintain vertical size */
  }

  /* Constrain the width of the province selector */
  .purple-dashboard-container .card #ic-company-search .ic-input-group .select2-container {
      flex-grow: 0; /* Do not allow to grow */
      flex-shrink: 0; /* Do not allow to shrink */
      flex-basis: 120px; /* Set a fixed base width */
  }
}

 /*
 * ================================================================
 * IGCAD PLUGINEXCLUSIVE STYLES
 * ================================================================
 */

/*
 * ===================================================================
 * FINAL, CORRECTED Styling for IGCAD Plugin Integration
 * ===================================================================
 */

/* --- 1. Adapt the Search Component to the Card --- */

.purple-dashboard-container .card #ig-company-search {
  max-width: none;
  margin: 0;
  padding: 0;
}
.purple-dashboard-container .card #ig-company-search .ig-input-group {
  border-radius: 12px;
  border: 1px solid #ebedf2;
  box-shadow: none;
  height: 56px;
  margin-bottom: 1.5rem;
  display: flex; /* Ensure flexbox is used for layout */
}
.purple-dashboard-container .card #ig-company-search .ig-input-group:focus-within {
  border-color: #9a55ff;
  box-shadow: 0 0 0 3px rgba(154, 85, 255, 0.2);
}
.purple-dashboard-container .card #ig-company-search[data-mode="results"] {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* --- 2. Adapt the Results Table --- */

.purple-dashboard-container .card .ig-results-table {
  margin-top: 0 !important;
  border: 1px solid #ebedf2;
  border-radius: 12px;
  width: 100%;
}
.purple-dashboard-container .card .ig-results-table thead th {
  background: #f8f9fa;
  color: #343a40;
  border-bottom-width: 2px !important;
  padding: 1rem;
}
.purple-dashboard-container .card .ig-results-table tbody tr {
  background-color: #ffffff !important;
  border-bottom: 1px solid #ebedf2;
}
.purple-dashboard-container .card .ig-results-table tbody tr:last-of-type {
  border-bottom: none;
}
.purple-dashboard-container .card .ig-results-table tbody tr:hover {
  background-color: #f9f7ff !important;
}
.purple-dashboard-container .card .ig-results-table td,
.purple-dashboard-container .card .ig-results-table th {
   color: #000000 !important;
   padding: 1rem;
   vertigal-align: middle;
}

/* --- 3. Adapt the Action Buttons to Match the Purple Theme --- */

.purple-dashboard-container .card .ig-btn--details,
.purple-dashboard-container .card .ig-btn--buy {
  background: linear-gradient(to right, #da8cff, #9a55ff);
  color: #ffffff !important;
  border-color: transparent;
  padding: 0.75rem 1rem;
}
.purple-dashboard-container .card .ig-btn--details:hover,
.purple-dashboard-container .card .ig-btn--buy:hover {
  box-shadow: 0 4px 15px 0 rgba(218, 140, 255, 0.75) !important;
}
.purple-dashboard-container .card .ig-results-pagination .ig-visura-btn {
  background: linear-gradient(to right, #da8cff, #9a55ff);
  padding: 0.8rem 1.5rem;
}

/* --- 4. Adapt the Expandable Details Row --- */

.purple-dashboard-container .card .igd-hdr {
  color: #27367f;
}
.purple-dashboard-container .card .igd-headbar .ig-btn {
  font-size: 0.875rem;
}
.purple-dashboard-container .card .igd-wrap {
    background: #ffffff;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
}
.purple-dashboard-container .card .igd-left {
    flex: 1 1 60%;
}
.purple-dashboard-container .card .igd-map {
    flex: 1 1 40%;
    min-height: 250px;
}
.purple-dashboard-container .card .igd-map iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #ebedf2;
    border-radius: 12px;
}


/* --- Other Styles --- */
.ig-input-group .select2-container--default .select2-selection--single {
    height: 100% !important;
    width: 100%;
    display: flex;
    align-items: center;
    border: none !important;
    border-left: 1px solid #dee2e6 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    outline: none;
}
.ig-input-group .ig-search-btn:hover {
    background: #b53029 !important;
}
/* Give the main text input flex properties to grow */
#ig-company-name {
    flex: 1 1 auto;
    min-width: 0; /* Prevents overflow issues in flex containers */
    border: none;
    background: transparent;
    padding: 0 1rem;
    font-size: 1rem;
}
#ig-company-name:focus {
    outline: none;
}


/* ================================================================
 5. MOBILE RESPONSIVE STYLES
 ================================================================ */

 @media screen and (max-width: 768px) {
  /* Hide the table header on mobile */
  .purple-dashboard-container .card .ig-results-table thead {
      display: none;
  }

  /* Make table elements block-level */
  .purple-dashboard-container .card .ig-results-table,
  .purple-dashboard-container .card .ig-results-table tbody,
  .purple-dashboard-container .card .ig-results-table tr,
  .purple-dashboard-container .card .ig-results-table td {
      display: block;
      width: 100%;
  }

  /* Style rows to look like cards */
  .purple-dashboard-container .card .ig-results-table tr {
      margin-bottom: 1.5rem;
      border: 1px solid #ebedf2;
      border-radius: 12px;
      overflow: hidden;
  }
  .purple-dashboard-container .card .ig-results-table tr:last-child {
      margin-bottom: 0;
  }
  .purple-dashboard-container .card .ig-results-table tbody tr {
      border-bottom: none;
  }

  /* Style the cells */
  .purple-dashboard-container .card .ig-results-table td {
      text-align: right;
      position: relative;
      padding-left: 50%;
      border-bottom: 1px solid #ebedf2;
      font-size: 0.9rem;
  }
  .purple-dashboard-container .card .ig-results-table td:last-of-type {
      border-bottom: 0;
  }

  /* Add the data label before the cell content */
  .purple-dashboard-container .card .ig-results-table td:before {
      content: attr(data-label);
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      width: calc(50% - 2rem);
      text-align: left;
      font-weight: bold;
      color: #343a40;
      font-size: 0.9rem;
  }

  /* Center the action buttons in their cell */
  .purple-dashboard-container .card .ig-results-table td:last-of-type {
      text-align: center;
      padding: 1rem;
  }
  .purple-dashboard-container .card .ig-results-table td:last-of-type .ig-action-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
  }
   .purple-dashboard-container .card .ig-results-table td:last-of-type .ig-btn {
      width: 100%;
  }

  /* Hide the label for the actions cell */
  .purple-dashboard-container .card .ig-results-table td:last-of-type:before {
      display: none;
  }

  /* Stack details and map on mobile */
  .purple-dashboard-container .card .igd-wrap {
      flex-direction: column;
      padding: 1rem;
  }

  .purple-dashboard-container .card .igd-map {
      height: 250px;
  }

  /* Adjustments for Details Grid on Mobile */
  .purple-dashboard-container .card .igd-data-grid strong,
  .purple-dashboard-container .card .igd-data-grid span {
      display: block;
      width: 100%;
      text-align: left;
  }
  .purple-dashboard-container .card .igd-data-grid strong {
      font-size: 0.875rem;
      color: #343a40;
      margin-top: 0.75rem;
  }
  .purple-dashboard-container .card .igd-data-grid span {
      font-size: 0.875rem;
      color: #000000;
      margin-bottom: 0.25rem;
      word-wrap: break-word;
  }
  .purple-dashboard-container .card .igd-data-grid strong:first-of-type {
      margin-top: 0;
  }

  /* --- NEW: Search Bar Adjustments on Mobile --- */
  .purple-dashboard-container .card #ig-company-search .ig-input-group {
      height: auto; /* Allow height to be flexible */
  }

  /* Make the text input field take up the most space */
  .purple-dashboard-container .card #ig-company-search .ig-input-group #ig-company-name {
      flex-grow: 1; /* Allow this item to grow */
      flex-basis: 50%; /* Start at 50% width */
      height: 54px; /* Maintain vertigal size */
  }

  /* Constrain the width of the province selector */
  .purple-dashboard-container .card #ig-company-search .ig-input-group .select2-container {
      flex-grow: 0; /* Do not allow to grow */
      flex-shrink: 0; /* Do not allow to shrink */
      flex-basis: 120px; /* Set a fixed base width */
  }
}


/* ===================================================
   IGCAD KBIS Status Cards - NEW Elegant Design
   =================================================== */

/* --- Wrapper --- */
.igcad-status-wrap {
  margin: 2rem 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Card Base --- */
.igcad-status-card {
  border-radius: 18px;
  padding: 28px 32px;
  background: #ffffff;
  border: 1px solid #e5e7eb; /* Cool Gray 200 */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-in-out;
}

/* --- Content Layout --- */
.igcad-status-content {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* --- Media (Lottie) --- */
.igcad-status-media {
  flex-shrink: 0;
}
.igcad-status-media lottie-player {
  width: 140px !important;
  height: 140px !important;
}


/* --- Text Content --- */
.igcad-status-text {
  flex-grow: 1;
}

.igcad-status-title {
  margin: 0 0 8px 0;
  font-size: 1.4rem; /* 22px */
  font-weight: 700;
  color: #111827; /* Cool Gray 900 */
  letter-spacing: -0.5px;
}

.igcad-status-message {
  margin: 0;
  font-size: 1rem; /* 16px */
  color: #4b5563; /* Cool Gray 600 */
  line-height: 1.6;
}

.igcad-status-message strong {
  color: #1f2937; /* Cool Gray 800 */
}


/* ===================================================
   STATE 1: IS-WAITING (Processing)
   =================================================== */

.igcad-status-card.is-waiting {
  background: linear-gradient(105deg, #f9fafb 0%, #f3f4f6 100%); /* Subtle gray gradient */
}

/* Animated Aurora Borealis Border */
.igcad-status-card.is-waiting::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
    border: 1px solid transparent;
    background: linear-gradient(120deg, #818cf8, #c084fc, #f472b6) border-box; /* Indigo, Purple, Pink */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 0;
    animation: igcad-aurora-glow 6s linear infinite;
}

@keyframes igcad-aurora-glow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* ===================================================
   STATE 2: IS-READY (Success)
   =================================================== */

/* --- Action Button --- */
.igcad-status-actions {
  margin-top: 1.25rem;
}

.igcad-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: linear-gradient(45deg, #6d28d9, #9333ea); /* Purple 700 to 600 */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1),
              0 0 0 0 rgba(147, 51, 234, 0.4); /* Shadow for animation */
  transition: all 0.3s ease;
}

.igcad-btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1),
              0 0 0 8px rgba(147, 51, 234, 0); /* Expand shadow on hover */
  animation: igcad-pulse 1.5s infinite;
}

.igcad-btn-download i {
  font-size: 1.25rem; /* MDI icon size */
  transition: transform 0.3s ease;
}

.igcad-btn-download:hover i {
  transform: scale(1.1);
}

/* Pulse animation for the button shadow */
@keyframes igcad-pulse {
  0% {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1), 0 0 0 0 rgba(147, 51, 234, 0.4);
  }
  70% {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1), 0 0 0 10px rgba(147, 51, 234, 0);
  }
  100% {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1), 0 0 0 0 rgba(147, 51, 234, 0);
  }
}


/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 768px) {
  .igcad-status-content {
    flex-direction: column;
    text-align: center;
  }
  .igcad-status-title {
      font-size: 1.25rem;
  }
  .igcad-status-message {
      font-size: 0.95rem;
  }
  .igcad-btn-download {
      width: 100%;
      justify-content: center;
  }
}