@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap'); :root{--main-color:#960606;--light-color:#6b7280;--light-bg:#ffffff;--white:#ffffff;--black:#17181c;--border:.1rem solid rgba(20,20,25,.12);--box-shodow:0 1.2rem 3rem -1.8rem rgba(20,20,30,.16)}*{font-family:sans-serif;margin:0;padding:0;box-sizing:border-box;outline:0;border:none;text-decoration:none}::selection{background-color:var(--main-color);color:var(--white)}.empty,.heading{margin-top: 1rem; margin-bottom: 1rem;padding-bottom:2.5rem;font-size:3rem;color:var(--black);text-align:center}html{font-size:62.5%;overflow-x:hidden;scroll-behavior:smooth}.koertevarvimine{position:absolute;left:-9999px}body{background-color:var(--light-bg)}section{padding:3rem 2rem;max-width:1400px;margin:0 auto}.empty{width:100%;background-color:var(--white);padding:1.5rem;font-size:2rem}.btn,.btn-search,.inline-btn{margin-top:1rem;padding:1rem 3rem;background-color:var(--main-color);color:var(--white);cursor:pointer;text-align:center;font-size:1.8rem;text-transform:capitalize}.btn:hover,.inline-btn:hover{background-color:var(--black)}.btn-search:hover{background-color:#7a0505}.btn,.btn-search{display:block;width:100%}.inline-btn{display:inline-block}.flex-btn{display:flex;gap:1rem;justify-content:space-between;align-items:flex-end}.sr-only {border: 0 !important;clip: rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path: inset(50%) !important;clip-path: inset(50%) !important;height: 1px !important;margin: -1px !important;overflow: hidden !important;padding: 0 !important;position: absolute !important;width: 1px !important;white-space: nowrap !important;}.hidden{display:none}.visually-hidden {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}.info-box {background-color: #e7f3fe;border-left: 4px solid #2196F3;padding: 10px 15px;margin: 15px 0;border-radius: 4px;}.info-box strong {color: #1a73e8;}.no-data-message {font-style: italic;color: #777;margin: 10px 0;}.regularicon{width: 18px;height: 18px;vertical-align: middle;display: inline-block;} .char-counter {display: block;text-align: right;font-size: 0.8em;color: #666;margin-top: 2px;margin-right: 5px;} .char-counter.limit-reached {color: #cc0000;font-weight: bold;} #loginform .inputlabel, #password-reset .inputlabel, #muuda-profiili .inputlabel, #deleteAccountForm .inputlabel, .property-form form .inputlabel, #recoveryform .inputlabel, #verify2faform .inputlabel {font-size: 1.7rem;padding-top: 1rem;color: var(--light-color);display: block;text-align: left;} .btn:focus-visible, .inline-btn:focus-visible {background-color: var(--black);color: var(--white);} .redfocus:focus-visible {background-color: var(--main-color);color: var(--white);} .bluefocus:focus-visible {background-color: var(--black);color: var(--white);} input:focus-visible, textarea:focus-visible, .thumb:focus-visible {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);transform: translateY(-2px);transition: all 0.2s ease-in-out;} select:focus-visible {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);transform: translateY(-2px);transition: all 0.2s ease-in-out;} input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);transform: translateY(-2px);transition: all 0.2s ease-in-out;} .faq .box-container .box h3:focus-visible, .swal2-confirm:focus-visible, .swal2-cancel:focus-visible { outline: none;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);transform: translateY(-2px);transition: all 0.2s ease-in-out;} #logout-form{display: none;} /* --- Base Modal Styles --- */ /* Common Overlay Styles */ #flash-messages-container, #confirmation-overlay {position: fixed;inset: 0;display: flex;align-items: center;justify-content: center;padding: 20px;overflow-y: auto;pointer-events: none;opacity: 0;transition: opacity 0.2s linear;} /* Common Visible State for Overlay */ #flash-messages-container.visible, #confirmation-overlay.visible {opacity: 1;pointer-events: auto;} /* Specific Overlay Styles */ #flash-messages-container {z-index: 9960;background-color: rgba(0, 0, 0, 0.4);flex-direction: column;} #confirmation-overlay {z-index: 1070;background-color: rgba(0, 0, 0, 0.5);} /* Common Modal Box Styles */ .flash-message, .confirmation-modal {display: flex;flex-direction: column;align-items: center;background-color: #fff;border-radius: 8px;width: auto;min-width: 400px;max-width: 680px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);text-align: center;pointer-events: auto;opacity: 0;transform: scale(0.9);transition: opacity 0.25s ease-out, transform 0.25s ease-out;} /* Specific Modal Box Adjustments */ .flash-message {padding: 25px;margin-bottom: 15px;position: relative;} .confirmation-modal {padding: 30px;max-width: 600px;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);} /* Common Active/Visible State for Modal Box */ .flash-message.active,#confirmation-overlay.visible .confirmation-modal {opacity: 1;transform: scale(1);} /* Common Fade Out State for Modal Box */ .flash-message.fade-out, .confirmation-modal.fade-out {opacity: 0 !important;transform: scale(0.9) !important;transition: opacity 0.25s ease-in, transform 0.25s ease-in !important;} /* Common Icon Styles */ .flash-message-icon, .confirmation-modal-icon {margin-bottom: 15px;} .flash-message-icon svg, .confirmation-modal-icon svg {display: block;} /* Specific Icon Adjustments */ .confirmation-modal-icon {margin-bottom: 20px;color: #ffc107;} .confirmation-modal-icon svg {width: 50px;height: 50px;} /* Flash message icon colors */ .flash-message[data-type="success"] .flash-message-icon { color: #28a745; } .flash-message[data-type="error"] .flash-message-icon { color: #dc3545; } .flash-message[data-type="warning"] .flash-message-icon { color: #ffc107; } .flash-message[data-type="info"] .flash-message-icon { color: #17a2b8; } /* Common Text/Content Styles */ .flash-message-content, .confirmation-modal-text{color: #545454;word-wrap: break-word;} /* Specific Text Styles */ .flash-message-content {margin-bottom: 15px;} .flash-message-text {font-size: 3em;} .confirmation-modal-text {font-size: 1.8em;margin-bottom: 25px;} /* --- Flash Message Specific Styles --- */ .flash-message-close {position: absolute;top: 8px;right: 8px;width: 30px;height: 30px;padding: 0;background: none;border: none;font-size: 2.2em;line-height: 1;font-weight: 300;color: #aaa;cursor: pointer;transition: color 0.15s linear;} .flash-message-close:hover, .flash-message-close:focus {color: #333;outline: none;} .flash-message-timer-bar-container {position: absolute;bottom: 0;left: 0;width: 100%;height: 5px;background-color: rgba(0, 0, 0, 0.1);border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;overflow: hidden;} .flash-message-timer-bar {height: 100%;width: 100%;background-color: rgba(0, 0, 0, 0.3);transition: width linear;border-bottom-left-radius: 8px;} .flash-message[data-type="success"] .flash-message-timer-bar { background-color: rgba(40, 167, 69, 0.7); } .flash-message[data-type="error"] .flash-message-timer-bar { background-color: rgba(220, 53, 69, 0.7); } .flash-message[data-type="warning"] .flash-message-timer-bar { background-color: rgba(255, 193, 7, 0.7); } .flash-message[data-type="info"] .flash-message-timer-bar { background-color: rgba(23, 162, 184, 0.7); } /* Styles specific to the HTML modal */ .html-modal .modal-html-content {margin-top: 15px;width: 100%;} .share-modal p {margin-bottom: 15px;} .share-modal-icons {display: flex;justify-content: center;gap: 20px;margin-bottom: 20px;} .share-modal-icons a svg.regularicon {width: 40px;height: 40px;color: #333;transition: color 0.2s;} .share-modal-icons a:hover svg.regularicon {color: #007bff;} /* Changed layout: input on top, button below */ .share-modal-input {display: flex;flex-direction: column;gap: 8px;margin-top: 15px;align-items: stretch;} /* Input styling */ .share-modal-input input[readonly] {width: 100%;padding: 8px 10px;border: 1px solid #ccc;border-radius: 4px;background-color: #f8f9fa;font-size: 0.9em;box-sizing: border-box;} /* Button styling */ .share-modal-input button.copy-link-btn {display: block;padding: 10px 15px;cursor: pointer;border: none;border-radius: 4px;background-color: var(--black);color: white;font-size: 0.9em;transition: background-color 0.2s;} .share-modal-input button.copy-link-btn:hover {background-color: #222;} /* --- Confirmation Modal Specific Styles --- */ .confirmation-modal-title {font-size: 1.5em;font-weight: 600;color: #333;margin-bottom: 10px;} .confirmation-modal-actions {display: flex;justify-content: center;gap: 15px;width: 100%;margin-top: 5px;} .confirmation-modal-button {padding: 10px 25px;font-size: 1em;font-weight: 500;border-radius: 5px;border: 1px solid transparent;cursor: pointer;transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;min-width: 100px;} .confirmation-modal-button:focus {outline: none;box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);} .confirmation-modal-confirm {background-color: #dc3545;color: white;border-color: #dc3545;} .confirmation-modal-confirm:hover {background-color: #c82333;border-color: #bd2130;} .confirmation-modal-cancel {background-color: #6c757d;color: white;border-color: #6c757d;} .confirmation-modal-cancel:hover {background-color: #5a6268;border-color: #545b62;} .modal-input-container {width: 100%;margin-bottom: 20px;text-align: left; } .modal-input-label {display: block;margin-bottom: 5px;font-weight: 500;color: #495057;} .modal-input, .modal-input-container textarea {width: 100%;padding: 8px 12px;font-size: 1rem;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: 4px;transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;box-sizing: border-box;resize: none;} .modal-input:focus, .modal-input-container textarea:focus {color: #495057;background-color: #fff;border-color: #80bdff;outline: 0;box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);} .modal-validation-error {color: #dc3545;font-size: 0.9em;margin-top: 5px;min-height: 1.2em;} /* Styles for Range Input Modal */ .modal-range-input-area {display: flex;gap: 15px;width: 100%;margin-bottom: 15px;align-items: flex-end;} .modal-input-group {flex: 1;text-align: left;} .save svg {width: 18px;height: 18px;} .save.add-favorite svg {fill: transparent;stroke: #2A497A;stroke-width: 40;} .save.add-favorite:hover svg, .save.add-favorite:focus-visible svg {stroke: white;} .save.remove-favorite svg {fill: #2A497A;} .save.remove-favorite:hover svg, .save.remove-favorite:focus-visible svg {fill: white;} .header{position: sticky;top: 0; left: 0; right: 0;z-index: 1000;box-shadow: var(--box-shodow);} .header .menu ul li{position:relative} .header .navbar.nav-1 .flex{padding-top: 1rem;padding-bottom: 1rem;} .header .navbar.nav-2 .flex{padding-top: 0;padding-bottom: 0;} .header .navbar.nav-1{background-color: var(--black);} .header .navbar.nav-2{background-color: var(--white);} .header .navbar .flex{display: flex;align-items: center;justify-content: space-between;} .header .navbar .flex .logo {display: flex;align-items: center;gap: 1rem;font-size: 2.2rem;color: var(--white);text-decoration: none;} .header .navbar .flex .logo .logoimg {max-height: 95px;height: 95px;width: auto;display: block;} .header .logo:focus-visible{outline: 2px solid var(--main-color);outline-offset: 1px;box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.2);} .header .navbar .flex .logo i{color: var(--main-color);margin-right: 1rem;} .header .navbar .flex ul{list-style: none;} .header .navbar .flex ul li{float: left;position: relative;} .header .navbar .flex ul li a{display: inline-block;padding: 1.2rem 2rem;font-size: 1.8rem;color: var(--black);background-color: var(--white);} .header .navbar .flex ul li a:hover, .header .navbar .flex ul li a:focus-visible{background-color: var(--main-color);color: var(--white);} .header .navbar .flex ul li a i{margin-left: 1rem;} .header .navbar .flex ul li ul{position: absolute;width: 17rem;left: 0;} .header .navbar .flex ul li ul li{width: 100%;} .header .navbar .flex ul li ul li a{display: none;} .header .navbar .flex ul li:hover ul li a{display: block;} .header .icon {width: 24px;height: 24px;vertical-align: middle;display: inline-block;} .header a:hover .icon {opacity: 1;filter: brightness(0) invert(1);} #menu-btn{background: none;font-size: 2.5rem;color: var(--black);display: none;} .notification-bubble-small {position: absolute;top: -3px;right: -3px;background-color: #B22222;color: #FFF;border-radius: 50%;padding: 3px 7px;font-size: 12px;font-weight: 700;display: inline-block;min-width: 20px;text-align: center;z-index: 100;border: 1px solid #FFF;} .footer{background-color: var(--black);} .footer .flex{display: flex;flex-wrap: wrap;gap: 2rem;justify-content: space-between;} .footer .flex .box{flex: 1 1 30rem;} .footer .flex .box a{display: block;padding: 1rem 0;font-size: 1.8rem;} .footer .box a:focus-visible{outline: 2px solid var(--main-color);outline-offset: 1px;box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.2);} .footer .flex .box a span{color: var(--white);} .footer .flex .box a:hover span{text-decoration: underline;} .footer .flex .box a i{color: var(--main-color);} .footer .flex .box:last-child{text-align: right;} .footer .flex .box:last-child a i{margin-left: 1.5rem;} .footer .flex .box:first-child a i{margin-right: 1.5rem;} .footer .flex .box:nth-child(2){text-align: center;} .footer .credit{padding: 3rem 2rem;text-align: center;border-top: var(--border);font-size: 2rem;color: var(--white);margin-top: 2rem;} .footer .credit span{color: var(--main-color);} #company_details {display: none;} .old-price {text-decoration: line-through;} .vip-badge{position:absolute;top:10px;left:7px;background-color:var(--main-color);color:#fff;font-size:9px;font-weight:700;padding:3px 7px;border-radius:5px;align-items:center;z-index:2} .form-container form{max-width:50rem;margin:0 auto;background-color:var(--white);box-shadow:var(--box-shodow);padding:2rem;text-align:center} .form-container form h3{padding-bottom:1rem;font-size:2.5rem;color:var(--black);text-transform:capitalize} .form-container form .box{border:var(--border);padding:1.4rem;color:var(--black);margin:1rem 0;width:100%;font-size:1.8rem} .form-container form p{font-size:1.7rem;padding:1rem 0;color:var(--light-color)}.form-container form p a{color:var(--main-color)} .form-container form p a:hover, .form-container form p a:focus-visible{text-decoration:underline} .open-modal-btn{color: black;} .open-modal-btn:hover{color: var(--black);background: none;} .pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:20px auto;padding:10px;max-width:100%;overflow-x:auto;box-sizing:border-box} .pagination a{display:inline-block;padding:10px 15px;font-size:16px;color:#555;border:1px solid #ddd;border-radius:5px;text-decoration:none;transition:.3s;white-space:nowrap} .pagination a:hover, .pagination a:focus-visible{color:#fff;background:var(--black);border-color:var(--border)} .pagination a.active{background:var(--black);color:#fff;font-weight:700;pointer-events:none} .pagination a.prev-next{font-weight:700;color:var(--black);border-color:var(--border)} .pagination a.prev-next:hover, .pagination a.prev-next:focus-visible{background:#0056b3;border-color:#0056b3;color:#fff} .empty-message {text-align: center;font-size: 1.2rem;color: #666;background-color: #f9f9f9;padding: 1rem;margin: 1.5rem 0;border: 1px solid #ddd;border-radius: 5px;} .empty-message a.btn {margin-top: 1rem;display: inline-block;text-decoration: none;background-color: #007bff;color: white;padding: 0.5rem 1rem;border-radius: 3px;font-size: 1rem;transition: background-color 0.3s ease;} .empty-message a.btn:hover, .empty-message a.btn:focus-visible {background-color: #0056b3;} @media (max-width:1150px){ .header .navbar .menu{position: absolute;top: 99%; left: 0; right: 0;background-color: var(--white);border-top: var(--border);transition: .2s linear;z-index:1;clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);} .header .navbar .menu.active{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} .header .navbar .menu ul li{width: 100%;position: relative;} .header .navbar .menu ul li a{width: 100%;} .header .navbar .menu ul li ul{position: relative;width: 100%;} .header .navbar .menu ul li ul li a{padding-left: 4rem;background-color: var(--black);color: var(--white);} #menu-btn{display: inline-block;} .notification-bubble-small{top: -1px;right: calc(85%);padding: 3px 4px;font-size: 8px;} } @media (max-width:992px){ html{font-size: 55%;} .footer{display: flex;flex-direction: column;align-items: center;padding: 2rem 1rem;background-color: var(--black);} .footer .flex{display: flex;flex-wrap: wrap;gap: 1.5rem;justify-content: space-between;align-items: center;width: 100%;} .footer .flex .box:first-child{flex: 1 1 100%;text-align: left;} .footer .flex .box:nth-child(2),.footer .flex .box:nth-child(3){flex: 1 1 45%;text-align: left;} .footer .box a{display: inline-flex;align-items: center;font-size: 1.6rem;color: var(--white);text-decoration: none;gap: 0.5rem;padding: 0.3rem 0;white-space: nowrap;} .footer .box a i{color: var(--main-color);} .footer .box a:hover span{text-decoration: underline;} .footer .credit {font-size: 1.4rem;color: var(--white);text-align: center;margin-top: 2rem;} .footer .credit span {color: var(--main-color);} } @media (max-width:768px){ .notification-bubble-small {top: -2px;right: calc(70%);padding: 3px 5px;font-size: 9px;min-width: 15px;} } @media (max-width:450px){ html{font-size: 50%;} .header .navbar .flex .logo{font-size: 1.8rem;} .header .navbar .flex .logo .logoimg {max-height: 32px;height: 32px;width: 210px;} .footer {display: flex;flex-direction: column;align-items: center;padding: 2rem 1rem;background-color: var(--black);} .footer .flex{display: flex;flex-wrap: wrap;gap: 1.5rem;justify-content: space-between;align-items: center;width: 100%;} .footer .flex .box:first-child {width: 100%;text-align: left;} .footer .flex .box:nth-child(2),.footer .flex .box:nth-child(3){flex: 1 1 45%;text-align: left;} .footer .box a{display: inline-flex;align-items: center;font-size: 1.6rem;color: var(--white);text-decoration: none;gap: 0.5rem;padding: 0.3rem 0;white-space: nowrap;} .footer .box a:hover span{text-decoration: underline;} .footer .credit{font-size: 1.4rem;color: var(--white);text-align: center;margin-top: 2rem;} .footer .credit span{color: var(--main-color);} .pagination a {padding: 8px 10px;font-size: 14px;} .pagination {gap: 6px;} .flex-btn{flex-flow: column;gap: 0;} .notification-bubble-small{top: -1px;right: calc(70%);padding: 3px 4px;font-size: 8px;} } /* ============================================================ MK Minimal Redesign · token-based, applies site-wide White canvas, one red accent, hairline surfaces, calm type. ============================================================ */ :root{ --fg:#17181c; --muted:#6b7280; --dim:#9aa1ab; --hair:rgba(20,20,25,.10); --hair-strong:rgba(20,20,25,.16); --surface:#ffffff; --surface-2:#f5f6f8; --panel:#14161b; --panel-2:#20242e; --panel-hair:rgba(255,255,255,.14); --accent:#960606; --accent-hover:#7a0505; --accent-ink:#ffffff; --radius:1.2rem; --radius-lg:1.8rem; --radius-pill:999px; --shadow:0 1.2rem 3rem -1.8rem rgba(20,20,30,.18); --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:'Sora',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; } body{background:var(--light-bg);color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} body,input,select,textarea,button,h1,h2,h3,h4,h5,p,a,span,li,label{font-family:var(--font-sans);} /* calmer focus: a single accent ring, no jump */ input:focus-visible,select:focus-visible,textarea:focus-visible,.thumb:focus-visible{transform:none;box-shadow:0 0 0 3px rgba(150,6,6,.14);} /* Headings */ .heading{font-family:var(--font-display);font-size:2.8rem;font-weight:800;letter-spacing:-.02em;color:var(--fg);padding-bottom:1.4rem;} /* Buttons (collapses the legacy duplicate .btn rules) */ .btn,.inline-btn{margin-top:1rem;padding:1.1rem 2.2rem;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);font-size:1.5rem;font-weight:600;text-transform:none;line-height:1.15;cursor:pointer;transition:background-color .18s ease,transform .18s ease;} .btn:hover,.inline-btn:hover,.btn:focus-visible,.inline-btn:focus-visible{background:var(--accent-hover);color:var(--accent-ink);transform:translateY(-1px);} .btn{display:block;width:100%;} .inline-btn{display:inline-block;width:auto;} /* ---------- Header: white, minimal ---------- */ .header{background:var(--surface);box-shadow:none;border-bottom:1px solid var(--hair);} .header .navbar.nav-1,.header .navbar.nav-2{background:var(--surface);} .header .navbar.nav-1{border-bottom:1px solid var(--hair);} .header .navbar.nav-1 .flex{padding:1.1rem 0;} .header .navbar .flex .logo{color:var(--fg);font-size:2rem;font-weight:800;letter-spacing:-.01em;gap:.9rem;} .header .navbar .flex .logo i{color:var(--accent);} .header .navbar.nav-1 .flex ul li a{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-pill);padding:.85rem 1.8rem;font-size:1.4rem;font-weight:600;} .header .navbar.nav-1 .flex ul li a:hover,.header .navbar.nav-1 .flex ul li a:focus-visible{background:var(--accent-hover);color:var(--accent-ink);} .header .navbar.nav-2 .flex ul li a{background:transparent;color:var(--fg);font-size:1.5rem;font-weight:500;padding:1rem 1.3rem;border-radius:var(--radius);transition:color .15s ease,background-color .15s ease;} .header .navbar.nav-2 .flex ul li a:hover,.header .navbar.nav-2 .flex ul li a:focus-visible{background:var(--surface-2);color:var(--accent);} /* Dropdown submenu: shown only when JS sets aria-hidden="false" (fixes empty box always showing) */ .header .navbar .flex ul li ul.dropdown-menu{display:none;} .header .navbar .flex ul li ul.dropdown-menu[aria-hidden="false"]{display:block;} .header .navbar .flex ul li ul.dropdown-menu li{width:100%;float:none;} .header .navbar .flex ul li ul.dropdown-menu li a{display:block;width:100%;border-radius:0;background:var(--surface);color:var(--fg);padding:1.1rem 1.6rem;font-size:1.5rem;font-weight:500;} .header .navbar .flex ul li ul.dropdown-menu li a:hover,.header .navbar .flex ul li ul.dropdown-menu li a:focus-visible{background:var(--surface-2);color:var(--accent);} @media (min-width:1151px){ .header .navbar .flex ul li ul.dropdown-menu{position:absolute;left:0;top:100%;width:22rem;border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;z-index:1001;} /* open on hover (desktop) in addition to click */ .header .navbar.nav-2 .flex ul li:hover ul.dropdown-menu{display:block;} } /* Logo is now an image-only wordmark (logo4.png), so let it keep its aspect ratio */ .header .navbar .flex .logo .logoimg{height:95px;width:auto;max-height:95px;} #menu-btn{color:var(--fg);} /* Right cluster in the top bar + language switcher */ .nav1-right{display:flex;align-items:center;gap:1.6rem;} /* Language switcher — a row of flags. Desktop: lives in the top bar (.lang-bar). Mobile: moves into the hamburger menu (.lang-menu-item) so it does not crowd the narrow top bar. */ .lang-switcher{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;} .lang-flag{display:inline-flex;flex:none;width:2.6rem;height:1.7rem;border-radius:3px;overflow:hidden;opacity:.5;box-shadow:0 0 0 1px rgba(20,20,25,.14);transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease;} .lang-flag:hover,.lang-flag:focus-visible{opacity:1;transform:translateY(-1px);} .lang-flag.active{opacity:1;box-shadow:0 0 0 2px var(--accent);} .lang-flag .flagsvg{width:100%;height:100%;display:block;} .lang-name{display:none;} .lang-menu-item{display:none;} /* the in-menu copy is hidden on desktop */ @media (max-width:768px){ .lang-bar{display:none;} /* keep the cramped top bar clean on phones */ .lang-menu-item{display:block;} /* show the language flags inside the menu */ .lang-menu-item .lang-switcher{gap:.85rem;padding:.5rem 1rem;flex-wrap:wrap;} /* The flags live inside the hamburger menu's