/*
==================================================
ROOT
==================================================
*/

:root{

--domaten-bg:rgba(18,22,32,.82);
--domaten-glass:rgba(255,255,255,.05);
--domaten-border:rgba(255,255,255,.08);
--domaten-yellow:#D0A54B;
--domaten-text:#ffffff;
--domaten-muted:#9b9b9b;
--domaten-radius:28px;

}


/*
==================================================
RESET
==================================================
*/

#domaten-overlay,
#domaten-panel,
#domaten-bar{

box-sizing:border-box;

}

#domaten-panel *,
#domaten-bar *{

box-sizing:border-box;

}


/*
==================================================
OVERLAY
==================================================
*/

#domaten-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

backdrop-filter:blur(10px);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99990;

}

body.domaten-open #domaten-overlay{

opacity:1;

visibility:visible;

}


/*
==================================================
PANEL
==================================================
*/

#domaten-panel{

position:fixed;

left:50%;

top:80px;

transform:translateX(-50%) scale(.96);

width:min(92%,580px);

height:auto;

overflow-y:auto;

padding:30px;

bottom:130px;

border-radius:36px;

background:var(--domaten-bg);

backdrop-filter:blur(25px);

border:1px solid var(--domaten-border);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99999;

color:var(--domaten-text);

}

body.domaten-open #domaten-panel{

opacity:1;

visibility:visible;

transform:translateX(-50%) scale(1);

}


/*
==================================================
BODY LOCK
==================================================
*/

body.domaten-open{

overflow:hidden;

}


/*
==================================================
FLOATING BAR
==================================================
*/

#domaten-bar{

position:fixed;

left:50%;

transform:translateX(-50%);

top:30px;

bottom:auto;

width:min(560px,92vw);

height:72px;

padding:0 24px;

display:flex;

align-items:center;

justify-content:center;

border-radius:100px;

background:rgba(18,22,32,.75);

backdrop-filter:blur(24px);

border:1px solid rgba(255,255,255,.08);

box-shadow:0 15px 40px rgba(0,0,0,.3);

z-index:99998;

}

/*
==================================================
TRIGGER
==================================================
*/

.domaten-trigger{

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

cursor:pointer;

user-select:none;

color:#fff;

}


/*
==================================================
9 DOT ICON
==================================================
*/

.domaten-dots{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:4px;

width:18px;

height:18px;

transition:.3s;

}

.domaten-dots span{

width:4px;

height:4px;

border-radius:50%;

background:white;

transition:.3s;

}


/*
==================================================
CLOSE STATE
==================================================
*/

.domaten-dots.domaten-close{

transform:rotate(45deg);

}

.domaten-dots.domaten-close span:nth-child(2),
.domaten-dots.domaten-close span:nth-child(4),
.domaten-dots.domaten-close span:nth-child(6),
.domaten-dots.domaten-close span:nth-child(8){

opacity:0;

}


/*
==================================================
TRIGGER TEXT
==================================================
*/

.domaten-trigger-text{

font-size:15px;

font-weight:600;

letter-spacing:.2px;

}


/*
==================================================
PROMO BANNER
==================================================
*/

.domaten-promo{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:14px 18px;

margin-bottom:30px;

border-radius:20px;

background:rgba(239,68,68,.08);

border:1px solid rgba(239,68,68,.18);

backdrop-filter:blur(20px);

color:#ffffff;

font-size:14px;

line-height:1.5;

}

.domaten-promo-close{

font-size:22px;

cursor:pointer;

color:#ffffff;

line-height:1;

user-select:none;

}

.domaten-promo-content{

display:flex;

flex-direction:column;

gap:6px;

flex:1;

}

.domaten-promo-text{

line-height:1.5;

}

.domaten-promo-link{

display:inline-block;

font-size:13px;

font-weight:600;

color:#FFD76A;

text-decoration:none;

opacity:.9;

}

.domaten-promo-link:hover{

opacity:1;

text-decoration:underline;

}

/*
==================================================
HEADER
==================================================
*/

.domaten-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:30px;

}


/*
==================================================
LOGO
==================================================
*/

.domaten-logo{

display:flex;

align-items:center;

}

.domaten-logo img{

max-height:42px;

width:auto;

display:block;

object-fit:contain;

}

.domaten-logo span{

font-size:22px;

font-weight:700;

letter-spacing:.3px;

}


/*
==================================================
SEARCH
==================================================
*/

.domaten-search-wrap{

margin-bottom:40px;

}

#domaten-search{

width:100%;

height:58px;

padding:0 22px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

background:rgba(255,255,255,.04);

color:white;

font-size:15px;

outline:none;

transition:.25s;

}

#domaten-search::placeholder{

color:#8d8d8d;

}

#domaten-search:focus{

border-color:rgba(255,198,51,.4);

background:rgba(255,255,255,.06);

}


