/* ============================================ MONLIS Website - Contact Page Interactive location selector with map ============================================ *//* ========================================== SECTION CONTAINER ========================================== */.contact {position:relative;width:100%;background-color:#f8f8f8;padding:80px 0;min-height:calc(100vh - 200px);}.contact__background {position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}.contact__background-texture {width:100%;height:100%;background-image:url('https://images.unsplash.com/photo-1569593825348-63ddb8403b10?w=1080');background-size:cover;background-position:center;opacity:0.03;}.contact__container {position:relative;z-index:1;max-width:1340px;margin:0 auto;padding:0 20px;}/* ========================================== MAIN CARD ========================================== */.contact__card {display:flex;background-color:var(--color-white);border-radius:30px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.15);overflow:hidden;}/* ========================================== LEFT PANEL - Navigation ========================================== */.contact__nav-panel {width:35%;min-width:320px;display:flex;flex-direction:column;background-color:var(--color-white);border-right:1px solid rgba(0,0,0,0.05);}.contact__header {padding:48px 40px 32px;}.contact__title {font-family:var(--font-secondary);font-weight:700;font-size:36px;text-transform:uppercase;letter-spacing:2px;color:var(--color-mine-shaft);margin:0 0 8px;}.contact__subtitle {font-family:var(--font-secondary);font-size:13px;text-transform:uppercase;letter-spacing:3px;color:#666666;margin:0;}/* ========================================== LOCATION BUTTONS ========================================== */.contact__locations {flex:1;display:flex;flex-direction:column;gap:8px;padding:0 32px 32px;}.contact__location-btn {display:flex;align-items:center;justify-content:space-between;width:100%;padding:20px 24px;background:transparent;border:1px solid transparent;border-radius:12px;cursor:pointer;transition:all 0.3s ease;}.contact__location-btn:hover {background-color:#f5f5f5;border-color:#e5e5e5;}.contact__location-btn--active {background-color:var(--color-mine-shaft);border-color:var(--color-mine-shaft);transform:scale(1.02);box-shadow:0 4px 12px rgba(0,0,0,0.15);}.contact__location-name {font-family:var(--font-secondary);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:1px;color:var(--color-mine-shaft);transition:color 0.3s ease;}.contact__location-btn--active .contact__location-name {color:var(--color-white);}.contact__location-arrow {width:16px;height:16px;stroke:var(--color-mine-shaft);opacity:0;transform:translateX(-8px);transition:all 0.3s ease;}.contact__location-btn:hover .contact__location-arrow {opacity:1;transform:translateX(0);}.contact__location-btn--active .contact__location-arrow {stroke:var(--color-white);opacity:1;transform:translateX(0);}/* ========================================== GENERAL INFO (Bottom of left panel) ========================================== */.contact__general-info {padding:32px;background-color:#fafafa;border-top:1px solid #f0f0f0;margin-top:auto;}.contact__general-item {display:flex;align-items:center;gap:16px;}.contact__general-icon {width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--color-white);border:1px solid #e5e5e5;border-radius:50%;flex-shrink:0;}.contact__general-icon svg {width:18px;height:18px;stroke:var(--color-mine-shaft);}.contact__general-text {display:flex;flex-direction:column;gap:2px;}.contact__general-label {font-family:var(--font-secondary);font-size:10px;text-transform:uppercase;letter-spacing:2px;color:#999999;}.contact__general-value {font-family:var(--font-secondary);font-weight:500;font-size:14px;color:var(--color-mine-shaft);text-decoration:none;transition:color 0.2s ease;}.contact__general-value:hover {color:#666666;}/* ========================================== RIGHT PANEL - Content ========================================== */.contact__content-panel {flex:1;position:relative;min-height:700px;background-color:var(--color-mine-shaft);overflow:hidden;}/* ========================================== IMAGES ========================================== */.contact__image-wrapper {position:absolute;top:0;left:0;width:100%;height:100%;}.contact__image {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.7s ease;}.contact__image--active {opacity:1;}.contact__image-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient( to top,rgba(35,35,35,1) 0%,rgba(35,35,35,0.6) 40%,transparent 100% );pointer-events:none;}/* ========================================== MAP OVERLAY ========================================== */.contact__map-overlay {position:absolute;top:0;left:0;width:100%;height:100%;z-index:30;background-color:rgba(0,0,0,0.9);backdrop-filter:blur(4px);opacity:0;transform:translateY(100%);transition:all 0.5s ease;pointer-events:none;}.contact__map-overlay--active {opacity:1;transform:translateY(0);pointer-events:auto;}.contact__map-close {position:absolute;top:24px;right:24px;z-index:31;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:var(--color-white);border:none;border-radius:50%;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:transform 0.2s ease;}.contact__map-close:hover {transform:scale(1.1);}.contact__map-close svg {width:20px;height:20px;stroke:var(--color-mine-shaft);}.contact__map-iframe {width:100%;height:100%;border:none;filter:grayscale(1) invert(1);opacity:0.9;}/* ========================================== LOCATION DETAILS ========================================== */.contact__details {position:absolute;bottom:0;left:0;width:100%;z-index:10;padding:48px;}.contact__detail {display:none;animation:fadeInUp 0.5s ease;}.contact__detail--active {display:block;}@keyframes fadeInUp {from {opacity:0;transform:translateY(20px);}to {opacity:1;transform:translateY(0);}}/* Status Badge */.contact__status {display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background-color:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.2);border-radius:9999px;backdrop-filter:blur(8px);margin-bottom:16px;}.contact__status-dot {width:6px;height:6px;background-color:#22c55e;border-radius:50%;animation:pulse 2s infinite;}@keyframes pulse {0%,100% {opacity:1;}50% {opacity:0.5;}}.contact__status-text {font-family:var(--font-secondary);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--color-white);}/* Location Title */.contact__location-title {font-family:var(--font-secondary);font-weight:700;font-size:56px;text-transform:uppercase;letter-spacing:-1px;color:var(--color-white);margin:0 0 24px;line-height:1;}/* Info Grid */.contact__info-grid {display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:640px;}.contact__info-col {display:flex;flex-direction:column;gap:16px;}.contact__info-item {display:flex;flex-direction:column;gap:4px;}.contact__info-label {font-family:var(--font-secondary);font-size:11px;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,0.5);}.contact__info-value {font-family:var(--font-secondary);font-size:15px;line-height:1.5;color:var(--color-white);padding-left:12px;border-left:2px solid rgba(255,255,255,0.2);margin:0;transition:border-color 0.2s ease;}.contact__info-value:hover {border-color:var(--color-white);}.contact__info-value--hours {display:flex;align-items:center;gap:8px;}.contact__info-value--hours svg {width:14px;height:14px;stroke:rgba(255,255,255,0.6);flex-shrink:0;}.contact__info-contacts {display:flex;flex-direction:column;gap:4px;padding-left:12px;border-left:2px solid rgba(255,255,255,0.2);}.contact__info-link {font-family:var(--font-secondary);font-size:15px;color:var(--color-white);text-decoration:none;transition:opacity 0.2s ease;}.contact__info-link:hover {opacity:0.7;text-decoration:underline;}/* Map Button */.contact__map-btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;background-color:var(--color-white);border:none;border-radius:8px;font-family:var(--font-secondary);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--color-mine-shaft);cursor:pointer;transition:all 0.2s ease;}.contact__map-btn:hover {background-color:#f0f0f0;transform:translateY(-2px);}.contact__map-btn svg {width:16px;height:16px;stroke:var(--color-mine-shaft);}/* ========================================== RESPONSIVE ========================================== */@media (max-width:1200px) {.contact__location-title {font-size:48px;}.contact__details {padding:40px;}}@media (max-width:1024px) {.contact {padding:60px 0;}.contact__card {flex-direction:column;border-radius:20px;}.contact__nav-panel {width:100%;min-width:auto;border-right:none;border-bottom:1px solid rgba(0,0,0,0.05);}.contact__header {padding:32px 24px 24px;}.contact__title {font-size:28px;}.contact__locations {flex-direction:row;flex-wrap:wrap;padding:0 24px 24px;gap:8px;}.contact__location-btn {flex:1;min-width:140px;padding:16px 20px;justify-content:center;}.contact__location-name {font-size:14px;}.contact__location-arrow {display:none;}.contact__general-info {display:none;}.contact__content-panel {min-height:500px;}.contact__location-title {font-size:40px;}.contact__details {padding:32px;}.contact__info-grid {gap:24px;}}@media (max-width:768px) {.contact {padding:40px 0;}.contact__container {padding:0 16px;}.contact__card {border-radius:16px;}.contact__header {padding:24px 20px 20px;}.contact__title {font-size:24px;}.contact__subtitle {font-size:11px;}.contact__locations {padding:0 16px 20px;}.contact__location-btn {padding:14px 16px;}.contact__location-name {font-size:13px;}.contact__content-panel {min-height:450px;}.contact__location-title {font-size:32px;}.contact__details {padding:24px;}.contact__info-grid {grid-template-columns:1fr;gap:20px;}.contact__map-btn {width:100%;margin-top:8px;}}@media (max-width:480px) {.contact {padding:24px 0;}.contact__locations {flex-direction:column;}.contact__location-btn {min-width:auto;}.contact__content-panel {min-height:400px;}.contact__location-title {font-size:28px;}.contact__details {padding:20px;}.contact__info-value,.contact__info-link {font-size:14px;}.contact__map-close {width:40px;height:40px;top:16px;right:16px;}}