/**
 * See in a Room Styles
 *
 * @package Pursue_Life_Outdoors
 * @since 1.0.1
 *
 * DEPRECATED: This file is kept for backward compatibility only.
 * All "See in a Room" functionality is now handled by the Wall Art Visualizer plugin.
 * These styles may be removed in a future update.
 * 
 * @see wp-content/plugins/wall-art-visualizer/assets/css/visualizer.css
 */

/* See in a Room button */
.see-in-room {
    background-color: #548C2F; 
    color: #fff;
    border-radius: 30px;
    padding: 0.75rem 1.5rem;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: 1rem;
    display: inline-block;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.see-in-room:hover {
    background-color: #104911;
    color: #fff;
}

.see-in-room:focus {
    outline: 2px solid #104911;
    outline-offset: 2px;
}

.see-in-room svg, 
.see-in-room img,
.see-in-room .material-icons {
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Button container */
.see-in-room-wrapper {
    margin: 1rem 0;
    display: block;
    clear: both;
}

/* For out-of-stock products */
.stock.out-of-stock + .see-in-room-wrapper {
    margin-top: 1.5rem;
}

/* "See in a Room" button for product variations */
.variations_form + .see-in-room-wrapper {
    margin-top: 1.5rem;
}

/* Room preview modal */
.room-preview-modal {
    display: flex;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.room-preview-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 90%;
    width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.room-preview-close {
    color: #333;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
}

.room-preview-close:hover,
.room-preview-close:focus {
    color: #548C2F;
}

/* Room preview */
.room-preview {
    height: 500px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-top: 10px;
    /* Add this for consistent sizing */
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.room-selector h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #333;
}

.room-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.room-thumb {
    cursor: pointer;
    text-align: center;
    width: calc(25% - 10px);
    transition: all 0.3s ease;
    border-radius: 4px;
    overflow: hidden;
}

.room-thumb:hover {
    transform: translateY(-3px);
}

.room-thumb:focus-within {
    outline: 2px solid #548C2F;
}

.room-thumb img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 5px;
}

.room-thumb span {
    display: block;
    font-size: 14px;
    color: #333;
}

/* Ensure artwork maintains proper proportion */
.product-overlay {
    position: absolute;
    /* Default position, will be overridden by JS with values from customizer */
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    max-width: 500px;
    text-align: center;
    z-index: 2;
    /* Maintain proper sizing at all viewport widths */
    box-sizing: border-box;
}

/* Maintain aspect ratio and proportion */
.product-overlay img {
    max-width: 100%;
    height: auto;
    display: block;
    border-style: solid;
    box-sizing: border-box;
}

/* Accessibility improvements */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .room-thumb {
        width: calc(50% - 10px);
    }
    
    .room-preview {
        height: 350px;
    }
    
    .room-preview-content {
        padding: 15px;
        max-width: 95%;
    }
    
    .product-overlay {
        width: 50%;
        /* Don't override top position here - let JavaScript handle it */
    }
    
    /* Adjust padding/matting for smaller screens */
    .frame-log-cabin {
        padding: 18px;
    }
    
    .frame-office,
    .frame-bedroom,
    .frame-living-room {
        padding: 15px;
    }
}

@media (max-width: 576px) {
    .room-preview-content {
        padding: 10px;
    }
    
    .room-preview {
        height: 250px;
    }
    
    /* On very small screens, ensure the image isn't too low */
    .product-overlay {
        /* Use !important to override JavaScript positioning on very small screens */
        top: 40% !important;
    }
}

@media (max-width: 480px) {
    .product-overlay {
        width: 60%;
    }
    
    /* Further reduce padding for very small screens */
    .frame-log-cabin {
        padding: 12px;
    }
    
    .frame-office,
    .frame-bedroom,
    .frame-living-room {
        padding: 10px;
    }
}

/* Frame styles for different rooms */

/* LOG CABIN – Rustic Warmth */
.frame-log-cabin {
  border: 6px solid #7b5a3b; /* deep walnut wood */
  padding: 24px; /* matting space */
  background-color: #ede3d5; /* parchment mat */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  max-width: 100%;
  box-sizing: border-box;
}

/* OFFICE – Contemporary Clean */
.frame-office {
  border: 4px solid #999999; /* brushed aluminum look */
  padding: 20px;
  background-color: #eaeaea; /* light gray mat */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  max-width: 100%;
  box-sizing: border-box;
}

/* BEDROOM – Soft Minimalist */
.frame-bedroom {
  border: 5px solid #c8b79a; /* soft blonde oak */
  padding: 22px;
  background-color: #f8f6f3; /* warm ivory mat */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  box-sizing: border-box;
}

/* LIVING ROOM – Modern Natural */
.frame-living-room {
  border: 3px solid #333333; /* matte black frame */
  padding: 20px;
  background-color: #ffffff; /* crisp white mat */
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  max-width: 100%;
  box-sizing: border-box;
}