/* Custom Design Page Styles */

/* Design Header */
.design-header {
    background: linear-gradient(135deg, var(--primary-black) 0%, var(--secondary-black) 100%);
    padding: 60px 0;
    margin-top: 90px;
    text-align: center;
}

.design-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--brand-blue);
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(104, 172, 205, 0.3);
}

.design-description {
    font-size: 18px;
    color: var(--light-gray);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Design Interface Layout */
.design-interface {
    padding: 80px 0;
    background-color: var(--primary-black);
}

.design-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

/* 3D Mouth Viewer */
.mouth-viewer {
    background-color: var(--secondary-black);
    border-radius: 12px;
    padding: 30px;
    border: 2px solid #333;
}

.viewer-header {
    text-align: center;
    margin-bottom: 30px;
}

.viewer-header h2 {
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.viewer-header p {
    color: var(--gray);
    font-size: 14px;
}

/* 3D Mouth Container */
.mouth-container {
    position: relative;
    background: radial-gradient(ellipse at center, #2a2a2a 0%, var(--primary-black) 100%);
    border-radius: 30px;
    padding: 50px;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mouth-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(40, 40, 40, 0.8) 0%, rgba(20, 20, 20, 0.4) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.mouth-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 120px;
    background: linear-gradient(to bottom, rgba(60, 30, 30, 0.2) 0%, rgba(40, 20, 20, 0.4) 50%, rgba(20, 10, 10, 0.3) 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.mouth-3d {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
    z-index: 2;
}

/* Removed side-view and perspective-view transforms */

/* Teeth Rows */
.teeth-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 10px 0;
    perspective: 1000px;
}

.upper-teeth {
    transform: rotateX(-8deg);
    margin-bottom: 25px;
    align-items: flex-end;
}

.lower-teeth {
    transform: rotateX(8deg);
    margin-top: 25px;
    align-items: flex-start;
}

.upper-teeth .tooth {
    transform-origin: bottom center;
}

.lower-teeth .tooth {
    transform-origin: top center;
}

.upper-teeth .tooth {
    border-radius: 10px 10px 6px 6px;
    height: 48px;
}

.lower-teeth .tooth {
    border-radius: 6px 6px 10px 10px;
    height: 42px;
}

/* Specific tooth shapes based on realistic dental anatomy - Upper Teeth */
.tooth[data-tooth="1"], .tooth[data-tooth="9"] {
    /* Upper central incisors - wider, prominent front teeth */
    width: 36px;
    height: 48px;
    border-radius: 40% 40% 25% 25% / 50% 50% 50% 50%;
}

.tooth[data-tooth="2"], .tooth[data-tooth="10"] {
    /* Upper lateral incisors - smaller, angled */
    width: 32px;
    height: 44px;
    border-radius: 45% 45% 30% 30% / 55% 55% 45% 45%;
}

.tooth[data-tooth="3"], .tooth[data-tooth="11"] {
    /* Upper canines - pointed, longer */
    width: 28px;
    height: 52px;
    border-radius: 50% 50% 15% 15% / 70% 70% 30% 30%;
    background: linear-gradient(145deg, #FFFFFF 0%, #F5F5F5 50%, #EEEEEE 100%);
}

.tooth[data-tooth="4"], .tooth[data-tooth="5"], .tooth[data-tooth="12"], .tooth[data-tooth="13"] {
    /* Upper premolars - rounded, smaller */
    width: 30px;
    height: 38px;
    border-radius: 40% 40% 35% 35% / 50% 50% 50% 50%;
}

.tooth[data-tooth="6"], .tooth[data-tooth="7"], .tooth[data-tooth="14"], .tooth[data-tooth="15"] {
    /* Upper molars - wider, flatter */
    width: 34px;
    height: 36px;
    border-radius: 35% 35% 40% 40% / 45% 45% 55% 55%;
}

.tooth[data-tooth="8"], .tooth[data-tooth="16"] {
    /* Upper wisdom teeth - smaller molars */
    width: 32px;
    height: 34px;
    border-radius: 35% 35% 40% 40% / 45% 45% 55% 55%;
}

/* Lower Teeth */
.tooth[data-tooth="24"], .tooth[data-tooth="32"] {
    /* Lower central incisors - narrower than upper */
    width: 30px;
    height: 40px;
    border-radius: 35% 35% 30% 30% / 45% 45% 55% 55%;
}

.tooth[data-tooth="23"], .tooth[data-tooth="31"] {
    /* Lower lateral incisors */
    width: 28px;
    height: 38px;
    border-radius: 40% 40% 35% 35% / 50% 50% 50% 50%;
}

.tooth[data-tooth="22"], .tooth[data-tooth="30"] {
    /* Lower canines - pointed but shorter than upper */
    width: 26px;
    height: 46px;
    border-radius: 50% 50% 20% 20% / 65% 65% 35% 35%;
}

.tooth[data-tooth="21"], .tooth[data-tooth="20"], .tooth[data-tooth="29"], .tooth[data-tooth="28"] {
    /* Lower premolars */
    width: 28px;
    height: 34px;
    border-radius: 40% 40% 35% 35% / 50% 50% 50% 50%;
}

.tooth[data-tooth="19"], .tooth[data-tooth="18"], .tooth[data-tooth="27"], .tooth[data-tooth="26"] {
    /* Lower molars */
    width: 32px;
    height: 32px;
    border-radius: 35% 35% 40% 40% / 45% 45% 55% 55%;
}

.tooth[data-tooth="17"], .tooth[data-tooth="25"] {
    /* Lower wisdom teeth */
    width: 30px;
    height: 30px;
    border-radius: 35% 35% 40% 40% / 45% 45% 55% 55%;
}

/* Individual Teeth */
.tooth {
    width: 32px;
    height: 40px;
    margin: 0 1px;
    background: linear-gradient(145deg, #FFFFFF 0%, #F8F8F8 30%, #F0F0F0 70%, #E8E8E8 100%);
    border: 1px solid rgba(200, 200, 200, 0.6);
    border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    color: rgba(100, 100, 100, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

.tooth::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 30%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.tooth::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 4px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.tooth:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 0 20px var(--brand-blue),
        inset 0 1px 3px rgba(255, 255, 255, 0.9),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    border-color: var(--brand-blue);
    background: linear-gradient(145deg, #FFFFFF 0%, #F8F8FF 50%, #F0F0F0 100%);
}

.tooth.selected {
    background: linear-gradient(145deg, var(--brand-blue), #5a9bb8);
    color: var(--white);
    border-color: var(--brand-blue);
    box-shadow: 
        0 6px 12px rgba(104, 172, 205, 0.4),
        0 0 20px rgba(104, 172, 205, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.tooth.selected:hover {
    background: linear-gradient(145deg, #7bc4e8, var(--brand-blue));
}

/* Metal-specific tooth colors */
.tooth.metal-gold {
    background: linear-gradient(145deg, #FFD700 0%, #FFC107 50%, #FF8F00 100%);
    color: #8B4513;
    border-color: #DAA520;
    box-shadow: 
        0 4px 12px rgba(255, 215, 0, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.8),
        inset 0 -1px 2px rgba(255, 140, 0, 0.3);
}

.tooth.metal-silver {
    background: linear-gradient(145deg, #F5F5F5 0%, #E0E0E0 50%, #C0C0C0 100%);
    color: #404040;
    border-color: #A9A9A9;
    box-shadow: 
        0 4px 12px rgba(192, 192, 192, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.9),
        inset 0 -1px 2px rgba(160, 160, 160, 0.3);
}

.tooth.metal-rose-gold {
    background: linear-gradient(145deg, #FFB6C1 0%, #F08080 50%, #CD5C5C 100%);
    color: #8B4513;
    border-color: #CD853F;
    box-shadow: 
        0 4px 12px rgba(255, 182, 193, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.8),
        inset 0 -1px 2px rgba(205, 92, 92, 0.3);
}

.tooth.metal-platinum {
    background: linear-gradient(145deg, #F0F0F0 0%, #E5E4E2 50%, #BCC6CC 100%);
    color: #2F4F4F;
    border-color: #C0C0C0;
    box-shadow: 
        0 4px 12px rgba(188, 198, 204, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.9),
        inset 0 -1px 2px rgba(160, 160, 160, 0.3);
}

.tooth.metal-black {
    background: linear-gradient(145deg, #666 0%, #444 50%, #222 100%);
    color: var(--white);
    border-color: #666;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.6),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.5);
}

/* View Controls */
.view-controls {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.view-btn {
    padding: 10px 20px;
    background-color: var(--primary-black);
    color: var(--white);
    border: 2px solid #333;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.view-btn:hover,
.view-btn.active {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--white);
}

/* Design Panel */
.design-panel {
    background-color: var(--secondary-black);
    border-radius: 12px;
    padding: 30px;
    border: 2px solid #333;
    position: sticky;
    top: 120px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.panel-section {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #333;
}

.panel-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.panel-section h3 {
    color: var(--brand-blue);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Metal Options */
.metal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.metal-option {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: var(--primary-black);
    border: 2px solid #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.metal-option:hover {
    border-color: var(--brand-blue);
    background-color: rgba(104, 172, 205, 0.1);
}

.metal-option.active {
    border-color: var(--brand-blue);
    background-color: rgba(104, 172, 205, 0.2);
    box-shadow: 0 0 0 2px rgba(104, 172, 205, 0.3);
}

.metal-preview {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 12px;
    border: 2px solid #666;
}

.metal-preview.gold {
    background: linear-gradient(145deg, #FFD700, #FFA500);
}

.metal-preview.silver {
    background: linear-gradient(145deg, #E5E5E5, #C0C0C0);
}

.metal-preview.rose-gold {
    background: linear-gradient(145deg, #FFDAB9, #B76E79);
}

.metal-preview.platinum {
    background: linear-gradient(145deg, #E5E4E2, #BCC6CC);
}

.metal-preview.black {
    background: linear-gradient(145deg, #555, #333);
}

.metal-info {
    display: flex;
    flex-direction: column;
}

.metal-name {
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
}

.metal-price {
    color: var(--gray);
    font-size: 12px;
}

/* Selected Teeth List */
.selected-teeth-list {
    min-height: 60px;
}

.no-selection {
    color: var(--gray);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

.tooth-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--primary-black);
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid #333;
}

.tooth-item:last-child {
    margin-bottom: 0;
}

.tooth-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tooth-number {
    font-weight: bold;
    color: var(--brand-blue);
}

.tooth-metal {
    font-size: 12px;
    color: var(--gray);
}

.remove-tooth {
    background: none;
    border: none;
    color: #ff4444;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.remove-tooth:hover {
    background-color: rgba(255, 68, 68, 0.1);
}

/* Design Summary */
.design-summary {
    background-color: var(--primary-black);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #333;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--white);
}

.summary-row:last-child {
    margin-bottom: 0;
    border-top: 1px solid #333;
    padding-top: 8px;
    font-weight: bold;
}

#total-price {
    color: var(--brand-blue);
    font-size: 18px;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.quick-actions .quick-btn[data-action="select-full-set"] {
    grid-column: 1 / -1;
}

.quick-btn {
    padding: 8px 12px;
    background-color: var(--primary-black);
    color: var(--white);
    border: 1px solid #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    font-weight: 600;
}

.quick-btn:hover {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.quick-btn[data-action="clear-all"] {
    background-color: #333;
    color: #ff4444;
}

.quick-btn[data-action="clear-all"]:hover {
    background-color: #ff4444;
    color: var(--white);
}

/* CTA Button */
.design-cta-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--brand-blue), #5a9bb8);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.design-cta-btn:hover {
    background: linear-gradient(135deg, #7bc4e8, var(--brand-blue));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(104, 172, 205, 0.4);
}

.design-cta-btn:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cta-note {
    color: var(--gray);
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
}

/* How It Works Section */
.how-it-works {
    padding: 80px 0;
    background-color: var(--secondary-black);
}

.how-it-works h2 {
    text-align: center;
    color: var(--white);
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 50px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.step {
    text-align: center;
    padding: 30px 20px;
    background-color: var(--primary-black);
    border-radius: 12px;
    border: 2px solid #333;
    transition: all 0.3s ease;
}

.step:hover {
    border-color: var(--brand-blue);
    transform: translateY(-5px);
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--brand-blue), #5a9bb8);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    margin: 0 auto 20px;
}

.step h3 {
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.step p {
    color: var(--gray);
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .design-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .design-panel {
        position: static;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .design-title {
        font-size: 36px;
    }
    
    .design-description {
        font-size: 16px;
    }
    
    .mouth-container {
        padding: 20px;
    }
    
    .tooth {
        width: 28px;
        height: 36px;
        font-size: 9px;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-actions {
        grid-template-columns: 1fr;
    }
}