/* Premium Star Map Configurator Styles */
:root {
    --wsmc-accent: #c4a47c; /* Gold/Champagne accent */
    --wsmc-dark: #1a1a1a;
    --wsmc-bg: #f8f9fa;
    --wsmc-glass: rgba(255, 255, 255, 0.85);
}

#wsmc-configurator-wrapper {
    background: #222;
    padding: 30px;
    border-radius: 20px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.wsmc-main-layout {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

/* Preview Section */
.wsmc-preview-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
    padding: 40px;
    border-radius: 12px;
}

.wsmc-poster-mockup {
    width: 350px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.1);
}

.wsmc-poster-frame {
    border: 1px solid #ddd;
    padding: 30px;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    transition: all 0.3s ease;
}

/* Border Styles */
.wsmc-poster-frame.border-minimal { padding: 40px; border: none; }
.wsmc-poster-frame.border-double { padding: 25px; border: 4px double #000; }
.wsmc-poster-frame.border-classic { border: 1px solid #ddd; }

#celestial-map-wrapper {
    width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #000;
    transition: all 0.3s ease;
}

/* Shape Masks */
#celestial-map-wrapper.mask-circle {
    border-radius: 50%;
}

#celestial-map-wrapper.mask-heart {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' /%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' /%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

#celestial-map-wrapper.mask-rect {
    border-radius: 4px;
    aspect-ratio: 1; /* Back to perfect square */
}

#celestial-map-wrapper.mask-circle #celestial-map {
    transform: scale(1.0); /* Perfect fit */
}

#celestial-map-wrapper.mask-rect #celestial-map {
    transform: scale(1.0); 
}

#celestial-map-wrapper.mask-heart #celestial-map {
    transform: scale(1.0); 
}

#celestial-map { 
    width: 100%; 
    height: 100%; 
    transform-origin: center center;
    transition: transform 0.3s ease;
}

/* Force massive 800x800 internal SVG back to liquid dimensions to squash perfectly inside UI */
#celestial-map svg {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* Text Area */
.wsmc-poster-text { text-align: center; }
.wsmc-divider { width: 40px; height: 1px; background: #000; margin: 10px auto; }
.wsmc-main-title {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 10px 0;
}

.wsmc-sub-text { font-size: 14px; font-weight: 300; margin-bottom: 5px; }
.wsmc-coord-text { font-size: 11px; font-weight: 400; opacity: 0.7; letter-spacing: 1px; }

/* Moon Preview */
.wsmc-moon-preview {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}
.wsmc-moon-preview .moon-icon { font-size: 24px; }

/* Font Variations */
.font-modern { font-family: 'Montserrat', sans-serif !important; }
.font-classic { font-family: 'Lora', serif !important; }
.font-elegant { font-family: 'Playfair Display', serif !important; }
.font-romantic { font-family: 'Dancing Script', cursive !important; }

/* Sidebar Controls */
.wsmc-controls-sidebar {
    width: 350px;
    background: #2a2a2a;
    padding: 25px;
    border-radius: 15px;
    position: relative;
}

.wsmc-step-tabs { display: flex; gap: 8px; margin-bottom: 25px; }
.wsmc-tab {
    flex: 1; padding: 10px 5px; background: #333; border: none; color: #aaa;
    border-radius: 8px; cursor: pointer; font-size: 11px; text-transform: uppercase;
    font-weight: 700; transition: all 0.2s;
}
.wsmc-tab.active { background: var(--wsmc-accent); color: #fff; }

.wsmc-step-content { display: none; }
.wsmc-step-content.active { display: block; }

h4 { margin: 0 0 15px 0; font-size: 18px; font-weight: 700; }

.wsmc-option-label {
    font-size: 12px; text-transform: uppercase; color: #888;
    margin-bottom: 10px; margin-top: 20px;
}

/* Grid Selections */
.wsmc-shape-grid, .wsmc-style-grid, .wsmc-font-grid, .wsmc-border-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.wsmc-font-grid { grid-template-columns: repeat(2, 1fr); }

.wsmc-shape-option, .wsmc-style-option, .wsmc-font-option, .wsmc-border-option {
    background: #383838; padding: 15px 5px; border-radius: 10px;
    text-align: center; font-size: 11px; cursor: pointer; border: 2px solid transparent;
    transition: all 0.2s;
}
.wsmc-shape-option.active, .wsmc-style-option.active, .wsmc-font-option.active, .wsmc-border-option.active {
    border-color: var(--wsmc-accent); background: #444;
}

.wsmc-location-group { position: relative; }
.wsmc-autocomplete-results {
    position: absolute; top: 100%; left: 0; right: 0; background: #333;
    border-radius: 0 0 8px 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    z-index: 1001; max-height: 200px; overflow-y: auto; display: none;
}
.wsmc-location-item {
    padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #444;
    font-size: 12px; transition: background 0.2s;
}
.wsmc-location-item:hover { background: #444; }

.wsmc-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.wsmc-input-group { margin-bottom: 15px; }
.wsmc-input-group label { display: block; font-size: 12px; color: #aaa; margin-bottom: 5px; }
.wsmc-input-group input, .wsmc-input-group textarea {
    width: 100%; background: #333; border: 1px solid #444; color: #fff;
    padding: 12px; border-radius: 8px; font-family: inherit;
}

.wsmc-checkbox-group {
    display: grid; grid-template-columns: 1fr; gap: 10px; margin: 20px 0;
    background: #333; padding: 15px; border-radius: 10px;
}
.wsmc-checkbox-group label { display: flex; align-items: center; gap: 8px; font-size: 11px; cursor: pointer; }

/* Nav Buttons */
.wsmc-nav-buttons { display: flex; gap: 10px; margin-top: 30px; }
.wsmc-prev-btn, .wsmc-next-btn {
    flex: 1; padding: 14px; border-radius: 10px; font-weight: 700; cursor: pointer;
    transition: all 0.2s; border: none; font-size: 13px;
}
.wsmc-prev-btn { background: #444; color: #fff; }
.wsmc-next-btn { background: var(--wsmc-accent); color: #fff; }

.wsmc-price-display {
    text-align: center; margin-bottom: 20px; padding: 15px;
    background: #333; border-radius: 12px;
}
.wsmc-price-display .price { font-size: 24px; font-weight: 700; color: var(--wsmc-accent); }

.wsmc-buy-button {
    width: 100% !important; padding: 18px !important; background: var(--wsmc-accent) !important;
    color: #fff !important; font-size: 18px !important; font-weight: 700 !important;
    border-radius: 12px !important; border: none !important; cursor: pointer !important;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .wsmc-main-layout { flex-direction: column; }
    .wsmc-controls-sidebar { width: 100%; }
    .wsmc-poster-mockup { width: 100%; }
}