/* General Body Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    color: #333;
}

/* Consistent Site Header */
.site-header {
    background-color: #f9f9f9;
    padding: 16px 24px;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* This will now work correctly, pushing the logo left and the new button right */
    justify-content: space-between; 
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.logo-img {
    height: 32px;
    width: 32px;
}

.site-name {
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
}

/* --- NEW: User Country Button Styles --- */
#user-country-button-container {
    min-width: 1px; /* Flexbox fix for empty container */
}
.user-country-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #e7e7e7;
    border: none;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #0f0f0f;
    cursor: pointer;
    transition: background-color 0.2s;
}
.user-country-button:hover {
    background-color: #ccc;
}
.user-country-button svg {
    margin-top: 1px;
}
/* --- END NEW --- */


/* Main Content Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    padding: 24px;
}

/* Page Title */
h1 {
  font-size: 42px;
  font-weight: 700;
  margin-top: 16px; /* Adjust spacing */
  margin-bottom: 8px;
  color: #0f0f0f;
}

.subtitle {
  font-size: 18px;
  color: #606060;
  margin-top: 0;
  margin-bottom: 40px;
}

/* Country Grid Layout */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  text-align: left;
}

/* Country Card Styling */
.country-card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: #0f0f0f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  border: 1px solid #eee;
}

.country-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  color: #ff0000;
}

/* Flag Styling */
.country-card::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 20px;
  margin-right: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  border: 1px solid #ddd;
  background-image: var(--flag-url);
}

