/* Noto Nastaliq Urdu (SIL OFL 1.1), self-hosted. Variable font, weights 400-700. unicode-range keeps the large Arabic file lazy:
   it is only downloaded once Urdu glyphs are actually rendered. Generated by scripts/port/urdu-font.mjs. */
@font-face { font-family: 'Noto Nastaliq Urdu'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/noto-nastaliq-urdu-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Noto Nastaliq Urdu'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/noto-nastaliq-urdu-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Nastaliq Urdu'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/noto-nastaliq-urdu-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Subset holding only the glyphs of the language-switch label "اردو" (visible on the English page, so it must not need the 233 KB file). */
@font-face { font-family: 'Noto Nastaliq Urdu Label'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/noto-nastaliq-urdu-toggle.woff2) format('woff2'); }
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(/assets/layers-BWBAp2CZ.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/assets/layers-2x-Bpkbi35X.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(/assets/marker-icon-hN30_KVU.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

    :root {
      --purple-950: #1a0838;
      --purple-900: #310f6a;
      --purple-800: #371f70;
      --orange-500: #ff3700;
      --orange-400: #ff5c00;
      --orange-300: #ff7a2e;
    }

    * { box-sizing: border-box; }

    body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }

    .font-display { font-family: 'Space Grotesk', sans-serif; }
    .font-urdu { font-family: 'Noto Nastaliq Urdu', serif; line-height: 2.2; }

    .animated-bg {
      background: linear-gradient(-45deg, #1a0838, #310f6a, #371f70, #3d1a00);
      background-size: 400% 400%;
      animation: gradient-shift 15s ease infinite;
    }

    .gradient-text {
      background: linear-gradient(135deg, #ff3700, #ff5c00, #ff7a2e, #ff5c00);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradient-shift 8s ease infinite;
    }

    .glass {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .glass-card {
      background: rgba(55, 31, 112, 0.2);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      border: 1px solid rgba(255, 92, 0, 0.15);
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.25;
      pointer-events: none;
    }

    .input-field {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(26, 8, 56, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #fff;
      font-size: 15px;
      transition: border-color 0.2s, box-shadow 0.2s;
      outline: none;
    }

    .input-field::placeholder { color: rgba(255,255,255,0.55); }
    .input-field:focus {
      border-color: var(--orange-400);
      box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.15);
    }

    .input-field option { background: #310f6a; color: #fff; }

    .tab-btn {
      flex: 1;
      padding: 14px 20px;
      border-radius: 14px;
      font-weight: 700;
      font-size: 15px;
      transition: all 0.3s;
      cursor: pointer;
      border: none;
      position: relative;
      overflow: hidden;
    }

    /* Text on brand-orange buttons is deep purple, not white: white on #ff5c00 is only ~3:1,
       deep purple (#1a0838) on the same orange is ~6:1. */
    .tab-btn.active {
      background: linear-gradient(135deg, var(--orange-500), var(--orange-400));
      color: #1a0838;
      box-shadow: 0 8px 30px rgba(255, 55, 0, 0.4);
    }

    .tab-btn.inactive {
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.8);
    }

    .tab-btn.inactive:hover {
      background: rgba(255,255,255,0.1);
      color: #fff;
    }

    .benefit-chip {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
    }

    .category-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: 1.5px solid rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.88);
      transition: all 0.2s;
      user-select: none;
    }

    .category-chip:hover {
      border-color: rgba(255, 92, 0, 0.7);
      color: #fff;
    }

    .category-chip.selected {
      background: rgba(255, 92, 0, 0.2);
      border-color: var(--orange-400);
      color: #fff;
    }

    .category-chip.selected .chip-dot {
      background: var(--orange-400);
    }

    .chip-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      transition: background 0.2s;
    }

    #map-supplier, #map-buyer {
      width: 100%;
      height: 280px;
      border-radius: 14px;
      border: 1.5px solid rgba(255,255,255,0.1);
      cursor: crosshair;
      z-index: 1;
    }

    #map-supplier .leaflet-container,
    #map-buyer .leaflet-container {
      background: #1a0838;
    }

    .map-wrapper {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
    }

    .map-hint {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(26,8,56,0.85);
      backdrop-filter: blur(8px);
      color: rgba(255,255,255,0.95);
      font-size: 12px;
      padding: 5px 14px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.12);
      pointer-events: none;
      white-space: nowrap;
      z-index: 999;
      transition: opacity 0.3s;
    }

    .map-hint.hidden { opacity: 0; }

    .pin-coords {
      font-size: 12px;
      color: var(--orange-300);
      padding: 6px 12px;
      background: rgba(255, 92, 0, 0.08);
      border-radius: 8px;
      border: 1px solid rgba(255, 92, 0, 0.2);
      display: none;
    }

    .pin-coords.visible { display: block; }

    .submit-btn {
      width: 100%;
      padding: 16px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--orange-500), var(--orange-400));
      color: #1a0838;
      font-weight: 800;
      font-size: 16px;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 8px 30px rgba(255, 55, 0, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      position: relative;
      overflow: hidden;
    }

    .submit-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(255, 55, 0, 0.5);
    }

    .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

    .countdown-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 20px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      min-width: 70px;
    }

    .countdown-num {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 36px;
      font-weight: 700;
      line-height: 1;
      background: linear-gradient(135deg, #ff3700, #ff5c00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .countdown-label {
      font-size: 11px;
      color: rgba(255,255,255,0.78);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .lang-toggle {
      display: flex;
      background: rgba(255,255,255,0.06);
      border-radius: 100px;
      padding: 3px;
      gap: 2px;
      border: 1px solid rgba(255,255,255,0.1);
    }

    .lang-btn {
      padding: 6px 16px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
    }

    .lang-btn.active {
      background: var(--orange-400);
      color: #1a0838;
    }

    .lang-btn.inactive {
      background: transparent;
      color: rgba(255,255,255,0.82);
    }

    .form-panel { display: none; }
    .form-panel.active { display: block; animation: fade-in 0.4s ease-out; }

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
    }

    .reveal.active { opacity: 1; transform: translateY(0); }

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #1a0838; }
    ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff3700, #ff5c00); border-radius: 10px; }

    /* RTL helpers */
    [dir="rtl"] .input-field { text-align: right; }
    [dir="rtl"] .benefit-chip { flex-direction: row-reverse; text-align: right; }
    [dir="rtl"] .category-chip { flex-direction: row-reverse; }

    /* Progress bar */
    .progress-bar {
      height: 6px;
      border-radius: 100px;
      background: rgba(255,255,255,0.08);
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--orange-500), var(--orange-300));
      transition: width 0.5s ease;
    }

    /* Whatsapp indicator */
    .wa-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: #25d366;
      background: rgba(37,211,102,0.1);
      border: 1px solid rgba(37,211,102,0.2);
      border-radius: 100px;
      padding: 2px 8px;
      font-weight: 600;
    }

    /* Success overlay */
    .success-overlay {
      display: none;
      text-align: center;
      padding: 48px 24px;
      animation: slide-up 0.5s ease-out;
    }

    .success-overlay.active { display: block; }

    .success-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, #25d366, #128c7e);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 0 40px rgba(37,211,102,0.3);
    }

    /* Hosted logo (https://chotu.digital/logo.png) is dark-purple artwork made for light
       backgrounds, so on this dark page it sits on a white chip to stay fully visible. */
    .logo-chip {
      display: inline-flex;
      align-items: center;
      background: #fff;
      border-radius: 12px;
      padding: 5px 12px;
      box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
    }

    .logo-chip img { display: block; width: auto; object-fit: contain; }

    /* ============================================================
       AMBASSADOR CTA
    ============================================================ */
    /* Compact secondary CTA (header, success screens): outlined so it never
       competes with the solid-orange Register button. */
    .amb-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 100px;
      border: 1.5px solid var(--orange-300);
      background: rgba(255, 92, 0, 0.14);
      color: #fff;
      font-weight: 700;
      font-size: 13px;
      white-space: nowrap;
      transition: all 0.2s;
    }

    .amb-pill:hover {
      background: var(--orange-400);
      border-color: var(--orange-400);
      color: #1a0838;
    }

    .amb-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      text-decoration: underline;
      text-decoration-color: var(--orange-300);
      text-underline-offset: 5px;
      text-decoration-thickness: 2px;
      transition: color 0.2s;
    }

    .amb-link:hover { color: var(--orange-300); }

    .amb-card {
      border-radius: 28px;
      padding: 2px;
      background: linear-gradient(135deg, #ff3700, #ff7a2e 45%, #371f70);
    }

    .amb-card-inner {
      border-radius: 26px;
      background: linear-gradient(160deg, #2a0e5c, #1a0838);
      padding: 32px 24px;
    }

    @media (min-width: 640px) {
      .amb-card-inner { padding: 44px 40px; }
    }

    .amb-reward {
      border-radius: 18px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .amb-amount {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 26px;
      line-height: 1.15;
      color: var(--orange-300);
    }

    .amb-step {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .amb-step-num {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--orange-400);
      color: #1a0838;
      font-weight: 800;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .amb-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 30px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--orange-500), var(--orange-400));
      color: #1a0838;
      font-weight: 800;
      font-size: 17px;
      box-shadow: 0 8px 30px rgba(255, 55, 0, 0.35);
      transition: all 0.3s;
    }

    .amb-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(255, 55, 0, 0.5);
    }

    [dir="rtl"] .flip-rtl { transform: scaleX(-1); }

    /* ============================================================
       HOW-TO-USE VIDEOS (portrait 9:16, hosted on chotu.digital)
    ============================================================ */
    .how-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: center;
      justify-items: center;
    }

    @media (min-width: 640px) {
      .how-grid {
        grid-template-columns: 240px 1fr;
        gap: 32px;
        justify-items: stretch;
      }
    }

    .how-video {
      display: block;
      width: 100%;
      max-width: 260px;
      aspect-ratio: 9 / 16;
      border-radius: 20px;
      background: #0d0420;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    }

    .how-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 100px;
      background: rgba(255, 92, 0, 0.15);
      border: 1px solid rgba(255, 122, 46, 0.7);
      color: var(--orange-300);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    /* Form cards sit under the fixed header when reached via an anchor link. */
    [id$="-form-card"] { scroll-margin-top: 96px; }

    /* Sticky lang bar on mobile */
    @media (max-width: 640px) {
      .countdown-num { font-size: 28px; }
      .countdown-box { padding: 10px 8px; min-width: 56px; }
    }

    /* ============================================================
       CELEBRATION WELCOME OVERLAY
    ============================================================ */
    #celebration-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      overflow: hidden;
    }

    #celebration-overlay.fade-out {
      animation: celebration-fade 0.8s ease-out forwards;
    }

    @keyframes celebration-fade {
      from { opacity: 1; }
      to   { opacity: 0; }
    }

    #celebration-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
