/* Custom styles for the Kapnox Forex website */



/* ===== General Utility Styles (Tailwind-like, in-house) ===== */
.bg-white { background-color: white; }
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.rounded-b-lg { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.mb-5px { margin-bottom: 5px; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.pb-2px { padding-bottom: 2px; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.md-px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.container { max-width: 1200px; margin: 0 auto; }
.flex { display: flex; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }
.flex-grow { flex: 1; }
.flex-col { flex-direction: column; }
.justify-end { justify-content: flex-end; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-8 > * + * { margin-left: 2rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.hidden { display: none; }
.md-flex { display: flex; }
.md-hidden { display: none; }
.text-sm { font-size: 0.875rem; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: bold; }
.text-gray-700 { color: #374151; }
.text-blue-700 { color: #1d4ed8; }
.text-white { color: white; }
.hover\:text-blue-700:hover { color: #1d4ed8; }
.hover\:underline:hover { text-decoration: underline; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-blue-800 { background-color: #1e40af; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease; }
.border { border-width: 1px; border-style: solid; }
.border-blue-700 { border-color: #1d4ed8; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:bg-blue-800:hover { background-color: #1e40af; }

/* ===== Specific Component Styling ===== */
header {
  background-color: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding-bottom: 2px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  margin-bottom: 5px;
}

header img {
  display: block;
  max-height: 60px;
  object-fit: contain;
}

.nav-link {
  color: #374151;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #1d4ed8;
}

#mobile-menu {
  position: fixed;
  inset: 0 auto 0 auto;
  right: 0;
  width: 16rem;
  background: white;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  box-shadow: -4px 0 6px rgba(0,0,0,0.1);
  z-index: 50;
}

#mobile-menu.active {
  transform: translateX(0);
}

#mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
  display: none;
}

#mobile-menu-overlay.active {
  display: block;
}

/* ===== Media Queries for responsiveness ===== */
@media (min-width: 768px) {
  .md-flex { display: flex; }
  .md-hidden { display: none; }
  .hidden.md-flex { display: flex; }
}




body {
    /* Removed Google Font as it's a third-party CDN. Defaulting to system fonts. */
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #f8f8f8; /* Light background for the whole page */
    padding: 0px;
    margin: 0px;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Ticker specific styles */
#currency-ticker-container { /* Main container for fixed size and overflow */
    width: 100%; /* Full width of its parent */
    max-width: 1200px; /* Max width for desktop */
    height: 24px; /* Fixed height for the ticker band */
    margin: 0px; /* Center the ticker */
    overflow: hidden; /* Hide overflowing content */
    position: relative; /* For absolute positioning of inner content */
    cursor: grab; /* Indicate draggable */
    user-select: none; /* Prevent text selection during drag */
    border-radius: 0px; /* Rounded corners for the ticker container */
    display: flex; /* Ensure flex context for centering content */
    align-items: center; /* Vertically center content */
}

#currency-ticker-content {
    display: flex;
    white-space: nowrap; /* Keep content on one line */
    position: absolute; /* Allow precise positioning for scrolling */
    left: 0; /* Initial position */
    top: 0;
    height: 100%;
    /* Animation properties will be set by JS */
    animation: ticker-scroll-rtl linear infinite;
}

#currency-ticker-content.paused {
    animation-play-state: paused;
}

/* Keyframe animation for the ticker - Right to Left */
@keyframes ticker-scroll-rtl {
    0% {
        transform: translateX(0%);
    }
    100% {
        /* This percentage will be calculated by JS to match the width of one content set */
        transform: translateX(-50%);
    }
}

/* Font styling for ticker items */
.ticker-item {
    font-family: Verdana, sans-serif;
    font-size: 9px;
    padding: 0 ; /* Tailwind px-6 is 1.5rem */
    display: flex;
    align-items: center;
    display: inline-flex;
    align-items: center; /* keeps flag & text aligned */
    gap: 4px; /* small space between flag and text */
}
.ticker-item::after {
    content: "•"; /* dot character */
    margin: 0 4px;
    margin-left: 6px;
    margin-right: 3px;
    color: #ffffff;
  }

.flag {
    width: auto;
    height: 22px; /* Maintain aspect ratio */
    display: inline-block;
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
    margin-left: 5px;
    margin-right: 5px;
}

/* Navigation links */
.nav-link {
    color: black;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .nav-link:hover {
    color: #1d4ed8; /* Tailwind's blue-700 */
  }
  
  /* Responsive font sizing */
  @media (max-width: 1024px) {
    .nav-link {
      font-size: 11px;
    }
  }
  @media (max-width: 768px) {
    .nav-link {
      font-size: 10px;
    }
  }
  



  .btn-shake {
    display: inline-block;
    margin: 5px;
    padding: 6px 16px;
    background: linear-gradient(145deg, #e6f9ff, #b3ecff); /* fresh aqua tone */
    color: #064785 !important; /* dark, rich blue text */
    font-size: 14px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    border: 1px solid #7fd6f6; /* aqua border */
    border-radius: 10px;
    text-decoration: none !important; /* ensure no underline */
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  }
  
  /* Hover effect */
  .btn-shake:hover {
    background: linear-gradient(145deg, #d4f4ff, #9fe0ff);
    color: #032d57 !important; /* slightly darker on hover */
    animation: shake 0.4s;
    box-shadow: 0 4px 10px rgba(255, 243, 178, 0.507);
  }
  
  /* Active/pressed */
  .btn-shake:active {
    transform: scale(0.97);
    box-shadow: 0 1px 3px rgba(253, 255, 111, 0.329) inset;
  }
  
  /* Shake animation */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
  }
    
  
  
  
  


  .contact-bar-outer {
    width: auto;
    min-width: 100px;
    position: relative;
    min-height: 50px;
    background: #fff;
    border-color: #374151;
    border-width:  27px;
    ;
  }
  .contact-bar {
    display: flex;
    position: absolute;
    top: 0; right: 0;
    height: 30px;
    align-items: flex-start;
    z-index: 2;
  }
  /* "Pill" effect: only blue top curve */
  .contact-corner-out {
    width: 30px;
    height: 30px;
    position: relative;
    background: #0c0391ff;
    overflow: hidden;
    flex-shrink: 0;
  }
  .contact-corner {
    width: 30px;
    height: 30px;
    position: relative;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
  }
  .contact-corner.left::before,
  .contact-corner.right::before {
    content: "";
    position: absolute;
    width: 40px; height: 40px;
    top: 0; 
    background: #ffffff; /* Blue shade from your screenshot */
  }
  /* Left corner: only top-right blue pill is visible */
  .contact-corner.left::before {
    right: 0;
    border-top-right-radius: 25px;
  }
  /* Right corner: only top-left blue pill is visible */
  .contact-corner.right::before {
    left: 0;
    border-top-left-radius: 25px;
  }
  /* Hide all of the blue except the pill tip */
  .contact-corner.left { border-top-right-radius: 20px; }
  .contact-corner.right { border-top-left-radius: 20px; }
  
  /* Middle content bar */
  .contact-center {
    background: #0c0391ff;
    color: #fff;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    height: 40px;
    min-width: 100px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    padding: 0 18px;
    position: relative;
    z-index: 2;
    padding-top: 2px;
    padding-bottom: 7px;
  }
  .contact-center select {
    background: #2340b6;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    padding: 3px 9px;
    outline: none;
  }
  .contact-center a {
    color: #fff;
    text-decoration: underline;
  }
  .contact-center a:hover {
    color: #a4bbff;
  }
  .contact-center span:not(:last-child) {
    margin-right: 12px;
  }
  


  .nav-container {
    width: 100%;
    display: flex;
    justify-content: center; /* center horizontally */
  }
  
  .nav-links {
    display: flex;
    align-items: center;
    gap: 24px; /* spacing between items */
    font-size: 16px;
    font-weight: 500;
  }
  
  .nav-links a {
    color: #333; /* normal text color */
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .nav-links a:hover {
    color: #1d4ed8; /* blue hover */
  }
  
  /* Responsive font size adjustments */
  @media (max-width: 768px) {
    .nav-links {
      font-size: 24px;
      gap: 18px;
    }
  }
  
  @media (max-width: 480px) {
    .nav-links {
      font-size: 24px;
      gap: 12px;
    }
  }