/* ===== COLOR VARIABLES ===== */
	/* Base Theme (Light Mode) */
	:root {
      --bg: #ffffff;
      --fg: #0f172a; /* slate-900 */
      --muted: #475569; /* slate-600 */
      --accent: #2563eb; /* blue-600 */
      --accent-600: #1d4ed8; /* blue-700 */
      --border: #e2e8f0; /* slate-200 */
      --card: #f8fafc; /* slate-50 */
    }
    .dark {
      --bg: #0b1220; /* deep slate */
      --fg: #e5e7eb;
      --muted: #9ca3af;
      --accent: #60a5fa;
      --accent-600: #3b82f6;
      --border: #1f2937;
      --card: #0f172a;
    }
    .text-white {
	  /* Accent Colors */
	  color: #fff;  /* buttons, highlights */
    }
    .text-green {
	  /* Accent Colors */
	  color: #2dbf73;  /* buttons, highlights */
    }
    .bg-green:before {
	  /* Accent Colors */
	  background: #2dbf73;  /* buttons, highlights */
    }
    .bg-green {
	  /* Accent Colors */
	  background: #2dbf73;  /* buttons, highlights */
    }
    .hover:bg-green:hover {
	  /* Accent Colors */
	  background: #2dbf73;  /* buttons, highlights */
    }
    .text-orange {
	  /* Accent Colors */
	  color: #f7941d;  /* buttons, highlights */
    }
    .bg-orange {
	  /* Accent Colors */
	  background: #f7941d;  /* buttons, highlights */
    }
    .hover:bg-orange:hover {
	  /* Accent Colors */
	  background: #f7941d;  /* buttons, highlights */
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--fg);
      background: var(--bg);
      line-height: 1.5;
    }

	.alert {
	  background-color: var(--alert-red);
	  color: var(--white);
	  padding: 1rem;
	  border-radius: 5px;
	  margin: 1rem 0;
	}

    /* Utility */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
    .hide { display: none; }
    .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    a { color: inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
    .btn { cursor: pointer; border: 1px solid var(--border); background: transparent; padding: .625rem .875rem; border-radius: 999px; font-weight: 600; }
    .btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
    .btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); }
    .tag { display: inline-block; padding: .125rem .5rem; border: 1px solid var(--border); border-radius: 999px; font-size: .75rem; color: var(--muted); }

    /* Header */
    header {
      position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.7); backdrop-filter: saturate(180%) blur(10px);
      border-bottom: 1px solid var(--border);
    }
    .dark header { background: rgba(11,18,32,.6); }
	.site-header__top { position: relative; background-color: #f5f5dc; }
	.site-header__top .nav { display: flex; align-items: center; justify-content: center; gap: 1rem; height: 64px; }
	.site-header__bottom { position: relative; }
	.site-header__bottom .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; }

    .brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; }
    .brand svg { width: 28px; height: 28px; }

    .nav-links { display: none; align-items: center; gap: 1rem; }
    .nav-links a { color: var(--muted); font-weight: 600; padding: .5rem .75rem; border-radius: 10px; }
    .nav-links a:hover, .nav-links a.active { color: var(--fg); background: var(--card); }

    .nav-actions { display: none; align-items: center; gap: .75rem; }

    .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: transparent; }

    /* Dropdown */
	nav .dropdown:hover .menu {
	  display: block;
	}
    .dropdown { position: relative; }
    .menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.06); padding: .5rem; display: none; }
    .menu a { display: flex; align-content: center; justify-content: center; grid-template-columns: 28px 1fr; gap: .5rem; align-items: start; padding: .5rem; border-radius: 10px; color: var(--fg); }
	.menu.show {
		display: block;
	}
    .menu a:hover { background: var(--card); }
    .menu .desc { color: var(--muted); font-size: .875rem; }

    /* Mobile sheet */
    .mobile-panel { position: fixed; inset: 0; left: 0; width: Max(220px, 20%); transition: transform 0.3s ease-out, opacity 0.3s ease-out; background: rgba(0,0,0,.5); display: none; overflow-y: unset; /* allow scrolling */ }
    .mobile-panel.show { display: block; }
    .mobile-drawer { position: absolute; inset: 0 0 auto 0; top: 0; width: 100%; background: var(--bg); border-bottom: 1px solid var(--border); border-radius: 0 0 16px 16px; padding: .75rem 1rem 1rem; box-shadow: 0 20px 40px rgba(0,0,0,.15); }
    .mobile-grid a { display: block; padding: .75rem; border-radius: 10px; color: var(--fg); font-weight: 600; }
    .mobile-grid a:hover, .mobile-grid a.active { background: var(--card); }
    /* Hover effect for desktop */
    @media (min-width: 769px) {
      .mobile-grid details:hover > .mobile-section {
        display: block;
      }
    }
    .mobile-section { border-top: 1px dashed var(--border); margin-top: .5rem; padding-top: .5rem; }
        
	details {
		margin-bottom: 0.5rem;
	}
	summary {
		padding: 0.75rem;
		border-radius: 10px;
		cursor: pointer;
		font-weight: 600;
		list-style: none;
	}
	summary::-webkit-details-marker {
		display: none;
	}
	summary:after {
		content: '▾';
		float: right;
	}
	details[open] summary:after {
		content: '▴';
	}
	summary:hover {
		background: var(--card);
	}
	

	#mobileNavCanvasbutton {
	  cursor: pointer;
	  margin-left: 4rem;
	}

	 .mobileNavOverlay{width:0;display:table-cell;height:100%;background-color:transparent;transition:background-color .3s ease-in-out;position:fixed}

	 .mobileNavOverlay.openMobileNavCanvas{width:100%;background-color:rgba(0,0,0,.75);top:0;right:0;cursor:pointer}

	 .mobileNavOverlay.openMobileNavCanvas.groupedNavigation{background-color:rgba(0,0,0,.5)}

	 .mobileNavOverlay.openMobileNavCanvas :after{content:"\2715";color:#fff;font-size:2rem;position:absolute;right:19%;z-index:-999;margin-left:-9rem;display:block;width:11%;text-align:center}

	 .mobileNavCanvas{top:0;display:table;border-collapse:collapse;border:none;position:fixed;width:70%;left:-70%;background:transparent;overflow-y:auto;overflow-x:hidden;min-height:100%;max-height:100%;height:100%;z-index:10040;transition:all .2s ease-out 0s}

	 .mobileNavCanvas.openMobileNavCanvas{left:0}

	 .mobileNavCanvas.appNavigation{width:80%;left:auto;right:-80%}

	 .mobileNavCanvas.appNavigation.openMobileNavCanvas{left:auto;right:0}

	 .mobileNavCanvas .mobileNavScrollPane{display:inline-block;position:absolute;top:0;bottom:0;overflow-y:scroll;width:100%;background:#fff;vertical-align:top}

	 .mobileNavCanvas .mobileNavScrollPane::-webkit-scrollbar{width:0;background:transparent}.mobile-menu-open{overflow:hidden;width:100%;height:100%;position:fixed}


	 div.smallHeaderContent.appNavigation{border-bottom:none}
	
  @media (max-width: 939px) {
    .mobile-panel {
      z-index:10309; } 
	 .mobileNavOverlay.openMobileNavCanvas{z-index:19;}
	}
	
  @media (min-width: 939px) {
    .mobile-panel {display: none;} 
	 .mobileNavOverlay.openMobileNavCanvas{display: none;}
	}

	@media (min-width:600px){.MobileNavigationBar{display:none}}


	/* ===== FOOTER ===== */
	footer {
	  background: linear-gradient(180deg, transparent, var(--card));
	  margin-top: 10rem;
	  border-top: 1px solid var(--border);
	  color: var(--white);
	  text-align: center;
	  padding: 2rem;
	}

    .footer-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }

    .footer-column h4 {
      margin-bottom: 0.75rem;
	  margin: 0 0 .75rem; 
	  font-size: 1rem; 
	  text-transform: uppercase; 
	  letter-spacing: .08em; 
	  color: var(--muted);
    }

    .footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-column ul li {
      margin-bottom: 0.5rem;
    }

    .footer-column ul li a {
      color: var(--fg);
      text-decoration: none;
      font-size: 0.95rem;
    }

    .footer-column ul li a:hover {
      color: var(--accent-orange);
	  opacity: 1; 
	  text-decoration: underline;
    }

	/* Newsletter */
	.footer-newsletter {
      margin-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      padding-top: 1rem;
	}
	.footer-newsletter p {
	  margin-bottom: 0.5rem;
	}

	.newsletter-form {
	  display: flex;
	  gap: 0.5rem;
	}

	.newsletter-form input {
	  flex: 1;
	  padding: 0.5rem;
	  border: 1px solid var(--border); 
	  background: transparent;
	  border-radius: 5px;
	}

	.newsletter-form button {
	  border: none;
	  padding: 0.5rem 1rem;
	  border-radius: 5px;
	  cursor: pointer;
	}

	.newsletter-form button:hover {
	  background: #e6830f;
	}	
	
	/* Newsletter messages */
	.newsletter-message {
	  margin-top: 0.5rem;
	  font-size: 0.9rem;
	}

	.newsletter-message.success {
	  color: #2dbf73; /* green */
	}

	.newsletter-message.error {
	  color: #ff6b6b; /* red */
	}

	/* Social Icons */
    .social { display: flex; gap: .75rem; margin-top: 1rem; justify-content: center; }
    .social a { display: inline-flex; color: var(--white); font-size: 1.5rem; margin: 0 10px; transition: color 0.3s ease; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 999px; }

    .footer-social a:hover {
      color: var(--primary-green);
    }

    .footer-bottom {
      text-align: center;
      margin-top: 2rem;
      border-top: 1px solid var(--border);
      padding-top: 1rem;
	  color: var(--muted);
      font-size: 0.9rem;
    }
    .footer-bottom .row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }

	/* Mobile full block footer */
	@media (max-width: 768px) {
	  footer {
		display: block;
	  }
      .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
      }
	}
    .footer-legal a { color: var(--muted); margin-left: 1rem; }
    .footer-legal a:hover { color: var(--fg); }
	.first-box{
		margin-left: 3rem;
	}
	.last-box{
		margin-right: 3rem;
	}

    /* Responsive */
    @media (min-width: 768px) {
      .nav-links { display: flex; }
      .nav-actions { display: flex; }
      .hamburger { display: none; }
      .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
    }

	@media (max-width: 767px) {
		.footer-col {
			margin-bottom: 2rem;
			padding: 0 1rem;
		}
		.footer-bottom .row {
			flex-direction: column;
			text-align: center;
		}
		.first-box, .last-box {
			margin: 0;
		}
		.footer-col:not(:last-child) {
			border-bottom: 1px dashed var(--border);
			padding-bottom: 2rem;
		}
	}
	.hidden {
	  display: none;
	  }
	.hide {
	  display: none;
	  }
	  
	/* Smooth popup animation */
	#policyPopup .bg-white {
		transform: translateY(-20px);
		opacity: 0;
		transition: all 0.3s ease-in-out;
	}
	#policyPopup.show .bg-white {
		transform: translateY(0);
		opacity: 1;
	}
	
	/* Sticky Bar Base */
	.policy-bar {
	  position: fixed;
	  bottom: -100%; /* hidden offscreen */
	  left: 0;
	  width: 100%;
	  max-height: 50vh; /* limit height to half screen */
	  background: #fff;
	  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
	  transition: bottom 0.5s ease-in-out;
	  z-index: 9999;
	  overflow-y: auto; /* allow scrolling */
	}

	/* Show animation */
	.policy-bar.show {
	  bottom: 0;
	}

	/* Inner Content */
	.policy-content {
	  /* max-width: 900px; */
	  margin: auto;
	  padding: 20px;
	  position: relative;
	  font-family: Arial, sans-serif;
	}

	.policy-content h2 {
	  font-size: 18px;
	  margin-bottom: 10px;
	  color: #222;
	}

	.policy-content p {
	  color: #444;
	  margin-bottom: 12px;
	  line-height: 1.5;
	}

	.policy-content a {
	  color: #0066cc;
	  text-decoration: underline;
	}

	.policy-box {
	  background: #f9f9f9;
	  border: 1px solid #ddd;
	  padding: 12px;
	  border-radius: 6px;
	  margin-bottom: 12px;
	  font-size: 14px;
	}

	.policy-box ul {
	  margin: 8px 0 0;
	  padding-left: 20px;
	}

	.ip-info {
	  font-size: 13px;
	  font-style: italic;
	  color: #666;
	  margin-bottom: 8px;
	}

	.warning-msg {
	  font-size: 14px;
	  color: #b30000;
	  font-weight: bold;
	  margin-bottom: 10px;
	}

	/* Buttons */
	.policy-actions {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10px;
	}

	.btn {
	  flex: 1;
	  padding: 10px;
	  border-radius: 6px;
	  border: none;
	  font-weight: 600;
	  cursor: pointer;
	  font-size: 14px;
	}

	.btn.accept {
	  background: #0066cc;
	  color: #fff;
	}

	.btn.accept:hover {
	  background: #004d99;
	}

	.btn.remind {
	  background: #e0e0e0;
	  color: #333;
	}

	.btn.remind:hover {
	  background: #c7c7c7;
	}

	/* Close Button */
	.close-btn {
	  position: absolute;
	  top: 8px;
	  right: 10px;
	  font-size: 18px;
	  background: none;
	  border: none;
	  color: #666;
	  cursor: pointer;
	}

	.close-btn:hover {
	  color: #000;
	}