*, ::before, ::after {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-pan-x:  ;
      --tw-pan-y:  ;
      --tw-pinch-zoom:  ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position:  ;
      --tw-gradient-via-position:  ;
      --tw-gradient-to-position:  ;
      --tw-ordinal:  ;
      --tw-slashed-zero:  ;
      --tw-numeric-figure:  ;
      --tw-numeric-spacing:  ;
      --tw-numeric-fraction:  ;
      --tw-ring-inset:  ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgb(59 130 246 / 0.5);
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      --tw-blur:  ;
      --tw-brightness:  ;
      --tw-contrast:  ;
      --tw-grayscale:  ;
      --tw-hue-rotate:  ;
      --tw-invert:  ;
      --tw-saturate:  ;
      --tw-sepia:  ;
      --tw-drop-shadow:  ;
      --tw-backdrop-blur:  ;
      --tw-backdrop-brightness:  ;
      --tw-backdrop-contrast:  ;
      --tw-backdrop-grayscale:  ;
      --tw-backdrop-hue-rotate:  ;
      --tw-backdrop-invert:  ;
      --tw-backdrop-opacity:  ;
      --tw-backdrop-saturate:  ;
      --tw-backdrop-sepia:  ;
      --tw-contain-size:  ;
      --tw-contain-layout:  ;
      --tw-contain-paint:  ;
      --tw-contain-style:  ;
}
::backdrop {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-rotate: 0;
      --tw-skew-x: 0;
      --tw-skew-y: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-pan-x:  ;
      --tw-pan-y:  ;
      --tw-pinch-zoom:  ;
      --tw-scroll-snap-strictness: proximity;
      --tw-gradient-from-position:  ;
      --tw-gradient-via-position:  ;
      --tw-gradient-to-position:  ;
      --tw-ordinal:  ;
      --tw-slashed-zero:  ;
      --tw-numeric-figure:  ;
      --tw-numeric-spacing:  ;
      --tw-numeric-fraction:  ;
      --tw-ring-inset:  ;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: rgb(59 130 246 / 0.5);
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      --tw-blur:  ;
      --tw-brightness:  ;
      --tw-contrast:  ;
      --tw-grayscale:  ;
      --tw-hue-rotate:  ;
      --tw-invert:  ;
      --tw-saturate:  ;
      --tw-sepia:  ;
      --tw-drop-shadow:  ;
      --tw-backdrop-blur:  ;
      --tw-backdrop-brightness:  ;
      --tw-backdrop-contrast:  ;
      --tw-backdrop-grayscale:  ;
      --tw-backdrop-hue-rotate:  ;
      --tw-backdrop-invert:  ;
      --tw-backdrop-opacity:  ;
      --tw-backdrop-saturate:  ;
      --tw-backdrop-sepia:  ;
      --tw-contain-size:  ;
      --tw-contain-layout:  ;
      --tw-contain-paint:  ;
      --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: Inter, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
      width: 100%;
}
@media (min-width: 640px) {

      .container {
            max-width: 640px;
      }
}
@media (min-width: 768px) {

      .container {
            max-width: 768px;
      }
}
@media (min-width: 1024px) {

      .container {
            max-width: 1024px;
      }
}
@media (min-width: 1280px) {

      .container {
            max-width: 1280px;
      }
}
@media (min-width: 1536px) {

      .container {
            max-width: 1536px;
      }
}
.visible {
      visibility: visible;
}
.static {
      position: static;
}
.fixed {
      position: fixed;
}
.absolute {
      position: absolute;
}
.relative {
      position: relative;
}
.bottom-6 {
      bottom: 1.5rem;
}
.bottom-8 {
      bottom: 2rem;
}
.left-0 {
      left: 0px;
}
.left-1\/2 {
      left: 50%;
}
.right-0 {
      right: 0px;
}
.right-6 {
      right: 1.5rem;
}
.top-0 {
      top: 0px;
}
.z-10 {
      z-index: 10;
}
.z-50 {
      z-index: 50;
}
.mx-auto {
      margin-left: auto;
      margin-right: auto;
}
.mb-1 {
      margin-bottom: 0.25rem;
}
.mb-1\.5 {
      margin-bottom: 0.375rem;
}
.mb-10 {
      margin-bottom: 2.5rem;
}
.mb-2 {
      margin-bottom: 0.5rem;
}
.mb-3 {
      margin-bottom: 0.75rem;
}
.mb-4 {
      margin-bottom: 1rem;
}
.mb-5 {
      margin-bottom: 1.25rem;
}
.mb-6 {
      margin-bottom: 1.5rem;
}
.mb-8 {
      margin-bottom: 2rem;
}
.ml-2 {
      margin-left: 0.5rem;
}
.mt-0\.5 {
      margin-top: 0.125rem;
}
.mt-1 {
      margin-top: 0.25rem;
}
.mt-1\.5 {
      margin-top: 0.375rem;
}
.mt-2 {
      margin-top: 0.5rem;
}
.mt-3 {
      margin-top: 0.75rem;
}
.mt-4 {
      margin-top: 1rem;
}
.mt-6 {
      margin-top: 1.5rem;
}
.mt-8 {
      margin-top: 2rem;
}
.block {
      display: block;
}
.inline {
      display: inline;
}
.flex {
      display: flex;
}
.inline-flex {
      display: inline-flex;
}
.table {
      display: table;
}
.grid {
      display: grid;
}
.hidden {
      display: none;
}
.h-10 {
      height: 2.5rem;
}
.h-12 {
      height: 3rem;
}
.h-2 {
      height: 0.5rem;
}
.h-3 {
      height: 0.75rem;
}
.h-3\.5 {
      height: 0.875rem;
}
.h-4 {
      height: 1rem;
}
.h-5 {
      height: 1.25rem;
}
.h-6 {
      height: 1.5rem;
}
.h-8 {
      height: 2rem;
}
.h-full {
      height: 100%;
}
.min-h-screen {
      min-height: 100vh;
}
.w-10 {
      width: 2.5rem;
}
.w-2 {
      width: 0.5rem;
}
.w-3 {
      width: 0.75rem;
}
.w-3\.5 {
      width: 0.875rem;
}
.w-4 {
      width: 1rem;
}
.w-5 {
      width: 1.25rem;
}
.w-6 {
      width: 1.5rem;
}
.w-8 {
      width: 2rem;
}
.w-auto {
      width: auto;
}
.w-full {
      width: 100%;
}
.max-w-4xl {
      max-width: 56rem;
}
.max-w-6xl {
      max-width: 72rem;
}
.max-w-7xl {
      max-width: 80rem;
}
.max-w-md {
      max-width: 28rem;
}
.max-w-sm {
      max-width: 24rem;
}
.max-w-xl {
      max-width: 36rem;
}
.max-w-xs {
      max-width: 20rem;
}
.flex-1 {
      flex: 1 1 0%;
}
.flex-shrink-0 {
      flex-shrink: 0;
}
.-translate-x-1\/2 {
      --tw-translate-x: -50%;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce {

      0%, 100% {
            transform: translateY(-25%);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
      }

      50% {
            transform: none;
            animation-timing-function: cubic-bezier(0,0,0.2,1);
      }
}
.animate-bounce {
      animation: bounce 1s infinite;
}
@keyframes pulse {

      50% {
            opacity: .5;
      }
}
.animate-pulse {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

      to {
            transform: rotate(360deg);
      }
}
.animate-spin {
      animation: spin 1s linear infinite;
}
.resize-none {
      resize: none;
}
.resize {
      resize: both;
}
.flex-col {
      flex-direction: column;
}
.flex-wrap {
      flex-wrap: wrap;
}
.items-start {
      align-items: flex-start;
}
.items-center {
      align-items: center;
}
.justify-center {
      justify-content: center;
}
.justify-between {
      justify-content: space-between;
}
.gap-1\.5 {
      gap: 0.375rem;
}
.gap-2 {
      gap: 0.5rem;
}
.gap-3 {
      gap: 0.75rem;
}
.gap-4 {
      gap: 1rem;
}
.gap-5 {
      gap: 1.25rem;
}
.gap-6 {
      gap: 1.5rem;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
      overflow: hidden;
}
.overflow-x-hidden {
      overflow-x: hidden;
}
.whitespace-nowrap {
      white-space: nowrap;
}
.rounded-2xl {
      border-radius: 1rem;
}
.rounded-3xl {
      border-radius: 1.5rem;
}
.rounded-full {
      border-radius: 9999px;
}
.rounded-xl {
      border-radius: 0.75rem;
}
.border {
      border-width: 1px;
}
.border-2 {
      border-width: 2px;
}
.border-b {
      border-bottom-width: 1px;
}
.border-t {
      border-top-width: 1px;
}
.border-emerald-400\/40 {
      border-color: rgb(52 211 153 / 0.4);
}
.border-orange-300\/70 {
      border-color: rgb(255 122 46 / 0.7);
}
.border-orange-400\/70 {
      border-color: rgb(255 92 0 / 0.7);
}
.border-orange-500\/30 {
      border-color: rgb(255 55 0 / 0.3);
}
.border-purple-800 {
      --tw-border-opacity: 1;
      border-color: rgb(55 31 112 / var(--tw-border-opacity, 1));
}
.border-purple-950\/30 {
      border-color: rgb(26 8 56 / 0.3);
}
.border-red-400\/40 {
      border-color: rgb(248 113 113 / 0.4);
}
.border-white\/15 {
      border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
      border-color: rgb(255 255 255 / 0.2);
}
.border-white\/30 {
      border-color: rgb(255 255 255 / 0.3);
}
.border-white\/5 {
      border-color: rgb(255 255 255 / 0.05);
}
.border-t-purple-950 {
      --tw-border-opacity: 1;
      border-top-color: rgb(26 8 56 / var(--tw-border-opacity, 1));
}
.border-t-white {
      --tw-border-opacity: 1;
      border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.bg-emerald-500\/10 {
      background-color: rgb(16 185 129 / 0.1);
}
.bg-orange-400 {
      --tw-bg-opacity: 1;
      background-color: rgb(255 92 0 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
      --tw-bg-opacity: 1;
      background-color: rgb(255 55 0 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/10 {
      background-color: rgb(255 55 0 / 0.1);
}
.bg-orange-500\/15 {
      background-color: rgb(255 55 0 / 0.15);
}
.bg-orange-500\/20 {
      background-color: rgb(255 55 0 / 0.2);
}
.bg-purple-900 {
      --tw-bg-opacity: 1;
      background-color: rgb(49 15 106 / var(--tw-bg-opacity, 1));
}
.bg-purple-950 {
      --tw-bg-opacity: 1;
      background-color: rgb(26 8 56 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
      background-color: rgb(239 68 68 / 0.1);
}
.bg-white {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/5 {
      background-color: rgb(255 255 255 / 0.05);
}
.bg-gradient-to-br {
      background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
      background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-green-500 {
      --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
      --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500 {
      --tw-gradient-from: #ff3700 var(--tw-gradient-from-position);
      --tw-gradient-to: rgb(255 55 0 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-800 {
      --tw-gradient-from: #371f70 var(--tw-gradient-from-position);
      --tw-gradient-to: rgb(55 31 112 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500 {
      --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
      --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-emerald-600 {
      --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.to-orange-300 {
      --tw-gradient-to: #ff7a2e var(--tw-gradient-to-position);
}
.to-orange-400 {
      --tw-gradient-to: #ff5c00 var(--tw-gradient-to-position);
}
.to-orange-500 {
      --tw-gradient-to: #ff3700 var(--tw-gradient-to-position);
}
.to-pink-600 {
      --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}
.object-contain {
      object-fit: contain;
}
.p-1\.5 {
      padding: 0.375rem;
}
.p-4 {
      padding: 1rem;
}
.p-6 {
      padding: 1.5rem;
}
.px-2 {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
}
.px-3 {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
}
.px-4 {
      padding-left: 1rem;
      padding-right: 1rem;
}
.px-5 {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
}
.px-6 {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
}
.px-8 {
      padding-left: 2rem;
      padding-right: 2rem;
}
.py-0\.5 {
      padding-top: 0.125rem;
      padding-bottom: 0.125rem;
}
.py-1\.5 {
      padding-top: 0.375rem;
      padding-bottom: 0.375rem;
}
.py-12 {
      padding-top: 3rem;
      padding-bottom: 3rem;
}
.py-16 {
      padding-top: 4rem;
      padding-bottom: 4rem;
}
.py-2 {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
}
.py-3 {
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
}
.py-3\.5 {
      padding-top: 0.875rem;
      padding-bottom: 0.875rem;
}
.py-4 {
      padding-top: 1rem;
      padding-bottom: 1rem;
}
.pb-16 {
      padding-bottom: 4rem;
}
.pr-4 {
      padding-right: 1rem;
}
.pt-2 {
      padding-top: 0.5rem;
}
.pt-24 {
      padding-top: 6rem;
}
.pt-6 {
      padding-top: 1.5rem;
}
.text-left {
      text-align: left;
}
.text-center {
      text-align: center;
}
.font-display {
      font-family: Space Grotesk, system-ui, sans-serif;
}
.text-2xl {
      font-size: 1.5rem;
      line-height: 2rem;
}
.text-3xl {
      font-size: 1.875rem;
      line-height: 2.25rem;
}
.text-4xl {
      font-size: 2.25rem;
      line-height: 2.5rem;
}
.text-\[10px\] {
      font-size: 10px;
}
.text-lg {
      font-size: 1.125rem;
      line-height: 1.75rem;
}
.text-sm {
      font-size: 0.875rem;
      line-height: 1.25rem;
}
.text-xl {
      font-size: 1.25rem;
      line-height: 1.75rem;
}
.text-xs {
      font-size: 0.75rem;
      line-height: 1rem;
}
.font-black {
      font-weight: 900;
}
.font-bold {
      font-weight: 700;
}
.font-extrabold {
      font-weight: 800;
}
.font-medium {
      font-weight: 500;
}
.font-semibold {
      font-weight: 600;
}
.uppercase {
      text-transform: uppercase;
}
.leading-tight {
      line-height: 1.25;
}
.tracking-wider {
      letter-spacing: 0.05em;
}
.tracking-widest {
      letter-spacing: 0.1em;
}
.text-emerald-100 {
      --tw-text-opacity: 1;
      color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.text-green-400 {
      --tw-text-opacity: 1;
      color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-orange-300 {
      --tw-text-opacity: 1;
      color: rgb(255 122 46 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
      --tw-text-opacity: 1;
      color: rgb(255 92 0 / var(--tw-text-opacity, 1));
}
.text-purple-950 {
      --tw-text-opacity: 1;
      color: rgb(26 8 56 / var(--tw-text-opacity, 1));
}
.text-red-100 {
      --tw-text-opacity: 1;
      color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}
.text-red-300 {
      --tw-text-opacity: 1;
      color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
      --tw-text-opacity: 1;
      color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-white {
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/50 {
      color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
      color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
      color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
      color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
      color: rgb(255 255 255 / 0.9);
}
.antialiased {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}
.placeholder-white\/30::placeholder {
      color: rgb(255 255 255 / 0.3);
}
.placeholder-white\/40::placeholder {
      color: rgb(255 255 255 / 0.4);
}
.shadow-2xl {
      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
      --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-orange-500\/30 {
      --tw-shadow-color: rgb(255 55 0 / 0.3);
      --tw-shadow: var(--tw-shadow-colored);
}
.filter {
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
}
.transition-all {
      transition-property: all;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
}
.transition-colors {
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
}
.transition-transform {
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
}
.duration-300 {
      transition-duration: 300ms;
}
.ease-in-out {
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hover\:scale-105:hover {
      --tw-scale-x: 1.05;
      --tw-scale-y: 1.05;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:bg-orange-400:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(255 92 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
      background-color: rgb(255 255 255 / 0.1);
}
.hover\:text-orange-300:hover {
      --tw-text-opacity: 1;
      color: rgb(255 122 46 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-orange-500\/50:hover {
      --tw-shadow-color: rgb(255 55 0 / 0.5);
      --tw-shadow: var(--tw-shadow-colored);
}
.focus\:border-orange-500:focus {
      --tw-border-opacity: 1;
      border-color: rgb(255 55 0 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
}
.focus\:ring-2:focus {
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-orange-500\/20:focus {
      --tw-ring-color: rgb(255 55 0 / 0.2);
}
.active\:scale-95:active {
      --tw-scale-x: .95;
      --tw-scale-y: .95;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:opacity-50:disabled {
      opacity: 0.5;
}
.disabled\:opacity-60:disabled {
      opacity: 0.6;
}
@media (min-width: 640px) {

      .sm\:inline {
            display: inline;
      }

      .sm\:inline-flex {
            display: inline-flex;
      }

      .sm\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .sm\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .sm\:flex-row {
            flex-direction: row;
      }

      .sm\:gap-6 {
            gap: 1.5rem;
      }

      .sm\:p-8 {
            padding: 2rem;
      }

      .sm\:px-4 {
            padding-left: 1rem;
            padding-right: 1rem;
      }

      .sm\:text-start {
            text-align: start;
      }

      .sm\:text-2xl {
            font-size: 1.5rem;
            line-height: 2rem;
      }

      .sm\:text-4xl {
            font-size: 2.25rem;
            line-height: 2.5rem;
      }

      .sm\:text-5xl {
            font-size: 3rem;
            line-height: 1;
      }

      .sm\:text-base {
            font-size: 1rem;
            line-height: 1.5rem;
      }
}
@media (min-width: 768px) {

      .md\:flex {
            display: flex;
      }

      .md\:text-6xl {
            font-size: 3.75rem;
            line-height: 1;
      }
}
@media (min-width: 1024px) {

      .lg\:pr-6 {
            padding-right: 1.5rem;
      }
}
/*
 * Urdu typography (Phase 1b, owner decision 2026-10-08): Urdu text is always set in Noto Nastaliq Urdu, never in whatever font the
 * visitor's device happens to have. Urdu strings carry lang="ur" (<T>, category chips, status messages), which is also what screen
 * readers use to pick the right voice. The font itself is self-hosted (shared/styles/fonts-urdu.css) and loads only when Urdu renders.
 * `body [lang="ur"]` deliberately cannot match <html lang="ur"> (the page switch sets it there), so English-only blocks stay untouched.
 * Specificity note: these rules must beat Tailwind utilities such as .font-display / .leading-tight / .tracking-wide (one class),
 * because those were written for Latin text and would otherwise hand Urdu glyphs back to a system font.
 */
body [lang="ur"]:not([id="btn-ur"]) {
  font-family: 'Noto Nastaliq Urdu', serif;
  line-height: 2.2;       /* Nastaliq letterforms are tall; tight leading clips them (the original .font-urdu rule) */
  letter-spacing: normal; /* tracking breaks the cursive joins */
  text-transform: none;
}

/* Display headings: 2.2 x 60px opens a hole between the two hero lines, so they get a tighter (still safe) leading. */
body h1 [lang="ur"]:not([id="btn-ur"]),
body h1[lang="ur"] { line-height: 1.55; }
body h2 [lang="ur"]:not([id="btn-ur"]),
body h2[lang="ur"],
body h3 [lang="ur"]:not([id="btn-ur"]),
body h3[lang="ur"] { line-height: 1.8; }

/* Large display figures (reward amounts, stat numbers) and text inside compact controls also need a tighter leading than running text;
   without this a wrapped two-line button or a big "200 روپے" figure opens tall gaps. */
body [lang="ur"].text-2xl:not([id="btn-ur"]),
body [lang="ur"].text-3xl:not([id="btn-ur"]),
body [lang="ur"].text-4xl:not([id="btn-ur"]),
body [lang="ur"].text-5xl:not([id="btn-ur"]),
body [lang="ur"].text-6xl:not([id="btn-ur"]) { line-height: 1.6; }
body .dc-btn [lang="ur"]:not([id="btn-ur"]),
body .submit-btn [lang="ur"]:not([id="btn-ur"]),
body .tab-btn [lang="ur"]:not([id="btn-ur"]),
body .amb-pill [lang="ur"]:not([id="btn-ur"]),
body .countdown-box [lang="ur"]:not([id="btn-ur"]),
body .dc-btn[lang="ur"],
body .submit-btn[lang="ur"] { line-height: 1.7; }

/* The language switch is Urdu text that is visible on the ENGLISH page: it uses a 2 KB subset holding just those glyphs, so English
   visitors never download the full 233 KB font. */
#btn-ur {
  font-family: 'Noto Nastaliq Urdu Label', 'Noto Nastaliq Urdu', serif;
  line-height: 1.2;
}