/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: Child theme for Blocksy
Author: Your Name
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/

/* Your custom CSS goes below */

/*
 * Start CSS for Modern Exam Info Shortcode
 */

/* ==========================================================================
   PREMIUM SAAS EXAM INFO INTERFACE (PRO FULL-STACK DESIGN)
   ========================================================================== */

.pro-exam-container {
    width: 100%;
    margin: 30px 0;
    padding: 26px;
    background: #003366;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

/* Header Area styling */
.pro-exam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pro-exam-container p.pro-exam-main-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #ffffff !important;
    margin: 0 !important;
    text-transform: none;
}

/* Trust-building live update pulse badge */
.pro-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(46, 213, 115, 0.12);
    border: 1px solid rgba(46, 213, 115, 0.25);
    color: #2ed573;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pro-pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #2ed573;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.7);
    animation: proPulse 1.8s infinite;
}

@keyframes proPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(46, 213, 115, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 213, 115, 0); }
}

/* Grid Matrix layout core engine */
.pro-exam-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pro-grid-item {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pro-grid-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

/* Modifiers for wide blocks */
.item-fullwidth {
    grid-column: span 2;
}

.pro-item-inner {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

/* Pure CSS Minimalist Indicator Bars instead of old emojis */
.pro-indicator-accent {
    width: 3px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    flex-shrink: 0;
}
.pro-grid-item:hover .pro-indicator-accent {
    background-color: #10b981; /* Turns into your clean corporate green on hover */
}
.accent-green {
    background-color: #2ed573 !important;
}

.pro-meta-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pro-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.4);
}

.pro-value {
    font-size: 14px;
    font-weight: 500;
    color: #e2e8f0;
}

/* Specialized Text treatments */
.highlighting-text {
    color: #ffffff;
    font-weight: 700;
}

.pro-date-highlight {
    color: #f1f5f9;
}

.questions-count {
    color: #2ed573;
    font-weight: 700;
}

/* Custom code badge inside layout */
.pro-badge-code {
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}

/* Premium Bottom Highlight Panel Modification */
.highlights-panel {
    background: linear-gradient(to right, rgba(46, 213, 115, 0.05), transparent);
}

/* ==========================================================================
   RESPONSIVE DESIGN (BREAKPOINTS)
   ========================================================================== */

@media (max-width: 768px) {
    .pro-exam-grid {
        grid-template-columns: 1fr; /* Switch to single stack layout elegantly on tablets/mobiles */
    }
    .item-fullwidth {
        grid-column: span 1;
    }
    .item-fullwidth-mobile {
        grid-column: span 1;
    }
    .pro-exam-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .pro-live-badge {
        align-self: flex-start;
    }
}

/*
 * End CSS for Modern Exam Info Shortcode
 */

/**
 * Start All Vendor Page
 */
 
/* Main container for the certifications page */
.vendor-certs-container {
  padding: 30px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #333333; /* Adjusted dark text for light theme */
}

/* Search bar positioning and wrapper */
.search-bar-wrapper {
  position: relative;
  max-width: 550px;
  margin: 0 auto 45px;
}

#cert-search {
  width: 100%;
  padding: 14px 20px 14px 50px; /* Left padding ensures space for the icon */
  border: 1px solid #cccccc;
  border-radius: 30px; 
  background-color: #ffffff;
  color: #333333;
  font-size: 16px;
  outline: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
  display: block;
}

#cert-search:focus {
  border-color: #1ea847; /* Matches brand green */
  box-shadow: 0 0 8px rgba(30, 168, 71, 0.3);
}

/* Positioning the search icon inside the input */
.search-icon-svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none; /* Allows user to click "through" the icon onto the input */
}

/* Placeholder text styling */
#cert-search::placeholder {
  color: #999999;
  opacity: 1;
}

/* Grid layout for the category boxes */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
  gap: 24px;
  justify-content: center;
}

/* Individual category box styling (Deep Navy Theme) */
.cert-box {
  background-color: #002855; /* Matches header navy blue */
  border: 1px solid #001f42;
  border-radius: 10px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  display: block; 
}

/* Interactive Hover state changes to brand green */
.cert-box:hover {
  background-color: #1ea847; /* Transitions to brand green on hover */
  border-color: #198f3c;
  transform: translateY(-4px); 
  box-shadow: 0 8px 20px rgba(30, 168, 71, 0.25);
}

.cert-name {
  color: #ffffff;
  font-size: 19px;
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 600;
}

.cert-exams {
  color: #e2e8f0; /* Soft off-white text for readability */
  font-size: 14px;
  margin: 0;
  font-weight: 400;
}

/* Message for when no categories are found */
.vendor-certs-container .no-results-msg {
  text-align: center;
  font-size: 18px;
  color: #666666;
  grid-column: 1 / -1; /* spans full width of grid */
  margin-top: 20px;
}

/**
 * End All Vendor Page
 */
 
   /**
 * Start Header Section
 */
 
/* ==========================================================================
   PROFESSIONAL HEADER LAYOUT
   ========================================================================== */
.my-custom-header {
    background-color: #003366; /* Deep Professional Blue */
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.custom-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}

.custom-logo img {
    max-width: 180px;
    height: auto;
    display: block;
}

/* --- 1. White Search Bar Fixes --- */
.custom-search {
    flex: 0 1 500px;
    margin: 0 30px;
    position: relative; /* CRITICAL: Keeps live search results locked perfectly beneath the bar */
}

.custom-search form {
    display: flex;
    position: relative;
    align-items: center;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
}

.search-icon-inside {
    color: #888888;
    position: absolute;
    left: 12px;
    font-size: 18px;
}

.custom-search input[type="search"] {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border: none;
    background: transparent;
    color: #333333;
    font-size: 14px;
    outline: none;
}

/* Input placeholder text color styling */
.custom-search input[type="search"]::placeholder {
    color: #777777 !important;
    opacity: 1;
}

.custom-search .search-submit {
    background-color: #28a745; /* Vibrant Green */
    color: #ffffff;
    border: none;
    padding: 0 25px;
    height: 100%;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.custom-search .search-submit:hover {
    background-color: #1e7e34;
}

/* ==========================================================================
   LIVE AUTOCOMPLETE HEADER SEARCH DROPDOWN STYLES
   ========================================================================== */
.cn-live-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-top: 5px;
    box-shadow: 0 10px 25px rgba(0, 51, 102, 0.15);
    z-index: 99999;
    max-height: 400px;
    overflow-y: auto;
}

