/**
 * Product Addons Frontend CSS
 * 
 * Uses Swift Commerce-frontend.css design system tokens.
 * Requires: Swift Commerce-frontend.css to be loaded as a dependency.
 */

/* ==========================================================================
   CSS Reset - Theme Isolation
   ========================================================================== */

.swift-commerce-product-addons,
.swift-commerce-product-addons *,
.swift-commerce-product-addons *::before,
.swift-commerce-product-addons *::after {
    box-sizing: border-box !important;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Main Container */
.swift-commerce-product-addons {
    margin: var(--sc-space-5, 20px) 0;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Addon Field */
.swift-commerce-addon-field {
    margin-bottom: var(--sc-space-4, 16px);
    padding: var(--sc-space-4, 16px);
    background: var(--sc-background, #fff);
    border: 1px solid var(--sc-border, #e5e7eb);
    border-radius: var(--sc-radius-lg, 8px);
}

.swift-commerce-addon-field:last-child {
    margin-bottom: 0;
}

/* Title */
.swift-commerce-addon-title {
    display: block;
    font-size: var(--sc-text-base, 15px);
    font-weight: var(--sc-font-semibold, 600);
    color: var(--sc-foreground, #111827);
    margin-bottom: var(--sc-space-1, 4px);
}

/* Required Indicator */
.swift-commerce-addon-required {
    color: var(--sc-error, #ef4444);
}

/* Description */
.swift-commerce-addon-description {
    font-size: var(--sc-text-sm, 13px);
    color: var(--sc-muted, #6b7280);
    margin: 0 0 var(--sc-space-3, 12px) 0;
}

/* Options Container */
.swift-commerce-addon-options {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-1, 4px);
}

/* Option Label */
.swift-commerce-addon-option {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2, 8px);
    padding: var(--sc-space-2-5, 10px) var(--sc-space-3, 12px);
    border: 1px solid var(--sc-border, #e5e7eb);
    border-radius: var(--sc-radius-md, 6px);
    cursor: pointer;
    transition: all var(--sc-transition-normal, 0.2s) var(--sc-ease-in-out, ease);
}

.swift-commerce-addon-option:hover {
    border-color: var(--sc-border-hover, #d1d5db);
    background: var(--sc-gray-50, #f9fafb);
}

.swift-commerce-addon-option input[type="checkbox"],
.swift-commerce-addon-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.swift-commerce-addon-label {
    flex: 1;
    font-size: var(--sc-text-sm, 14px);
    color: var(--sc-gray-700, #374151);
}

/* Price */
.swift-commerce-addon-price {
    font-size: var(--sc-text-sm, 14px);
    font-weight: var(--sc-font-medium, 500);
    color: var(--sc-success, #059669);
}

/* Input Fields */
.swift-commerce-addon-input {
    width: 100%;
    padding: var(--sc-space-2-5, 10px) var(--sc-space-3, 12px);
    border: 1px solid var(--sc-gray-300, #d1d5db);
    border-radius: var(--sc-radius-md, 6px);
    background: var(--sc-background, #fff);
    font-size: var(--sc-text-sm, 14px);
    transition: border-color var(--sc-transition-normal, 0.2s) var(--sc-ease-in-out, ease);
}

.swift-commerce-addon-input:focus {
    outline: none;
    border-color: var(--sc-primary, #7c3aed);
    box-shadow: 0 0 0 3px var(--sc-primary-100, rgba(124, 58, 237, 0.1));
}

/* Select */
select.swift-commerce-addon-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 40px;
}

/* Textarea */
textarea.swift-commerce-addon-input {
    min-height: 100px;
    resize: vertical;
}

/* File Input */
input[type="file"].swift-commerce-addon-input {
    padding: 8px;
}

/* Quantity Input */
.swift-commerce-addon-quantity {
    width: 100px;
}

/* Custom Price Wrapper */
.swift-commerce-custom-price-wrapper {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2, 8px);
}

.swift-commerce-currency-symbol {
    font-size: var(--sc-text-base, 16px);
    font-weight: var(--sc-font-medium, 500);
    color: var(--sc-gray-700, #374151);
}

.swift-commerce-custom-price-wrapper .swift-commerce-addon-input {
    flex: 1;
    max-width: 150px;
}

/* Total Section */
.swift-commerce-addon-total {
    margin-top: var(--sc-space-4, 16px);
    padding: var(--sc-space-3, 12px) var(--sc-space-4, 16px);
    background: var(--sc-gray-100, #f3f4f6);
    border-radius: var(--sc-radius-md, 6px);
}

.swift-commerce-addon-total > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.swift-commerce-addon-total-label {
    font-size: var(--sc-text-base, 15px);
    color: var(--sc-gray-700, #374151);
}

.swift-commerce-addon-total-price {
    font-size: var(--sc-text-lg, 18px);
    font-weight: var(--sc-font-bold, 700);
    color: var(--sc-gray-900, #111827);
}

/* Image Options */
.swift-commerce-addon-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-3, 12px);
}

.swift-commerce-addon-image-option {
    position: relative;
    cursor: pointer;
}

.swift-commerce-addon-image-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.swift-commerce-addon-image-preview {
    width: 80px;
    height: 80px;
    border-radius: var(--sc-radius-lg, 8px);
    object-fit: cover;
    border: 2px solid transparent;
    transition: all var(--sc-transition-normal, 0.2s) var(--sc-ease-in-out, ease);
}

.swift-commerce-addon-image-option input:checked + .swift-commerce-addon-image-preview {
    border-color: var(--sc-primary, #7c3aed);
    box-shadow: 0 0 0 3px var(--sc-primary-100, rgba(124, 58, 237, 0.2));
}

.swift-commerce-addon-image-option:hover .swift-commerce-addon-image-preview {
    border-color: var(--sc-gray-300, #d1d5db);
}

/* Error State */
.swift-commerce-addon-field.has-error {
    border-color: var(--sc-danger, #ef4444);
}

.swift-commerce-addon-field.has-error .swift-commerce-addon-input {
    border-color: var(--sc-danger, #ef4444);
}

.swift-commerce-addon-error {
    display: block;
    margin-top: var(--sc-space-1, 4px);
    font-size: var(--sc-text-xs, 12px);
    color: var(--sc-danger, #ef4444);
}

/* Accordion Style */
.swift-commerce-addons-accordion .swift-commerce-addon-field {
    border: none;
    border-bottom: 1px solid var(--sc-border, #e5e7eb);
    border-radius: 0;
    padding: 0;
}

.swift-commerce-addons-accordion .swift-commerce-addon-field:first-child {
    border-top: 1px solid var(--sc-border, #e5e7eb);
}

.swift-commerce-addons-accordion .swift-commerce-addon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sc-space-4, 16px);
    cursor: pointer;
}

.swift-commerce-addons-accordion .swift-commerce-addon-header::after {
    content: '+';
    font-size: var(--sc-text-xl, 20px);
    color: var(--sc-gray-500, #6b7280);
}

.swift-commerce-addons-accordion .swift-commerce-addon-field.is-open .swift-commerce-addon-header::after {
    content: '−';
}

.swift-commerce-addons-accordion .swift-commerce-addon-body {
    display: none;
    padding: 0 var(--sc-space-4, 16px) var(--sc-space-4, 16px);
}

.swift-commerce-addons-accordion .swift-commerce-addon-field.is-open .swift-commerce-addon-body {
    display: block;
}

/* Tabs Style */
.swift-commerce-addons-tabs {
    margin: var(--sc-space-5, 20px) 0;
}

.swift-commerce-addons-tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--sc-border, #e5e7eb);
    margin-bottom: var(--sc-space-4, 16px);
}

.swift-commerce-addons-tab-button {
    padding: var(--sc-space-2-5, 10px) var(--sc-space-4, 16px);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: var(--sc-text-sm, 14px);
    font-weight: var(--sc-font-medium, 500);
    color: var(--sc-gray-500, #6b7280);
    cursor: pointer;
    transition: all var(--sc-transition-normal, 0.2s) var(--sc-ease-in-out, ease);
}

.swift-commerce-addons-tab-button:hover {
    color: var(--sc-gray-700, #374151);
}

.swift-commerce-addons-tab-button.is-active {
    color: var(--sc-primary, #7c3aed);
    border-bottom-color: var(--sc-primary, #7c3aed);
}

.swift-commerce-addons-tab-content {
    display: none;
}

.swift-commerce-addons-tab-content.is-active {
    display: block;
}

/* File Upload Preview */
.swift-commerce-file-preview {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2, 8px);
    margin-top: var(--sc-space-2, 8px);
    padding: var(--sc-space-2, 8px) var(--sc-space-3, 12px);
    background: var(--sc-gray-100, #f3f4f6);
    border-radius: var(--sc-radius-sm, 4px);
}

.swift-commerce-file-preview-name {
    flex: 1;
    font-size: var(--sc-text-sm, 13px);
    color: var(--sc-gray-700, #374151);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swift-commerce-file-preview-remove {
    background: none;
    border: none;
    color: var(--sc-danger, #ef4444);
    cursor: pointer;
    padding: 0;
    font-size: var(--sc-text-base, 16px);
}

/* Elementor Notice */
.swift-commerce-elementor-notice {
    padding: var(--sc-space-5, 20px);
    background: var(--sc-primary-50, #f5f3ff);
    border: 1px dashed var(--sc-primary, #7c3aed);
    border-radius: var(--sc-radius-md, 6px);
    text-align: center;
    color: var(--sc-primary-600, #7c3aed);
}

/* ==========================================================================
   Grid Template
   ========================================================================== */

.swift-commerce-addon-options.swift-commerce-addon-options-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--sc-addon-columns, 2), 1fr) !important;
    gap: 12px !important;
    flex-direction: unset !important;
}

.swift-commerce-addon-option-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 12px !important;
    border: 2px solid var(--sc-addon-border, #e5e7eb) !important;
    border-radius: var(--sc-addon-radius, 8px) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    gap: 4px !important;
    min-height: 80px !important;
    background: var(--sc-background, #fff) !important;
}

.swift-commerce-addon-option-card:hover {
    border-color: var(--sc-addon-accent, #002269) !important;
}

.swift-commerce-addon-option-card:has(input:checked) {
    border-color: var(--sc-addon-accent, #002269) !important;
    background: var(--sc-addon-accent-bg, rgba(52, 92, 114, 0.04)) !important;
}

/* Checkmark indicator for selected grid cards */
.swift-commerce-addon-option-card:has(input:checked)::after {
    content: '\2713' !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: var(--sc-addon-accent, #002269) !important;
    color: white !important;
    font-size: 11px !important;
    line-height: 18px !important;
    text-align: center !important;
}

/* Hide native input inside grid cards */
.swift-commerce-addon-option-card .swift-commerce-addon-option-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Filled card variant */
.swift-commerce-addon-option-card.swift-commerce-card-filled {
    background: var(--sc-gray-50, #f9fafb) !important;
    border-color: transparent !important;
}

.swift-commerce-addon-option-card.swift-commerce-card-filled:hover {
    background: var(--sc-gray-100, #f3f4f6) !important;
}

.swift-commerce-addon-option-card.swift-commerce-card-filled:has(input:checked) {
    border-color: var(--sc-addon-accent, #002269) !important;
    background: var(--sc-addon-accent-bg, rgba(52, 92, 114, 0.04)) !important;
}

.swift-commerce-addon-option-card-label {
    font-weight: var(--sc-font-medium, 500) !important;
}

.swift-commerce-addon-option-card-price {
    margin-top: 2px !important;
}

/* ==========================================================================
   Inline Template
   ========================================================================== */

.swift-commerce-addon-options.swift-commerce-addon-options-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex-direction: row !important;
}

.swift-commerce-addon-option-pill {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border: 1px solid var(--sc-addon-border, #e5e7eb) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    background: var(--sc-background, #fff) !important;
}

.swift-commerce-addon-option-pill:hover {
    border-color: var(--sc-addon-accent, #002269) !important;
}

.swift-commerce-addon-option-pill:has(input:checked) {
    border-color: var(--sc-addon-accent, #002269) !important;
    border-width: 2px !important;
    padding: 7px 15px !important;
    background: var(--sc-addon-accent-bg, rgba(52, 92, 114, 0.04)) !important;
}

/* Hide native input inside pills */
.swift-commerce-addon-option-pill .swift-commerce-addon-option-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Responsive */
@media screen and (max-width: 768px) {
    .swift-commerce-addon-images {
        gap: var(--sc-space-2, 8px);
    }
    
    .swift-commerce-addon-image-preview {
        width: 60px;
        height: 60px;
    }
    
    .swift-commerce-addon-option {
        flex-wrap: wrap;
    }
    
    .swift-commerce-addon-price {
        width: 100%;
        margin-top: var(--sc-space-1, 4px);
        padding-left: 26px;
    }
}

@media screen and (max-width: 480px) {
    .swift-commerce-addon-options.swift-commerce-addon-options-grid {
        grid-template-columns: 1fr !important;
    }
    
    .swift-commerce-addon-options.swift-commerce-addon-options-inline {
        flex-direction: column !important;
    }
    
    .swift-commerce-addon-option-pill {
        justify-content: center !important;
    }
}