/*
==================================================
SEARCH RESULTS
==================================================
*/

#domaten-search-results{

display:flex;

flex-direction:column;

gap:12px;

margin-top:18px;

}


/*
==================================================
SEARCH CARD
==================================================
*/

.domaten-search-item{

display:block;

padding:16px;

border-radius:18px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.05);

text-decoration:none;

transition:.25s;

}

.domaten-search-item:hover{

background:rgba(255,255,255,.08);

transform:translateY(-2px);

}


/*
==================================================
SEARCH TITLE
==================================================
*/

.domaten-search-title{

font-size:15px;

font-weight:600;

color:white;

}


/*
==================================================
SEARCH META
==================================================
*/

.domaten-search-meta{

margin-top:6px;

font-size:12px;

color:#888;

text-transform:capitalize;

}


/*
==================================================
LOADING / EMPTY
==================================================
*/

.domaten-search-loading,
.domaten-search-empty{

padding:14px;

font-size:14px;

color:#999;

}


/*
==================================================
SCROLLBAR
==================================================
*/

#domaten-panel::-webkit-scrollbar{

width:6px;

}

#domaten-panel::-webkit-scrollbar-thumb{

background:rgba(255,255,255,.12);

border-radius:100px;

}


/*
==================================================
NAVIGATION
==================================================
*/

.domaten-nav{

margin-bottom:40px;

}

.domaten-nav ul{

margin:0;

padding:0;

list-style:none;

}

.domaten-item{

margin-bottom:6px;

}


/*
==================================================
MENU LINKS
==================================================
*/

.domaten-nav a{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 0;

text-decoration:none;

color:white;

font-size:18px;

font-weight:500;

transition:.25s;

border-bottom:1px solid rgba(255,255,255,.05);

}

.domaten-nav a:hover{

color:var(--domaten-yellow);

}


/*
==================================================
CURRENT PAGE
==================================================
*/

.domaten-current-item>a,
.domaten-current{

color:var(--domaten-yellow)!important;

}


/*
==================================================
MENU TITLE
==================================================
*/

.domaten-menu-title{

display:flex;

align-items:center;

gap:12px;

}


/*
==================================================
ARROW
==================================================
*/

.domaten-arrow{

font-size:18px;

color:var(--domaten-yellow);

transition:.25s;

}

.domaten-parent>a:hover .domaten-arrow{

transform:translateX(4px);

}


/*
==================================================
SUBMENU
==================================================
*/

.domaten-submenu-screen{

display:none;

padding-left:24px;

margin-top:6px;

margin-bottom:15px;

}

.domaten-submenu-screen.active{

display:block;

animation:domatenFade .25s ease;

}

.domaten-submenu-screen a{

font-size:15px;

color:#ffffff;

padding:14px 0;

}


/*
==================================================
SUBMENU ANIMATION
==================================================
*/

@keyframes domatenFade{

from{

opacity:0;

transform:translateY(8px);

}

to{

opacity:1;

transform:none;

}

}


/*
==================================================
SOCIALS
==================================================
*/

.domaten-social{

display:flex;

gap:14px;

flex-wrap:wrap;

margin-bottom:40px;

}


/*
==================================================
SOCIAL BUTTONS
==================================================
*/

.domaten-social a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

text-decoration:none;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

color:auto;

font-size:13px;

font-weight:600;

transition:.25s;

}

.domaten-social a:hover{

background:black;

color:#111;

transform:translateY(-3px);

}

