/* ================= GENERAL STYLES ================= */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #111; /* dark background */
  color: #eee; /* light text */
}
/* 1) Make width math easier and predictable */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2) Let the search flex item shrink below intrinsic width */
.search-container {
  min-width: 0;       /* <-- important for flex children */
  flex: 1 1 0%;       /* ensures it can grow and shrink predictably */
}

/* 3) Ensure the input never forces overflow */
.search-container input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus {
  outline: 3px solid #ff0066;
  outline-offset: 3px;
}

img {
  max-width: 100%;
  display: block;
}

/* Utility: visually hidden (for accessible labels) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* ================= HEADER ================= */
/* Combined header rules from both inputs */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #1a1a1a;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid #660066; /* purple accent */
  gap: 12px; /* ensures spacing between logo area and search (kept from code 1) */
}

/* Logo container styling (text fallback kept) */
.site-header .logo h1 {
  margin: 0;
  font-size: 24px;
  color: #ffcc00; /* gold accent */
}

/* Logo / brand area */
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 12px;  /* prefer the slightly larger spacing from code 2 */
  cursor: default;
}

/* If you wrap the logo in a link: <a href="index.html" class="logo-link"> */
.site-header .logo a,
.site-header .logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* PNG logo */
.site-header .site-logo {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 6px;
  object-fit: contain;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* subtle hover / focus effect */
.site-header .site-logo:hover,
.site-header .logo a:focus .site-logo,
.site-header .logo-link:focus .site-logo {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 18px rgba(102, 0, 102, 0.28);
}

/* Site name text next to logo */
.site-header .site-name {
  font-size: 22px;      /* unified: using 22px from code 2 */
  font-weight: 700;
  color: #ffcc00;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* keyboard-visible focus outline for accessibility */
.site-header .logo a:focus,
.site-header .logo-link:focus {
  outline: 3px solid #ff0066;
  outline-offset: 4px;
  border-radius: 8px;
}

/* ================= SEARCH BAR ================= */
/* search container should shrink but stay inline */
.search-container {
  flex: 1;                /* take remaining space (from code 1) */
  max-width: 400px;       /* don’t let it get too huge on desktop (from code 1) */
}

/* search input styles (combined) */
.search-container input {
  width: 100%;            /* fill container (from code 1) */
  padding: 8px 12px;
  font-size: 16px;
  border: 2px solid #660066;
  border-radius: 8px;
  background-color: #222;
  color: #eee;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* focus state from code 2 */
.search-container input:focus {
  border-color: #ff0066;
  box-shadow: 0 0 10px #ff0066;
}

/* ================= LOGO / BRAND (additional) ================= */
/* already covered .site-header .logo above; keep h1 and link focus rules */

/* ================= INTRO ================= */
.intro {
  padding: 20px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  color: #ccc;
}

/* ================= FLAGS GRID ================= */
.flags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 200px));
  gap: 15px;
  padding: 20px;
  justify-content: center; /* centers grid on wide screens */
}

.country-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #1a1a1a;
  border: 2px solid #660066;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.country-card img {
  width: 60px;
  height: auto;
  margin-bottom: 8px;
}

.country-card span {
  font-size: 1rem;
  max-width: 90%;  /* prevent text from overflowing when card grows wide */
  text-align: center;
  word-wrap: break-word;
}

.country-card:hover,
.country-card:focus-within {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(102, 0, 102, 0.7); /* purple glow */
}

/* Make anchor-wrapped cards fill area (ensure anchor is block) */
.flags-grid a {
  display: block;
}

/* ================= AD PLACEHOLDER ================= */
.ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;       /* stack content vertically inside placeholder */
  border: 2px dashed #660066;
  border-radius: 10px;
  background-color: #1a1a1a;
  color: #ff0066;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  min-height: 100px;            /* same height as typical country-card */
  width: 100%;
  box-sizing: border-box;
  grid-column: 1 / -1;          /* span all columns */
}

.ad-box {
  flex: 1 1 0%;       /* allows ad box to grow/shrink */
  max-width: 200px;   /* optional: prevents overly wide boxes */
  padding: 15px;
  background-color: #222;
  border: 2px dashed #660066;
  text-align: center;
  color: #ff0066;
  font-weight: bold;
  border-radius: 8px;
}dius: 8px;
}

@media (max-width: 767px) {
  .ad-placeholder {
    flex-direction: column;
  }
}

/* ================= EXCHANGE CALCULATOR ================= */
.exchange-calculator {
  background: #1a1a1a;
  border: 2px solid #660066; /* purple border */
  padding: 20px;
  border-radius: 12px;
  max-width: 500px;
  margin: 30px auto;
  color: #fff;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 15px rgba(128, 0, 128, 0.5); /* purple glow */
  text-align: center;
}