.cn-search-group-title {
    background: #f8fafc;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    letter-spacing: 0.5px;
}

.cn-search-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none !important;
    transition: background 0.15s ease;
}

.cn-search-item-row:last-child {
    border-bottom: none;
}

.cn-search-item-row:hover {
    background: #f0fdf4; /* Very soft match with your brand green */
}

.cn-search-meta-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 85%;
    text-align: left;
}

.cn-search-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #003366; /* Deep Professional Blue */
}

.cn-search-item-row:hover .cn-search-item-title {
    color: #28a745; /* Turns text Green on row hover */
}

.cn-search-item-badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    margin-bottom: 2px;
}

.cn-search-action-arrow {
    color: #cbd5e1;
    font-size: 16px;
    font-weight: bold;
    transition: transform 0.15s ease, color 0.15s ease;
}

.cn-search-item-row:hover .cn-search-action-arrow {
    color: #28a745;
    transform: translateX(3px);
}

.cn-search-loader, .cn-search-no-results {
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* --- 2. Action Utilities --- */
.custom-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.custom-actions a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s;
}

.custom-actions a:hover {
    color: #28a745;
}

/* --- 3. Mini Cart Dropdown System --- */
.custom-cart-wrapper {
    position: relative !important;
    display: flex !important; /* CRITICAL: Forces layout tracking metrics to render inside guest/incognito states */
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
}

.cart-icon-link {
    display: flex !important;
    align-items: center;
    text-decoration: none !important;
    cursor: pointer !important; /* Force interactive hand pointer even without an href link */
}

/* Premium Wrapper for Vector SVG Cart */
.cn-premium-cart-icon-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.cn-modern-cart-svg {
    width: 24px;
    height: 24px;
    color: #ffffff; /* Crisp White Match with Header Text */
    transition: color 0.2s ease, transform 0.2s ease;
}

.custom-cart-wrapper:hover .cn-modern-cart-svg {
    color: #28a745; /* Interactive Brand Green Hover Accent */
    transform: scale(1.05);
}

/* Polished Floating Numeric Counter Badge Layout */
.cart-count {
    background-color: #28a745;
    color: #ffffff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1.5px solid #003366; /* Clean border using header primary color context */
    padding: 0 2px;
}

.custom-mini-cart {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 290px;
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.18);
    padding: 20px !important;
    border-radius: 8px;
    border-top: 4px solid #28a745;
    z-index: 100000 !important;
    margin-top: 5px;
}

/* Smooth Interactive Trigger State */
.custom-cart-wrapper:hover .custom-mini-cart {
    display: block !important;
    animation: cnCartSlideUp 0.2s ease-out;
}

@keyframes cnCartSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* HARDWARE LEVEL THUMBNAIL REMOVAL */
.custom-mini-cart img,
.custom-mini-cart .mini_cart_item img,
.custom-mini-cart .attachment-woocommerce_thumbnail,
.custom-mini-cart .woocommerce-mini-cart-item img {
    display: none !important;
}

/* Premium List Row Formats - Standardized row flex alignment layout */
.custom-mini-cart ul.cart_list li,
.custom-mini-cart ul.product_list_widget li {
    padding: 12px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: auto !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; /* Pushes meta block to left, close cross to right */
    border-bottom: 1px solid #f1f5f9 !important;
    position: relative !important;
}

.custom-mini-cart ul.cart_list li:last-child {
    border-bottom: none !important;
}

/* Left block wrapper grouping title and price elements together natively */
.cn-meta-left-block {
    display: flex !important;
    flex-direction: column !important; /* Perfect vertical layout distribution alignment */
    gap: 2px !important;              /* Tight, clean spacing layout profile */
    align-items: flex-start !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    margin-right: 20px !important;
}

/* Premium micro-typography formatting for product variance headings */
.cn-variant-type-badge {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;       /* Clean tech-slate gray descriptor color */
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    margin-bottom: 1px !important;
}

/* Ensure clean link and spacing values remain anchored safely on the left side */
.custom-mini-cart ul.cart_list li .cn-meta-left-block a:not(.remove) {
    display: block !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: auto !important;
}

.custom-mini-cart ul.cart_list li .cn-meta-left-block .cn-clean-code {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #003366 !important;       /* Primary brand code color context matching background layout headers */
}

