/*
Theme Name: A. B. Martin
Version: 1.1
Author: WebTek
Author URI: http://www.webtekcc.com/
*/

.aligncenter { text-align:center; }

.alignleft { float:left; margin-right:30px; margin-bottom:30px; }

.alignright { float:right; margin-left:30px; margin-bottom:30px; }

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50002;
  display: none;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  background-color: rgba(51,51,51,0.9) !important;
}

.modal-footer {
  padding: 19px 20px 20px;
  margin-top: 15px;
  text-align: left !important; 
  border-top: none !important; 
}

.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* === Visualizer polish (non-breaking) === */

/* 1) Bound the whole content area + subtle darker bg + shadow */
.visualizer__wrap--content{
  background:#f5f6f8;                /* slightly darker than white */
  border:1px solid #e3e6ea;          /* bounding box */
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 10px 28px rgba(0,0,0,1);
}

/* 2) Swatch grid: square buttons, 5px gap, card frame + shadow */
/* 2) Swatch grid: override plugin styles completely */
.visualizer__wrap--content .swatch{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(120px,1fr)) !important;
  gap:14px !important;
  padding:16px !important;
  background:transparent !important;
  border:1px solid #e8ebef !important;
  border-radius:12px !important;
  box-shadow:0 3px 16px rgba(0,0,0,.06) !important;
}

/* Override the plugin's float and small size */
.visualizer__wrap--content .swatch::after {
  display: none !important;
}

/* 3) The color "buttons" - completely override plugin styles */
.visualizer__wrap--content .swatch a{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height: 90px !important;
  border-radius:10px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.25) !important;
  overflow:hidden !important;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
  float: none !important;
  margin: 0 !important;
  text-indent: 0 !important;
  white-space: normal !important;
}

/* 4) Hover: lift + enhanced shadow */
.visualizer__wrap--content .swatch a:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.2);
}

/* Kill any built-in pseudo labels from the plugin */
.visualizer__wrap--content .swatch a::before,
.visualizer__wrap--content .swatch a::after{
  content: none !important;
  display: none !important;
}

/* Color chip label - positioned at bottom with gradient background */
.visualizer__wrap--content .swatch a .swatch__label{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  font: 600 12px/1.2 "Open Sans", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.4) 60%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
}

/* Auto switch to dark text on light chips */
.visualizer__wrap--content .swatch a.light .swatch__label{
  color: #0d1117;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  background: linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,1) 60%, transparent);
}

/* Selected state */
.visualizer__wrap--content .swatch a.active{
  outline: 3px solid #1f2937;
  outline-offset: 2px;
}

/* Headings spacing */
.visualizer__wrap--content > div > p{
  margin: 4px 4px 10px;
  font-weight: 600;
}
.colorizer-tooltip {
  display: none !important;
}
.visualizer__wrap--cat {
    display: flex;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    gap: 2px;
}

.visualizer__wrap--cat span {
    background: #6b7280;
    color: white;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid white;
    border-bottom: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-weight: 600;
    text-align: center;
    position: relative;
    margin-bottom: -2px;
}

.visualizer__wrap--cat span:hover {
    background: #4b5563;
    transform: translateY(-1px);
}

.visualizer__wrap--cat span.active {
    background: #f9fafb;
    color: #374151;
    border-color: white;
    z-index: 10;
}

/* Connect active tab to content area */
.visualizer__wrap--cat span.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #f9fafb;
}
.color__visualizer .swatch a { position: relative; display: inline-block; }
.color__visualizer .swatch .swatch__fill { position: absolute; inset: 0; border-radius: 12px; }
.color__visualizer .swatch .swatch__label {
  position: absolute; left: 10px; top: 8px; font-weight: 700; pointer-events: none;
}
.color__visualizer .swatch a.light .swatch__label { color: #111; }
.color__visualizer .swatch a:not(.light) .swatch__label { color: #fff; }





/* Mobile-specific improvements for visualizer tabs */
@media (max-width: 768px) {
    .visualizer__wrap--cat {
        flex-direction: column;
        gap: 0;
        background: transparent;
    }
    
    .visualizer__wrap--cat span {
        border-radius: 0;
        border: 1px solid #d1d5db;
        border-bottom: none;
        margin-bottom: 0;
        padding: 16px 20px;
        font-size: 16px;
        min-height: 48px; /* Ensures good touch target size */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .visualizer__wrap--cat span:first-child {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    
    .visualizer__wrap--cat span:last-child {
        border-bottom: 1px solid #d1d5db;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    
    .visualizer__wrap--cat span.active {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
        z-index: 10;
    }
    
    .visualizer__wrap--cat span.active::after {
        display: none;
    }
    
    /* Adjust content area padding for mobile */
    .visualizer__wrap--content {
        margin-top: 8px;
        padding: 16px;
        border-radius: 12px;
    }
    
    /* Make swatch grid more mobile-friendly */
    .visualizer__wrap--content .swatch {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    
    .visualizer__wrap--content .swatch a {
        height: 80px !important;
    }
    
    .visualizer__wrap--content .swatch a .swatch__label {
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* Smaller mobile screens */
@media (max-width: 480px) {
    .visualizer__wrap--cat span {
        padding: 14px 16px;
        font-size: 15px;
    }
    
    .visualizer__wrap--content .swatch {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
        gap: 10px !important;
    }
    
    .visualizer__wrap--content .swatch a {
        height: 70px !important;
    }
    
    .visualizer__wrap--content .swatch a .swatch__label {
        font-size: 10px;
        padding: 5px 6px;
    }
}