/* ==========================================================================
   ComplianceAtlas
   International.css
   Version 1.0
   Part 1 of 3
   ========================================================================== */


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root{

--PRIMARY:#1f2937;
--PRIMARY-LIGHT:#374151;

--ACCENT:#2563eb;
--ACCENT-HOVER:#3b82f6;

--GOLD:#C9A227;

--SUCCESS:#15803d;
--WARNING:#ca8a04;
--DANGER:#b91c1c;

--TEXT:#f9fafb;
--TEXT-SOFT:#d1d5db;

--BORDER:rgba(255,255,255,.12);

--CARD:rgba(255,255,255,.05);

--HEADER:rgba(17,24,39,.92);

--SHADOW:
0 10px 28px rgba(0,0,0,.35);

}


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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Arial,Helvetica,sans-serif;

background:
linear-gradient(
135deg,
#05070d,
#111827,
#090f1f
);

color:var(--TEXT);

line-height:1.6;

padding:30px;

}


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

a{

color:inherit;

text-decoration:none;

transition:.25s;

}

a:hover{

color:#ffffff;

}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1{

font-size:2.2rem;

margin-bottom:15px;

font-weight:700;

}

h2{

font-size:1.7rem;

margin-bottom:15px;

}

h3{

font-size:1.2rem;

margin-bottom:12px;

}

p{

margin-bottom:14px;

color:var(--TEXT-SOFT);

}


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

.site-header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

background:var(--HEADER);

backdrop-filter:blur(12px);

border-bottom:1px solid var(--BORDER);

}


/* ==========================================================================
   NAV CONTAINER
   ========================================================================== */

.nav-container{

max-width:1400px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:12px 18px;

}


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

.logo{

display:flex;

align-items:center;

gap:18px;

color:white;

}

.logo-box{

width:54px;

height:54px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:var(--GOLD);

font-size:1.3rem;

font-weight:900;

color:#081A33;

}

.logo h2{

margin:0;

font-size:1.3rem;

}

.logo span{

font-size:.8rem;

opacity:.75;

}


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

.nav-links{

display:flex;

gap:10px;

list-style:none;

}

.nav-links a{

display:block;

padding:10px 16px;

border-radius:999px;

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

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

color:var(--TEXT);

transition:

background .25s,

border-color .25s,

transform .25s,

box-shadow .25s;

}

.nav-links a:hover{

background:rgba(37,99,235,.20);

border-color:rgba(96,165,250,.60);

transform:translateY(-2px);

box-shadow:

0 0 12px rgba(37,99,235,.35);

}

.nav-links a.active{

background:var(--ACCENT);

border-color:var(--ACCENT);

}


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

.menu-toggle{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

}

.menu-toggle span{

width:26px;

height:3px;

background:white;

border-radius:3px;

transition:.30s;

}


/* ==========================================================================
   APP CONTAINER
   ========================================================================== */

#APP_CONTAINER{

max-width:1200px;

margin:90px auto 0;

}


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

#HEADER_PANEL{

background:var(--CARD);

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

border-radius:14px;

padding:28px;

margin-bottom:25px;

box-shadow:var(--SHADOW);

}

#HEADER_PANEL h1{

margin-bottom:12px;

}

#HEADER_PANEL p{

font-size:1.05rem;

}


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

#RESULT_PANEL{

background:var(--CARD);

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

border-radius:14px;

padding:28px;

min-height:300px;

box-shadow:var(--SHADOW);

}


/* ==========================================================================
   STATUS MESSAGES
   ========================================================================== */

.ERROR_BOX{

color:#ff8080;

font-weight:bold;

}

.LOADING_BOX{

color:white;

font-weight:bold;

}

/* ==========================================================================
   COUNTRY SELECTOR
   Part 2 of 3
   ========================================================================== */

#COUNTRY_LIST{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:12px;

margin:25px 0 30px;

}


/* ==========================================================================
   COUNTRY BUTTONS
   ========================================================================== */

.countryBtn{

display:flex;

align-items:center;

justify-content:center;

padding:12px 16px;

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

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

border-radius:10px;

color:var(--TEXT);

font-size:15px;

font-weight:600;

cursor:pointer;

transition:
background .25s,
border-color .25s,
transform .25s,
box-shadow .25s;

}

.countryBtn:hover{

background:rgba(37,99,235,.22);

border-color:#60a5fa;

transform:translateY(-2px);

box-shadow:
0 0 14px rgba(37,99,235,.35);

}

.countryBtn:active{

transform:scale(.98);

}

.countryBtn.active{

background:var(--ACCENT);

border-color:var(--ACCENT);

color:white;

}


/* ==========================================================================
   COUNTRY CARD
   ========================================================================== */

.COUNTRY_CARD{

background:var(--CARD);

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

border-radius:16px;

padding:30px;

margin-top:20px;

box-shadow:var(--SHADOW);

animation:fadeIn .35s ease;

}


