/* global resets & container styling… (keep all your other CSS here) */
/* somewhere in your main stylesheet trailing slash problem */
 .ltr {
 direction: ltr;
 unicode-bidi:isolate;
 /* “embed” also works, but isolate is more future‑proof */
 /*white-space: nowrap;
 /* optional, to keep the URL all on one line */
}
 a: -webkit-any-link {
 color: -webkit-link;
 cursor: pointer;
 text-decoration: none;
}
/* ——————————————————————————— */
/* sidebar & ad‑list styling */
/* ——————————————————————————— */
/* 20 slots × 250px + gaps = sidebar height */
 #ad-sidebar {
 float:right;
 margin-left: 20px;
 width: 320px;
 min-height: 8390px;
 max-height: 8750px;
 overflow: hidden;
 position: relative;
 text-align: center;
 z-index: 1;
}
/* wrapper around all the slots */
 #ad-list {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 transition: opacity 1s ease-in-out;
 opacity: 1;
}
/* individual ad slot */
 #ad-list .ad-item {
 display: block;
 width: 100%;
 max-width: 360px;
 height: 270px;
 /* your slot height + padding/gap */
 margin-bottom: 10px;
 padding: 8px;
 background: #fff;
 border: 2px solid #d2d3e4;
 border-radius: 4px;
 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 box-sizing: border-box;
}
 .b2 {
 background: #ffffff;
 border: 1px solid #ccc;
 font-weight: 700;
}
 .b3 {
 background: #a64d79;
 ;
 font-weight: 700;
}
 .b4 {
 background: #3c78d8;
 font-weight: 700;
}
 .b5 {
 background: #6aa84f;
 font-weight: 700;
}
 .b6 {
 background: #bf9000;
 font-weight: 700;
}
 h1 {
 margin: 30px 0 0;
 font-size: 2rem;
 color: #fff;
 line-height: 1.2em;
}
 h2 {
 color: #fff;
}
 h3 {
 color: #2c3e50;
 margin-top: 30px;
}
 body {
 font-family: "Open Sans", -apple-system, "system-ui", "Segoe UI", sans-serif;
 margin: 0;
 padding: 0;
 background-color: #f1f4f5;
}
 .body, html {
 background: transparent !important;
}
 .container {
 max-width: 1334px;
 margin: 10px auto;
 background: transparent important !;
}
/* ensure main column makes room for sidebar */
 .main-content {
 line-height: 1.3em;
 max-width: 968px;
 width: 100%;
 hyphens auto line-height 20px overflow-wrap break-word position relative margin-right: 335px;
 /* sidebar width (320) + 40px gutter */
 /*background: transparent !important;
 /* remove white panel */
 background-image: url('https://phuketer.com/directory/images/la-square.png') !important;
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: center;
}
 .bordered {
 padding: 15px;
 /*box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
 */
 margin: 15px 0;
 background: rgba(255,255,255,.90);
 border: solid 2px rgb(210, 211, 228);
 border-radius: 4px;
 box-shadow: rgba(0, 0, 0, 0.098) 0px 1px 10px 0px;
 box-sizing: border-box;
 /*filter: drop-shadow(5px 5px 10px red);*/
 width: 100%;
 max-width: 963px;
 line-height: 1.7em;
 z-index: 10;
}
/* allow normal wrapping in our bordered paragraphs */
 .bordered p {
 white-space: normal !important;
 word-break: break-word;
 /* break long words/URLs */
 overflow-wrap: break-word;
}
/* override the LTR helper’s inline nowrap */
 .bordered p span[dir="ltr"] {
 white-space: normal !important;
}
 footer {
 text-align: justify;
 font-size: 0.9rem;
 color: #888;
}
/* big To Top button */
 .to-top {
 position: relative;
 float:right;
 bottom: 1.5rem;
 font-size: 1.25rem;
 border: none;
 border-radius: 0.5em;
 background: rgba(255, 255, 255, 0.8);
 cursor: pointer;
}
 .bottom-nav {
 position: absolute;
 left: 50%;
 bottom: 1.5em;
 transform: translateX(-50%);
 background: rgba(0, 0, 0, 0.5);
 padding: 0.5em;
 border-radius: 1em;
 color: #fff;
 font-size: 1rem;
 z-index: 3;
}
 .bottom-nav a, .bottom-nav span {
 margin: 0 0.3em;
 color: #fff;
 text-decoration: none;
}
/* new: top-controls share the same background, border-radius & padding */
 .top-controls {
 position: absolute;
 right: 1.5rem;
 bottom: 1.5rem;
 background: rgba(0, 0, 0, 0.5);
 padding: 0.5em 1em;
 border-radius: 1em;
 display: flex;
 gap: 0.5em;
 z-index: 3;
}
/* icon sizing & spacing */
 .top-controls button, .top-controls a.icon-btn {
 font-size: 2rem;
 /* larger icons */
 color: #fff;
 background: none;
 /* parent already has bg */
 border: none;
 text-decoration: none;
 cursor: pointer;
 line-height: unset;
}
/* full-bleed hero footer */
 .hero-footer {
 position: relative;
 width: 100%;
 overflow: hidden;
 margin-top: 2em;
 max-width: 963px;
 border-radius: 3px;
}
 .hero-footer .hero-img {
 display: block;
 width: 100%;
 height: auto;
 /* allow natural aspect ratio */
 object-fit: cover;
}
/* big To Top button */
 .hero-footer .to-top {
 position: absolute;
 right: 1.5rem;
 padding: 0.75em 1.25em;
 background: rgba(255, 255, 255, 0.8);
}
/* -------------- HERO HEADER BACKDROP -------------- */
 .hero-header {
 position: relative;
 background: url('https://phuketer.com/directory/images/hero-header.webp') center/cover no-repeat;
 min-height: 250px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 /* vertical centering of <h1> */
 align-items: center;
 /* horizontal centering of <h1> */
 text-align: center;
 /* allow dropdowns to escape the hero container */
 overflow: visible;
 padding: 1rem 1rem 4rem;
 /* ← keep bottom-nav & top-controls clear of the H1 */
 margin-top: 0;
}
 .hero-header .hypernav {
 overflow: visible;
 /* ensure it isn’t clipped by its parent */
 z-index: 9999;
 /* keep it on top of everything */
}
/* ─── Container Enhancements ─── */
 .hypernav {
 position: absolute;
 top: calc(100% + 0.5rem);
 right: 1rem;
 background: rgba(0, 0, 0, 0.85);
 color: #fff;
 padding: 0.5em;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 border-radius: 0.5em;
 overflow: visible;
 /* ensure sub-menus can expand */
 font-size: 1rem;
 /* ─── Optional: slightly enlarge font for readability ─── */
 min-width: 12em;
 /* ensure enough click-area */
 z-index: 9999;
 /* ← make it truly on top */
}
/* ─── Hypernav List Reset & Layout ─── */
 .hypernav ul {
 list-style: none;
 margin: 0;
 padding: 0.5em 0;
}
 .hypernav li+li {
 margin-top: 0.25em;
}
/* ─── Link Styling ─── */
 .hypernav a {
 display: block;
 padding: 0.5em 1em;
 color: #fff;
 text-align: left;
 text-decoration: none;
 border-radius: 0.25em;
 transition: background 0.2s;
}
 .hypernav a:hover, .hypernav a:focus {
 background: rgba(255, 255, 255, 0.2);
}
 .hidden {
 display: none;
}
/* —— FLAGS: allow wrapping & constrain size —— */
 .lang-flags {
 display: flex;
 flex-wrap: wrap;
 /* ← allow new lines */
 justify-content: center;
 gap: 0.3rem;
 padding: 0;
}
 .flag, .globe {
 margin: 0 0.25em;
 font-size: 2rem;
 text-decoration: none;
 line-height: normal;
 flex: 0 1 auto;
 /* prevent flags from growing too large */
}
/* —— IMAGES: logos in support & disclaimer —— */
 .support img, .disclaimer img {
 max-width: 100%;
 height: auto;
 display: block;
 margin: 0 auto 1rem;
}
 .badge {
 display: inline-block;
 padding: 4px 8px;
 margin: 2px;
 border-radius: 8px;
 font-size: 12px;
 color: #fff;
}
 .chiplet {
 display: inline-block;
 padding: 0.3em 0.6em;
 font-weight: 700;
 font-size: 1.1em;
 color: #000;
 background-color: #fff8b3;
 /* a light yellow */
 border: 1px solid #ccc;
 border-radius: 0.25rem;
 /* soft corners */
 margin-bottom: 0.5em;
}
 .cat {
 font-size: 4rem;
 padding: 0;
}
 .note {
 background: #fef9e7;
 border-left: 5px solid #f1c40f;
 padding: 10px;
 margin: 10px 0;
 position: relative;
}
 .qr img {
 max-width: 200px;
}
 .btn {
 display: inline-block;
 margin: 0.5em;
 padding: 0.6em 1.2em;
 background: #2980b9;
 color: #fff !important;
 text-decoration: none;
 font-weight: 700;
 border-radius: 4px;
}
 .btn:hover {
 background: #1f5f85;
}
 .socicon {
 height: 48px;
 vertical-align: middle;
 margin: 10px;
}
.loc-right {
 width: 18%;
 float: right;
 text-align: center;
}
/*.loc-left {
 width: 82%;
 float: left;
}*/
/* on narrower screens, let the hero grow instead of overlapping */
 @media (max-width: 960px) {
 .hero-header {
 justify-content: flex-start;
 /* stack from top */
 padding-top: 2rem;
 text-align: center;
 }
 .bottom-nav {
 position: absolute;
 top: 3px;
 bottom: auto;
 left: unset;
 transform: unset;
 /* shrink-wrap to its contents rather than full width */
 display: inline-flex;
 }
 .hero-footer .bottom-nav {
 position: absolute;
 top: 5vw;
 bottom: auto;
 margin: 0 auto;
 left: 10vw;
 transform: unset;
 /* shrink-wrap to its contents rather than full width */
 display: inline-flex;
 }
 /* keep the hamburger / “to-top” button at bottom-right */
 .top-controls {
 bottom: 1rem;
 /* same as desktop */
 top: auto;
 /* undo any earlier “top: 0” */
 }
}
/* mobile: stack below content (LTR) */
 @media screen and (max-width: 600px) {
 #ad-sidebar {
 float: none;
 width: 100%;
 margin: 20px 0;
 }
 .main-content {
 margin-right: 0;
 }
 h1 {
 font-size: 24px;
 }
 .hero-header {
 /* ensure we still have enough top padding for the nav */
 padding-top: 3.5rem;
 }
 
 /* RTL mobile tweaks: mirror the above */
 [dir="rtl"] #ad-sidebar {
 /* same: sidebar full‑width under content */
 float: none;
 width: 100%;
 margin: 20px 0;
 }
 [dir="rtl"] .main-content {
 /* since we nulled both margins above, nothing more needed */
 margin-left: 0;
 margin-right: 0;
 }
}
/* print: hide UI elements and reset colors */
 @media print {
 body, .container {
 background: #fff;
 color: #000;
 }
 .badge, .controls, button {
 display: none !important;
 }
 /* —————————————————————————————— */
 /* Make sure print honors RTL direction */
 [dir="rtl"] {
 direction: rtl;
 /* embed unicode for proper bidirectional rendering */
 unicode-bidi: embed;
 }
}
 [dir="rtl"] {
 direction: rtl;
 text-align:right;
}
 [dir="rtl"] .main-content {
 margin-left: 0;
 /* undo the right‑margin for LTR */
 /*margin-right: 335px;
 /* sidebar on the left now */
}
 [dir="rtl"] .loc-right {
 	float: left;
}

 [dir="rtl"] #ad-sidebar {
 float:left;
 /* sidebar moves to left */
 margin-left: 0;
 margin-right: 20px;
}
/* This must stay at the end as it moves ads at the end */
/* force the sidebar full-width and below */
/* 1) Turn your container into a flex parent */
 .container {
 display: flex;
 flex-direction: row;
 /* side-by-side on desktop */
 align-items: flex-start;
 gap: 20px;
}
/* 2) Force the main column to come first */
 .main-content {
 order: 1;
 /* render main content before the sidebar */
 flex: 1;
 /* take up remaining space */
 margin-right: 0;
 /* you can drop the old right-margin */
}
/* 3) Force the sidebar to come second */
 #ad-sidebar {
 order: 2;
 flex: 0 0 320px;
 /* fix it at 320px wide (or whatever) */
 margin: 0;
 /* remove float and old margins */
 position: relative;
 /* so any absolutely-positioned children still work */
}
/* 4) Mobile: stack everything vertically */
 @media (max-width: 600px) {
 .container {
 flex-direction: column;
 }
 #ad-sidebar {
 width: 100%;
 flex: none;
 margin: 20px 0;
 }
}

/* colorized by category */

.main-content.unk .bordered {border-right:10px solid black;filter: sepia(100%);}
.main-content.pub .bordered {border-right:10px solid blue;background-color:white;}
.main-content.no7 .bordered {border-right:10px solid pink;background-color:white;}
.main-content.pmr .bordered {border-right:10px solid green;background-color:white;}
.main-content.cdc .bordered {border-right:10px solid aqua;background-color:white;}
.main-content.moe .bordered {border-right:10px solid khaki;background-color:white;}
.main-content.peo .bordered {border-right:10px solid moccasin;background-color:white;}
.main-content.ill .bordered {border-left: 10px solid red;}
.main-content.int .bordered {border-left:10px solid gold;}
.main-content.boa .bordered {border-left:10px solid khaki;}
.main-content.closed .bordered {border-left: 10px solid black;filter: grayscale(1);}

/* END of AD TO THE END SECTION */