/*
 Theme Name:   cme theme
 Theme URI:    https://cybersos247.co.uk/wp-content/themes/cme-theme/
 Description:  Cyber Made Easy Theme
 Author:       Neil H
 Author URI:   https://cybersos247.co.uk/wp-content/themes/cme-theme/
 Template:     storefront
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  cme-theme
*/

/*a.button, 
button.button, 
input.button, 
#review_form #submit {
  background:black; 
}*/


/*strong {
    font-weight: 600;
}*/

a:focus,
.focus a {
	outline: none !important;
}


/*#select2-num_in_household-container {
	padding: .6180469716em;
}*/


/* ========== Article Card Heading Hover Decoration START ==========*/

/*.elementor-post__title a {
  background-image: linear-gradient(
    to right,
    #2a2a2a,
    #2a2a2a 50%,
    #ffffff 50% 
  );
}

.elementor-post__title a {
  background-image: linear-gradient(
    to right,
    #2a2a2a,
    #2a2a2a 50%,
    #ffffff 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
}

.elementor-post__title a {
  background-image: linear-gradient(
    to right,
    #2a2a2a,
    #2a2a2a 50%,
    #ffffff 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.elementor-post__title a:before {
  content: '';
  background: #ffffff;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
}

.elementor-post__title a:hover {
 background-position: 0;
}

.elementor-post__title a:hover::before {
  width: 100%;
}

.elementor-post__title a {
  background-image: linear-gradient(
    to right,
    #2a2a2a,
    #2a2a2a 50%,
    #ffffff 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}*/

/* ========== Article Card Heading Hover Decoration END ==========*/

.footer-w3c {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.footer-ssl a {
	color: #ff7900 !important;
}

.footer-ssl a:hover {
	color: #000000 !important;
}

.elementor-element-1ef6aa9 h2 {
	font-family: 'Raleway' !important;
	text-transform: uppercase;
}

.wpforms-field-label {
    font-family: 'Mulish' !important;
	font-size: 1.1em !important;
    font-weight: 600 !important;
}

#wpforms-submit-9977 {
	background-color: #A78D4B !important;
	border-radius: 6px !important;
	color: #fff !important;
}

#wpforms-submit-9977:hover {
	background-color: #2B5F92 !important;
	border-radius: 6px !important;
	color: #fff !important;
}

/* ** HIBP Email and Domain Breach Lookup Form and Response Table stying START ** */

/* Lookup Box Container */
#hibp-container {
  max-width: 450px;
  margin: 30px auto;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Mulish', sans-serif;
  text-align: center;
}

/* Heading */
#hibp-container h2 {
  color: #24405A;
  font-size: 22px;
  margin-bottom: 10px;
}

/* Description */
#hibp-container p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

/* Email Input & Button Wrapper */
.hibp-form {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Email Input */
#hibp-email, #hibp-password, #hibp-domain {
  width: 70%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}

/* Button */
#hibp-check-btn, #hibp-check-password-btn, #hibp-check-domain-btn {
  width: 30%;
  padding: 10px;
  font-size: 16px;
  background-color: #417E90;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#hibp-check-btn:hover, #hibp-check-password-btn:hover, #hibp-check-domain-btn:hover {
  background-color: #24405A;
}

/* Hide the inline results */
#hibp-result {
  display: none;
}

/* Full-Width Results Container */
#hibp-results-container, #hibp-domain-results-container {
  max-width: 100%;
  overflow-x: auto; /* Allows scrolling if content exceeds container */
  padding: 20px;
}

/* Table Styling */
#hibp-table, #hibp-domain-table {
  width: 100%;
  max-width: 100%; /* Prevents table from overflowing */
  /*table-layout: fixed; /* Ensures columns distribute evenly */
  word-wrap: break-word;
  font-family: 'Mulish', sans-serif;
  font-size: 0.8em;
  border-collapse: collapse;
}

#hibp-table th, #hibp-table td, #hibp-domain-table th, #hibp-domain-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
  white-space: nowrap;
}

#hibp-table th, #hibp-domain-table th {
  background-color: #417E90;
  color: white;
}

#hibp-table th, #hibp-table td,
#hibp-domain-table th, #hibp-domain-table td {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