/* ==========================================================================
   FADE ANIMATION
   ========================================================================== */

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* ==========================================================================
   COUNTRY NAME
   ========================================================================== */

.COUNTRY_NAME{

display:flex;

align-items:center;

gap:12px;

font-size:2rem;

font-weight:700;

color:white;

margin-bottom:20px;

}


/* ==========================================================================
   BADGES
   ========================================================================== */

.BADGE_ROW{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:28px;

}

.BADGE{

padding:8px 16px;

border-radius:999px;

font-size:.9rem;

font-weight:700;

color:white;

letter-spacing:.2px;

}

.GREEN{

background:var(--SUCCESS);

}

.BLUE{

background:var(--ACCENT);

}

.YELLOW{

background:var(--WARNING);

}

.RED{

background:var(--DANGER);

}


/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */

.SECTION{

margin-top:30px;

padding-top:18px;

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

}

.SECTION:first-of-type{

border-top:none;

padding-top:0;

}

.SECTION h3{

color:var(--GOLD);

font-size:1.15rem;

margin-bottom:10px;

}

.SECTION p{

line-height:1.8;

margin-bottom:10px;

}

.SECTION ul{

padding-left:22px;

line-height:1.8;

}

.SECTION li{

margin-bottom:8px;

}


/* ==========================================================================
   SOURCES
   ========================================================================== */

.SOURCE_LIST{

margin-top:10px;

padding-left:22px;

}

.SOURCE_LIST li{

margin-bottom:12px;

}

.SOURCE_LIST a{

color:#7dd3fc;

font-weight:600;

word-break:break-word;

}

.SOURCE_LIST a:hover{

color:#bae6fd;

text-decoration:underline;

}


/* ==========================================================================
   OPTIONAL TABLE STYLE
   ========================================================================== */

table{

width:100%;

border-collapse:collapse;

margin-top:18px;

}

th{

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

padding:12px;

text-align:left;

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

}

td{

padding:12px;

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

}

tr:nth-child(even){

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

}


/* ==========================================================================
   FOOTER
   Part 3 of 3
   ========================================================================== */

footer{

margin-top:50px;

padding:30px 20px;

text-align:center;

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

border-top:1px solid var(--BORDER);

color:var(--TEXT-SOFT);

font-size:.95rem;

}

footer p{

margin:6px 0;

}


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

.text-center{

text-align:center;

}

.text-right{

text-align:right;

}

.text-left{

text-align:left;

}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}

.hidden{

display:none!important;

}

.visible{

display:block!important;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0b1220;

}

::-webkit-scrollbar-thumb{

background:#334155;

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#475569;

}


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

::selection{

background:var(--ACCENT);

color:white;

}


/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

input,
select,
textarea{

width:100%;

padding:12px 14px;

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

border-radius:10px;

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

color:var(--TEXT);

font:inherit;

outline:none;

transition:border-color .25s, box-shadow .25s;

}

input:focus,
select:focus,
textarea:focus{

border-color:var(--ACCENT);

box-shadow:0 0 0 3px rgba(37,99,235,.2);

}


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

button{

font:inherit;

}

button:disabled{

opacity:.6;

cursor:not-allowed;

}


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

@media (max-width:992px){

body{

padding:20px;

}

#APP_CONTAINER{

margin-top:80px;

}

.nav-container{

padding:10px 14px;

}

.logo h2{

font-size:1.15rem;

}

#COUNTRY_LIST{

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

}

.COUNTRY_CARD{

padding:24px;

}

}


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

@media (max-width:768px){

.menu-toggle{

display:flex;

}

.nav-links{

display:none;

position:absolute;

top:100%;

left:0;

width:100%;

background:var(--HEADER);

padding:15px;

flex-direction:column;

border-top:1px solid var(--BORDER);

}

.nav-links.show{

display:flex;

}

.nav-links a{

width:100%;

text-align:center;

}

#APP_CONTAINER{

margin-top:85px;

}

#HEADER_PANEL,
#RESULT_PANEL{

padding:20px;

}

#COUNTRY_LIST{

grid-template-columns:1fr 1fr;

gap:10px;

}

.countryBtn{

font-size:14px;

padding:11px;

}

.COUNTRY_NAME{

font-size:1.55rem;

}

.BADGE_ROW{

flex-direction:column;

align-items:flex-start;

}

.BADGE{

width:fit-content;

}

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}


/* ==========================================================================
   SMALL PHONES
   ========================================================================== */

@media (max-width:480px){

body{

padding:14px;

}

h1{

font-size:1.8rem;

}

h2{

font-size:1.45rem;

}

#COUNTRY_LIST{

grid-template-columns:1fr;

}

.countryBtn{

width:100%;

}

.COUNTRY_CARD{

padding:18px;

}

footer{

font-size:.85rem;

padding:24px 16px;

}

}


/* ==========================================================================
   END OF FILE
   ========================================================================== */