/* Clean monospaced layout inside link element */
.custom-mini-cart ul.cart_list li .cn-meta-left-block a:not(.remove) {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

/* Price element styling sitting safely on the extreme left side */
.custom-mini-cart ul.cart_list li .cn-meta-left-block .quantity {
    display: block !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #28a745 !important; /* Brand green pricing color text state */
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* PREMIUM EXTREME RIGHT "X" REMOVE BUTTON STYLING */
.custom-mini-cart ul.cart_list li a.remove,
.custom-mini-cart ul.product_list_widget li a.remove {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: 0 !important;
    order: 3 !important; /* Guarantees positioning as final structural block element */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important; /* Subtle tech slate gray background signature color */
    background: #f8fafc !important;
    border-radius: 50% !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Hover accent effects matching platform layout identity colors */
.custom-mini-cart ul.cart_list li a.remove:hover,
.custom-mini-cart ul.product_list_widget li a.remove:hover {
    color: #ffffff !important;
    background: #dc3545 !important; /* Elegant warning red color shift */
    transform: rotate(90deg);
}

.cn-clean-code {
    font-family: monospace !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #003366 !important;
    letter-spacing: 0.5px;
    transition: color 0.15s ease;
}

.custom-mini-cart ul.cart_list li a:hover .cn-clean-code {
    color: #28a745 !important;
}

/* Formatting for WooCommerce Prices & Quantity fields */
.custom-mini-cart .quantity {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.custom-mini-cart .quantity .woocommerce-Price-amount {
    color: #28a745 !important;
    font-weight: 600 !important;
}

/* Clean look for Totals block and Checkout links */
.custom-mini-cart .woocommerce-mini-cart__total {
    padding: 15px 0 10px 0 !important;
    margin-top: 5px !important;
    border-top: 2px double #e2e8f0 !important;
    display: flex !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    color: #003366 !important;
    font-weight: 700 !important;
}

.custom-mini-cart .woocommerce-mini-cart__buttons {
    display: flex !important;
    gap: 10px !important;
    margin-top: 12px !important;
    padding: 0 !important;
}

.custom-mini-cart .woocommerce-mini-cart__buttons a {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.custom-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout) {
    background: #003366 !important; /* Elegant deep professional blue */
    color: #ffffff !important;        /* Clean white text for perfect readability */
    transition: background 0.2s ease-in-out, transform 0.1s ease-in-out !important;
}

/* Smooth hover transition for the Pay Now action button */
.custom-mini-cart .woocommerce-mini-cart__buttons a:not(.checkout):hover {
    background: #002244 !important; /* Slightly darker slate blue on hover state */
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.custom-mini-cart .woocommerce-mini-cart__buttons a.checkout {
    background: #28a745 !important;
    color: #ffffff !important;
}

/* ABSOLUTE REMOVAL OF PRODUCT THUMBNAILS IN THE CART DROPDOWN CONTAINER */
.custom-mini-cart img,
.custom-mini-cart .mini_cart_item img,
.custom-mini-cart .attachment-woocommerce_thumbnail,
.woocommerce-mini-cart-item img {
    display: none !important;
}

/* Realign and flatten specific rows after removing thumbnails */
.custom-mini-cart ul.cart_list li,
.custom-mini-cart ul.product_list_widget li {
    padding-left: 0 !important;
    min-height: auto !important;
    text-align: left !important;
}

/* Format mini-cart titles cleanly with an easy-to-read monospaced layout */
.custom-mini-cart .mini_cart_item a,
.custom-mini-cart ul.cart_list li a {
    font-family: monospace !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #003366 !important;
}

/* ==========================================================================
   FORCE GREEN SUB-ROW NAVIGATION (FLUSH / NO GAPS)
   ========================================================================== */
.custom-nav-row {
    background-color: #28a745 !important; /* Beautiful Solid Green */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important; 
    width: 100% !important;
    clear: both;
}

.custom-menu-list {
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-menu-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.custom-menu-list li a {
    display: block !important;
    color: #ffffff !important; /* Crisp white text */
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 15px 25px !important;
    transition: background 0.2s ease-in-out !important;
}

.custom-menu-list li a:hover {
    background-color: #1e7e34 !important; /* Elegant darker green on hover */
    color: #ffffff !important;
}

/* Ensure mobile menu scales properly with the hardcoded layout */
@media (max-width: 991px) {
    .custom-nav-row {
        display: none !important;
    }
    .custom-nav-row.mobile-open {
        display: block !important;
        background-color: #002244 !important; /* Reverts to dark blue context on mobile popout */
    }
    .custom-menu-list {
        flex-direction: column !important;
    }
    .custom-menu-list li a {
        padding: 12px 25px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }
}

.custom-menu-list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-menu-list li a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 15px 25px;
    transition: background 0.2s;
}

.custom-menu-list li a:hover,
.custom-menu-list li.current-menu-item a {
    background-color: #1e7e34; /* Darker green accent shift */
}

.mobile-menu-toggle {
    display: none;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE LAYOUT (Breakpoints)
   ========================================================================== */
@media (max-width: 991px) {
    .custom-header-container {
        padding: 12px 15px;
    }

    /* Keep logo left, shift menu toggle right */
    .custom-search {
        display: none; /* Hides default wide search bar from breaking layout */
    }

    .action-text {
        display: none; /* Hide 'My Account' text on smaller displays to preserve alignment */
    }

    /* Burger UI Element */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10001;
    }

    .mobile-menu-toggle span {
        width: 100%;
        height: 3px;
        background-color: #ffffff;
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    /* Transform Burger into 'X' when active */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }

    /* Navigation slide down window */
    .custom-nav-row {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #002244;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .custom-nav-row.mobile-open {
        display: block;
    }

    .custom-menu-list {
        flex-direction: column;
        width: 100%;
        padding: 10px 0;
    }

    .custom-menu-list li a {
        padding: 12px 25px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
}


 /* Start Dropdown list changes */
 
 /* Hide any structural empty-cart button or return links inside dropdown containers */
.custom-mini-cart .woocommerce-mini-cart__empty-message + p,
.custom-mini-cart p.return-to-shop,
.custom-mini-cart a.wc-backward {
    display: none !important;
}

/* Polishes the padding inside the empty container box for a clean aesthetic look */
.custom-mini-cart .woocommerce-mini-cart__empty-message { margin: 10px 0 5px 0 !important; text-align: center !important; font-weight: 500; color: #475569 !important; } /* End Dropdown list changes */ /** * End Header Section */ /** * Start Footer Section */

/* ==========================================================================
   WHY CHOOSE CERTSNEST SECTION - STYLISH CENTERED ALIGNMENT
   ========================================================================== */

.cn-features-section {
    padding: 60px 0;
    text-align: center;
}

.cn-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.cn-feature-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.05);
    border: 1px solid #ebf1f6;
    display: flex;
    flex-direction: column;
    align-items: center;    /* Align card contents horizontally */
    justify-content: flex-start;
    text-align: center;      /* Centers headings and paragraphs */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Card hover animation pairing with your global system styling rules */
.cn-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(40, 167, 69, 0.2);
    box-shadow: 0 15px 35px rgba(40, 167, 69, 0.08);
}

/* Added explicit wrapper styling to force center lock */
.cn-feature-icon-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 22px;
}

/* Dynamic & Stylish Brand Icon Containers - Swapped to Brand Green */
.cn-feature-icon {
    width: 70px;
    height: 70px;
    background-color: #28a745; /* Your brand green as the base background */
    color: #ffffff;            /* Crisp white vector lines for perfect contrast */
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.15); /* Soft premium glow matching green scheme */
}

/* Vector SVG Icon Size Matrix - Locked proportions */
.cn-feature-icon svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    display: block;
    margin: 0 auto;
}

/* Elegant Hover Interaction: Shifts to deep navy blue when card is hovered */
.cn-feature-card:hover .cn-feature-icon {
    background-color: #003366; /* Interactive toggle to your deep professional navy */
    color: #ffffff;            /* Maintains clean white contrast */
    transform: scale(1.08);
    box-shadow: 0 6px 15px rgba(0, 51, 102, 0.2);
}

/* Micro-Typography layout rules protecting structural font scale limits */
.cn-feature-title {
    color: #003366;
    margin-bottom: 12px;
    text-transform: none;
}

.cn-feature-card p {
    margin: 0;
    line-height: 1.6;
}
 
 /* End Dropdown list changes */
 
   /**
 * End Header Section
 */
 
/**
 * Start Footer Section
 */
 
 /* ==========================================================================
   PROFESSIONAL FOOTER STYLING & RESPONSIVE GRID
   ========================================================================== */
.my-custom-footer {
    background-color: #002244; /* Darker Blue contrast to balance the main site */
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 60px 0 0 0;
    margin-top: 0;
    border-top: 4px solid #28a745; /* Clean green structural border highlight */
}

.custom-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px 20px;
    display: grid;
    grid-template-columns: 2.5fr 1.2fr 1.2fr 2.6fr; /* Fixed columns grid setup with wider layout space for images */
    gap: 30px;
}

/* --- Column 1 Layout Details --- */
.footer-logo img {
    max-width: 180px;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.footer-intro-text {
    color: #b0c4de; /* Softer readable grayish-blue text contrast */
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* --- Column Header Elements --- */
.footer-heading {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px 0;
    position: relative;
    padding-bottom: 8px;
}

/* Elegant Green Accent line beneath column headers */
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 2px;
    background-color: #28a745;
}

/* --- Vertical Navigation Styling --- */
.footer-links ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-links ul li {
    margin-bottom: 12px !important;
}

.footer-links ul li a {
    color: #b0c4de !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
    display: inline-block;
}

.footer-links ul li a:hover {
    color: #28a745 !important; /* Green pop highlight on hover */
    padding-left: 5px; /* Slight micro-interaction shift */
}

/* ==========================================================================
   CLEAN STRIP PAYMENT FORMATTING (NO INDIVIDUAL WHITE BOX BACKGROUNDS)
   ========================================================================== */
.footer-payments {
    display: flex;
    flex-direction: column;
}

.payment-strip-wrapper {
    margin-top: 12px;
    width: 100%;
    max-width: 290px; /* Controls sizing so it lines up beautifully under the header */
}

.custom-payment-icons-strip {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Prevents compression or distortion errors */
}

/* --- Bottom Copyright Bar Line --- */
.custom-footer-bottom {
    background-color: #00152b; /* Deep dark foundational contrast */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.footer-bottom-container p {
    margin: 0;
    font-size: 13px;
    color: #6a82a4;
}

/* ==========================================================================
   FOOTER RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 991px) {
    .custom-footer-container {
        grid-template-columns: 1fr 1fr; /* Shifts cleanly to 2 columns on tablets */
        gap: 30px;
    }
}

