/**
 * OpticoBD Frame Size Guide - Frontend Styles
 * Version: 1.1.0
 */
.wd-glasses-anchor-trigger { color: #133966 !important; font-weight: 500; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; transition: color 0.3s ease !important; }
.wd-glasses-text-label { border-bottom: 1px solid #133966; line-height: 1.2; transition: border-color 0.3s ease; }
.wd-glasses-anchor-trigger:hover { color: #C9A84C !important; }
.wd-glasses-anchor-trigger:hover .wd-glasses-text-label { border-color: #C9A84C; }
.wd-size-badge { font-size: 11px; background: #133966 !important; color: #ffffff !important; padding: 2px 8px; border-radius: 4px; font-weight: 700; margin-left: 4px; text-transform: uppercase; text-decoration: none !important; display: inline-block; vertical-align: middle; transition: all 0.3s ease; }
.wd-glasses-anchor-trigger:hover .wd-size-badge { background: #C9A84C !important; }

/* 🚀 GPU ACCELERATION FIX FOR BACKGROUND */
.wd-glasses-mfp-fade.mfp-bg { 
    background: rgba(255, 255, 255, 0.25) !important; 
    backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; 
    transform: translateZ(0); backface-visibility: hidden; will-change: opacity, backdrop-filter; 
    opacity: 0; transition: opacity 0.3s ease-out; 
}
.wd-glasses-mfp-fade.mfp-bg.mfp-ready { opacity: 1; }
.wd-glasses-mfp-fade.mfp-bg.mfp-removing { opacity: 0; }
.wd-glasses-mfp-fade.mfp-wrap .mfp-content { opacity: 0; transform: scale(0.95); transition: all 0.3s ease-out; }
.wd-glasses-mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; transform: scale(1); }
.wd-glasses-mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; transform: scale(0.95); }
.wd-glasses-mfp-fade .mfp-close { display: none !important; }

/* 🚀 GPU ACCELERATION + SCROLL/CUT-OFF FIX FOR POPUP */
.wd-glasses-popup-container { 
    background: rgba(255, 255, 255, 0.88) !important; 
    backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; 
    transform: translateZ(0); backface-visibility: hidden; will-change: transform, backdrop-filter; 
    border: 1px solid rgba(255, 255, 255, 0.4) !important; 
    box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.12) !important; 
    border-radius: 12px !important; padding: 45px 30px 35px 30px; 
    max-width: 780px; margin: 25px auto; position: relative; box-sizing: border-box; 
    
    /* Smart Height & Scroll Fix */
    max-height: calc(100vh - 100px); 
    overflow-y: auto; 
    scrollbar-width: thin; 
}

/* Custom Scrollbar to match design */
.wd-glasses-popup-container::-webkit-scrollbar { width: 5px; }
.wd-glasses-popup-container::-webkit-scrollbar-thumb { background-color: rgba(19,57,102,0.3); border-radius: 10px; }

.wd-custom-close-btn { position: absolute !important; top: 15px !important; right: 15px !important; width: 32px !important; height: 32px !important; line-height: 28px !important; color: #133966 !important; font-size: 26px !important; font-weight: 300 !important; background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(2px); border-radius: 50% !important; border: 1px solid rgba(19, 57, 102, 0.15) !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; z-index: 1050 !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; }
.wd-custom-close-btn:hover { color: #C9A84C !important; border-color: rgba(201, 168, 76, 0.5) !important; background: #ffffff !important; transform: rotate(90deg) scale(1.1) !important; box-shadow: 0 4px 12px rgba(19, 57, 102, 0.1) !important; }
.wd-glasses-popup-header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid rgba(19, 57, 102, 0.1); padding-bottom: 18px; }
.wd-glasses-popup-header h3 { margin: 0; font-size: 24px; font-weight: 700; color: #133966; text-transform: uppercase; letter-spacing: 0.8px; }
.wd-glasses-popup-header p { margin: 6px 0 0 0; font-size: 14px; color: #1e293b; }
.wd-popup-highlight-size { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #C9A84C; text-transform: uppercase; letter-spacing: 0.5px; }
.wd-glasses-popup-container .row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; justify-content: center; }
.wd-glasses-popup-container .col-4 { position: relative; width: 100%; padding-right: 12px; padding-left: 12px; margin-bottom: 25px; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
.wd-glasses-icon-box { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 80px; height: 50px; margin-bottom: 12px; }
.wd-glasses-icon-box img { width: auto; height: 100%; max-height: 50px; max-width: 80px; display: block; }
.wd-glasses-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: #C9A84C; margin-bottom: 5px; font-weight: 600; }
.wd-glasses-val { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0; }

@media (min-width: 769px) { .wd-glasses-popup-container .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } }
@media (max-width: 768px) { 
    .wd-glasses-popup-container .col-4 { flex: 0 0 50%; max-width: 50%; } 
    
    /* Mobile Cut-off & Menu Overlap Fix */
    .wd-glasses-mfp-fade.mfp-wrap { padding-bottom: 90px !important; z-index: 1000000 !important; }
    .wd-glasses-popup-container { padding: 35px 20px 25px 20px; max-width: 90%; max-height: calc(100vh - 140px); } 
    
    .wd-glasses-popup-header h3 { font-size: 21px; } 
    .wd-glasses-icon-box { max-width: 70px; height: 44px; } 
    .wd-glasses-icon-box img { max-width: 70px; max-height: 44px; } 
}
@media (max-width: 480px) { 
    .wd-glasses-popup-container .col-4 { flex: 0 0 50%; max-width: 50%; } 
    .wd-glasses-popup-container .row { margin-right: -8px; margin-left: -8px; } 
    .wd-glasses-popup-container .col-4 { padding-right: 8px; padding-left: 8px; margin-bottom: 22px; } 
    .wd-glasses-val { font-size: 16px; } 
    .wd-glasses-label { font-size: 11px; } 
    .wd-glasses-icon-box { max-width: 65px; height: 40px; } 
    .wd-glasses-icon-box img { max-width: 65px; max-height: 40px; } 
}