.exchange-calculator h2 {
  color: #ffcc00; /* gold accent */
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px #440000;
}

.exchange-calculator .converter {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.exchange-calculator input[type="number"],
.exchange-calculator select {
  padding: 10px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #660066;
  background: #111;
  color: #fff;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.exchange-calculator input[type="number"]:focus,
.exchange-calculator select:focus {
  border-color: #a020f0; /* purple highlight */
  box-shadow: 0 0 8px #a020f0;
}

.exchange-calculator button#swap-btn {
  background: #8b0000; /* dark red */
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
  align-self: center;
}

.exchange-calculator button#swap-btn:hover {
  background: #a020f0; /* purple glow */
  box-shadow: 0 0 10px #a020f0;
}

.exchange-calculator .result-box {
  background: #111;
  border: 1px solid #660066;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  min-height: 40px;
  box-shadow: inset 0 0 5px #440000;
}

/* ================= FOOTER ================= */
.site-footer {
  padding: 15px 20px;
  text-align: center;
  background-color: #1a1a1a;
  border-top: 2px solid #660066;
  color: #888;
  font-size: 14px;
}

/* Style for footer links */
.site-footer a {
  color: #ffcc00;          /* nice gold accent */
  text-decoration: none;
  margin: 0 15px;          /* spacing between links */
  display: inline-block;   /* ensures spacing is respected */
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Footer link spacing (in footer paragraph) */
.site-footer p a {
  color: #888;
  margin: 0 12px;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s;
}

.site-footer p a:hover {
  color: #ffcc00;
}

/* ================= RESPONSIVE ADJUSTMENTS ================= */
@media (max-width: 900px) {
  .flags-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

/* Combined small-screen rules. Note: code1 and code2 had a conflict here:
   - code1 used `.site-header { flex-wrap: nowrap; }` to prevent wrapping
   - code2 used `.site-header { flex-wrap: wrap; }` to allow wrapping and spacing
   I selected `flex-wrap: wrap;` (from code 2) to preserve the more complete
   mobile responsive behavior (logo + search stacking when needed). If you
   prefer the `nowrap` behavior from code 1, change `flex-wrap: wrap;` below
   to `flex-wrap: nowrap;`. */
@media (max-width: 600px) {
  .site-header {
    padding: 8px 12px;
    flex-wrap: wrap;      /* chosen from code 2 to allow responsive wrapping */
    gap: 8px;             /* spacing when wrapping (from code 2) */
  }

  /* shrink logo image */
  .site-header .site-logo { height: 34px; }

  /* site-name: code1 used 16px and code2 used 18px in mobile; using 18px */
  .site-header .site-name {
    display: inline-block;
    font-size: 18px;      /* slightly smaller for phones (chosen from code 2) */
  }

  /* search behaviour: combined rules from both — ensure it can shrink but also
     become full width on very small screens. */
  .search-container {
    /* keep desktop flex behavior but allow smaller max-width + full width */
    max-width: 200px;  /* from code 1 */
    flex-shrink: 1;    /* from code 1 */
    width: 100%;       /* from code 2 to let it sit full-width when wrapping */
    margin-top: 8px;   /* from code 2 so search sits under logo when wrapped */
  }
}

/* ================= MORE RESPONSIVE TWEAKS ================= */
@media (max-width: 480px) {
  .exchange-calculator { padding: 14px; margin: 20px 12px; }
  .flags-grid { gap: 10px; padding: 12px; }
}

/* small utility tweaks */
.hidden { display: none !important; }
.center { text-align: center; }

/* ================= STICKY AD ================= */
.sticky-ad {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a1a1a;
  border-top: 2px solid #660066;
  padding: 10px;
  z-index: 9999; /* make sure it sits above other elements */
}

.sticky-ad .ad-inner {
  flex: 1;
  text-align: center;
}

.sticky-ad .close {
  margin-left: 10px;
  background: none;
  border: none;
  color: #ff0066;
  font-size: 20px;
  cursor: pointer;
}

/* ================= CONTACT PAGE TEXTAREA ================= */
.search-container textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 2px solid #660066;       /* same purple border as input */
  border-radius: 8px;
  background-color: #222;          /* dark background like inputs */
  color: #eee;
  resize: vertical;                /* allow vertical resize only */
  min-height: 120px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.search-container textarea:focus {
  border-color: #ff0066;           /* pink glow on focus */
  box-shadow: 0 0 10px #ff0066;    /* same glow as input focus */
}

/* ================= CONTACT PAGE BUTTON ================= */
#swap-btn {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  background-color: #800040;       /* deep maroon tone */
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
}

#swap-btn:hover {
  background-color: #a00060;       /* lighter maroon on hover */
  box-shadow: 0 0 10px #ff0066;    /* soft glow */
}

#swap-btn:active {
  transform: scale(0.97);          /* press-down animation */
}