@media (max-width: 575px) {
    .custom-footer-container {
        grid-template-columns: 1fr; /* Stack into a single continuous professional layout on mobile viewports */
        gap: 35px;
        text-align: left;
    }
    
    .footer-heading::after {
        left: 0;
    }
    
    .payment-strip-wrapper {
        max-width: 260px; /* Downscales slightly to look graceful on mobile viewports */
    }
}
 
/**
 * End Footer Section
 */
 
 
 /**
 * Start Home Page Index.php
 */
 
/* ==========================================================================
   CLEAN LIGHT MODE ARCHITECTURE - CERTSNEST.COM (EYE COMFORT SENSE)
   ========================================================================== */
:root {
    --cn-light-pure: #ffffff;     /* Flat white content cards base background */
    --cn-light-bg: #f5f8fb;       /* Softer sky-grey primary canvas background */
    --cn-light-alt: #ebf1f6;      /* Contrast background block rows */
    --cn-text-dark: #00152b;      /* Your Brand Deep Navy Blue for headings and clear reading */
    --cn-text-muted: #4e6178;     /* Clean slate-grey color for long reading paragraphs */
    --cn-brand-green: #28a745;    /* Actionable green accent from header/footer */
    --cn-green-hover: #1e7e34;    /* Active button dark hover states */
    --cn-border-soft: #e1e8f0;    /* Light structural divider lines */
}

/* Base structural layout overrides */
.cn-section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 85px 20px;
}

.cn-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px auto;
}

