/* EverPack Frontend Styles - Eversafe Branded */

/* Brand Colors */
:root {
    --everpack-navy: #1E3A5F;
    --everpack-blue: #5DADE2;
    --everpack-light-blue: #EBF5FF;
    --everpack-border: #d0d0d0;
    --everpack-text: #333;
    --everpack-text-muted: #666;
}

/* Container */
#everpack-product-options {
    margin: 20px 0;
}

/* Option Field */
.everpack-option-field {
    margin-bottom: 20px;
}

/* Labels - Match EverPack Style */
.everpack-option-label {
    display: block;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--everpack-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.everpack-option-label .required {
    color: #E74C3C;
}

/* Text Inputs & Selects */
.everpack-input-text,
.everpack-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--everpack-border);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.everpack-input-text:focus,
.everpack-select:focus {
    border-color: var(--everpack-blue);
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.15);
    outline: none;
}

/* Button Group / Radio Buttons - Grid layout set via inline style */
.everpack-button-group {
    /* Grid is set inline, don't override */
    gap: 8px;
}

/* Hide radio input accessibly */
.everpack-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* Button Options - Match EverPack Size Buttons */
.everpack-button-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--everpack-border);
    border-radius: 6px !important;
    padding: 10px 12px !important;
    width: 100%;
    min-height: 46px;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--everpack-text);
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.everpack-button-option:hover {
    border-color: var(--everpack-blue);
    background: #f8fbfd;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Selected State - Navy Background */
.everpack-radio-input:checked+.everpack-button-option,
.everpack-radio-input:checked+label.everpack-button-option {
    border-color: var(--everpack-navy) !important;
    background-color: var(--everpack-navy) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px var(--everpack-navy) inset !important;
}

/* Color Swatches Container */
.everpack-color-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Color Swatch Options */
.everpack-color-option {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.everpack-color-option:hover {
    transform: scale(1.1);
}

/* Color Swatch Selected State */
.everpack-radio-input:checked+.everpack-color-option {
    border-color: var(--everpack-navy) !important;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--everpack-navy) !important;
    transform: scale(1.05);
}

/* Font Select Dropdown */
.everpack-font-select {
    font-size: 16px;
}

/* File Upload */
.everpack-file-upload {
    padding: 15px;
    background: #f9f9f9;
    border: 2px dashed var(--everpack-border);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.everpack-file-upload:hover {
    border-color: var(--everpack-blue);
    background: #f0f8ff;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .everpack-button-option {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-width: 70px;
    }

    .everpack-color-option {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
}

/* Number Input */
.everpack-input-number {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--everpack-border);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.everpack-input-number:focus {
    border-color: var(--everpack-blue);
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.15);
    outline: none;
}

/* Textarea */
.everpack-input-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--everpack-border);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.everpack-input-textarea:focus {
    border-color: var(--everpack-blue);
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.15);
    outline: none;
}

/* Checkbox Group */
.everpack-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.everpack-checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--everpack-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.everpack-checkbox-option:hover {
    border-color: var(--everpack-blue);
    background: #f8fbfd;
}

.everpack-checkbox-input {
    width: 18px;
    height: 18px;
    accent-color: var(--everpack-navy);
    cursor: pointer;
}

.everpack-checkbox-input:checked+span {
    color: var(--everpack-navy);
    font-weight: 600;
}

/* Validation Error Styles */
.everpack-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 6px;
    padding: 6px 10px;
    background: #fff5f5;
    border: 1px solid #ffcdd2;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.everpack-error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
}

.everpack-input-error {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
}

.everpack-input-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

/* Character Counter */
.everpack-char-counter {
    font-size: 12px;
    color: var(--everpack-text-muted);
    text-align: right;
    margin-top: 4px;
}

.everpack-char-counter.everpack-char-warning {
    color: #e67e22;
    font-weight: 600;
}

/* Locked Add to Cart Button */
.everpack-btn-locked {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Hide debug output */
[id^="debug-"] {
    display: none;
}

/* Tooltip Styles */
.everpack-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: text-bottom;
    position: relative;
    cursor: help;
    transform: translateY(-1px);
}

/* Custom Tooltip on Hover */
.everpack-tooltip-icon:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
    font-weight: normal;
    text-transform: none;
    line-height: 1.4;
    min-width: 150px;
    max-width: 250px;
    white-space: normal;
    text-align: center;
}

/* Tooltip Arrow */
.everpack-tooltip-icon:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    margin-bottom: -4px;
    z-index: 1000;
}

/* Visual Choice (Image) Styles */
/* Apply to ALL buttons in a visual group for consistency */
.is-visual-group .everpack-button-option {
    height: 60px !important;
    min-height: 60px !important;
    width: 100% !important;
    /* 2 buttons per row (assuming 10px gap) */
    max-width: none !important;
    padding: 0 !important;
    /* Edge to edge */
    justify-content: flex-start;
    flex-direction: row !important;
    align-items: center;
    text-align: left;
    overflow: hidden;
    /* Clip image corners */
    gap: 0 !important;
}

.everpack-choice-image {
    display: block;
    width: 60px;
    /* Match button height */
    height: 60px;
    object-fit: cover;
    margin-bottom: 0;
    border-radius: 0;
    /* Button overflow handles corners */
    flex-shrink: 0;
    box-shadow: none;
    border-right: 1px solid var(--everpack-border);
    /* Separator line */
}

.everpack-button-label {
    font-size: 14px;
    line-height: normal;
    font-weight: 600;
    flex: 1;
    text-align: center;
    /* Centered in remaining space */
    padding: 0 10px;
}

/* Adjust small images in checkboxes */
.everpack-choice-image-small {
    display: block;
    flex-shrink: 0;
}