.domaten-social a.instagram { color:#E4405F; }
.domaten-social a.facebook { color:#1877F2; }
.domaten-social a.x { color:#FFFFFF; }
.domaten-social a.linkedin { color:#0A66C2; }
.domaten-social a.youtube { color:#FF0000; }
.domaten-social a.tiktok { color:white; }
.domaten-social a.whatsapp { color:#25D366; }

.domaten-social svg{
    width:22px;
    height:22px;
    fill:currentColor;
}

/*
==================================================
CTA
==================================================
*/

.domaten-cta{

margin-top:20px;

}


/*
==================================================
CTA BUTTON
==================================================
*/

.domaten-cta-button{

display:flex;

align-items:center;

justify-content:center;

height:60px;

border-radius:20px;

background:#ffffff;

color:#000000;

text-decoration:none;

font-size:16px;

font-weight:700;

transition:.25s;

box-shadow:
0 10px 30px rgba(255,255,255,.12);

}

.domaten-cta-button:hover{

background:#f5f5f5;

color:#000000;

transform:translateY(-3px);
}


/*
==================================================
SVG ICONS
==================================================
*/

.domaten-social svg{

width:20px;

height:20px;

display:block;

fill:currentColor;

}


/*
==================================================
BACK BUTTON
==================================================
*/

.domaten-back{

display:flex;

align-items:center;

gap:12px;

margin-bottom:25px;

cursor:pointer;

color:var(--domaten-yellow);

font-size:15px;

font-weight:600;

}


/*
==================================================
SEPARATOR
==================================================
*/

.domaten-divider{

height:1px;

background:rgba(255,255,255,.06);

margin:30px 0;

}


/*
==================================================
WPP THEME
==================================================
*/

body.domaten-theme-wpp #domaten-bar,
body.domaten-theme-wpp #domaten-panel{

background:rgba(18,22,32,.82);

backdrop-filter:blur(24px);

}


/*
==================================================
APPLE THEME
==================================================
*/

body.domaten-theme-apple #domaten-bar,
body.domaten-theme-apple #domaten-panel{

background:rgba(255,255,255,.12);

backdrop-filter:blur(40px);

border:1px solid rgba(255,255,255,.15);

}


/*
==================================================
LINEAR THEME
==================================================
*/

body.domaten-theme-linear #domaten-bar,
body.domaten-theme-linear #domaten-panel{

background:#121212;

backdrop-filter:none;

border:1px solid rgba(255,255,255,.05);

}


/*
==================================================
LUXURY THEME
==================================================
*/

body.domaten-theme-luxury #domaten-bar,
body.domaten-theme-luxury #domaten-panel{

background:#111;

border:1px solid rgba(255,198,51,.18);

box-shadow:

0 0 40px rgba(255,198,51,.08);

}

body.domaten-theme-luxury .domaten-nav a:hover{

color:var(--domaten-yellow);

}

body.domaten-theme-luxury .domaten-cta-button{

background:#ffffff;

color:#000000;


}


/*
==================================================
OPEN ANIMATION
==================================================
*/

#domaten-panel{

transition:

opacity .3s,

visibility .3s,

transform .3s;

}

#domaten-overlay{

transition:

opacity .3s,

visibility .3s;

}


/*
==================================================
DESKTOP
==================================================
*/

@media(min-width:1200px){

#domaten-panel{

width:620px;

padding:40px;

}

#domaten-bar{

height:68px;

padding:0 28px;

}

.domaten-trigger{

font-size:16px;

}

}


/*
==================================================
TABLET
==================================================
*/

@media(max-width:991px){

#domaten-panel{

width:92%;

height:84vh;

padding:28px;

}

}


/*
==================================================
MOBILE
==================================================
*/

@media(max-width:768px){

#domaten-panel{

width:94%;

height:86vh;

padding:24px;

border-radius:30px;

}

#domaten-bar{

bottom:30px;

width:calc(100vw - 36px);

height:66px;

padding:0 20px;

}

.domaten-pill-logo img{

height:26px;

}

.domaten-trigger-text{

font-size:16px;

}

.domaten-nav a{

font-size:17px;

}

.domaten-cta-button{

height:56px;

font-size:15px;

}

}


/*
==================================================
SMALL MOBILE
==================================================
*/

@media(max-width:480px){

#domaten-panel{

padding:20px;

}

.domaten-nav a{

font-size:16px;

}

.domaten-social{

gap:10px;

}

.domaten-social a{

width:42px;

height:42px;

}

}


/*
==================================================
UTILITY
==================================================
*/

.domaten-hidden{

display:none!important;

}

.domaten-center{

display:flex;

align-items:center;

justify-content:center;

}

.domaten-text-muted{

color:var(--domaten-muted);

}

.domaten-text-yellow{

color:var(--domaten-yellow);

}


/*
==================================================
SMOOTH
==================================================
*/

#domaten-panel,
#domaten-bar,
.domaten-nav a,
.domaten-social a,
.domaten-cta-button{

will-change:transform;

}


/*
==================================================
SELECTION
==================================================
*/

::selection{

background:rgba(255,198,51,.3);

color:#fff;

}


/*
==============================
PILL LOGO
==============================
*/

.domaten-pill-logo{

display:flex;

align-items:center;

justify-content:center;

min-width:110px;

}

.domaten-pill-logo{

display:flex;

align-items:center;

justify-content:center;

width:170px;

overflow:hidden;

flex-shrink:0;

}

.domaten-pill-logo img{

max-width:100%;

max-height:28px;

width:auto;

height:auto;

object-fit:contain;

display:block;

}

.domaten-pill-logo span{

font-size:24px;

font-weight:700;

color:white;

}


/*
==============================
TEXT
==============================
*/

.domaten-trigger-text{

font-size:17px;

font-weight:500;

letter-spacing:.2px;

}


/*
==============================
DOTS
==============================
*/

.domaten-dots{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:4px;

width:18px;

height:18px;

}

.domaten-dots span{

width:4px;

height:4px;

border-radius:50%;

background:white;

}

@media(min-width:1200px){

.domaten-pill-logo{

width:140px;

}

.domaten-pill-logo img{

max-height:32px;

}

}