.cn-section-header h2 {
    font-size: 34px;
    font-weight: 700;
    color: var(--cn-text-dark) !important;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.cn-section-header p {
    color: var(--cn-text-muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* --- 1. HERO COMPONENT STYLING --- */
.cn-hero-section {
    position: relative;
    background: linear-gradient(180deg, #eef3f8 0%, var(--cn-light-bg) 100%);
    padding: 100px 0;
    overflow: hidden;
    border-bottom: 1px solid var(--cn-border-soft);
}

.cn-hero-decor-blur {
    position: absolute;
    top: -15%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(40, 167, 69, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.cn-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.cn-hero-content {
    position: relative;
    z-index: 5;
}

.cn-hero-tag {
    display: inline-block;
    background-color: var(--cn-light-pure);
    color: var(--cn-green-hover);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,21,43,0.05);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.cn-hero-content h1 {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--cn-text-dark) !important;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.cn-hero-content p {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--cn-text-muted);
    margin: 0 0 35px 0;
}

.cn-hero-buttons {
    display: flex;
    gap: 15px;
}

.cn-btn {
    padding: 14px 30px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-block;
}

.cn-btn-primary {
    background-color: var(--cn-brand-green);
    color: #ffffff !important;
}

.cn-btn-primary:hover {
    background-color: var(--cn-green-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.2);
}

.cn-btn-secondary {
    background-color: var(--cn-light-pure);
    color: var(--cn-text-dark) !important;
    border: 1px solid var(--cn-border-soft);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.cn-btn-secondary:hover {
    background-color: #fafbfc;
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

/* Visual Abstract Graphic Mockups (Light Version) */
.cn-hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 5;
}

.cn-mockup-card {
    background: var(--cn-light-pure);
    border: 1px solid var(--cn-border-soft);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 15px 35px rgba(0,21,43,0.06);
}

.engine-card {
    transform: perspective(1000px) rotateY(-10deg) rotateX(3deg);
}

.pdf-card {
    transform: perspective(1000px) rotateY(-10deg) rotateX(3deg) translateX(-35px);
    background: linear-gradient(135deg, var(--cn-light-pure), #f8fafc);
    max-width: 85%;
}

.mockup-header {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}

.mockup-header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.mockup-line {
    height: 9px;
    background: #f1f5f9;
    border-radius: 4px;
    margin-bottom: 12px;
}

.title-line {
    background: transparent;
    color: var(--cn-text-dark);
    font-weight: 700;
    font-size: 14px;
    height: auto;
    margin-bottom: 8px;
}

.text-line { width: 92%; }
.text-line.short { width: 55%; }

.mockup-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    margin: 15px 0 10px 0;
    overflow: hidden;
}

.progress-bar {
    width: 88%;
    height: 100%;
    background: var(--cn-brand-green);
}

.mockup-score {
    color: var(--cn-brand-green);
    font-size: 12px;
    font-weight: 700;
}

.pdf-badge {
    background: #dc3545;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* --- 2. FEATURES GRID COMPONENT --- */
.cn-features-section {
    background-color: var(--cn-light-pure);
    border-bottom: 1px solid var(--cn-border-soft);
}

.cn-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.cn-feature-card {
    background-color: var(--cn-light-bg);
    border: 1px solid var(--cn-border-soft);
    padding: 40px 30px;
    border-radius: 8px;
    transition: transform 0.25s ease, background-color 0.2s ease, box-shadow 0.25s ease;
}

.cn-feature-card:hover {
    transform: translateY(-4px);
    background-color: var(--cn-light-pure);
    box-shadow: 0 10px 25px rgba(0,21,43,0.05);
    border-color: rgba(40,167,69,0.2);
}

.cn-feature-icon {
    font-size: 38px;
    margin-bottom: 20px;
    display: inline-block;
}

.cn-feature-title {
    color: var(--cn-text-dark) !important;
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.cn-feature-card p {
    color: var(--cn-text-muted);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

.cn-section-title {
    font-size: 34px;
    font-weight: 700;
    color: var(--cn-text-dark) !important;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* ==========================================================================
   DYNAMIC POPULAR VENDOR MATRIX INTERFACE (OPTIMIZED SPACING & BRAND GREEN)
   ========================================================================== */
.cn-vendors-grid-section {
    background-color: #f5f8fb; /* Clean light layout section background color */
    padding: 35px 0 0 0; /* Reduced top padding and eliminated bottom section padding */
    border-bottom: 1px solid #e1e8f0;
}

.cn-vendors-grid-section .cn-section-container {
    padding-top: 0;
    padding-bottom: 35px; /* Tight, crisp spacing directly below the action button */
}

.cn-vendors-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Balanced 4-column enterprise row spacing */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.cn-vendor-grid-item {
    background-color: #ffffff; /* Crisp presentation background cards */
    border: 1px solid #28a745; /* Clean brand green structural border highlight */
    border-radius: 10px;
    padding: 30px 20px; /* Slightly taller vertical focus since icon was removed */
    text-align: center;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.03);
}

/* Premium micro-interactions on hover */
.cn-vendor-grid-item:hover {
    background-color: #003366; /* Shifts block clean into header color identity */
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 51, 102, 0.15);
}

.cn-vendor-icon {
    font-size: 22px;
    transition: transform 0.25s ease;
}

.cn-vendor-grid-item:hover .cn-vendor-icon {
    transform: scale(1.15);
}

.cn-vendor-text {
    color: #003366; /* Deep corporate blue typography */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    transition: color 0.2s ease;
}

/* Swap card text contrast clean on hover initialization */
.cn-vendor-grid-item:hover .cn-vendor-text {
    color: #ffffff;
}

/* --- View All Vendors Footer Button Area Layout --- */
.cn-vendors-action-wrapper {
    text-align: center;
    margin-top: 45px;
}

.cn-btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #28a745; /* Brand primary green accent color */
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 30px; /* Modern pill capsule architecture shape styling */
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.cn-btn-view-all svg {
    transition: transform 0.2s ease;
}

.cn-btn-view-all:hover {
    background-color: #1e7e34; /* Elegant active dark green styling transition state color */
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.35);
    transform: translateY(-2px);
}

.cn-btn-view-all:hover svg {
    transform: translateX(4px); /* Arrow micro-shift on hover interaction */
}

/* Media Query Adaptations for Tablet & Smartphone Screens */
@media (max-width: 991px) {
    .cn-vendors-matrix {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .cn-vendors-matrix {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .cn-vendor-grid-item {
        padding: 18px 14px;
    }
    .cn-vendor-text {
        font-size: 14.5px;
    }
    .cn-btn-view-all {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }
}

/* --- 4. EXAMS DATA TABLE COMPONENT (CLEAN HIGH READING MATRIX) --- */
.cn-exams-section {
    background-color: var(--cn-light-pure);
    border-bottom: 1px solid var(--cn-border-soft);
}

.cn-exams-list-wrapper {
    background: var(--cn-light-pure);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,21,43,0.05);
    border: 1px solid var(--cn-border-soft);
}

.cn-exam-row {
    display: grid;
    grid-template-columns: 1.4fr 4.6fr 2fr 2fr;
    padding: 16px 25px;
    border-bottom: 1px solid var(--cn-border-soft);
    align-items: center;
    background-color: var(--cn-light-pure);
}

.cn-exam-row:last-child {
    border-bottom: none;
}

.cn-exam-row:not(.cn-exam-header-row) {
    transition: background-color 0.15s ease;
}

.cn-exam-row:not(.cn-exam-header-row):hover {
    background-color: #fafbfc;
}

.cn-exam-header-row {
    background-color: var(--cn-light-alt);
    font-weight: 700;
    color: var(--cn-text-dark);
    font-size: 15px;
    border-bottom: 2px solid var(--cn-brand-green);
}

.cn-col-code { font-weight: 600; color: var(--cn-text-dark); }

.cn-badge-code {
    background: rgba(40, 167, 69, 0.08);
    border: 1px solid rgba(40, 167, 69, 0.2);
    color: var(--cn-green-hover);
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.cn-col-title {
    color: var(--cn-text-dark);
    font-weight: 500;
    padding-right: 15px;
}

.cn-col-vendor {
    color: var(--cn-text-muted);
    font-size: 14.5px;
}

.cn-btn-table {
    background-color: var(--cn-brand-green);
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    text-align: center;
    transition: background-color 0.15s ease;
}

.cn-btn-table:hover {
    background-color: var(--cn-green-hover);
}

.cn-mobile-label { display: none; }

/* --- 5. REVIEWS COMPONENT --- */
.cn-reviews-section {
    background-color: var(--cn-light-bg);
}

.cn-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.cn-review-card {
    background: var(--cn-light-pure);
    padding: 35px 25px;
    border-radius: 8px;
    border-left: 3px solid var(--cn-brand-green);
    border-top: 1px solid var(--cn-border-soft);
    border-right: 1px solid var(--cn-border-soft);
    border-bottom: 1px solid var(--cn-border-soft);
    box-shadow: 0 4px 15px rgba(0,21,43,0.02);
}

.cn-stars {
    color: #ffc107;
    margin-bottom: 14px;
    font-size: 14px;
    letter-spacing: 2px;
}

.cn-review-text {
    color: var(--cn-text-dark);
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 18px 0;
}

.cn-reviewer {
    color: var(--cn-text-muted);
    font-size: 13px;
    font-weight: 600;
}

/* ==========================================================================
   RESPONSIVE VIEWPORT STACKING LOGIC
   ========================================================================== */
@media (max-width: 991px) {
    .cn-section-container { padding: 60px 20px; }
    .cn-hero-section { padding: 70px 0; }
    .cn-hero-container { grid-template-columns: 1fr; text-align: center; }
    .cn-hero-buttons { justify-content: center; }
    .cn-hero-visual { display: none; } /* Drop visual mockups on tablets for quick mobile paint loads */
    
    .cn-features-grid, .cn-reviews-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .cn-exam-header-row { display: none; }
    .cn-exam-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px;
        border: 1px solid var(--cn-border-soft);
        border-radius: 6px;
        margin-bottom: 15px;
        background: var(--cn-light-pure);
        box-shadow: 0 2px 8px rgba(0,21,43,0.02);
    }
    .cn-mobile-label {
        display: inline-block;
        font-weight: 700;
        color: var(--cn-text-muted);
        width: 80px;
        font-size: 13px;
    }
    .cn-col-action { margin-top: 5px; }
    .cn-btn-table { width: 100%; padding: 12px; }
}

@media (max-width: 575px) {
    .cn-section-header h2 { font-size: 25px; }
    .cn-hero-content h1 { font-size: 32px; }
    .cn-hero-buttons { flex-direction: column; }
    .cn-btn { width: 100%; text-align: center; }
}

@media (max-width: 991px) {
    .cn-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
 
  /**
 * End Home Page Index.php
 */
 
   /**
 * Start of Single Product Page
 */
 
/* ==========================================================================
   CERTSNEST ENTERPRISE PRODUCT LAYOUT ARCHITECTURE
   ========================================================================== */

/* --- 1. Product Title Redesign --- */
.single-product .summary.entry-summary .product_title {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #00152b !important; /* Deep corporate navy anchor */
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    letter-spacing: -0.3px !important;
    display: block !important;
}

/* --- 2. "Please Choose Your Product Type:" Selector Matrix --- */
.single-product .summary.entry-summary table.variations {
    width: 100% !important;
    margin: 20px 0 10px 0 !important;
    border: none !important;
}

.single-product .summary.entry-summary table.variations td {
    padding: 8px 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Transform the dynamic "Selected:" option title text */
.single-product .summary.entry-summary table.variations label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #00152b !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* Soft Premium Styling for the Selection Dropdown Element Box */
.single-product .summary.entry-summary table.variations select {
    width: 100% !important;
    max-width: 380px !important;
    height: 46px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0 15px !important;
    color: #00152b !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    outline: none !important;
    transition: border-color 0.15s ease !important;
}

.single-product .summary.entry-summary table.variations select:focus {
    border-color: #28a745 !important; /* Glow accent green focus border */
}

/* --- 3. Dynamic Live-Calculated Sub-Price Module --- */
.single-product .summary.entry-summary .woocommerce-variation-price {
    margin: 20px 0 !important;
    padding: 2px 0 !important;
}

.single-product .summary.entry-summary .woocommerce-variation-price .price {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #28a745 !important; /* Beautiful crisp active green text color */
}

/* --- 4. Interactive Row Container (Add To Cart & Locked Qty) --- */
.single-product .summary.entry-summary .woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 15px !important;
    padding-top: 5px !important;
}

/* Style and Lock Quantity UI Input Field Box */
.single-product .summary.entry-summary .quantity {
    display: inline-block !important;
    margin: 0 !important;
}

.single-product .summary.entry-summary .quantity input.qty {
    background-color: #f1f5f9 !important; /* Soft premium grey background showing locked status */
    color: #94a3b8 !important; /* Soft greyed out text color */
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    height: 48px !important;
    width: 55px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    pointer-events: none !important; /* Disables any user click choices completely */
    user-select: none !important;
    text-align: center !important;
}

/* Strip native selector arrows inside input types across web viewports */
.single-product .summary.entry-summary .quantity input::-webkit-outer-spin-button,
.single-product .summary.entry-summary .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Active Pro "Add to Cart" Button Execution Frame */
.single-product .summary.entry-summary .single_add_to_cart_button {
    background-color: #28a745 !important; /* Custom theme green identity color */
    color: #ffffff !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    height: 48px !important;
    padding: 0 35px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.12) !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
}

.single-product .summary.entry-summary .single_add_to_cart_button:hover {
    background-color: #1e7e34 !important; /* Darker clean interactive green hover color */
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.22) !important;
}

/* --- 5. Total Elimination of Wishlist Fragment Objects --- */
.single-product .summary.entry-summary .yith-wcwl-add-to-wishlist,
.single-product .summary.entry-summary .yith-wcwl-add-button,
.single-product .summary.entry-summary .wishlist-fragment {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 6. Mobile & Tablet Optimization Stacking Flow --- */
@media (max-width: 767px) {
    .single-product .summary.entry-summary .woocommerce-variation-add-to-cart {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .single-product .summary.entry-summary .quantity input.qty {
        width: 100% !important;
    }
    .single-product .summary.entry-summary .single_add_to_cart_button {
        width: 100% !important;
    }
    .single-product .summary.entry-summary table.variations select {
        max-width: 100% !important;
    }
}
 
    /**
 * End of Single Product Page
 */
 
 
 
/* ==========================================================================
   Start of product rating and Satisfied customers (Gradient Star Version)
   ========================================================================== */

/* Reset the summary container back to default flow */
.summary.entry-summary {
    position: relative !important;
}

/* Force the shortcode row wrapper to span full width and clear any floated elements */
.cn-inline-shortcode-row,
p.cn-inline-shortcode-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    margin: 15px 0 20px 0 !important;
    padding: 0 !important;
}

/* Position the ratings block using clean flow alignments */
.custom-satisfied-rating {
    display: inline-flex !important;
    align-items: center !important;
    float: right !important; /* Pushes it to the far right corner below the box */
    margin: 10px 0 0 0 !important; /* Creates a clean gap right under the Exam Specs box */
    padding: 0 !important;
    font-family: inherit !important;
}

/* Star layout block alignment baseline */
.custom-satisfied-rating .rating-stars-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 4.x score text matching your corporate navy theme */
.custom-satisfied-rating .rating-number {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #003366 !important; 
    line-height: 1 !important;
    letter-spacing: -0.02em;
}

/* Container for our custom stars */
.custom-pixel-stars {
    display: inline-flex !important;
    gap: 2px !important;
    line-height: 1 !important;
}

/* The magic partial-fill star logic with hard color-stops for a sharp split */
.custom-pixel-stars .individual-star {
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-block !important;
    
    /* Using matching color-stop percentages to force a sharp, crisp line */
    background: linear-gradient(
        90deg, 
        #ffb600 0%, 
        #ffb600 var(--star-fill), 
        #cbd5e1 var(--star-fill), 
        #cbd5e1 100%
    ) !important;
    
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: normal !important;
    
    /* Smooth anti-aliasing rendering fix for webkit browsers */
    -webkit-print-color-adjust: exact;
}

/* Clean vertical separator line */
.custom-satisfied-rating .rating-divider {
    display: inline-block !important;
    width: 2px !important;
    height: 16px !important;
    background-color: #cbd5e1 !important; 
    margin: 0 14px !important;
}

/* Satisfied Customers Text Block styling */
.custom-satisfied-rating .satisfied-customers {
    font-size: 14px !important;
    color: #475569 !important; /* Professional readable slate gray */
    font-weight: 500 !important;
    line-height: 1 !important;
}

/* Strong emphasis counter styling */
.custom-satisfied-rating .satisfied-customers strong {
    color: #003366 !important; /* Accent navy blue */
    font-weight: 700 !important;
}

/* Clean layout clearing directly after the floated element */
.custom-satisfied-rating::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Responsive collapse layout for mobile viewports */
@media (max-width: 768px) {
    .custom-satisfied-rating {
        float: none !important;
        display: flex !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin: 15px 0 10px 0 !important;
    }
}

/* ==========================================================================
   END of product rating and Satisfied customers
   ========================================================================== */


 
/* -------------------------------------------------------------------------
 * CUSTOM PRODUCT PAGE LAYOUT & INTERFACE STYLING
 * ------------------------------------------------------------------------- */

/* ==========================================================================
   RELATED EXAMS TABLE STYLING
   ========================================================================== */
.cn-related-exams-wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 40px auto 20px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.cn-table-heading {
    font-size: 22px !important;
    color: #003366 !important; /* Brand Identity Navy Blue */
    margin-bottom: 20px !important;
    font-weight: 700 !important;
}

table.cn-custom-exams-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    table-layout: fixed !important; /* Forces proportional column distribution widths */
}

table.cn-custom-exams-table thead tr {
    background-color: #003366 !important; /* Primary Navy Header Row */
    color: #ffffff !important;
    text-align: left !important;
}

table.cn-custom-exams-table th {
    padding: 14px 18px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
}

table.cn-custom-exams-table td {
    padding: 14px 18px !important;
    border-bottom: 1px solid #f0f2f5 !important;
    font-size: 14px !important;
    color: #444444 !important;
    vertical-align: middle !important;
    word-wrap: break-word !important; /* Prevents text from breaking out of containers */
}

table.cn-custom-exams-table tbody tr:nth-of-type(even) {
    background-color: #f9fbfd !important;
}

table.cn-custom-exams-table tbody tr:hover {
    background-color: #f1f5fa !important;
}

.cn-exam-code-cell {
    color: #003366 !important;
}

.cn-exam-name-cell {
    color: #333333 !important;
}

/* Action Green Buttons */
a.cn-view-exam-btn {
    display: inline-block !important;
    background-color: #28a745 !important; /* Theme Color Accent Green */
    color: #ffffff !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    text-align: center !important;
    white-space: nowrap !important;
}

a.cn-view-exam-btn:hover {
    background-color: #1e7e34 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

/* ==========================================================================
   VARIATION BUTTONS CUSTOMIZATION (Green Borders, Hover, Active)
   ========================================================================== */

/* Spacing among the buttons */
ul.variable-items-wrapper {
    gap: 12px !important;               /* Creates space horizontally between items */
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

/* Default state: White background with clean #28a745 green border */
ul.variable-items-wrapper .button-variable-item {
    transition: all 0.2s ease-in-out !important;
    border: 2px solid #28a745 !important; /* Thickened to 2px so the green pops cleanly */
    background-color: #ffffff !important;
    color: #333333 !important;
    border-radius: 4px !important;        /* Adds a subtle round edge layout */
}

/* 1. HOVER STATE: Turn dark blue background and border when moused over */
ul.variable-items-wrapper .button-variable-item:hover {
    background-color: #003366 !important;
    border-color: #003366 !important;
    color: #ffffff !important;            /* Swaps text to white */
}

/* 2. CLICKED/SELECTED STATE: Lock deep blue background and border when selected */
ul.variable-items-wrapper .button-variable-item.selected,
ul.variable-items-wrapper .button-variable-item[data-value].selected {
    background-color: #003366 !important;
    border-color: #003366 !important;
    color: #ffffff !important;            /* Retains white text inside selection */
    box-shadow: none !important;
}

/* ==========================================================================
   PRODUCT IMAGE SIZE CONFIGURATION
   ========================================================================== */
.woocommerce-product-gallery,
.ct-media-container {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.ct-media-container img.wp-post-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   SPACING CLEARANCE & HIDING BLOCKS
   ========================================================================== */
p.choose-type-message { 
    display: none !important; 
}

span.ct-product-divider[data-id="divider_1"],
span.ct-product-divider[data-id="divider_2"],
.ct-product-divider { 
    display: none !important; 
}

.woocommerce-product-details__short-description p:empty,
.woocommerce-product-details__short-description p:blank,
.woocommerce-product-details__short-description > p:last-child {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-product-details__short-description {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

a.reset_variations {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.yith-wcwl-add-to-wishlist,
.yith-add-to-wishlist-button-block,
a.add_to_wishlist,
.yith-wcwl-add-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product_meta, .sku_wrapper, .posted_in {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   ALIGNMENT & POSITION SHIFTS (Selected: PDF Questions Section)
   ========================================================================== */
form.variations_form {
    margin-top: -15px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

form.variations_form table.variations {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-left: 0px !important;
    padding-left: 0px !important;
}

form.variations_form table.variations tbody,
form.variations_form table.variations tr {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

form.variations_form table.variations td.label,
form.variations_form table.variations td.value {
    padding-left: 0px !important;
    margin-left: 0px !important;
    padding-top: 0px !important;
    text-align: left !important;
}

form.variations_form label,
.label:contains("Selected") {
    margin-top: 0px !important;
    margin-bottom: 4px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* ==========================================================================
   FLUSHED INLINE DISPLAY: Price Left, Button Right, No Spaces
   ========================================================================== */
.single_variation_wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; 
    align-items: center !important;
    gap: 15px !important;
    width: auto !important;
    max-width: max-content !important;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    padding: 0 !important;
}

.single_variation {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
}

.woocommerce-variation-price {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.woocommerce-variation-price p.price,
.woocommerce-variation-price span.price {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-variation-add-to-cart {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
}

/* Hide Quantity input fields fields */
.woocommerce-variation-add-to-cart form,
.woocommerce-variation-add-to-cart .quantity {
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    margin: 0 !important;
    transform: translateY(-5px) !important;
}

/* Responsive Table Breakdowns on small mobile screens */
@media screen and (max-width: 768px) {
    table.cn-custom-exams-table {
        table-layout: auto !important;
    }
    table.cn-custom-exams-table th, 
    table.cn-custom-exams-table td {
        padding: 10px !important;
        font-size: 13px !important;
    }
    a.cn-view-exam-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}
 
 
 /**
 * ==========================================================================
 * End of Product page Manual Customization.
 * ==========================================================================
 */
 
 /**
 * Start of Customizations for WooCommerce Category Pages
 * 1. Hide prices completely on shop/category loop pages.
 * 2. Change "Select options" button text to "Download Now".
 * 3. Extract and display only the Exam Code in the product loop titles.
 * 4. Add an instant client-side live search bar above the product grid.
 * Safely built for Blocksy Child Theme.
 */
 
/* ==========================================================================
   Dynamic Search Bar & Button Custom Styles for CertsNest
   ========================================================================== */

/* 1. Hide loop prices completely */
.archive .products .product .price,
.tax-product_cat .products .product .price,
.tax-product_tag .products .product .price {
    display: none !important;
}

/* 1c. Style the "On-Demand" Badge background to Orange */
.products .product [class*="badge-out-of-stock"],
.products .product [class*="out-of-stock"],
.products .product .ct-badge,
.products .product .badge {
    background-color: #ff9800 !important; /* Premium Vivid Orange */
    color: #ffffff !important; /* Clean White Text */
}

/* Hover State */
.archive .products .product .button:hover,
.tax-product_cat .products .product .button:hover,
.tax-product_tag .products .product .button:hover {
    background-color: #28a745 !important; /* Brand Green */
    color: #ffffff !important;
}

/* 1c. Style the "On-Demand" (Sold Out) Badge background to Red */
.archive .products .product .ct-badge-out-of-stock,
.archive .products .product .onsale.out-of-stock,
.archive .products .product .badge.out-of-stock,
.archive .products .product .ct-woo-badge-out-of-stock {
    background-color: #dc3545 !important; /* Solid Crimson Red */
    color: #ffffff !important;
}

/* 2. Aligns the search bar container beautifully to the right side */
.exam-search-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 30px;
    padding: 0 15px;
}

/* 3. Outer wrapper containing input + inner icon relative placement */
.exam-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 300px;
}

/* 4. Styled Input bar matching your modern header layouts */
#examcode-search {
    width: 100%;
    padding: 11px 45px 11px 16px; /* Extra padding on right to clear the icon */
    font-size: 14px;
    font-weight: 500;
    color: #003366; /* Matching your dark navy branding */
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 30px; /* Smooth rounded pill look */
    outline: none;
    transition: all 0.25s ease-in-out;
}

/* 5. Interactive focus state matching your site's bright green logo/search button style */
#examcode-search:focus {
    border-color: #28a745; /* Matches your brand green */
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
}

/* Placeholders color customization */
#examcode-search::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* 6. Dynamic Icon Placement & Color scheme adaptation */
.exam-search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #003366; /* Matching your site header's text dark tone */
    display: flex;
    align-items: center;
    pointer-events: none; /* Passes clicks directly to the input box underneath */
    transition: color 0.25s ease-in-out;
}

/* Changes the search lens icon color dynamically when a user activates the input box */
#examcode-search:focus + .exam-search-icon {
    color: #28a745; /* Switches to brand green matching header search focus theme */
}

/**
 * End of Customizations for WooCommerce Category Pages
 */