/* ========================================
   REPEATER UI (INPUT GROUPS)
   ======================================== */

.ep-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Input Group Layout */
.ep-input-group {
    display: flex !important;
    align-items: stretch !important;
    /* Ensure same height */
    gap: 8px !important;
    width: 100%;
}

.ep-input-group input[type="text"] {
    flex: 1;
    margin: 0 !important;
    /* Remove margins that interfere with alignment */
    height: auto !important;
    /* Allow stretching if theme sets fixed height weirdly, or keep theme defaults? Better to let it stretch if container is defined by button? No, button defines container? No, input defines container usually. */
}

/* Character Counter Fixing */
.everpack-char-counter {
    align-self: center !important;
    font-size: 12px;
    color: #666;
    margin: 0 !important;
    padding: 0 4px !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Square Buttons (Clean Outline Style) */
.ep-btn-square {
    width: auto !important;
    /* Let aspect ratio decide */
    height: auto !important;
    /* Stretch to input height */
    min-width: 0 !important;
    /* Allow shrinking to match height */
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 0 0 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.5em !important;
    /* Relative to container/theme */
    font-weight: 300 !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    /* Slightly tighter radius usually matches inputs better */
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    color: #3b82f6 !important;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    /* Ensure it matches input height */
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-shadow: none !important;
}

.ep-btn-square:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    color: #2563eb !important;
    /* Darker Blue on hover */
}

/* Remove Button Specifics */
.everpack-remove-repeater-btn {
    color: #f97316 !important;
    /* Stronger Orange */
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

.everpack-remove-repeater-btn:hover {
    border-color: #cbd5e1 !important;
    color: #ea580c !important;
    /* Darker Orange */
}

/* Ensure disabled buttons look disabled */
.ep-btn-square:disabled,
.ep-btn-square.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
}

/* ========================================
   BUTTON SIZES
   ======================================== */

/* Extra Small */
.ep-btn-size-xsmall .everpack-button-option {
    height: auto !important;
    min-height: 25px !important;
    padding: 3px 6px !important;
    font-size: 11px;
    border-radius: 4px !important;
    line-height: 1.2;
}

/* Small */
.ep-btn-size-small .everpack-button-option {
    height: auto !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    font-size: 12px;
}

/* Normal (Default) - approx 46px */
.ep-btn-size-normal .everpack-button-option {
    height: auto !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    font-size: 14px;
}

/* Large */
.ep-btn-size-large .everpack-button-option {
    height: auto !important;
    min-height: 58px !important;
    padding: 14px 20px !important;
    font-size: 16px;
}

/* Extra Large */
.ep-btn-size-xl .everpack-button-option {
    height: auto !important;
    padding: 18px 25px !important;
    font-size: 18px;
    font-weight: 700;
    min-height: 70px !important;
}

/* ========================================
   MIX & MATCH MODULE
   ======================================== */
.ep-mixmatch-container {
    margin: 20px 0;
    /* Seamless design - no box */
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.ep-mm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--everpack-border);
    padding-bottom: 10px;
}

.ep-mm-header strong {
    font-size: 14px;
    color: var(--everpack-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.ep-mm-progress {
    font-weight: 500;
    color: #64748b;
    /* Subtle Grey */
    font-size: 12px;
    /* Smaller */
    background: transparent;
    padding: 0;
    transition: color 0.2s ease;
}
}

.ep-mm-progress.valid {
    color: #166534;
    /* Green on success */
    background: #dcfce7;
    font-weight: 600;
}

.ep-mm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.ep-mm-item {
    border: 1px solid var(--everpack-border);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.ep-mm-item:hover {
    border-color: var(--everpack-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.ep-mm-item.selected {
    border-color: var(--everpack-navy);
    background: #f8fbff;
    box-shadow: 0 0 0 1px var(--everpack-navy);
}

.ep-mm-item img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    margin-bottom: 8px;
    border-radius: 4px;
}

.ep-mm-label {
    font-size: 13px;
    line-height: 1.3;
    color: var(--everpack-text);
    margin-bottom: 8px;
    font-weight: 500;
}

.ep-mm-qty {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--everpack-navy);
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 2;
}

.ep-mm-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    width: 100%;
}

.ep-mm-btn {
    background: #f1f5f9;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    color: var(--everpack-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.ep-mm-btn:hover:not(:disabled) {
    background: var(--everpack-blue);
    color: #fff;
}

.ep-mm-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* ========================================
   PRODUCT BUNDLES MODULE
   ======================================== */
.everpack-bundles-wrapper {
    margin: 20px 0;
    /* Seamless design - no box */
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.everpack-bundles-wrapper h3 {
    margin-top: 0;
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--everpack-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--everpack-border);
    padding-bottom: 10px;
    font-weight: 600;
}

.everpack-bundle-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.everpack-bundle-item {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background 0.2s;
}

.everpack-bundle-item:hover {
    background: #f9fafb;
}

.everpack-bundle-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--everpack-navy);
    cursor: pointer;
}

.bundle-thumb {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--everpack-border);
    background: #fff;
}

.bundle-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bundle-details {
    flex: 1;
}

.bundle-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--everpack-text);
    line-height: 1.3;
    margin-bottom: 2px;
}

.bundle-price-row {
    font-size: 13px;
    color: var(--everpack-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bundle-price-row ins {
    text-decoration: none;
    font-weight: 600;
    color: var(--everpack-text);
}

.bundle-price-row del {
    color: #999;
    font-size: 0.9em;
}

.ep-badge-save {
    background: #e6fffa;
    color: #047857;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #a7f3d0;
}

/* ========================================
   TEXT OVERLAY (Image Previewer)
   ======================================== */
.woocommerce-product-gallery__image {
    position: relative !important;
}

.ep-text-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}