/* Dynamically setting the flag URL for each country code */
.DZ::before {
  --flag-url: url("https://flagcdn.com/w40/dz.png");
}
.AR::before {
  --flag-url: url("https://flagcdn.com/w40/ar.png");
}
.AU::before {
  --flag-url: url("https://flagcdn.com/w40/au.png");
}
.AT::before {
  --flag-url: url("https://flagcdn.com/w40/at.png");
}
.AZ::before {
  --flag-url: url("https://flagcdn.com/w40/az.png");
}
.BH::before {
  --flag-url: url("https://flagcdn.com/w40/bh.png");
}
.BD::before {
  --flag-url: url("https://flagcdn.com/w40/bd.png");
}
.BY::before {
  --flag-url: url("https://flagcdn.com/w40/by.png");
}
.BE::before {
  --flag-url: url("https://flagcdn.com/w40/be.png");
}
.BO::before {
  --flag-url: url("https://flagcdn.com/w40/bo.png");
}
.BA::before {
  --flag-url: url("https://flagcdn.com/w40/ba.png");
}
.BR::before {
  --flag-url: url("https://flagcdn.com/w40/br.png");
}
.BG::before {
  --flag-url: url("https://flagcdn.com/w40/bg.png");
}
.KH::before {
  --flag-url: url("https://flagcdn.com/w40/kh.png");
}
.CA::before {
  --flag-url: url("https://flagcdn.com/w40/ca.png");
}
.CL::before {
  --flag-url: url("https://flagcdn.com/w40/cl.png");
}
.CO::before {
  --flag-url: url("https://flagcdn.com/w40/co.png");
}
.CR::before {
  --flag-url: url("https://flagcdn.com/w40/cr.png");
}
.HR::before {
  --flag-url: url("https://flagcdn.com/w40/hr.png");
}
.CY::before {
  --flag-url: url("https://flagcdn.com/w40/cy.png");
}
.CZ::before {
  --flag-url: url("https://flagcdn.com/w40/cz.png");
}
.DK::before {
  --flag-url: url("https://flagcdn.com/w40/dk.png");
}
.DO::before {
  --flag-url: url("https://flagcdn.com/w40/do.png");
}
.EC::before {
  --flag-url: url("https://flagcdn.com/w40/ec.png");
}
.EG::before {
  --flag-url: url("https://flagcdn.com/w40/eg.png");
}
.SV::before {
  --flag-url: url("https://flagcdn.com/w40/sv.png");
}
.EE::before {
  --flag-url: url("https://flagcdn.com/w40/ee.png");
}
.FI::before {
  --flag-url: url("https://flagcdn.com/w40/fi.png");
}
.FR::before {
  --flag-url: url("https://flagcdn.com/w40/fr.png");
}
.GE::before {
  --flag-url: url("https://flagcdn.com/w40/ge.png");
}
.DE::before {
  --flag-url: url("https://flagcdn.com/w40/de.png");
}
.GH::before {
  --flag-url: url("https://flagcdn.com/w40/gh.png");
}
.GR::before {
  --flag-url: url("https://flagcdn.com/w40/gr.png");
}
.GT::before {
  --flag-url: url("https://flagcdn.com/w40/gt.png");
}
.HN::before {
  --flag-url: url("https://flagcdn.com/w40/hn.png");
}
.HK::before {
  --flag-url: url("https://flagcdn.com/w40/hk.png");
}
.HU::before {
  --flag-url: url("https://flagcdn.com/w40/hu.png");
}
.IS::before {
  --flag-url: url("https://flagcdn.com/w40/is.png");
}
.IN::before {
  --flag-url: url("https://flagcdn.com/w40/in.png");
}
.ID::before {
  --flag-url: url("https://flagcdn.com/w40/id.png");
}
.IQ::before {
  --flag-url: url("https://flagcdn.com/w40/iq.png");
}
.IE::before {
  --flag-url: url("https://flagcdn.com/w40/ie.png");
}
.IL::before {
  --flag-url: url("https://flagcdn.com/w40/il.png");
}
.IT::before {
  --flag-url: url("https://flagcdn.com/w40/it.png");
}
.JM::before {
  --flag-url: url("https://flagcdn.com/w40/jm.png");
}
.JP::before {
  --flag-url: url("https://flagcdn.com/w40/jp.png");
}
.JO::before {
  --flag-url: url("https://flagcdn.com/w40/jo.png");
}
.KZ::before {
  --flag-url: url("https://flagcdn.com/w40/kz.png");
}
.KE::before {
  --flag-url: url("https://flagcdn.com/w40/ke.png");
}
.KW::before {
  --flag-url: url("https://flagcdn.com/w40/kw.png");
}
.LA::before {
  --flag-url: url("https://flagcdn.com/w40/la.png");
}
.LV::before {
  --flag-url: url("https://flagcdn.com/w40/lv.png");
}
.LB::before {
  --flag-url: url("https://flagcdn.com/w40/lb.png");
}
.LY::before {
  --flag-url: url("https://flagcdn.com/w40/ly.png");
}
.LI::before {
  --flag-url: url("https://flagcdn.com/w40/li.png");
}
.LT::before {
  --flag-url: url("https://flagcdn.com/w40/lt.png");
}
.LU::before {
  --flag-url: url("https://flagcdn.com/w40/lu.png");
}
.MY::before {
  --flag-url: url("https://flagcdn.com/w40/my.png");
}
.MT::before {
  --flag-url: url("https://flagcdn.com/w40/mt.png");
}
.MX::before {
  --flag-url: url("https://flagcdn.com/w40/mx.png");
}
.MD::before {
  --flag-url: url("https://flagcdn.com/w40/md.png");
}
.ME::before {
  --flag-url: url("https://flagcdn.com/w40/me.png");
}
.MA::before {
  --flag-url: url("https://flagcdn.com/w40/ma.png");
}
.NP::before {
  --flag-url: url("https://flagcdn.com/w40/np.png");
}
.NL::before {
  --flag-url: url("https://flagcdn.com/w40/nl.png");
}
.NZ::before {
  --flag-url: url("https://flagcdn.com/w40/nz.png");
}
.NI::before {
  --flag-url: url("https://flagcdn.com/w40/ni.png");
}
.NG::before {
  --flag-url: url("https://flagcdn.com/w40/ng.png");
}
.MK::before {
  --flag-url: url("https://flagcdn.com/w40/mk.png");
}
.NO::before {
  --flag-url: url("https://flagcdn.com/w40/no.png");
}
.OM::before {
  --flag-url: url("https://flagcdn.com/w40/om.png");
}
.PK::before {
  --flag-url: url("https://flagcdn.com/w40/pk.png");
}
.PA::before {
  --flag-url: url("https://flagcdn.com/w40/pa.png");
}
.PG::before {
  --flag-url: url("https://flagcdn.com/w40/pg.png");
}
.PY::before {
  --flag-url: url("https://flagcdn.com/w40/py.png");
}
.PE::before {
  --flag-url: url("https://flagcdn.com/w40/pe.png");
}
.PH::before {
  --flag-url: url("https://flagcdn.com/w40/ph.png");
}
.PL::before {
  --flag-url: url("https://flagcdn.com/w40/pl.png");
}
.PT::before {
  --flag-url: url("https://flagcdn.com/w40/pt.png");
}
.PR::before {
  --flag-url: url("https://flagcdn.com/w40/pr.png");
}
.QA::before {
  --flag-url: url("https://flagcdn.com/w40/qa.png");
}
.RO::before {
  --flag-url: url("https://flagcdn.com/w40/ro.png");
}
.RU::before {
  --flag-url: url("https://flagcdn.com/w40/ru.png");
}
.SA::before {
  --flag-url: url("https://flagcdn.com/w40/sa.png");
}
.SN::before {
  --flag-url: url("https://flagcdn.com/w40/sn.png");
}
.RS::before {
  --flag-url: url("https://flagcdn.com/w40/rs.png");
}
.SG::before {
  --flag-url: url("https://flagcdn.com/w40/sg.png");
}
.SK::before {
  --flag-url: url("https://flagcdn.com/w40/sk.png");
}
.SI::before {
  --flag-url: url("https://flagcdn.com/w40/si.png");
}
.ZA::before {
  --flag-url: url("https://flagcdn.com/w40/za.png");
}
.KR::before {
  --flag-url: url("https://flagcdn.com/w40/kr.png");
}
.ES::before {
  --flag-url: url("https://flagcdn.com/w40/es.png");
}
.LK::before {
  --flag-url: url("https://flagcdn.com/w40/lk.png");
}
.SE::before {
  --flag-url: url("https://flagcdn.com/w40/se.png");
}
.CH::before {
  --flag-url: url("https://flagcdn.com/w40/ch.png");
}
.TW::before {
  --flag-url: url("https://flagcdn.com/w40/tw.png");
}
.TZ::before {
  --flag-url: url("https://flagcdn.com/w40/tz.png");
}
.TH::before {
  --flag-url: url("https://flagcdn.com/w40/th.png");
}
.TN::before {
  --flag-url: url("https://flagcdn.com/w40/tn.png");
}
.TR::before {
  --flag-url: url("https://flagcdn.com/w40/tr.png");
}
.UG::before {
  --flag-url: url("https://flagcdn.com/w40/ug.png");
}
.UA::before {
  --flag-url: url("https://flagcdn.com/w40/ua.png");
}
.AE::before {
  --flag-url: url("https://flagcdn.com/w40/ae.png");
}
.GB::before {
  --flag-url: url("https://flagcdn.com/w40/gb.png");
}
.US::before {
  --flag-url: url("https://flagcdn.com/w40/us.png");
}
.UY::before {
  --flag-url: url("https://flagcdn.com/w40/uy.png");
}
.VE::before {
  --flag-url: url("https://flagcdn.com/w40/ve.png");
}
.VN::before {
  --flag-url: url("https://flagcdn.com/w40/vn.png");
}
.YE::before {
  --flag-url: url("https://flagcdn.com/w40/ye.png");
}
.ZW::before {
  --flag-url: url("https://flagcdn.com/w40/zw.png");
}

/* --- Styles for Text Pages (About, Privacy, Contact) --- */
.text-page {
    text-align: left;
    max-width: 800px;
    line-height: 1.7;
}

.text-page h1 {
    font-size: 36px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.text-page h2 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 16px;
}

.text-page p {
    font-size: 16px;
    margin-bottom: 16px;
}

.text-page a {
    color: #065fd4;
    text-decoration: none;
}

.text-page a:hover {
    text-decoration: underline;
}

.contact-email {
    background-color: #f2f2f2;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
}

/* --- Footer Link Styles --- */
.footer-links {
    margin-top: 16px;
}
.footer-links a {
    color: #606060;
    text-decoration: none;
    margin: 0 10px;
}
.footer-links a:hover {
    text-decoration: underline;
}