/* ✅ MOBILE-FRIENDLY STYLING (FOR SCREENS BELOW 768px) */
@media (max-width: 768px) {

    /* 🟢 Stack input field and button vertically */
    .hibp-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    /* 🟢 Make input field full-width with proper height */
    .hibp-form input {
        width: 90% !important;
        padding: 10px;
        font-size: 14px;
        height: auto; /* Ensures it doesn’t get too tall */
        border-radius: 5px;
    }

    /* 🟢 Fix the button height and shape */
    .hibp-form button {
        width: 80% !important;
        padding: 14px; /* Ensures comfortable tap area */
        font-size: 16px;
        height: auto;
        border-radius: 8px; /* Makes it more rounded for better UI */
        background-color: #417E90;
        color: white;
        border: none;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.1s ease-in-out;
        box-sizing: border-box; /* Ensures padding doesn't shrink button */
      }

      /* 🟢 Button hover and tap effect */
      .hibp-form button:hover {
        background-color: #24405A;
      }

      .hibp-form button:active {
        transform: scale(0.98); /* Slight press effect */
      }


      /* 🟢 Adjust lookup container to fit screen width */
      #hibp-container {
        width: 90% !important;
        margin: 20px auto;
        padding: 15px;
      }

      /* 🟢 Stack table fields vertically */
      #hibp-table, #hibp-domain-table {
        width: 100%;
        border-collapse: collapse;
      }

      /* 🟢 Hide table headers on mobile */
      #hibp-table thead, #hibp-domain-table thead {
        display: none;
      }

      /* 🟢 Make each row behave like a separate block */
      #hibp-table tbody tr, 
      #hibp-domain-table tbody tr {
          display: block;
          margin-bottom: 15px;
          border: 1px solid #ddd;
          padding: 10px;
          background-color: #f9f9f9;
          border-radius: 5px;
      }

      /* 🟢 Display table cells in block format */
      #hibp-table td, 
      #hibp-domain-table td {
          display: block;
          text-align: left;
          padding: 5px;
          word-wrap: break-word;
          white-space: normal; /* Allows text to wrap naturally */
      }

      /* 🟢 Make the first cell (which was previously the column header) bold */
      #hibp-table td::before, 
      #hibp-domain-table td::before {
          font-weight: bold;
          display: block;
          color: #333;
      }

      /* 🟢 Assign custom column names as pseudo-elements */
      #hibp-table td:nth-child(1)::before, #hibp-domain-table td:nth-child(1)::before {
          content: "Breach Name:";
      }

      #hibp-table td:nth-child(2)::before, #hibp-domain-table td:nth-child(2)::before {
          content: "Domain:";
      }

      #hibp-table td:nth-child(3)::before, #hibp-domain-table td:nth-child(3)::before {
          content: "Breach Date:";
      }

      #hibp-table td:nth-child(4)::before, #hibp-domain-table td:nth-child(4)::before {
          content: "Affected Accounts:";
      }

      #hibp-table td:nth-child(5)::before, #hibp-domain-table td:nth-child(5)::before {
          content: "Data Compromised:";
      }

      /* 🟢 Fix text overflow issues */
      #hibp-table td, #hibp-domain-table td {
          overflow-wrap: break-word;
          word-wrap: break-word;
          white-space: normal;
      }
}

/* ** HIBP Email and Domain Breach Lookup Form and Response table stying END ** */

/* ** HIBP Password Breach Lookup Form and Response table stying START ** */

/* ✅ Center the response container */
#hibp-password-results-container {
  max-width: 450px; /* Matches lookup form width */
  margin: 20px auto; /* Centers it horizontally */
  padding: 15px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Mulish', sans-serif;
  display: none; /* Hidden by default, shown when response is received */
}

/* ✅ Styling for the response message */
#hibp-password-results-container h2 {
  font-size: 20px;
  color: #417E90;
  margin-bottom: 10px;
}

/* ✅ Styling for the response text */
#hibp-password-results-container p {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

/* ✅ If the password is found in breaches, highlight it in red */
#hibp-password-results-container .breached {
  color: #d9534f;
  font-weight: bold;
}

/* ✅ If the password is NOT found, highlight in green */
#hibp-password-results-container .safe {
  color: #28a745;
  font-weight: bold;
}

/* ✅ Improve responsiveness */
@media (max-width: 600px) {
  #hibp-password-results-container {
      max-width: 90%;
      padding: 10px;
  }
}

/* ** HIBP Password Breach Lookup Form and Response table stying END ** */

/* ACTIVSCAN Risk dial */
.actv-risk-dial { width: 300px; max-width: 100%; margin: 8px 0 16px; }
.actv-risk-dial svg { display: block; width: 100%; height: auto; }
.actv-risk-legend { display:flex; gap:10px; align-items:center; font-size:.9rem; color:#374151; margin-top:6px; }
.actv-risk-legend .dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.actv-risk-legend .red { background:#ef4444; } .actv-risk-legend .amber { background:#f59e0b; } .actv-risk-legend .green { background:#22c55e; }

/* VIVO Subscription Dates Plug-in Styling */

.vsd-helpline { color: #b60000; display: inline-block; margin-top: .25rem; }
.vsd-inline-date { font-weight: 700; }

/* PRODUCT PAGE — block with label + date */
.vsd-start-date {
  /*margin: .75rem 0 0;*/
  font-size: 1.2rem;           /* tweak size */
  line-height: 1.35;
  color: #54595F;            /* base text colour */
}

/* The label (“Cyber Emergency Helpline …”) */
.vsd-start-date .vsd-date-label {
  font-weight: 600;          /* bold label */
  display: inline-block;     /* keeps <br> working nicely */
  margin-right: .25rem;
  font-family: "Raleway", sans-serif;
}

/* The live-updating date value */
.vsd-start-date .vsd-date-value {
  font-weight: 500;
  font-family: "Mulish", sans-serif;
  white-space: nowrap;       /* keeps date on one line, optional */
}

/* Inline text-only date ([wsm_start_date_live_text]) */
.vsd-inline-date {
  font-weight: 600;
  white-space: nowrap;       /* keeps date on one line, optional */
}

/* CART / CHECKOUT block */
.vsd-start-date.vsd-cart {
  margin: .4rem 0 0;
  font-size: .95rem;
  text-transform: none;      /* guard against theme uppercasing */
}

/* ORDER (thank-you / My Account) block */
.vsd-start-date.vsd-order {
  margin-top: .4rem;
  font-size: .95rem;
}

/* Optional: a “subtle” skin you can assign via class="vsd-start-date vsd-subtle" */
.vsd-start-date.vsd-subtle {
  background: #f6f7f9;
  border-radius: 6px;
  padding: .5rem .6rem;
}