/* QR Tile Showroom Frontend Styles */

/* Product Page Customizations */
.qr-tile-variations-wrapper {
    margin: 30px 0;
}

.qr-tile-variations-title {
    font-size: 1.4em;
    /* font-weight: 600; */
    margin-bottom: 20px;
    color: #333;
}

/* Variations Table Heading (shortcode) */
.qr-tile-variations-heading {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

/* Specifications Section */
.qr-tile-specifications {
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}

.qr-tile-specifications h3 {
    margin-top: 0;
    font-size: 1.2em;
    margin-bottom: 15px;
}

.qr-tile-spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.qr-tile-spec-item {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

.qr-tile-spec-item:last-child {
    border-bottom: none;
}

.qr-tile-spec-label {
    /* font-weight: 600; */
    min-width: 140px;
}

.qr-tile-spec-value {
    
}

/* Variations Table */
.qr-tile-variations-table {
    width: 100%;
    border-collapse: collapse;
}

.qr-tile-variations-table thead {
    border-bottom: 2px solid #000;
}

.qr-tile-variations-table th {
    padding: 15px 12px;
    text-align: left;
    /* font-weight: 600; */
}

.qr-tile-variations-table tbody tr {
    border-bottom: 1px solid #ddd;
}

.qr-tile-variations-table tbody tr:last-child {
    border-bottom: none;
}

.qr-tile-variations-table td {
    padding: 15px 12px;
    font-size: 0.95em;
}

.qr-tile-variation-format {
    /* font-weight: 600; */
    color: #2c3e50;
}

.qr-tile-variation-finish {
    color: #555;
}

.qr-tile-variation-sqm {
    color: #555;
}

.qr-tile-variation-attribute {
    /* font-weight: 500; */
    color: #2c3e50;
}

.qr-tile-variation-attribute:first-child {
    /* font-weight: 600; */
}

.qr-tile-variation-price {
    /* font-weight: 600; */
    font-size: 1.05em;
    color: #27ae60;
    white-space: nowrap;
}

.qr-tile-variation-price bdi {
    font-weight: normal;
    font-size: unset;
}

.qr-tile-variation-price del {
    color: #999;
    /* font-weight: 400; */
    font-size: 0.9em;
    margin-right: 8px;
}

.qr-tile-variation-price ins {
    text-decoration: none;
    color: #e74c3c;
}

.qr-tile-price-hidden {
    color: #e74c3c;
    /* font-weight: 600; */
    font-style: italic;
}

.qr-tile-variation-price-per-sqm {
    color: #7f8c8d;
    font-size: 0.9em;
}

/* CTA Button */
.qr-tile-cta-wrapper {
    margin: 30px 0;
    text-align: center;
}

.qr-tile-cta-button {
    display: inline-block;
    padding: 12px 30px;
    /* font-weight: 600; */
    text-decoration: none;
    border: 2px solid #000;
}

.qr-tile-cta-button:hover {
    text-decoration: underline;
}

/* Hide default WooCommerce elements when in QR mode */
.qr-tile-active .single_variation_wrap,
.qr-tile-active .variations_form .variations {
    display: none !important;
}

/* Empty state */
.qr-tile-no-variations {
    padding: 40px;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* Error messages for shortcodes */
.qr-tile-error {
    padding: 15px;
    border-left: 2px solid #000;
    margin: 20px 0;
}

.qr-tile-no-specs {
    padding: 15px;
    border-left: 2px solid #000;
    margin: 20px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .qr-tile-variations-table {
        font-size: 0.85em;
    }
    
    .qr-tile-variations-table th,
    .qr-tile-variations-table td {
        padding: 10px 8px;
    }
    
    .qr-tile-spec-item {
        flex-direction: column;
    }
    
    .qr-tile-spec-label {
        min-width: auto;
        margin-bottom: 4px;
    }
    
    .qr-tile-cta-button {
        display: block;
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* Stack table on mobile */
    .qr-tile-variations-table {
        display: block;
    }
    
    .qr-tile-variations-table thead {
        display: none;
    }
    
    .qr-tile-variations-table tbody {
        display: block;
    }
    
    .qr-tile-variations-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 10px;
    }
    
    .qr-tile-variations-table td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .qr-tile-variations-table td:last-child {
        border-bottom: none;
    }
    
    .qr-tile-variations-table td:before {
        content: attr(data-label);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.8em;
        color: #777;
    }
}

/* Print Styles */
@media print {
    .qr-tile-variations-table {
        box-shadow: none;
    }
    
    .qr-tile-variations-table tbody tr:hover {
        background: transparent;
    }
    
    .qr-tile-cta-wrapper {
        display: none;
    }
}

/* Simple Product Styles */
.qr-tile-simple-product-wrapper {
    margin: 30px 0;
}

.qr-tile-specs-section,
.qr-tile-attributes-section {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.qr-tile-specs-section h3,
.qr-tile-attributes-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #333;
    /* font-weight: 600; */
}

.qr-tile-specs-table,
.qr-tile-attributes-table {
    width: 100%;
    border-collapse: collapse;
}

.qr-tile-specs-table th,
.qr-tile-attributes-table th {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    /* font-weight: 600; */
    width: 40%;
}

.qr-tile-specs-table td,
.qr-tile-attributes-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.qr-tile-specs-table tr:last-child th,
.qr-tile-specs-table tr:last-child td,
.qr-tile-attributes-table tr:last-child th,
.qr-tile-attributes-table tr:last-child td {
    border-bottom: none;
}

.qr-tile-price-section {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 15px 0;
    margin: 20px 0;
}

.qr-tile-simple-price {
    font-size: 1.3em;
    font-weight: 700;
}

.qr-tile-badge {
    display: inline-block;
    padding: 5px 12px;
    font-weight: 600;
    border: 1px solid #000;
}

.qr-tile-stock-section {
    margin-bottom: 20px;
}

.qr-tile-stock {
    display: inline-block;
    padding: 8px 15px;
    font-weight: 600;
    border: 1px solid #000;
}

/* Responsive Simple Product */
@media (max-width: 600px) {
    .qr-tile-specs-table th,
    .qr-tile-attributes-table th {
        width: 45%;
    }
    
    .qr-tile-price-section {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================
   SIMPLE VARIATION TABLE STYLING
   ========================================== */

/* Primary attribute emphasis */
.qr-tile-variations-table th.qr-tile-primary-attribute {
    /* font-weight: 700; */
}

.qr-tile-variations-table td.qr-tile-primary-value {
    /* font-weight: 600; */
}

/* m² per Box column */
.qr-tile-sqm-header {
    text-align: center;
}

.qr-tile-variation-sqm {
    text-align: center;
}

/* Price per m² column */
.qr-tile-price-per-sqm-header {
    text-align: right;
}

.qr-tile-variation-price-per-sqm {
    text-align: right;
}

/* Price column header */
.qr-tile-price-header {
    text-align: right;
}

/* No data indicator */
.qr-tile-no-data {
    color: #999;
    font-style: italic;
}

/* Improved responsive for new columns */
@media (max-width: 768px) {
    /* Stack table for better mobile experience */
    .qr-tile-variations-table thead {
        display: none;
    }
    
    .qr-tile-variations-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border-bottom: 2px solid #000;
        padding-bottom: 15px;
    }
    
    .qr-tile-variations-table td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .qr-tile-variations-table td:last-child {
        border-bottom: none;
    }
    
    /* Add labels via data attributes */
    .qr-tile-variations-table td::before {
        content: attr(data-label);
        /* font-weight: 600; */
        margin-right: 10px;
    }
    
    /* Primary value stands out on mobile */
    .qr-tile-variations-table td.qr-tile-primary-value {
        /* font-weight: 700; */
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;
    }
    
    /* Reset text alignment for mobile */
    .qr-tile-variation-sqm,
    .qr-tile-variation-price,
    .qr-tile-variation-price-per-sqm {
        text-align: right;
    }
}

@media (max-width: 480px) {
    .qr-tile-variations-table td {
        font-size: 0.9em;
    }
}

/* ========================================
   Stock Status Shortcode Styles
   ======================================== */

.qr-tile-stock-status-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}

.qr-stock-label {
    font-weight: 700;
    font-size: 13px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.qr-stock-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.qr-stock-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc; /* Default gray */
    position: relative;
}

/* Animation for blinking dot */
@keyframes qr-pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

@keyframes qr-pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

@keyframes qr-pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

/* In Stock - Green */
.qr-stock-in-stock .qr-stock-dot {
    background-color: #28a745;
    animation: qr-pulse-green 2s infinite;
}
.qr-stock-in-stock .qr-stock-text {
    color: #28a745;
}

/* Out of Stock - Red */
.qr-stock-out-of-stock .qr-stock-dot {
    background-color: #dc3545;
    /* animation: qr-pulse-red 2s infinite; */ /* Maybe don't pulse for out of stock */
}
.qr-stock-out-of-stock .qr-stock-text {
    color: #dc3545;
}

/* On Backorder - Orange */
.qr-stock-on-backorder .qr-stock-dot {
    background-color: #ffc107;
    animation: qr-pulse-orange 2s infinite;
}
.qr-stock-on-backorder .qr-stock-text {
    color: #856404;
}

/* Unknown - Gray */
.qr-stock-unknown .qr-stock-dot {
    background-color: #6c757d;
}
.qr-stock-unknown .qr-stock-text {
    color: #6c757d;
}