{"id":15037,"date":"2021-07-15T09:42:07","date_gmt":"2021-07-15T09:42:07","guid":{"rendered":"https:\/\/ativo.vamtam.com\/?page_id=15037"},"modified":"2026-08-20T12:18:22","modified_gmt":"2026-08-20T12:18:22","slug":"tamraght-surf-house-2","status":"publish","type":"page","link":"https:\/\/tamraghtsurfhouse.com\/es\/","title":{"rendered":"Hogar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15037\" class=\"elementor elementor-15037\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9e4163e e-con-full e-flex e-con e-parent\" data-id=\"9e4163e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a93bbb0 elementor-widget elementor-widget-html\" data-id=\"a93bbb0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link\r\n    href=\"https:\/\/fonts.googleapis.com\/css?family=Poppins:400,500,600,700,800\"\r\n    rel=\"stylesheet\"\r\n>\r\n\r\n<style>\r\n\r\n\r\n\/* =========================\r\n   COMPLETE HERO + OFFER CARDS\r\n========================= *\/\r\n\r\n.surf-stay-offers {\r\n    --white: #ffffff;\r\n    --dark: #000000;\r\n    --orange: #090909;\r\n    --orange-hover: #090909;\r\n\r\n    width: 100%;\r\n    margin: -20;\r\n    padding: 0;\r\n    overflow: hidden;\r\n    background: var(--dark);\r\n    color: var(--white);\r\n    font-family: \"Poppins\", sans-serif;\r\n}\r\n\r\n.surf-stay-offers,\r\n.surf-stay-offers * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* =========================\r\n   HERO\r\n========================= *\/\r\n\r\n.surf-stay-hero {\r\n    position: relative;\r\n    min-height: 650px;\r\n    display: flex;\r\n    align-items: flex-start;\r\n    padding: 80px 6% 230px;\r\n\r\n    background-image:\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(0, 0, 0, 0.76) 0%,\r\n            rgba(0, 0, 0, 0.48) 38%,\r\n            rgba(0, 0, 0, 0.05) 75%\r\n        ),\r\n        linear-gradient(\r\n            0deg,\r\n            rgba(0, 0, 0, 1) 0%,\r\n            rgba(0, 0, 0, 0.75) 10%,\r\n            rgba(0, 0, 0, 0) 50%\r\n        ),\r\n        url(\"https:\/\/cdn.shopify.com\/s\/files\/1\/0015\/9229\/5523\/files\/Blog_Surfer_Girl-Sunset4_2x_caa88b3e-4a21-4ef2-b95c-b3878805a147.jpg?v=1620409032\");\r\n\r\n    background-position: center;\r\n    background-size: cover;\r\n    background-repeat: no-repeat;\r\n}\r\n\r\n.surf-stay-hero-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    max-width: 540px;\r\n    color: #FCF7F7;\r\n}\r\n\r\n.surf-stay-hero-title {\r\n    max-width: 500px;\r\n    margin: 0 0 24px;\r\n    color: #FCF7F7;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(45px, 5.2vw, 76px);\r\n    font-weight: 500;\r\n    line-height: 1.05;\r\n    letter-spacing: -2px;\r\n}\r\n\r\n.surf-stay-hero-description {\r\n    max-width: 490px;\r\n    margin: 0 0 30px;\r\n    color: #ffffff;\r\n    font-size: 17px;\r\n    font-weight: 500;\r\n    line-height: 1.7;\r\n}\r\n.surf-stay-hero-description1 {\r\n    max-width: 6000px;\r\n    margin: 0 0 30px;\r\n    color: #ffffff;\r\n    font-size: 17px;\r\n    font-weight: 500;\r\n    line-height: 1.7;\r\n}\r\n\r\n.surf-stay-hero-button {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 48px;\r\n    padding: 13px 28px;\r\n    border: 0;\r\n    border-radius: 999px;\r\n    background: #ffffff;\r\n    color: #111111 !important;\r\n    font-family: inherit;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    line-height: 1;\r\n    text-decoration: none !important;\r\n    transition:\r\n        background-color 0.2s ease,\r\n        transform 0.2s ease;\r\n}\r\n\r\n.surf-stay-hero-button:hover {\r\n    background: #eeeeee;\r\n    color: #111111 !important;\r\n    transform: translateY(-2px);\r\n}\r\n\r\n\/* =========================\r\n   CARDS AREA\r\n========================= *\/\r\n\r\n.surf-stay-cards-area {\r\n    position: relative;\r\n    z-index: 5;\r\n    margin-top: -110px;\r\n    padding: 0 20px 35px;\r\n}\r\n\r\n.surf-stay-cards-row {\r\n    display: flex;\r\n    gap: 24px;\r\n    width: 100%;\r\n    overflow-x: auto;\r\n    padding: 0 18px 18px;\r\n    scroll-snap-type: x mandatory;\r\n    scroll-behavior: smooth;\r\n    scrollbar-width: thin;\r\n    scrollbar-color: #777777 #171717;\r\n}\r\n\r\n.surf-stay-cards-row::-webkit-scrollbar {\r\n    height: 8px;\r\n}\r\n\r\n.surf-stay-cards-row::-webkit-scrollbar-track {\r\n    background: #171717;\r\n    border-radius: 10px;\r\n}\r\n\r\n.surf-stay-cards-row::-webkit-scrollbar-thumb {\r\n    background: #777777;\r\n    border-radius: 10px;\r\n}\r\n\r\n\/* =========================\r\n   INDIVIDUAL CARD\r\n========================= *\/\r\n\r\n.surf-stay-card {\r\n    position: relative;\r\n     flex: 0 0 338px;\r\n    height: 440px;\r\n    overflow: hidden;\r\n    border-radius: 28px;\r\n    background: #090909;\r\n    scroll-snap-align: start;\r\n    box-shadow: 0 12px 30px rgba(0,0,0,.25);\r\n}\r\n\r\n.surf-stay-card::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n            rgba(0, 0, 0, 0.15) 0%,\r\n            rgba(0, 0, 0, 0) 45%,\r\n            rgba(0, 0, 0, 0.2) 100%\r\n        );\r\n    pointer-events: none;\r\n}\r\n\r\n.surf-stay-card-image {\r\n    width: 100%;\r\n    height: 520px;\r\n    \r\n}\r\n\r\n.surf-stay-card:hover .surf-stay-card-image {\r\n    transform: scale(1.035);\r\n}\r\n\r\n\/* =========================\r\n   EXPANDING CARD PANEL\r\n========================= *\/\r\n\r\n.surf-stay-card-panel {\r\n    position: absolute;\r\n    top: 14px;\r\n    left: 14px;\r\n    right: 14px;\r\n    z-index: 4;\r\n      max-height: 70px;\r\n    overflow: hidden;\r\n    border-radius: 30px;\r\n\r\n    background:rgba(55,58,63,.78);\r\n    backdrop-filter:blur(18px);\r\n    -webkit-backdrop-filter:blur(18px);\r\n\r\n    box-shadow:\r\n        0 12px 30px rgba(0,0,0,.35);\r\n\r\n    transition:\r\n        max-height 0.42s ease,\r\n        border-radius 0.3s ease;\r\n}\r\n\r\n.surf-stay-card.is-open .surf-stay-card-panel {\r\n       max-height: 400px;\r\n    border-radius: 34px;\r\n}\r\n\r\n\/* Card title button *\/\r\n\r\n.surf-stay-card-toggle {\r\n    width: 100%;\r\n    min-height: 70px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 22px;\r\n    padding:18px 22px;\r\n    border: 0;\r\n    outline: 0;\r\n    background: rgba(55,58,63,.78)!important ;\r\n    \r\n    backdrop-filter: blur(18px);\r\n    -webkit-backdrop-filter:blur(18px);\r\n\r\n    font-family: inherit;\r\n    text-align: left;\r\n    cursor: pointer;\r\n}\r\n\r\n.surf-stay-card-title {\r\n    max-width: 330px;\r\n    color: #FFFFFF;\r\n    font-size: 18px;\r\n    font-weight: 600;\r\n    line-height: 1.4;\r\n    letter-spacing: -0.7px;\r\n    \r\n}\r\n\r\n\/* Arrow *\/\r\n\r\n.surf-stay-card-arrow {\r\n    position: relative;\r\n    flex: 0 0 30px;\r\n    width: 30px;\r\n    height: 30px;\r\n}\r\n\r\n.surf-stay-card-arrow::before,\r\n.surf-stay-card-arrow::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 13px;\r\n    width: 19px;\r\n    height: 3px;\r\n    border-radius: 3px;\r\n    background: #ffffff;\r\n    transition: transform 0.28s ease;\r\n}\r\n\r\n.surf-stay-card-arrow::before {\r\n    left: -1px;\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.surf-stay-card-arrow::after {\r\n    right: -1px;\r\n    transform: rotate(-45deg);\r\n}\r\n\r\n.surf-stay-card.is-open .surf-stay-card-arrow::before {\r\n    transform: rotate(-45deg);\r\n}\r\n\r\n.surf-stay-card.is-open .surf-stay-card-arrow::after {\r\n    transform: rotate(45deg);\r\n}\r\n\r\n\/* Expanded content *\/\r\n\r\n.surf-stay-card-content {\r\n    padding: 0 30px 32px;\r\n    color: #ffffff;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateY(-10px);\r\n\r\n    transition:\r\n        opacity 0.25s ease,\r\n        transform 0.3s ease,\r\n        visibility 0.25s ease;\r\n}\r\n\r\n.surf-stay-card.is-open .surf-stay-card-content {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0);\r\n}\r\n\r\n.surf-stay-card-content p {\r\n    margin: 0 0 25px;\r\n    margin-top: 20px;\r\n    color: #ffffff;\r\n    font-size:15px;\r\n    font-weight: 500;\r\n    line-height:1.6;\r\n}\r\n\r\n.surf-stay-card-details {\r\n    margin: 0 0 24px;\r\n    padding: 0;\r\n    list-style: none;\r\n}\r\n.surf-stay-hero-description1{\r\n    font-size: 50px;\r\n    line-height:1.6;\r\n}\r\n\r\n.surf-stay-card-details li {\r\n    position: relative;\r\n    margin-bottom: 10px;\r\n    padding-left: 23px;\r\n    color: #ffffff;\r\n    font-size: 15px;\r\n    line-height: 1.5;\r\n}\r\n\r\n.surf-stay-card-details li::before {\r\n    content: \"\u2713\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    color: #ffffff;\r\n    font-weight: 700;\r\n}\r\n\r\n.surf-stay-card-link {\r\n    display: inline-block;\r\n    color: #ffffff !important;\r\n    font-size: 17px;\r\n    font-weight: 600;\r\n    text-decoration: underline !important;\r\n    text-underline-offset: 5px;\r\n    transition: opacity 0.2s ease;\r\n}\r\n\r\n.surf-stay-card-link:hover {\r\n    color: #ffffff !important;\r\n    opacity: 0.75;\r\n}\r\n\r\n\/* =========================\r\n   DESKTOP ONLY HERO BUTTON\r\n========================= *\/\r\n\r\n@media (min-width: 1101px) {\r\n\r\n    .surf-stay-hero-button {\r\n        display: inline-flex !important;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================\r\n   TABLET\r\n========================= *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n    \/* Keep \"View our offers\" only on desktop *\/\r\n    .surf-stay-hero-button {\r\n        display: none !important;\r\n    }\r\n    .surf-stay-hero {\r\n        min-height: 600px;\r\n        padding-bottom: 210px;\r\n    }\r\n\r\n    .surf-stay-cards-area {\r\n        margin-top: -190px;\r\n    }\r\n\r\n    .surf-stay-card {\r\n        flex-basis: 390px;\r\n        height: 570px;\r\n    }\r\n\r\n    .surf-stay-card-title {\r\n        font-size: 22px;\r\n    }\r\n\r\n    .surf-stay-card-content p {\r\n        font-size: 17px;\r\n    }\r\n}\r\n\r\n\/* =========================\r\n   MOBILE\r\n========================= *\/\r\n\r\n@media (max-width: 767px) {\r\n    .surf-stay-hero {\r\n        min-height: 640px;\r\n        padding: 55px 22px 200px;\r\n        background-position: 63% center;\r\n    }\r\n\r\n    .surf-stay-hero-title {\r\n        max-width: 330px;\r\n        font-size: 20px;\r\n        letter-spacing: -1px;\r\n    }\r\n    .surf-stay-hero-description1 {\r\n    max-width: 590px;\r\n    margin: 0 0 30px;\r\n    color: #ffffff;\r\n    font-size: 30px;\r\n    font-weight: 800;\r\n    line-height: 1,0;\r\n}\r\n\r\n    .surf-stay-hero-description {\r\n        max-width: 340px;\r\n        font-size: 15px;\r\n        line-height: 1.65;\r\n    }\r\n\r\n    .surf-stay-cards-area {\r\n        margin-top: -170px;\r\n        padding: 0 0 28px;\r\n    }\r\n\r\n    .surf-stay-cards-row {\r\n        gap: 14px;\r\n        padding: 0 14px 15px;\r\n    }\r\n\r\n    .surf-stay-card {\r\n        flex: 0 0 84vw;\r\n        height: 520px;\r\n        border-radius: 27px;\r\n    }\r\n\r\n    .surf-stay-card-panel {\r\n        top: 8px;\r\n        left: 8px;\r\n        right: 8px;\r\n        max-height: 70px;\r\n        border-radius: 27px;\r\n    }\r\n\r\n    .surf-stay-card.is-open .surf-stay-card-panel {\r\n        max-height: 415px;\r\n        border-radius: 27px;\r\n    }\r\n\r\n    .surf-stay-card-toggle {\r\n        min-height:70px;\r\n        padding: 21px 22px;\r\n    }\r\n\r\n    .surf-stay-card-title {\r\n        max-width: 235px;\r\n        font-size: 19px;\r\n    }\r\n\r\n    .surf-stay-card-arrow {\r\n        transform: scale(0.78);\r\n    }\r\n\r\n    .surf-stay-card-content {\r\n        padding: 0 22px 25px;\r\n    }\r\n\r\n    .surf-stay-card-content p {\r\n        margin-bottom: 18px;\r\n        font-size: 15px;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .surf-stay-card-details li {\r\n        margin-bottom: 7px;\r\n        font-size: 14px;\r\n    }\r\n\r\n    .surf-stay-card-link {\r\n        font-size: 15px;\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n\/* =========================================================\r\n   BASE\r\n========================================================= *\/\r\n\r\n#tsh-room-search,\r\n#tsh-room-search * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n#tsh-room-search {\r\n    --bg: #f4ebe3;\r\n    --navy: #07386f;\r\n    --orange: #D45700;\r\n    --white: #ffffff;\r\n    --muted: #8791a0;\r\n    --line: rgba(7,56,111,.14);\r\n    --soft: rgba(255,255,255,.48);\r\n    --success: #16865f;\r\n\r\n    width: 100%;\r\n    padding: 52px 180px;\r\n\r\n    background: var(--white);\r\n    color: var(--navy);\r\n\r\n    font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n#tsh-room-search .tsh-search-inner {\r\n    width: 100%;\r\n    max-width: 1450px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-search-heading {\r\n    max-width: 760px;\r\n    margin: 0 auto 30px;\r\n    text-align: center;\r\n}\r\n\r\n#tsh-room-search .tsh-search-kicker {\r\n    margin-bottom: 8px;\r\n\r\n    color: var(--orange);\r\n\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: 1.4px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n#tsh-room-search h2 {\r\n    margin: 0 0 10px;\r\n\r\n    color: var(--navy) !important;\r\n\r\n    font-size: clamp(30px, 4vw, 48px);\r\n    font-weight: 900;\r\n    line-height: 1;\r\n    letter-spacing: -1.6px;\r\n}\r\n\r\n#tsh-room-search .tsh-search-intro {\r\n    margin: 0;\r\n\r\n    color: var(--muted);\r\n\r\n    font-size: 14px;\r\n    line-height: 1.6;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH BAR\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-search-box {\r\n    position: relative;\r\n\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr 220px 170px;\r\n    gap: 0;\r\n\r\n    overflow: hidden;\r\n\r\n    border: 1px solid var(--line);\r\n    border-radius: 16px;\r\n\r\n    background: var(--white);\r\n\r\n    box-shadow: 0 14px 38px rgba(7,56,111,.08);\r\n}\r\n\r\n#tsh-room-search .tsh-search-field {\r\n    min-width: 0;\r\n    min-height: 86px;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n\r\n    padding: 15px 20px;\r\n\r\n    border-right: 1px solid var(--line);\r\n}\r\n\r\n#tsh-room-search .tsh-search-label {\r\n    display: block;\r\n    margin-bottom: 7px;\r\n\r\n    color: var(--muted);\r\n\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    letter-spacing: .8px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n#tsh-room-search .tsh-date-shell {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    background: transparent;\r\n}\r\n\r\n#tsh-room-search .tsh-date-placeholder {\r\n    position: absolute;\r\n\r\n    left: 0;\r\n    right: 34px;\r\n    top: 50%;\r\n\r\n    transform: translateY(-50%);\r\n\r\n    color: var(--navy);\r\n\r\n    font-size: 15px;\r\n    font-weight: 800;\r\n\r\n    pointer-events: none;\r\n\r\n    z-index: 2;\r\n}\r\n\r\n#tsh-room-search .tsh-date-placeholder.is-hidden {\r\n    display: none;\r\n}\r\n\r\n#tsh-room-search input[type=\"date\"] {\r\n    position: relative;\r\n\r\n    display: block;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n\r\n    padding: 0;\r\n\r\n    border: 0 !important;\r\n    outline: 0 !important;\r\n\r\n    background: transparent !important;\r\n\r\n    color: var(--navy) !important;\r\n\r\n    font: inherit;\r\n    font-size: 15px;\r\n    font-weight: 800;\r\n\r\n    box-shadow: none !important;\r\n\r\n    cursor: pointer;\r\n\r\n    z-index: 3;\r\n}\r\n\r\n\/*\r\n * Hide the browser's built-in mm\/dd\/yyyy text while empty.\r\n * The calendar icon remains visible and usable.\r\n *\/\r\n#tsh-room-search input[type=\"date\"]:not(.has-value) {\r\n    color: transparent !important;\r\n}\r\n\r\n#tsh-room-search input[type=\"date\"]:not(.has-value)::-webkit-datetime-edit,\r\n#tsh-room-search input[type=\"date\"]:not(.has-value)::-webkit-datetime-edit-fields-wrapper,\r\n#tsh-room-search input[type=\"date\"]:not(.has-value)::-webkit-datetime-edit-text,\r\n#tsh-room-search input[type=\"date\"]:not(.has-value)::-webkit-datetime-edit-month-field,\r\n#tsh-room-search input[type=\"date\"]:not(.has-value)::-webkit-datetime-edit-day-field,\r\n#tsh-room-search input[type=\"date\"]:not(.has-value)::-webkit-datetime-edit-year-field {\r\n    color: transparent !important;\r\n}\r\n\r\n#tsh-room-search input[type=\"date\"]::-webkit-calendar-picker-indicator {\r\n    cursor: pointer;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GUEST SELECT\r\n   Native select = reliable on normal site + mobile browsers\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-guest-select-wrap {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n}\r\n\r\n#tsh-room-search .tsh-guest-select {\r\n    width: 100%;\r\n    height: 40px;\r\n\r\n    display: block;\r\n\r\n    padding: 0 6px 0 0 !important;\r\n\r\n    border: 0 !important;\r\n    outline: 0 !important;\r\n\r\n    background: transparent !important;\r\n    color: var(--navy) !important;\r\n\r\n    font-family: inherit;\r\n    font-size: 15px;\r\n    font-weight: 900;\r\n\r\n    box-shadow: none !important;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n#tsh-room-search .tsh-guest-select:focus {\r\n    outline: 2px solid rgba(212,87,0,.25) !important;\r\n    outline-offset: 4px;\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH BUTTON\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-search-action {\r\n    min-height: 86px;\r\n\r\n    display: flex;\r\n    align-items: stretch;\r\n}\r\n\r\n#tsh-room-search .tsh-search-button {\r\n    width: 100%;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 8px;\r\n\r\n    padding: 0 20px !important;\r\n\r\n    border: 0 !important;\r\n    border-radius: 0 !important;\r\n\r\n    background: var(--orange) !important;\r\n    color: #fff !important;\r\n\r\n    font-family: inherit;\r\n    font-size: 13px;\r\n    font-weight: 900;\r\n\r\n    text-transform: uppercase;\r\n    letter-spacing: .4px;\r\n\r\n    box-shadow: none !important;\r\n\r\n    cursor: pointer;\r\n\r\n    transition: opacity .2s ease;\r\n}\r\n\r\n#tsh-room-search .tsh-search-button:hover,\r\n#tsh-room-search .tsh-search-button:focus {\r\n    opacity: .9;\r\n    color: #fff !important;\r\n}\r\n\r\n#tsh-room-search .tsh-search-button svg {\r\n    width: 18px;\r\n    height: 18px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2.2;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VALIDATION MESSAGE\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-search-message {\r\n    display: none;\r\n\r\n    margin-top: 12px;\r\n    padding: 12px 14px;\r\n\r\n    border: 1px solid rgba(212,87,0,.20);\r\n    border-radius: 9px;\r\n\r\n    background: rgba(212,87,0,.07);\r\n    color: var(--orange);\r\n\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n}\r\n\r\n#tsh-room-search .tsh-search-message.is-visible {\r\n    display: block;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESULTS\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-search-results {\r\n    display: none;\r\n\r\n    margin-top: 34px;\r\n}\r\n\r\n#tsh-room-search .tsh-search-results.is-visible {\r\n    display: block;\r\n}\r\n\r\n#tsh-room-search .tsh-results-top {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n\r\n    gap: 20px;\r\n\r\n    margin-bottom: 17px;\r\n}\r\n\r\n#tsh-room-search .tsh-results-title {\r\n    margin: 0 0 5px;\r\n\r\n    color: var(--navy);\r\n\r\n    font-size: 24px;\r\n    font-weight: 900;\r\n}\r\n\r\n#tsh-room-search .tsh-results-summary {\r\n    margin: 0;\r\n\r\n    color: var(--muted);\r\n\r\n    font-size: 12px;\r\n    line-height: 1.5;\r\n}\r\n\r\n#tsh-room-search .tsh-results-count {\r\n    flex-shrink: 0;\r\n\r\n    padding: 8px 12px;\r\n\r\n    border-radius: 999px;\r\n\r\n    background: var(--navy);\r\n    color: #fff;\r\n\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLE\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-table-wrap {\r\n    width: 100%;\r\n\r\n    overflow-x: auto;\r\n\r\n    border: 1px solid var(--line);\r\n    border-radius: 14px;\r\n\r\n    background: rgba(255,255,255,.38);\r\n}\r\n\r\n#tsh-room-search .tsh-results-table {\r\n    width: 100%;\r\n    min-width: 1040px;\r\n\r\n    border-collapse: collapse;\r\n\r\n    color: var(--navy);\r\n}\r\n\r\n#tsh-room-search .tsh-results-table thead {\r\n    background: var(--navy);\r\n    color: #fff;\r\n}\r\n\r\n#tsh-room-search .tsh-results-table th {\r\n    padding: 15px 14px;\r\n\r\n    color: #fff !important;\r\n\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n\r\n    letter-spacing: .65px;\r\n    text-align: left;\r\n    text-transform: uppercase;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n#tsh-room-search .tsh-results-table td {\r\n    padding: 17px 14px;\r\n\r\n    border-bottom: 1px solid var(--line);\r\n\r\n    background: rgba(255,255,255,.46);\r\n\r\n    font-size: 12px;\r\n    vertical-align: middle;\r\n}\r\n\r\n#tsh-room-search .tsh-results-table tbody tr:last-child td {\r\n    border-bottom: 0;\r\n}\r\n\r\n#tsh-room-search .tsh-results-table tbody tr:hover td {\r\n    background: rgba(255,255,255,.72);\r\n}\r\n\r\n#tsh-room-search .tsh-results-table tbody tr.is-unavailable td {\r\n    opacity: .52;\r\n}\r\n\r\n#tsh-room-search .tsh-room-name {\r\n    display: block;\r\n\r\n    margin-bottom: 3px;\r\n\r\n    color: var(--navy);\r\n\r\n    font-size: 14px;\r\n    font-weight: 900;\r\n}\r\n\r\n#tsh-room-search .tsh-room-note {\r\n    color: var(--muted);\r\n\r\n    font-size: 10px;\r\n    line-height: 1.35;\r\n}\r\n\r\n#tsh-room-search .tsh-allocation-list,\r\n#tsh-room-search .tsh-breakdown-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n}\r\n\r\n#tsh-room-search .tsh-allocation-item {\r\n    color: var(--navy);\r\n\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n}\r\n\r\n#tsh-room-search .tsh-breakdown-item {\r\n    color: var(--muted);\r\n\r\n    font-size: 10px;\r\n    line-height: 1.35;\r\n}\r\n\r\n#tsh-room-search .tsh-best-value {\r\n    display: inline-flex;\r\n    align-items: center;\r\n\r\n    margin-top: 6px;\r\n    padding: 4px 7px;\r\n\r\n    border-radius: 999px;\r\n\r\n    background: rgba(212,87,0,.10);\r\n    color: var(--orange);\r\n\r\n    font-size: 9px;\r\n    font-weight: 900;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n#tsh-room-search .tsh-money {\r\n    color: var(--orange);\r\n\r\n    font-size: 15px;\r\n    font-weight: 900;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n#tsh-room-search .tsh-total-money {\r\n    color: var(--navy);\r\n\r\n    font-size: 17px;\r\n    font-weight: 900;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STATUS BADGES\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-status {\r\n    display: inline-flex;\r\n    align-items: center;\r\n\r\n    gap: 6px;\r\n\r\n    padding: 7px 9px;\r\n\r\n    border-radius: 999px;\r\n\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n\r\n    white-space: nowrap;\r\n}\r\n\r\n#tsh-room-search .tsh-status.available {\r\n    background: rgba(22,134,95,.10);\r\n    color: var(--success);\r\n}\r\n\r\n#tsh-room-search .tsh-status.unavailable {\r\n    background: rgba(7,56,111,.08);\r\n    color: var(--muted);\r\n}\r\n\r\n#tsh-room-search .tsh-status-dot {\r\n    width: 6px;\r\n    height: 6px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: currentColor;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SELECT BUTTON\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-select-room {\r\n    min-width: 86px;\r\n    min-height: 38px;\r\n\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    padding: 0 12px !important;\r\n\r\n    border: 0 !important;\r\n    border-radius: 999px !important;\r\n\r\n    background: var(--orange) !important;\r\n    color: #fff !important;\r\n\r\n    font-family: inherit;\r\n    font-size: 10px;\r\n    font-weight: 900;\r\n\r\n    text-transform: uppercase;\r\n\r\n    box-shadow: none !important;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n#tsh-room-search .tsh-select-room:hover,\r\n#tsh-room-search .tsh-select-room:focus {\r\n    opacity: .9;\r\n    color: #fff !important;\r\n}\r\n\r\n#tsh-room-search .tsh-select-room:disabled {\r\n    background: #d7d9dc !important;\r\n    color: #8f969f !important;\r\n\r\n    cursor: not-allowed;\r\n    opacity: 1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PRICING NOTE\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-pricing-note {\r\n    margin-top: 14px;\r\n\r\n    padding: 14px 16px;\r\n\r\n    border-left: 3px solid var(--orange);\r\n\r\n    background: rgba(255,255,255,.34);\r\n\r\n    color: var(--navy);\r\n\r\n    font-size: 11px;\r\n    line-height: 1.55;\r\n}\r\n\r\n#tsh-room-search .tsh-pricing-note strong {\r\n    color: var(--orange);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 950px) {\r\n\r\n    #tsh-room-search .tsh-search-box {\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-field:nth-child(2) {\r\n        border-right: 0;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-field:nth-child(3) {\r\n        border-top: 1px solid var(--line);\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-action {\r\n        border-top: 1px solid var(--line);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n   Results become full-width cards.\r\n   No horizontal scrolling is needed.\r\n========================================================= *\/\r\n\r\n@media (max-width: 620px) {\r\n\r\n    #tsh-room-search {\r\n        padding: 36px 10px;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-heading {\r\n        margin-bottom: 22px;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-box {\r\n        grid-template-columns: 1fr;\r\n        border-radius: 12px;\r\n    }\r\n\r\n    \/* =====================================================\r\n       CENTER ALL MOBILE SEARCH CONTENT\r\n    ===================================================== *\/\r\n\r\n    #tsh-room-search .tsh-search-field {\r\n        align-items: center;\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-label {\r\n        width: 100%;\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-date-shell {\r\n        justify-content: center;\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-date-placeholder {\r\n        left: 34px;\r\n        right: 34px;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search input[type=\"date\"] {\r\n        width: auto;\r\n        max-width: 100%;\r\n        text-align: center;\r\n        text-align-last: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-guest-select-wrap {\r\n        display: flex;\r\n        justify-content: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-guest-select {\r\n        width: auto;\r\n        min-width: 150px;\r\n        max-width: 100%;\r\n        text-align: center;\r\n        text-align-last: center;\r\n        padding-left: 24px !important;\r\n        padding-right: 24px !important;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-action {\r\n        justify-content: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-button {\r\n        text-align: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-message {\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-top {\r\n        align-items: center;\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-title,\r\n    #tsh-room-search .tsh-results-summary,\r\n    #tsh-room-search .tsh-results-count {\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-field {\r\n        min-height: 76px;\r\n\r\n        border-right: 0;\r\n        border-bottom: 1px solid var(--line);\r\n\r\n        padding: 13px 16px;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-field:nth-child(2),\r\n    #tsh-room-search .tsh-search-field:nth-child(3) {\r\n        border-top: 0;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-action {\r\n        min-height: 58px;\r\n        border-top: 0;\r\n    }\r\n\r\n    #tsh-room-search .tsh-search-button {\r\n        min-height: 58px;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-top {\r\n        align-items: flex-start;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-title {\r\n        font-size: 21px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       REMOVE DESKTOP TABLE \/ HORIZONTAL SCROLL\r\n    ===================================================== *\/\r\n\r\n    #tsh-room-search .tsh-table-wrap {\r\n        width: 100%;\r\n\r\n        overflow: visible;\r\n\r\n        border: 0;\r\n        border-radius: 0;\r\n\r\n        background: transparent;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-table {\r\n        width: 100%;\r\n        min-width: 0;\r\n\r\n        display: block;\r\n\r\n        border-collapse: separate;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-table thead {\r\n        display: none;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-table tbody {\r\n        width: 100%;\r\n\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n        gap: 14px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       EACH RESULT = ONE CARD\r\n    ===================================================== *\/\r\n\r\n    #tsh-room-search .tsh-results-table tbody tr {\r\n        width: 100%;\r\n\r\n        display: block;\r\n\r\n        overflow: hidden;\r\n\r\n        border: 1px solid var(--line);\r\n        border-radius: 14px;\r\n\r\n        background: #ffffff;\r\n\r\n        box-shadow:\r\n            0 8px 24px\r\n            rgba(7,56,111,.06);\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-table tbody tr:hover td {\r\n        background: transparent;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-table td {\r\n        width: 100%;\r\n\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n\r\n        align-items: center;\r\n        justify-items: center;\r\n\r\n        gap: 6px;\r\n\r\n        padding: 12px 14px;\r\n\r\n        border: 0;\r\n        border-bottom: 1px solid var(--line);\r\n\r\n        background: transparent;\r\n\r\n        font-size: 12px;\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-table td::before {\r\n        content:\r\n            attr(data-label);\r\n\r\n        width: 100%;\r\n\r\n        color: var(--muted);\r\n\r\n        font-size: 9px;\r\n        font-weight: 900;\r\n        letter-spacing: .55px;\r\n\r\n        line-height: 1.35;\r\n\r\n        text-align: center;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    #tsh-room-search .tsh-allocation-list,\r\n    #tsh-room-search .tsh-breakdown-list {\r\n        align-items: center;\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-room-note,\r\n    #tsh-room-search .tsh-allocation-item,\r\n    #tsh-room-search .tsh-breakdown-item {\r\n        text-align: center;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       ROOM HEADER\r\n    ===================================================== *\/\r\n\r\n    #tsh-room-search .tsh-results-table\r\n    td.tsh-result-room {\r\n        display: block;\r\n\r\n        padding: 17px 14px 15px;\r\n\r\n        background:\r\n            rgba(244,235,227,.55);\r\n\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-table\r\n    td.tsh-result-room::before {\r\n        display: block;\r\n\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    #tsh-room-search .tsh-room-name {\r\n        display: block;\r\n\r\n        margin-bottom: 6px;\r\n\r\n        font-size: 16px;\r\n        line-height: 1.3;\r\n    }\r\n\r\n    #tsh-room-search .tsh-room-note {\r\n        display: block;\r\n\r\n        max-width: none;\r\n\r\n        font-size: 10px;\r\n        line-height: 1.45;\r\n    }\r\n\r\n    #tsh-room-search .tsh-best-value {\r\n        margin-top: 9px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       ALLOCATION \/ BREAKDOWN\r\n    ===================================================== *\/\r\n\r\n    #tsh-room-search .tsh-allocation-list,\r\n    #tsh-room-search .tsh-breakdown-list {\r\n        min-width: 0;\r\n\r\n        gap: 5px;\r\n    }\r\n\r\n    #tsh-room-search .tsh-allocation-item {\r\n        font-size: 11px;\r\n        line-height: 1.45;\r\n    }\r\n\r\n    #tsh-room-search .tsh-breakdown-item {\r\n        overflow-wrap: anywhere;\r\n\r\n        font-size: 10px;\r\n        line-height: 1.5;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       TOTAL\r\n    ===================================================== *\/\r\n\r\n    #tsh-room-search .tsh-result-total {\r\n        align-items: center;\r\n\r\n        background:\r\n            rgba(212,87,0,.035) !important;\r\n    }\r\n\r\n    #tsh-room-search .tsh-total-money {\r\n        color: var(--orange);\r\n\r\n        font-size: 20px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       STATUS\r\n    ===================================================== *\/\r\n\r\n    #tsh-room-search .tsh-result-status {\r\n        align-items: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-status {\r\n        width: fit-content;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       SELECT BUTTON\r\n    ===================================================== *\/\r\n\r\n    #tsh-room-search .tsh-results-table\r\n    td.tsh-result-action {\r\n        display: block;\r\n\r\n        padding: 13px 14px;\r\n\r\n        border-bottom: 0;\r\n\r\n        background: transparent;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-table\r\n    td.tsh-result-action::before {\r\n        display: none;\r\n    }\r\n\r\n    #tsh-room-search .tsh-select-room {\r\n        width: 100%;\r\n        min-height: 48px;\r\n\r\n        border-radius: 8px !important;\r\n\r\n        font-size: 11px;\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       PRICING NOTE\r\n    ===================================================== *\/\r\n\r\n    #tsh-room-search .tsh-pricing-note {\r\n        margin-top: 18px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\/* =========================================================\r\n   HERO + ROOM SEARCH INTEGRATION\r\n========================================================= *\/\r\n\r\n\/*\r\n * The room-search ID now wraps the full hero + results + offer cards,\r\n * so remove the standalone search section's outer padding\/background.\r\n *\/\r\n#tsh-room-search {\r\n    width: 100% !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    background: #000000 !important;\r\n\r\n    color: #07386f;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO TWO-COLUMN LAYOUT\r\n========================================================= *\/\r\n\r\n#tsh-room-search .surf-stay-hero {\r\n    min-height: 690px;\r\n\r\n    display: block;\r\n\r\n    padding:\r\n        70px\r\n        6%\r\n        210px;\r\n}\r\n\r\n#tsh-room-search .surf-stay-hero-layout {\r\n    position: relative;\r\n    z-index: 3;\r\n\r\n    width: 100%;\r\n    max-width: 1450px;\r\n\r\n    margin: 0 auto;\r\n\r\n    display: grid;\r\n    grid-template-columns:\r\n        minmax(0, 1fr)\r\n        minmax(360px, 455px);\r\n\r\n    align-items: start;\r\n\r\n    gap: clamp(\r\n        40px,\r\n        6vw,\r\n        95px\r\n    );\r\n}\r\n\r\n#tsh-room-search .surf-stay-hero-content {\r\n    padding-top: 24px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH CARD ON RIGHT OF HERO\r\n========================================================= *\/\r\n\r\n#tsh-room-search .surf-hero-search-card {\r\n    width: 100%;\r\n    max-width: 455px;\r\n\r\n    justify-self: end;\r\n\r\n    overflow: hidden;\r\n\r\n    padding: 24px;\r\n\r\n    border: 1px solid rgba(255,255,255,.45);\r\n    border-radius: 24px;\r\n\r\n    background: rgba(255,255,255,.96);\r\n\r\n    box-shadow:\r\n        0 24px 70px\r\n        rgba(0,0,0,.28);\r\n\r\n    backdrop-filter: blur(14px);\r\n    -webkit-backdrop-filter: blur(14px);\r\n\r\n    color: #07386f;\r\n}\r\n\r\n#tsh-room-search .surf-hero-search-heading {\r\n    margin-bottom: 18px;\r\n\r\n    text-align: left;\r\n}\r\n\r\n#tsh-room-search .surf-hero-search-kicker {\r\n    margin-bottom: 5px;\r\n\r\n    color: #D45700;\r\n\r\n    font-size: 10px;\r\n    font-weight: 900;\r\n\r\n    letter-spacing: 1.1px;\r\n\r\n    text-transform: uppercase;\r\n}\r\n\r\n#tsh-room-search .surf-hero-search-title {\r\n    margin: 0 0 6px;\r\n\r\n    color: #07386f !important;\r\n\r\n    font-family: Arial, Helvetica, sans-serif;\r\n\r\n    font-size: 26px;\r\n    font-weight: 900;\r\n\r\n    line-height: 1.08;\r\n\r\n    letter-spacing: -.8px;\r\n}\r\n\r\n#tsh-room-search .surf-hero-search-copy {\r\n    margin: 0;\r\n\r\n    color: #8791a0;\r\n\r\n    font-size: 11px;\r\n    line-height: 1.5;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COMPACT SEARCH FORM INSIDE HERO\r\n========================================================= *\/\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-search-box {\r\n    display: grid !important;\r\n    grid-template-columns: 1fr !important;\r\n\r\n    overflow: hidden;\r\n\r\n    border-radius: 14px;\r\n\r\n    background: #ffffff;\r\n\r\n    box-shadow: none;\r\n}\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-search-field {\r\n    min-height: 70px;\r\n\r\n    padding: 11px 15px;\r\n\r\n    border-right: 0;\r\n    border-bottom: 1px solid rgba(7,56,111,.12);\r\n}\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-search-action {\r\n    min-height: 56px;\r\n\r\n    border: 0;\r\n}\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-search-button {\r\n    min-height: 56px;\r\n\r\n    border-radius: 0 !important;\r\n}\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-search-message {\r\n    margin: 12px 0 0;\r\n\r\n    text-align: center;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH RESULTS BELOW HERO\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-hero-results {\r\n    width: 100%;\r\n\r\n    margin: 0 !important;\r\n    padding:\r\n        38px\r\n        max(18px, 6%)\r\n        42px;\r\n\r\n    background: #ffffff;\r\n\r\n    color: #07386f;\r\n}\r\n\r\n#tsh-room-search\r\n.tsh-hero-results\r\n.tsh-results-top,\r\n#tsh-room-search\r\n.tsh-hero-results\r\n.tsh-table-wrap,\r\n#tsh-room-search\r\n.tsh-hero-results\r\n.tsh-pricing-note {\r\n    width: 100%;\r\n    max-width: 1450px;\r\n\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n}\r\n\r\n\/*\r\n * When results are visible, do not let the offer cards overlap them.\r\n *\/\r\n#tsh-room-search\r\n.tsh-hero-results.is-visible\r\n+\r\n.surf-stay-cards-area {\r\n    margin-top: 0 !important;\r\n    padding-top: 34px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n    #tsh-room-search .surf-stay-hero {\r\n        min-height: 0;\r\n\r\n        padding:\r\n            58px\r\n            5%\r\n            170px;\r\n    }\r\n\r\n    #tsh-room-search .surf-stay-hero-layout {\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 34px;\r\n    }\r\n\r\n    #tsh-room-search .surf-stay-hero-content {\r\n        max-width: 620px;\r\n\r\n        padding-top: 0;\r\n    }\r\n\r\n    #tsh-room-search .surf-hero-search-card {\r\n        max-width: 560px;\r\n\r\n        justify-self: start;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    #tsh-room-search {\r\n        padding: 0 !important;\r\n    }\r\n\r\n    #tsh-room-search .surf-stay-hero {\r\n        min-height: 0;\r\n\r\n        padding:\r\n            42px\r\n            14px\r\n            115px;\r\n\r\n        background-position:\r\n            63%\r\n            center;\r\n    }\r\n\r\n    #tsh-room-search .surf-stay-hero-layout {\r\n        display: grid;\r\n\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 24px;\r\n    }\r\n\r\n    #tsh-room-search .surf-stay-hero-content {\r\n        width: 100%;\r\n        max-width: none;\r\n\r\n        padding:\r\n            0\r\n            8px;\r\n    }\r\n\r\n    #tsh-room-search .surf-hero-search-card {\r\n        width: 100%;\r\n        max-width: none;\r\n\r\n        padding: 14px;\r\n\r\n        border-radius: 18px;\r\n    }\r\n\r\n    #tsh-room-search .surf-hero-search-heading {\r\n        margin-bottom: 13px;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n    #tsh-room-search .surf-hero-search-title {\r\n        font-size: 22px;\r\n    }\r\n\r\n    #tsh-room-search .surf-hero-search-copy {\r\n        font-size: 10px;\r\n    }\r\n\r\n    #tsh-room-search\r\n    .surf-hero-search-card\r\n    .tsh-search-field {\r\n        min-height: 70px;\r\n    }\r\n\r\n    #tsh-room-search\r\n    .surf-hero-search-card\r\n    .tsh-search-label,\r\n    #tsh-room-search\r\n    .surf-hero-search-card\r\n    .tsh-date-placeholder,\r\n    #tsh-room-search\r\n    .surf-hero-search-card\r\n    .tsh-guest-select {\r\n        text-align: center;\r\n        text-align-last: center;\r\n    }\r\n\r\n    #tsh-room-search .tsh-hero-results {\r\n        padding:\r\n            28px\r\n            10px\r\n            34px;\r\n    }\r\n\r\n    \/*\r\n     * The original offer cards still overlap the hero slightly,\r\n     * but less aggressively now that the search card lives there.\r\n     *\/\r\n    #tsh-room-search\r\n    .surf-stay-cards-area {\r\n        margin-top: -70px;\r\n    }\r\n\r\n    #tsh-room-search\r\n    .tsh-hero-results.is-visible\r\n    +\r\n    .surf-stay-cards-area {\r\n        margin-top: 0 !important;\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\/* =========================================================\r\n   DATE FIELD - CLICK ANYWHERE TO OPEN THE CALENDAR\r\n========================================================= *\/\r\n\r\n#tsh-room-search .tsh-date-shell,\r\n#tsh-room-search .tsh-date-shell input[type=\"date\"] {\r\n    cursor: pointer !important;\r\n}\r\n\r\n#tsh-room-search .tsh-date-shell {\r\n    min-height: 34px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH RESULTS POPUP \/ MODAL\r\n========================================================= *\/\r\n\r\nhtml.tsh-results-modal-open,\r\nbody.tsh-results-modal-open {\r\n    overflow: hidden !important;\r\n}\r\n\r\n#tsh-room-search .tsh-results-modal-overlay,\r\n#tsh-room-search .tsh-hero-results {\r\n    position: fixed !important;\r\n\r\n    inset: 0 !important;\r\n\r\n    z-index: 999990 !important;\r\n\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 22px !important;\r\n\r\n    display: none !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n\r\n    overflow: auto !important;\r\n\r\n    background: rgba(0,0,0,.72) !important;\r\n\r\n    backdrop-filter: blur(7px);\r\n    -webkit-backdrop-filter: blur(7px);\r\n}\r\n\r\n#tsh-room-search .tsh-results-modal-overlay.is-visible,\r\n#tsh-room-search .tsh-hero-results.is-visible {\r\n    display: flex !important;\r\n}\r\n\r\n#tsh-room-search .tsh-results-modal-panel {\r\n    position: relative;\r\n\r\n    width: min(1220px, 100%);\r\n    max-height: calc(100vh - 44px);\r\n\r\n    overflow: auto;\r\n\r\n    \/* Extra top\/right room for the close button *\/\r\n    padding: 72px 34px 30px;\r\n\r\n    border-radius: 22px;\r\n\r\n    background: #ffffff;\r\n\r\n    color: #07386f;\r\n\r\n    box-shadow:\r\n        0 30px 90px\r\n        rgba(0,0,0,.32);\r\n}\r\n\r\n#tsh-room-search .tsh-results-modal-close {\r\n    position: absolute;\r\n\r\n    top: 18px;\r\n    right: 18px;\r\n\r\n    z-index: 30;\r\n\r\n    width: 46px;\r\n    height: 46px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    margin: 0;\r\n\r\n    padding: 0 !important;\r\n\r\n    border: 0 !important;\r\n    border-radius: 50% !important;\r\n\r\n    background: #D45700 !important;\r\n    color: #ffffff !important;\r\n\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    font-size: 28px;\r\n    font-weight: 500;\r\n    line-height: 1;\r\n\r\n    box-shadow: 0 7px 20px rgba(7,56,111,.18) !important;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n#tsh-room-search .tsh-results-modal-close:hover,\r\n#tsh-room-search .tsh-results-modal-close:focus {\r\n    background: #D45700 !important;\r\n    color: #ffffff !important;\r\n}\r\n\r\n#tsh-room-search\r\n.tsh-results-modal-panel\r\n.tsh-results-top,\r\n#tsh-room-search\r\n.tsh-results-modal-panel\r\n.tsh-table-wrap,\r\n#tsh-room-search\r\n.tsh-results-modal-panel\r\n.tsh-pricing-note {\r\n    width: 100%;\r\n    max-width: none;\r\n\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   POPUP MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 620px) {\r\n\r\n    #tsh-room-search .tsh-results-modal-overlay,\r\n    #tsh-room-search .tsh-hero-results {\r\n        padding: 10px !important;\r\n\r\n        align-items: flex-start !important;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-modal-panel {\r\n        width: 100%;\r\n        max-height: calc(100vh - 20px);\r\n\r\n        margin: 0;\r\n\r\n        padding:\r\n            62px\r\n            10px\r\n            16px;\r\n\r\n        border-radius: 16px;\r\n    }\r\n\r\n    #tsh-room-search .tsh-results-modal-close {\r\n        top: 12px;\r\n        right: 12px;\r\n\r\n        width: 40px;\r\n        height: 40px;\r\n\r\n        margin: 0;\r\n\r\n        font-size: 24px;\r\n    }\r\n\r\n    #tsh-room-search\r\n    .tsh-results-modal-panel\r\n    .tsh-results-top {\r\n        align-items: center !important;\r\n\r\n        text-align: center;\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\/* =========================================================\r\n   HERO DATE FIELDS - FULL FIELD CLICKABLE\r\n   Removes native dd\/mm\/yyyy text \/ blue selection artifact\r\n========================================================= *\/\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-date-field {\r\n    position: relative;\r\n\r\n    cursor: pointer;\r\n\r\n    -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-date-field * {\r\n    -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-date-shell {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    min-height: 38px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    background: transparent;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n\r\n\/*\r\n * Visible custom text.\r\n *\r\n * The native browser date text stays completely hidden.\r\n * We show either:\r\n *\r\n * \"Select check in date\"\r\n * or\r\n * the chosen date\r\n *\r\n * in this span instead.\r\n *\/\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-date-placeholder {\r\n    position: relative !important;\r\n\r\n    top: auto !important;\r\n    left: auto !important;\r\n    right: auto !important;\r\n\r\n    transform: none !important;\r\n\r\n    display: block !important;\r\n\r\n    width: 100%;\r\n    max-width: calc(100% - 40px);\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    color: var(--navy);\r\n\r\n    font-size: 15px;\r\n    font-weight: 900;\r\n    line-height: 1.28;\r\n\r\n    pointer-events: none;\r\n\r\n    z-index: 4;\r\n}\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-date-placeholder.is-hidden {\r\n    display: block !important;\r\n}\r\n\r\n\r\n\/*\r\n * The real native date input covers the full date area.\r\n * It is invisible, but still receives the browser's date picker.\r\n *\/\r\n#tsh-room-search\r\n.surf-hero-search-card\r\ninput[type=\"date\"] {\r\n    position: absolute !important;\r\n\r\n    inset: 0 !important;\r\n\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n    min-width: 0 !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    border: 0 !important;\r\n    outline: 0 !important;\r\n\r\n    background: transparent !important;\r\n\r\n    opacity: 0 !important;\r\n\r\n    color: transparent !important;\r\n    caret-color: transparent !important;\r\n\r\n    box-shadow: none !important;\r\n\r\n    cursor: pointer !important;\r\n\r\n    z-index: 6 !important;\r\n}\r\n\r\n\r\n\/* Hide every native editable date fragment *\/\r\n#tsh-room-search\r\n.surf-hero-search-card\r\ninput[type=\"date\"]::-webkit-datetime-edit,\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\ninput[type=\"date\"]::-webkit-datetime-edit-fields-wrapper,\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\ninput[type=\"date\"]::-webkit-datetime-edit-text,\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\ninput[type=\"date\"]::-webkit-datetime-edit-month-field,\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\ninput[type=\"date\"]::-webkit-datetime-edit-day-field,\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\ninput[type=\"date\"]::-webkit-datetime-edit-year-field,\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\ninput[type=\"date\"]::-webkit-calendar-picker-indicator {\r\n    opacity: 0 !important;\r\n}\r\n\r\n\r\n\/*\r\n * Custom visible calendar icon.\r\n * The transparent native input remains above it and receives the click.\r\n *\/\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-date-shell::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 50%;\r\n    right: 0;\r\n\r\n    width: 18px;\r\n    height: 18px;\r\n\r\n    transform: translateY(-50%);\r\n\r\n    background-image:\r\n        url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2307386f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'\/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'\/%3E%3C\/svg%3E\");\r\n\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-size: contain;\r\n\r\n    pointer-events: none;\r\n\r\n    z-index: 5;\r\n}\r\n\r\n\r\n\/*\r\n * Clicking anywhere in the WHOLE check-in \/ check-out block\r\n * should feel interactive, not only the calendar icon.\r\n *\/\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-date-field:hover {\r\n    background: rgba(7,56,111,.025);\r\n}\r\n\r\n#tsh-room-search\r\n.surf-hero-search-card\r\n.tsh-date-field:focus-within {\r\n    background: rgba(7,56,111,.035);\r\n}\r\n\r\n\r\n\/* Mobile keeps the custom date text centered *\/\r\n@media (max-width: 767px) {\r\n\r\n    #tsh-room-search\r\n    .surf-hero-search-card\r\n    .tsh-date-placeholder {\r\n        width: 100%;\r\n        max-width: calc(100% - 40px);\r\n\r\n        text-align: center !important;\r\n    }\r\n\r\n    #tsh-room-search\r\n    .surf-hero-search-card\r\n    .tsh-date-shell::after {\r\n        right: 4px;\r\n    }\r\n\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n\r\n<section\r\n    class=\"surf-stay-offers\"\r\n    id=\"tsh-room-search\"\r\n>\r\n\r\n    <!-- =====================================================\r\n         HERO\r\n    ====================================================== -->\r\n\r\n    <div class=\"surf-stay-hero\">\r\n\r\n        <div class=\"surf-stay-hero-layout\">\r\n\r\n\r\n            <!-- =============================================\r\n                 HERO LEFT CONTENT\r\n            ============================================== -->\r\n\r\n            <div class=\"surf-stay-hero-content\">\r\n\r\n                <p class=\"surf-stay-hero-description1\">\r\n                    Tamraght Surf House is a leading surf and yoga holiday Camp\r\n                <\/p>\r\n\r\n                <p class=\"surf-stay-hero-description\">\r\n                    Book directly through our website and enjoy our best\r\n                    available offers, exclusive benefits, and flexible packages\r\n                    designed to make your holiday unforgettable.\r\n                <\/p>\r\n\r\n                <a\r\n                    href=\"https:\/\/tamraghtsurfhouse.com\/packages\/\"\r\n                    class=\"surf-stay-hero-button\"\r\n                >\r\n                    View our offers\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =============================================\r\n                 ROOM SEARCH - RIGHT SIDE\r\n            ============================================== -->\r\n\r\n            <aside\r\n                class=\"surf-hero-search-card\"\r\n                aria-label=\"Search room prices\"\r\n            >\r\n\r\n                <div class=\"surf-hero-search-heading\">\r\n\r\n                    <div class=\"surf-hero-search-kicker\">\r\n                        Check availability\r\n                    <\/div>\r\n\r\n                    <h2 class=\"surf-hero-search-title\">\r\n                        Find your package price\r\n                    <\/h2>\r\n\r\n                    <p class=\"surf-hero-search-copy\">\r\n                        Select your dates and guests.\r\n                        Minimum stay is 4 nights.\r\n                    <\/p>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"tsh-search-box\">\r\n\r\n\r\n        <!-- CHECK-IN -->\r\n\r\n        <div\r\n            class=\"tsh-search-field tsh-date-field\"\r\n            data-date-field=\"checkin\"\r\n        >\r\n\r\n            <label\r\n                class=\"tsh-search-label\"\r\n                for=\"tshSearchCheckin\"\r\n            >\r\n                Check-in\r\n            <\/label>\r\n\r\n            <div class=\"tsh-date-shell\">\r\n\r\n                <span\r\n                    class=\"tsh-date-placeholder\"\r\n                    id=\"tshCheckinPlaceholder\"\r\n                >\r\n                    Select check in date\r\n                <\/span>\r\n\r\n                <input\r\n                    type=\"date\"\r\n                    id=\"tshSearchCheckin\"\r\n                    aria-label=\"Check-in date\"\r\n                >\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CHECK-OUT -->\r\n\r\n        <div\r\n            class=\"tsh-search-field tsh-date-field\"\r\n            data-date-field=\"checkout\"\r\n        >\r\n\r\n            <label\r\n                class=\"tsh-search-label\"\r\n                for=\"tshSearchCheckout\"\r\n            >\r\n                Check-out\r\n            <\/label>\r\n\r\n            <div class=\"tsh-date-shell\">\r\n\r\n                <span\r\n                    class=\"tsh-date-placeholder\"\r\n                    id=\"tshCheckoutPlaceholder\"\r\n                >\r\n                    Select check out date\r\n                <\/span>\r\n\r\n                <input\r\n                    type=\"date\"\r\n                    id=\"tshSearchCheckout\"\r\n                    aria-label=\"Check-out date\"\r\n                >\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- GUESTS -->\r\n\r\n        <div class=\"tsh-search-field\">\r\n\r\n            <span class=\"tsh-search-label\">\r\n                Guests \u00b7 Max 10\r\n            <\/span>\r\n\r\n            <div class=\"tsh-guest-select-wrap\">\r\n\r\n                <select\r\n                    id=\"tshGuestSelect\"\r\n                    class=\"tsh-guest-select\"\r\n                    aria-label=\"Number of guests\"\r\n                >\r\n                    <option value=\"1\">1 Guest<\/option>\r\n                    <option value=\"2\">2 Guests<\/option>\r\n                    <option value=\"3\">3 Guests<\/option>\r\n                    <option value=\"4\">4 Guests<\/option>\r\n                    <option value=\"5\">5 Guests<\/option>\r\n                    <option value=\"6\">6 Guests<\/option>\r\n                    <option value=\"7\">7 Guests<\/option>\r\n                    <option value=\"8\">8 Guests<\/option>\r\n                    <option value=\"9\">9 Guests<\/option>\r\n                    <option value=\"10\">10 Guests<\/option>\r\n                <\/select>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- SEARCH -->\r\n\r\n        <div class=\"tsh-search-action\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"tsh-search-button\"\r\n                id=\"tshRoomSearchButton\"\r\n            >\r\n\r\n                <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    aria-hidden=\"true\"\r\n                >\r\n                    <circle\r\n                        cx=\"11\"\r\n                        cy=\"11\"\r\n                        r=\"7\"\r\n                    ><\/circle>\r\n\r\n                    <path\r\n                        d=\"M20 20l-4-4\"\r\n                    ><\/path>\r\n                <\/svg>\r\n\r\n                Search\r\n\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n                <div\r\n        class=\"tsh-search-message\"\r\n        id=\"tshRoomSearchMessage\"\r\n        role=\"alert\"\r\n    ><\/div>\r\n\r\n            <\/aside>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         SEARCH RESULTS\r\n         Hidden until the visitor presses Search.\r\n    ====================================================== -->\r\n\r\n    <div\r\n        class=\"tsh-search-results tsh-hero-results tsh-results-modal-overlay\"\r\n        id=\"tshRoomSearchResults\"\r\n        aria-live=\"polite\"\r\n        aria-hidden=\"true\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"tshResultsModalTitle\"\r\n    >\r\n\r\n        <div class=\"tsh-results-modal-panel\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"tsh-results-modal-close\"\r\n                id=\"tshResultsModalClose\"\r\n                aria-label=\"Close search results\"\r\n            >\r\n                \u00d7\r\n            <\/button>\r\n\r\n<div class=\"tsh-results-top\">\r\n\r\n            <div>\r\n\r\n                <h3 class=\"tsh-results-title\" id=\"tshResultsModalTitle\">\r\n                    Available room prices\r\n                <\/h3>\r\n\r\n                <p\r\n                    class=\"tsh-results-summary\"\r\n                    id=\"tshResultsSummary\"\r\n                ><\/p>\r\n\r\n                <p\r\n                    class=\"tsh-results-summary\"\r\n                    id=\"tshPricingFormula\"\r\n                    style=\"margin-top:4px;\"\r\n                >\r\n                    Full-stay prices are calculated automatically for every room and date range.\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n            <div\r\n                class=\"tsh-results-count\"\r\n                id=\"tshResultsCount\"\r\n            ><\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tsh-table-wrap\">\r\n\r\n            <table class=\"tsh-results-table\">\r\n\r\n                <thead>\r\n\r\n                    <tr>\r\n\r\n                        <th>Room option<\/th>\r\n\r\n                        <th>Guest allocation<\/th>\r\n\r\n                        <th>Stay<\/th>\r\n\r\n                        <th>Total for your guests<\/th>\r\n\r\n                        <th>Total price breakdown<\/th>\r\n\r\n                        <th>Status<\/th>\r\n\r\n                        <th><\/th>\r\n\r\n                    <\/tr>\r\n\r\n                <\/thead>\r\n\r\n\r\n                <tbody id=\"tshResultsBody\"><\/tbody>\r\n\r\n            <\/table>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"tsh-pricing-note\">\r\n\r\n            <strong>Room occupancy & pricing:<\/strong>\r\n            Twin and Double rooms are exactly 2 guests per room.\r\n            Triple rooms are exactly 3 guests per room.\r\n            Single rooms are exactly 1 guest.\r\n            Shared rooms can take remaining guests.\r\n            For every room and every date range, the breakdown shows the\r\n            full-stay price per guest \u00d7 the number of guests in that room option.\r\n\r\n        <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================\r\n         CARDS\r\n    ====================== -->\r\n\r\n    <div\r\n        class=\"surf-stay-cards-area\"\r\n        id=\"surfStayCards\"\r\n    >\r\n\r\n        <div class=\"surf-stay-cards-row\">\r\n\r\n            <!-- CARD 1 -->\r\n\r\n            <article class=\"surf-stay-card is-open\">\r\n\r\n                <img decoding=\"async\"\r\n                    class=\"surf-stay-card-image\"\r\n                    src=\"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/07\/rrrd.png\"\r\n                    alt=\"Advance purchase discount\"\r\n                >\r\n\r\n                <div class=\"surf-stay-card-panel\">\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"surf-stay-card-toggle\"\r\n                        aria-expanded=\"true\"\r\n                    >\r\n                        <span class=\"surf-stay-card-title\">\r\n                            Best Prices Ever\r\n                        <\/span>\r\n\r\n                        <span class=\"surf-stay-card-arrow\"><\/span>\r\n                    <\/button>\r\n\r\n                    <div class=\"surf-stay-card-content\">\r\n\r\n                        <p>\r\n                            Save when you make your reservation in advance\r\n                            and enjoy our best direct booking rate.\r\n                        <\/p>\r\n\r\n                        <ul class=\"surf-stay-card-details\">\r\n                            <li>Exclusive early booking price<\/li>\r\n                            <li>Direct booking benefits<\/li>\r\n                            <li>Accommodation included<\/li>\r\n                        <\/ul>\r\n\r\n                        <a\r\n                            href=\"https:\/\/tamraghtsurfhouse.com\/packages\/\"\r\n                            class=\"surf-stay-card-link\"\r\n                        >\r\n                            View offer details\r\n                        <\/a>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n            <!-- CARD 2 -->\r\n\r\n            <article class=\"surf-stay-card\">\r\n\r\n                <img decoding=\"async\"\r\n                    class=\"surf-stay-card-image\"\r\n                    src=\"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/07\/wd.png\"\r\n                >\r\n\r\n                <div class=\"surf-stay-card-panel\">\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"surf-stay-card-toggle\"\r\n                        aria-expanded=\"false\"\r\n                    >\r\n                        <span class=\"surf-stay-card-title\">\r\n                            Everything Included\r\n                        <\/span>\r\n\r\n                        <span class=\"surf-stay-card-arrow\"><\/span>\r\n                    <\/button>\r\n\r\n                    <div class=\"surf-stay-card-content\">\r\n\r\n                        <p>\r\n                            Start every morning with a delicious breakfast\r\n                            included for all registered guests.\r\n                        <\/p>\r\n\r\n                        <ul class=\"surf-stay-card-details\">\r\n                            <li>Daily Meals included<\/li>\r\n                            <li>Surf & Yoga Everyday<\/li>\r\n                            <li>Airport Transfer Included<\/li>\r\n                        <\/ul>\r\n\r\n                        <a\r\n                            href=\"https:\/\/tamraghtsurfhouse.com\/packages\/\"\r\n                            class=\"surf-stay-card-link\"\r\n                        >\r\n                            View offer details\r\n                        <\/a>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n            <!-- CARD 3 -->\r\n\r\n            <article class=\"surf-stay-card\">\r\n\r\n                <img decoding=\"async\"\r\n                    class=\"surf-stay-card-image\"\r\n                    src=\"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-06-15-at-23.19.47.jpeg\"\r\n                    alt=\"Surf and yoga package\"\r\n                >\r\n\r\n                <div class=\"surf-stay-card-panel\">\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"surf-stay-card-toggle\"\r\n                        aria-expanded=\"false\"\r\n                    >\r\n                        <span class=\"surf-stay-card-title\">\r\n                            Surf &amp; Yoga Package\r\n                        <\/span>\r\n\r\n                        <span class=\"surf-stay-card-arrow\"><\/span>\r\n                    <\/button>\r\n\r\n                    <div class=\"surf-stay-card-content\">\r\n\r\n                        <p>\r\n                            Combine daily surf coaching with relaxing yoga\r\n                            sessions for a balanced and energizing holiday.\r\n                        <\/p>\r\n\r\n                        <ul class=\"surf-stay-card-details\">\r\n                            <li>Professional surf coaching<\/li>\r\n                            <li>Surf equipment included<\/li>\r\n                            <li>Daily yoga sessions<\/li>\r\n                        <\/ul>\r\n\r\n                        <a\r\n                            href=\"https:\/\/tamraghtsurfhouse.com\/packages\/\"\r\n                            class=\"surf-stay-card-link\"\r\n                        >\r\n                            View offer details\r\n                        <\/a>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n            <!-- CARD 4 -->\r\n\r\n            <article class=\"surf-stay-card\">\r\n\r\n                <img decoding=\"async\"\r\n                    class=\"surf-stay-card-image\"\r\n                    src=\"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/07\/tsh-hh.png\"\r\n                    alt=\"Long stay package\"\r\n                >\r\n\r\n                <div class=\"surf-stay-card-panel\">\r\n\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"surf-stay-card-toggle\"\r\n                        aria-expanded=\"false\"\r\n                    >\r\n                        <span class=\"surf-stay-card-title\">\r\n                            Long Stay Offer\r\n                        <\/span>\r\n\r\n                        <span class=\"surf-stay-card-arrow\"><\/span>\r\n                    <\/button>\r\n\r\n                    <div class=\"surf-stay-card-content\">\r\n\r\n                        <p>\r\n                            Stay longer, surf more, and enjoy extra time to\r\n                            discover the destination at a special rate.\r\n                        <\/p>\r\n\r\n                        <ul class=\"surf-stay-card-details\">\r\n                            <li>Reduced long-stay price<\/li>\r\n                            <li>Daily meals included<\/li>\r\n                            <li>Activities and excursions<\/li>\r\n                        <\/ul>\r\n\r\n                        <a\r\n                            href=\"https:\/\/tamraghtsurfhouse.com\/packages\/\"\r\n                            class=\"surf-stay-card-link\"\r\n                        >\r\n                            View offer details\r\n                        <\/a>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n    \"use strict\";\r\n\r\n\r\n    \/* =========================================================\r\n       WEBSITE LANGUAGE \/ DYNAMIC TRANSLATIONS\r\n\r\n       This handles text created AFTER the visitor clicks Search.\r\n       TranslatePress can translate normal HTML, but these result rows\r\n       are generated by JavaScript, so we translate them here directly.\r\n\r\n       Supported:\r\n       EN \/ FR \/ DE \/ IT \/ ES\r\n\r\n       Language detection order:\r\n       1. <html lang=\"...\">\r\n       2. TranslatePress language slug in URL (\/fr\/, \/de\/, etc.)\r\n       3. English fallback\r\n    ========================================================= *\/\r\n\r\n    const TSH_TRANSLATIONS = {\r\n\r\n        en: {\r\n            locale: \"en-GB\",\r\n\r\n            rooms: {\r\n                shared: \"Shared Room\",\r\n                twin: \"Twin Room\",\r\n                triple: \"Triple Room\",\r\n                double: \"Double Room\",\r\n                single: \"Single Room\"\r\n            },\r\n\r\n            roomShort: {\r\n                shared: \"Shared\",\r\n                twin: \"Twin\",\r\n                triple: \"Triple\",\r\n                double: \"Double\",\r\n                single: \"Single\"\r\n            },\r\n\r\n            guest: \"guest\",\r\n            guests: \"guests\",\r\n            day: \"day\",\r\n            days: \"days\",\r\n            night: \"night\",\r\n            nights: \"nights\",\r\n            perRoom: \"per room\",\r\n\r\n            exactCombination: \"Exact room combination for {guests}.\",\r\n            bestValue: \"Best value\",\r\n            available: \"Available\",\r\n            select: \"Select\",\r\n\r\n            roomOption: \"Room option\",\r\n            guestAllocation: \"Guest allocation\",\r\n            stay: \"Stay\",\r\n            totalGuests: \"Total for your guests\",\r\n            priceBreakdown: \"Price breakdown\",\r\n            status: \"Status\",\r\n\r\n            roomOptionSingular: \"room option\",\r\n            roomOptionPlural: \"room options\",\r\n\r\n            selectDatesError:\r\n                \"Please select your check-in and check-out dates.\",\r\n\r\n            minimumStayError:\r\n                \"Minimum stay is 4 nights. Please choose a checkout date at least 4 days after check-in.\",\r\n\r\n            selectCheckin: \"Select check in date\",\r\n            selectCheckout: \"Select check out date\",\r\n\r\n            submitFor: \"SUBMIT FOR\",\r\n\r\n            allocationShared: \"{people} {guestWord} in {room}\",\r\n            allocationSingle: \"{people} {guestWord} in {room}\",\r\n            allocationPrivate:\r\n                \"{people} {guestWord} in {quantity} \u00d7 {room} ({capacity} {perRoom})\"\r\n        },\r\n\r\n\r\n        fr: {\r\n            locale: \"fr-FR\",\r\n\r\n            rooms: {\r\n                shared: \"Chambre partag\u00e9e\",\r\n                twin: \"Chambre twin\",\r\n                triple: \"Chambre triple\",\r\n                double: \"Chambre double\",\r\n                single: \"Chambre simple\"\r\n            },\r\n\r\n            roomShort: {\r\n                shared: \"Partag\u00e9e\",\r\n                twin: \"Twin\",\r\n                triple: \"Triple\",\r\n                double: \"Double\",\r\n                single: \"Simple\"\r\n            },\r\n\r\n            guest: \"personne\",\r\n            guests: \"personnes\",\r\n            day: \"jour\",\r\n            days: \"jours\",\r\n            night: \"nuit\",\r\n            nights: \"nuits\",\r\n            perRoom: \"par chambre\",\r\n\r\n            exactCombination:\r\n                \"Combinaison exacte de chambres pour {guests}.\",\r\n            bestValue: \"Meilleur tarif\",\r\n            available: \"Disponible\",\r\n            select: \"S\u00e9lectionner\",\r\n\r\n            roomOption: \"Option de chambre\",\r\n            guestAllocation: \"R\u00e9partition des invit\u00e9s\",\r\n            stay: \"S\u00e9jour\",\r\n            totalGuests: \"Total pour vos invit\u00e9s\",\r\n            priceBreakdown: \"D\u00e9tail du prix\",\r\n            status: \"Statut\",\r\n\r\n            roomOptionSingular: \"option de chambre\",\r\n            roomOptionPlural: \"options de chambre\",\r\n\r\n            selectDatesError:\r\n                \"Veuillez s\u00e9lectionner vos dates d\u2019arriv\u00e9e et de d\u00e9part.\",\r\n\r\n            minimumStayError:\r\n                \"Le s\u00e9jour minimum est de 4 nuits. Veuillez choisir une date de d\u00e9part au moins 4 jours apr\u00e8s l\u2019arriv\u00e9e.\",\r\n\r\n            selectCheckin: \"S\u00e9lectionnez la date d\u2019arriv\u00e9e\",\r\n            selectCheckout: \"S\u00e9lectionnez la date de d\u00e9part\",\r\n\r\n            submitFor: \"R\u00c9SERVER POUR\",\r\n\r\n            allocationShared: \"{people} {guestWord} en {room}\",\r\n            allocationSingle: \"{people} {guestWord} en {room}\",\r\n            allocationPrivate:\r\n                \"{people} {guestWord} dans {quantity} \u00d7 {room} ({capacity} {perRoom})\"\r\n        },\r\n\r\n\r\n        de: {\r\n            locale: \"de-DE\",\r\n\r\n            rooms: {\r\n                shared: \"Mehrbettzimmer\",\r\n                twin: \"Zweibettzimmer\",\r\n                triple: \"Dreibettzimmer\",\r\n                double: \"Doppelzimmer\",\r\n                single: \"Einzelzimmer\"\r\n            },\r\n\r\n            roomShort: {\r\n                shared: \"Mehrbett\",\r\n                twin: \"Zweibett\",\r\n                triple: \"Dreibett\",\r\n                double: \"Doppel\",\r\n                single: \"Einzel\"\r\n            },\r\n\r\n            guest: \"Gast\",\r\n            guests: \"G\u00e4ste\",\r\n            day: \"Tag\",\r\n            days: \"Tage\",\r\n            night: \"Nacht\",\r\n            nights: \"N\u00e4chte\",\r\n            perRoom: \"pro Zimmer\",\r\n\r\n            exactCombination:\r\n                \"Passende Zimmerkombination f\u00fcr {guests}.\",\r\n            bestValue: \"Bester Preis\",\r\n            available: \"Verf\u00fcgbar\",\r\n            select: \"Ausw\u00e4hlen\",\r\n\r\n            roomOption: \"Zimmeroption\",\r\n            guestAllocation: \"G\u00e4steaufteilung\",\r\n            stay: \"Aufenthalt\",\r\n            totalGuests: \"Gesamtpreis f\u00fcr Ihre G\u00e4ste\",\r\n            priceBreakdown: \"Preisdetails\",\r\n            status: \"Status\",\r\n\r\n            roomOptionSingular: \"Zimmeroption\",\r\n            roomOptionPlural: \"Zimmeroptionen\",\r\n\r\n            selectDatesError:\r\n                \"Bitte w\u00e4hlen Sie Ihr Anreise- und Abreisedatum.\",\r\n\r\n            minimumStayError:\r\n                \"Der Mindestaufenthalt betr\u00e4gt 4 N\u00e4chte. Bitte w\u00e4hlen Sie ein Abreisedatum mindestens 4 Tage nach der Anreise.\",\r\n\r\n            selectCheckin: \"Anreisedatum ausw\u00e4hlen\",\r\n            selectCheckout: \"Abreisedatum ausw\u00e4hlen\",\r\n\r\n            submitFor: \"BUCHEN F\u00dcR\",\r\n\r\n            allocationShared: \"{people} {guestWord} im {room}\",\r\n            allocationSingle: \"{people} {guestWord} im {room}\",\r\n            allocationPrivate:\r\n                \"{people} {guestWord} in {quantity} \u00d7 {room} ({capacity} {perRoom})\"\r\n        },\r\n\r\n\r\n        it: {\r\n            locale: \"it-IT\",\r\n\r\n            rooms: {\r\n                shared: \"Camera condivisa\",\r\n                twin: \"Camera twin\",\r\n                triple: \"Camera tripla\",\r\n                double: \"Camera doppia\",\r\n                single: \"Camera singola\"\r\n            },\r\n\r\n            roomShort: {\r\n                shared: \"Condivisa\",\r\n                twin: \"Twin\",\r\n                triple: \"Tripla\",\r\n                double: \"Doppia\",\r\n                single: \"Singola\"\r\n            },\r\n\r\n            guest: \"ospite\",\r\n            guests: \"ospiti\",\r\n            day: \"giorno\",\r\n            days: \"giorni\",\r\n            night: \"notte\",\r\n            nights: \"notti\",\r\n            perRoom: \"per camera\",\r\n\r\n            exactCombination:\r\n                \"Combinazione esatta delle camere per {guests}.\",\r\n            bestValue: \"Miglior prezzo\",\r\n            available: \"Disponibile\",\r\n            select: \"Seleziona\",\r\n\r\n            roomOption: \"Opzione camera\",\r\n            guestAllocation: \"Distribuzione ospiti\",\r\n            stay: \"Soggiorno\",\r\n            totalGuests: \"Totale per i tuoi ospiti\",\r\n            priceBreakdown: \"Dettaglio prezzo\",\r\n            status: \"Stato\",\r\n\r\n            roomOptionSingular: \"opzione camera\",\r\n            roomOptionPlural: \"opzioni camera\",\r\n\r\n            selectDatesError:\r\n                \"Seleziona le date di check-in e check-out.\",\r\n\r\n            minimumStayError:\r\n                \"Il soggiorno minimo \u00e8 di 4 notti. Scegli una data di check-out almeno 4 giorni dopo il check-in.\",\r\n\r\n            selectCheckin: \"Seleziona la data di arrivo\",\r\n            selectCheckout: \"Seleziona la data di partenza\",\r\n\r\n            submitFor: \"PRENOTA PER\",\r\n\r\n            allocationShared: \"{people} {guestWord} in {room}\",\r\n            allocationSingle: \"{people} {guestWord} in {room}\",\r\n            allocationPrivate:\r\n                \"{people} {guestWord} in {quantity} \u00d7 {room} ({capacity} {perRoom})\"\r\n        },\r\n\r\n\r\n        es: {\r\n            locale: \"es-ES\",\r\n\r\n            rooms: {\r\n                shared: \"Habitaci\u00f3n compartida\",\r\n                twin: \"Habitaci\u00f3n twin\",\r\n                triple: \"Habitaci\u00f3n triple\",\r\n                double: \"Habitaci\u00f3n doble\",\r\n                single: \"Habitaci\u00f3n individual\"\r\n            },\r\n\r\n            roomShort: {\r\n                shared: \"Compartida\",\r\n                twin: \"Twin\",\r\n                triple: \"Triple\",\r\n                double: \"Doble\",\r\n                single: \"Individual\"\r\n            },\r\n\r\n            guest: \"hu\u00e9sped\",\r\n            guests: \"hu\u00e9spedes\",\r\n            day: \"d\u00eda\",\r\n            days: \"d\u00edas\",\r\n            night: \"noche\",\r\n            nights: \"noches\",\r\n            perRoom: \"por habitaci\u00f3n\",\r\n\r\n            exactCombination:\r\n                \"Combinaci\u00f3n exacta de habitaciones para {guests}.\",\r\n            bestValue: \"Mejor precio\",\r\n            available: \"Disponible\",\r\n            select: \"Seleccionar\",\r\n\r\n            roomOption: \"Opci\u00f3n de habitaci\u00f3n\",\r\n            guestAllocation: \"Distribuci\u00f3n de hu\u00e9spedes\",\r\n            stay: \"Estancia\",\r\n            totalGuests: \"Total para tus hu\u00e9spedes\",\r\n            priceBreakdown: \"Detalle del precio\",\r\n            status: \"Estado\",\r\n\r\n            roomOptionSingular: \"opci\u00f3n de habitaci\u00f3n\",\r\n            roomOptionPlural: \"opciones de habitaci\u00f3n\",\r\n\r\n            selectDatesError:\r\n                \"Selecciona las fechas de llegada y salida.\",\r\n\r\n            minimumStayError:\r\n                \"La estancia m\u00ednima es de 4 noches. Elige una fecha de salida al menos 4 d\u00edas despu\u00e9s de la llegada.\",\r\n\r\n            selectCheckin: \"Selecciona la fecha de llegada\",\r\n            selectCheckout: \"Selecciona la fecha de salida\",\r\n\r\n            submitFor: \"RESERVAR POR\",\r\n\r\n            allocationShared: \"{people} {guestWord} en {room}\",\r\n            allocationSingle: \"{people} {guestWord} en {room}\",\r\n            allocationPrivate:\r\n                \"{people} {guestWord} en {quantity} \u00d7 {room} ({capacity} {perRoom})\"\r\n        }\r\n\r\n    };\r\n\r\n\r\n    function detectWebsiteLanguage() {\r\n\r\n        const supported =\r\n            Object.keys(\r\n                TSH_TRANSLATIONS\r\n            );\r\n\r\n\r\n        \/*\r\n         * 1) TranslatePress normally updates the HTML lang attribute.\r\n         *\/\r\n        const htmlLanguage =\r\n            String(\r\n                document.documentElement.lang ||\r\n                \"\"\r\n            )\r\n            .toLowerCase()\r\n            .split(\"-\")[0];\r\n\r\n\r\n        if (\r\n            supported.includes(\r\n                htmlLanguage\r\n            )\r\n        ) {\r\n\r\n            return htmlLanguage;\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * 2) Fallback to TranslatePress URL slugs:\r\n         * \/fr\/ \/de\/ \/it\/ \/es\/\r\n         *\/\r\n        const pathParts =\r\n            window.location.pathname\r\n                .split(\"\/\")\r\n                .filter(Boolean);\r\n\r\n\r\n        if (\r\n            pathParts.length &&\r\n            supported.includes(\r\n                pathParts[0].toLowerCase()\r\n            )\r\n        ) {\r\n\r\n            return pathParts[0].toLowerCase();\r\n\r\n        }\r\n\r\n\r\n        return \"en\";\r\n\r\n    }\r\n\r\n\r\n    const TSH_LANGUAGE =\r\n        detectWebsiteLanguage();\r\n\r\n\r\n    const TR =\r\n        TSH_TRANSLATIONS[\r\n            TSH_LANGUAGE\r\n        ] ||\r\n        TSH_TRANSLATIONS.en;\r\n\r\n\r\n    function replaceTokens(\r\n        template,\r\n        values\r\n    ) {\r\n\r\n        return String(\r\n            template\r\n        )\r\n        .replace(\r\n            \/\\{(\\w+)\\}\/g,\r\n            function (\r\n                match,\r\n                key\r\n            ) {\r\n\r\n                return Object.prototype\r\n                    .hasOwnProperty\r\n                    .call(\r\n                        values,\r\n                        key\r\n                    )\r\n                    ? values[key]\r\n                    : match;\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function guestWord(\r\n        count\r\n    ) {\r\n\r\n        return (\r\n            Number(count) === 1\r\n                ? TR.guest\r\n                : TR.guests\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function dayWord(\r\n        count\r\n    ) {\r\n\r\n        return (\r\n            Number(count) === 1\r\n                ? TR.day\r\n                : TR.days\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function nightWord(\r\n        count\r\n    ) {\r\n\r\n        return (\r\n            Number(count) === 1\r\n                ? TR.night\r\n                : TR.nights\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function localizedRoomName(\r\n        room\r\n    ) {\r\n\r\n        return (\r\n            TR.rooms[\r\n                room.id\r\n            ] ||\r\n            room.name ||\r\n            room.id\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function localizedRoomShortName(\r\n        room\r\n    ) {\r\n\r\n        return (\r\n            TR.roomShort[\r\n                room.id\r\n            ] ||\r\n            localizedRoomName(\r\n                room\r\n            )\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================================\r\n       ROOM PRICE RULES\r\n    ========================================================= *\/\r\n\r\n    const rooms = {\r\n\r\n        shared: {\r\n            id: \"shared\",\r\n            name: \"Shared Room\",\r\n            shortName: \"Shared\",\r\n            price: 55,\r\n            capacity: 1,\r\n            type: \"shared\"\r\n        },\r\n\r\n        twin: {\r\n            id: \"twin\",\r\n            name: \"Twin Room\",\r\n            shortName: \"Twin\",\r\n            price: 65,\r\n            capacity: 2,\r\n            minGuests: 2,\r\n            maxGuests: 2,\r\n            type: \"private\"\r\n        },\r\n\r\n        triple: {\r\n            id: \"triple\",\r\n            name: \"Triple Room\",\r\n            shortName: \"Triple\",\r\n            price: 55,\r\n            capacity: 3,\r\n            minGuests: 3,\r\n            maxGuests: 3,\r\n            type: \"private\"\r\n        },\r\n\r\n        double: {\r\n            id: \"double\",\r\n            name: \"Double Room\",\r\n            shortName: \"Double\",\r\n            price: 65,\r\n            capacity: 2,\r\n            minGuests: 2,\r\n            maxGuests: 2,\r\n            type: \"private\"\r\n        },\r\n\r\n        single: {\r\n            id: \"single\",\r\n            name: \"Single Room\",\r\n            shortName: \"Single\",\r\n            price: 75,\r\n            capacity: 1,\r\n            type: \"private\"\r\n        }\r\n\r\n    };\r\n\r\n\r\n    \/* =========================================================\r\n       ELEMENTS\r\n    ========================================================= *\/\r\n\r\n    const checkin =\r\n        document.getElementById(\r\n            \"tshSearchCheckin\"\r\n        );\r\n\r\n    const checkout =\r\n        document.getElementById(\r\n            \"tshSearchCheckout\"\r\n        );\r\n\r\n    const checkinPlaceholder =\r\n        document.getElementById(\r\n            \"tshCheckinPlaceholder\"\r\n        );\r\n\r\n    const checkoutPlaceholder =\r\n        document.getElementById(\r\n            \"tshCheckoutPlaceholder\"\r\n        );\r\n\r\n    const checkinField =\r\n        document.querySelector(\r\n            '[data-date-field=\"checkin\"]'\r\n        );\r\n\r\n    const checkoutField =\r\n        document.querySelector(\r\n            '[data-date-field=\"checkout\"]'\r\n        );\r\n\r\n    const guestSelect =\r\n        document.getElementById(\r\n            \"tshGuestSelect\"\r\n        );\r\n\r\n    const searchButton =\r\n        document.getElementById(\r\n            \"tshRoomSearchButton\"\r\n        );\r\n\r\n    const message =\r\n        document.getElementById(\r\n            \"tshRoomSearchMessage\"\r\n        );\r\n\r\n    const results =\r\n        document.getElementById(\r\n            \"tshRoomSearchResults\"\r\n        );\r\n\r\n    const resultsBody =\r\n        document.getElementById(\r\n            \"tshResultsBody\"\r\n        );\r\n\r\n    const resultsSummary =\r\n        document.getElementById(\r\n            \"tshResultsSummary\"\r\n        );\r\n\r\n    const resultsCount =\r\n        document.getElementById(\r\n            \"tshResultsCount\"\r\n        );\r\n\r\n    const resultsModalClose =\r\n        document.getElementById(\r\n            \"tshResultsModalClose\"\r\n        );\r\n\r\n\r\n    if (\r\n        !checkin ||\r\n        !checkout ||\r\n        !guestSelect ||\r\n        !searchButton ||\r\n        !message ||\r\n        !results ||\r\n        !resultsBody ||\r\n        !resultsSummary ||\r\n        !resultsCount\r\n    ) {\r\n        return;\r\n    }\r\n\r\n\r\n    \/* =========================================================\r\n       GUEST STATE\r\n    ========================================================= *\/\r\n\r\n    let guests =\r\n        Math.min(\r\n            10,\r\n            Math.max(\r\n                1,\r\n                parseInt(\r\n                    guestSelect.value,\r\n                    10\r\n                ) || 1\r\n            )\r\n        );\r\n\r\n\r\n    guestSelect.addEventListener(\r\n        \"change\",\r\n        function () {\r\n\r\n            guests =\r\n                Math.min(\r\n                    10,\r\n                    Math.max(\r\n                        1,\r\n                        parseInt(\r\n                            guestSelect.value,\r\n                            10\r\n                        ) || 1\r\n                    )\r\n                );\r\n\r\n            guestSelect.value =\r\n                String(\r\n                    guests\r\n                );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =========================================================\r\n       DATE HELPERS\r\n    ========================================================= *\/\r\n\r\n    function toInputDate(date) {\r\n\r\n        const year =\r\n            date.getFullYear();\r\n\r\n        const month =\r\n            String(\r\n                date.getMonth() + 1\r\n            ).padStart(\r\n                2,\r\n                \"0\"\r\n            );\r\n\r\n        const day =\r\n            String(\r\n                date.getDate()\r\n            ).padStart(\r\n                2,\r\n                \"0\"\r\n            );\r\n\r\n        return (\r\n            year +\r\n            \"-\" +\r\n            month +\r\n            \"-\" +\r\n            day\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function parseDate(value) {\r\n\r\n        if (!value) {\r\n            return null;\r\n        }\r\n\r\n        const parts =\r\n            value.split(\"-\");\r\n\r\n        if (parts.length !== 3) {\r\n            return null;\r\n        }\r\n\r\n        return new Date(\r\n            Number(parts[0]),\r\n            Number(parts[1]) - 1,\r\n            Number(parts[2])\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function diffCalendarDays(\r\n        startDate,\r\n        endDate\r\n    ) {\r\n\r\n        const startUtc =\r\n            Date.UTC(\r\n                startDate.getFullYear(),\r\n                startDate.getMonth(),\r\n                startDate.getDate()\r\n            );\r\n\r\n        const endUtc =\r\n            Date.UTC(\r\n                endDate.getFullYear(),\r\n                endDate.getMonth(),\r\n                endDate.getDate()\r\n            );\r\n\r\n        return Math.round(\r\n            (\r\n                endUtc -\r\n                startUtc\r\n            )\r\n            \/\r\n            86400000\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function formatPrettyDate(date) {\r\n\r\n        return date.toLocaleDateString(\r\n            undefined,\r\n            {\r\n                day: \"numeric\",\r\n                month: \"short\",\r\n                year: \"numeric\"\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================================\r\n       DATE DISPLAY + FULL-FIELD DATE PICKER\r\n    ========================================================= *\/\r\n\r\n    \/*\r\n     * Keep the translated text exactly as rendered by TranslatePress.\r\n     *\/\r\n    const checkinDefaultText =\r\n        checkinPlaceholder\r\n            ? checkinPlaceholder.textContent.trim()\r\n            : TR.selectCheckin;\r\n\r\n\r\n    const checkoutDefaultText =\r\n        checkoutPlaceholder\r\n            ? checkoutPlaceholder.textContent.trim()\r\n            : TR.selectCheckout;\r\n\r\n\r\n    function formatSelectedDate(\r\n        value\r\n    ) {\r\n\r\n        const date =\r\n            parseDate(\r\n                value\r\n            );\r\n\r\n\r\n        if (!date) {\r\n            return \"\";\r\n        }\r\n\r\n\r\n        const locale =\r\n            TR.locale ||\r\n            document.documentElement.lang ||\r\n            navigator.language ||\r\n            \"en\";\r\n\r\n\r\n        try {\r\n\r\n            return date.toLocaleDateString(\r\n                locale,\r\n                {\r\n                    day: \"2-digit\",\r\n                    month: \"short\",\r\n                    year: \"numeric\"\r\n                }\r\n            );\r\n\r\n        } catch (error) {\r\n\r\n            return date.toLocaleDateString();\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    function syncDatePlaceholder(\r\n        input,\r\n        placeholder,\r\n        defaultText\r\n    ) {\r\n\r\n        if (\r\n            !input ||\r\n            !placeholder\r\n        ) {\r\n            return;\r\n        }\r\n\r\n\r\n        const hasValue =\r\n            Boolean(\r\n                input.value\r\n            );\r\n\r\n\r\n        input.classList.toggle(\r\n            \"has-value\",\r\n            hasValue\r\n        );\r\n\r\n\r\n        \/*\r\n         * Never reveal browser dd\/mm\/yyyy text.\r\n         * The custom span always remains the visible date display.\r\n         *\/\r\n        placeholder.classList.remove(\r\n            \"is-hidden\"\r\n        );\r\n\r\n\r\n        placeholder.textContent =\r\n            hasValue\r\n                ? formatSelectedDate(\r\n                    input.value\r\n                )\r\n                : defaultText;\r\n\r\n    }\r\n\r\n\r\n    function syncAllDatePlaceholders() {\r\n\r\n        syncDatePlaceholder(\r\n            checkin,\r\n            checkinPlaceholder,\r\n            checkinDefaultText\r\n        );\r\n\r\n\r\n        syncDatePlaceholder(\r\n            checkout,\r\n            checkoutPlaceholder,\r\n            checkoutDefaultText\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function openNativeDatePicker(\r\n        input\r\n    ) {\r\n\r\n        if (!input) {\r\n            return;\r\n        }\r\n\r\n\r\n        \/*\r\n         * Chromium \/ Edge \/ modern browsers.\r\n         *\/\r\n        if (\r\n            typeof input.showPicker ===\r\n            \"function\"\r\n        ) {\r\n\r\n            try {\r\n\r\n                input.showPicker();\r\n\r\n                return;\r\n\r\n            } catch (error) {\r\n\r\n                \/*\r\n                 * Continue to browser fallback.\r\n                 *\/\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        input.focus();\r\n\r\n\r\n        try {\r\n\r\n            input.click();\r\n\r\n        } catch (error) {\r\n\r\n            \/*\r\n             * The invisible native input itself remains clickable.\r\n             *\/\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    function connectWholeDateField(\r\n        field,\r\n        input\r\n    ) {\r\n\r\n        if (\r\n            !field ||\r\n            !input\r\n        ) {\r\n            return;\r\n        }\r\n\r\n\r\n        \/*\r\n         * WHOLE FIELD CLICK:\r\n         *\r\n         * - CHECK-IN label\r\n         * - Select check in date text\r\n         * - empty space\r\n         * - calendar icon area\r\n         *\r\n         * all trigger the native date selector.\r\n         *\/\r\n        field.addEventListener(\r\n            \"click\",\r\n            function (event) {\r\n\r\n                event.preventDefault();\r\n\r\n\r\n                openNativeDatePicker(\r\n                    input\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        \/*\r\n         * Keyboard support too.\r\n         *\/\r\n        field.setAttribute(\r\n            \"tabindex\",\r\n            \"0\"\r\n        );\r\n\r\n\r\n        field.setAttribute(\r\n            \"role\",\r\n            \"button\"\r\n        );\r\n\r\n\r\n        field.addEventListener(\r\n            \"keydown\",\r\n            function (event) {\r\n\r\n                if (\r\n                    event.key === \"Enter\" ||\r\n                    event.key === \" \"\r\n                ) {\r\n\r\n                    event.preventDefault();\r\n\r\n\r\n                    openNativeDatePicker(\r\n                        input\r\n                    );\r\n\r\n                }\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    connectWholeDateField(\r\n        checkinField,\r\n        checkin\r\n    );\r\n\r\n\r\n    connectWholeDateField(\r\n        checkoutField,\r\n        checkout\r\n    );\r\n\r\n\r\n    \/* =========================================================\r\n       INITIAL DATE RULES\r\n    ========================================================= *\/\r\n\r\n    const today =\r\n        new Date();\r\n\r\n    today.setHours(\r\n        0,\r\n        0,\r\n        0,\r\n        0\r\n    );\r\n\r\n    checkin.min =\r\n        toInputDate(\r\n            today\r\n        );\r\n\r\n    checkout.min =\r\n        toInputDate(\r\n            today\r\n        );\r\n\r\n\r\n    \/*\r\n     * MINIMUM STAY RULE\r\n     *\r\n     * Minimum stay = 4 nights.\r\n     *\r\n     * Example:\r\n     * Check-in 20 August\r\n     * Earliest checkout 24 August\r\n     *\r\n     * The checkout calendar therefore cannot select\r\n     * 21, 22 or 23 August.\r\n     *\/\r\n\r\n    const MINIMUM_NIGHTS =\r\n        4;\r\n\r\n\r\n    checkin.addEventListener(\r\n        \"change\",\r\n        function () {\r\n\r\n            syncAllDatePlaceholders();\r\n\r\n\r\n            const start =\r\n                parseDate(\r\n                    checkin.value\r\n                );\r\n\r\n            if (!start) {\r\n                return;\r\n            }\r\n\r\n\r\n            const minimumCheckout =\r\n                new Date(\r\n                    start\r\n                );\r\n\r\n\r\n            minimumCheckout.setDate(\r\n                minimumCheckout.getDate() +\r\n                MINIMUM_NIGHTS\r\n            );\r\n\r\n\r\n            const minimumCheckoutValue =\r\n                toInputDate(\r\n                    minimumCheckout\r\n                );\r\n\r\n\r\n            \/*\r\n             * Prevent selecting any checkout date\r\n             * before the 4-night minimum.\r\n             *\/\r\n\r\n            checkout.min =\r\n                minimumCheckoutValue;\r\n\r\n\r\n            const existingCheckout =\r\n                parseDate(\r\n                    checkout.value\r\n                );\r\n\r\n\r\n            \/*\r\n             * If no checkout is selected yet,\r\n             * or the old checkout is too early,\r\n             * automatically set it to the earliest\r\n             * valid checkout date.\r\n             *\/\r\n\r\n            if (\r\n                !existingCheckout ||\r\n                existingCheckout <\r\n                minimumCheckout\r\n            ) {\r\n\r\n                checkout.value =\r\n                    minimumCheckoutValue;\r\n\r\n            }\r\n\r\n\r\n            syncAllDatePlaceholders();\r\n\r\n\r\n            \/*\r\n             * On browsers that support showPicker(),\r\n             * immediately open the checkout calendar\r\n             * after the visitor chooses check-in.\r\n             *\/\r\n\r\n            window.setTimeout(\r\n                function () {\r\n\r\n                    if (\r\n                        typeof checkout.showPicker ===\r\n                        \"function\"\r\n                    ) {\r\n\r\n                        try {\r\n\r\n                            checkout.showPicker();\r\n\r\n                        } catch (error) {\r\n\r\n                            \/*\r\n                             * Some mobile browsers block\r\n                             * programmatic picker opening.\r\n                             * The minimum date still works.\r\n                             *\/\r\n\r\n                        }\r\n\r\n                    } else {\r\n\r\n                        checkout.focus();\r\n\r\n                    }\r\n\r\n                },\r\n                80\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    checkout.addEventListener(\r\n        \"change\",\r\n        function () {\r\n\r\n            syncAllDatePlaceholders();\r\n\r\n        }\r\n    );\r\n\r\n\r\n    syncAllDatePlaceholders();\r\n\r\n\r\n    \/* =========================================================\r\n       MONEY\r\n    ========================================================= *\/\r\n\r\n    function money(value) {\r\n\r\n        return (\r\n            \"\u20ac\" +\r\n            Number(value)\r\n                .toLocaleString(\r\n                    \"en\",\r\n                    {\r\n                        maximumFractionDigits: 0\r\n                    }\r\n                )\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function moneyForSubmit(value) {\r\n\r\n        return (\r\n            Number(value)\r\n                .toLocaleString(\r\n                    \"en\",\r\n                    {\r\n                        maximumFractionDigits: 0\r\n                    }\r\n                )\r\n            +\r\n            \"\u20ac\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================================\r\n       ESCAPE HTML\r\n    ========================================================= *\/\r\n\r\n    function escapeHtml(value) {\r\n\r\n        return String(value)\r\n            .replaceAll(\r\n                \"&\",\r\n                \"&amp;\"\r\n            )\r\n            .replaceAll(\r\n                \"<\",\r\n                \"&lt;\"\r\n            )\r\n            .replaceAll(\r\n                \">\",\r\n                \"&gt;\"\r\n            )\r\n            .replaceAll(\r\n                '\"',\r\n                \"&quot;\"\r\n            )\r\n            .replaceAll(\r\n                \"'\",\r\n                \"&#039;\"\r\n            );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================================\r\n       ROOM COMBINATION HELPERS\r\n    ========================================================= *\/\r\n\r\n    function roomQuantityLabel(\r\n        room,\r\n        quantity\r\n    ) {\r\n\r\n        const roomName =\r\n            localizedRoomName(\r\n                room\r\n            );\r\n\r\n\r\n        if (room.id === \"shared\") {\r\n\r\n            return (\r\n                roomName +\r\n                \" (\" +\r\n                quantity +\r\n                \" \" +\r\n                guestWord(\r\n                    quantity\r\n                ) +\r\n                \")\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * Using \"2 \u00d7 Chambre double\" instead of trying to pluralize\r\n         * room names makes the title correct in every supported language.\r\n         *\/\r\n        return (\r\n            quantity +\r\n            \" \u00d7 \" +\r\n            roomName\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function allocationLabel(\r\n        room,\r\n        quantity\r\n    ) {\r\n\r\n        const people =\r\n            quantity *\r\n            room.capacity;\r\n\r\n\r\n        const roomName =\r\n            localizedRoomName(\r\n                room\r\n            );\r\n\r\n\r\n        const values = {\r\n            people: people,\r\n            guestWord: guestWord(\r\n                people\r\n            ),\r\n            quantity: quantity,\r\n            room: roomName,\r\n            capacity: room.capacity,\r\n            perRoom: TR.perRoom\r\n        };\r\n\r\n\r\n        if (room.id === \"shared\") {\r\n\r\n            return replaceTokens(\r\n                TR.allocationShared,\r\n                values\r\n            );\r\n\r\n        }\r\n\r\n\r\n        if (room.id === \"single\") {\r\n\r\n            return replaceTokens(\r\n                TR.allocationSingle,\r\n                values\r\n            );\r\n\r\n        }\r\n\r\n\r\n        return replaceTokens(\r\n            TR.allocationPrivate,\r\n            values\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function normalizeComponents(\r\n        components\r\n    ) {\r\n\r\n        const grouped = {};\r\n\r\n\r\n        components.forEach(\r\n            function (component) {\r\n\r\n                if (\r\n                    !component ||\r\n                    !component.room ||\r\n                    component.quantity < 1\r\n                ) {\r\n                    return;\r\n                }\r\n\r\n\r\n                const id =\r\n                    component.room.id;\r\n\r\n\r\n                if (!grouped[id]) {\r\n\r\n                    grouped[id] = {\r\n                        room: component.room,\r\n                        quantity: 0\r\n                    };\r\n\r\n                }\r\n\r\n\r\n                grouped[id].quantity +=\r\n                    component.quantity;\r\n\r\n            }\r\n        );\r\n\r\n\r\n        const order = [\r\n            \"triple\",\r\n            \"double\",\r\n            \"twin\",\r\n            \"single\",\r\n            \"shared\"\r\n        ];\r\n\r\n\r\n        return order\r\n            .filter(\r\n                function (id) {\r\n                    return grouped[id];\r\n                }\r\n            )\r\n            .map(\r\n                function (id) {\r\n                    return grouped[id];\r\n                }\r\n            );\r\n\r\n    }\r\n\r\n\r\n    function buildOption(\r\n        components,\r\n        days\r\n    ) {\r\n\r\n        const normalized =\r\n            normalizeComponents(\r\n                components\r\n            );\r\n\r\n\r\n        const allocatedGuests =\r\n            normalized.reduce(\r\n                function (\r\n                    total,\r\n                    component\r\n                ) {\r\n\r\n                    return (\r\n                        total +\r\n                        component.quantity *\r\n                        component.room.capacity\r\n                    );\r\n\r\n                },\r\n                0\r\n            );\r\n\r\n\r\n        if (\r\n            allocatedGuests !==\r\n            guests\r\n        ) {\r\n\r\n            return null;\r\n\r\n        }\r\n\r\n\r\n        const total =\r\n            normalized.reduce(\r\n                function (\r\n                    sum,\r\n                    component\r\n                ) {\r\n\r\n                    const people =\r\n                        component.quantity *\r\n                        component.room.capacity;\r\n\r\n\r\n                    return (\r\n                        sum +\r\n                        people *\r\n                        component.room.price *\r\n                        days\r\n                    );\r\n\r\n                },\r\n                0\r\n            );\r\n\r\n\r\n        const key =\r\n            normalized\r\n                .map(\r\n                    function (component) {\r\n\r\n                        return (\r\n                            component.room.id +\r\n                            \":\" +\r\n                            component.quantity\r\n                        );\r\n\r\n                    }\r\n                )\r\n                .join(\"|\");\r\n\r\n\r\n        return {\r\n            key: key,\r\n            components: normalized,\r\n            total: total\r\n        };\r\n\r\n    }\r\n\r\n\r\n    function createOptions(\r\n        days\r\n    ) {\r\n\r\n        const optionMap =\r\n            new Map();\r\n\r\n\r\n        function add(\r\n            components\r\n        ) {\r\n\r\n            const option =\r\n                buildOption(\r\n                    components,\r\n                    days\r\n                );\r\n\r\n\r\n            if (\r\n                option &&\r\n                !optionMap.has(\r\n                    option.key\r\n                )\r\n            ) {\r\n\r\n                optionMap.set(\r\n                    option.key,\r\n                    option\r\n                );\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * SHARED:\r\n         * Any number of guests can stay in shared accommodation.\r\n         *\/\r\n\r\n        add([\r\n            {\r\n                room: rooms.shared,\r\n                quantity: guests\r\n            }\r\n        ]);\r\n\r\n\r\n        \/*\r\n         * SINGLE:\r\n         * One guest per Single Room.\r\n         *\/\r\n\r\n        add([\r\n            {\r\n                room: rooms.single,\r\n                quantity: guests\r\n            }\r\n        ]);\r\n\r\n\r\n        \/*\r\n         * TWIN:\r\n         * Minimum 2 guests and maximum 2 guests per Twin Room.\r\n         * A Twin Room is never sold to 1 guest or 3+ guests.\r\n         *\r\n         * Odd guest numbers:\r\n         * remaining 1 guest can use Shared or Single.\r\n         *\/\r\n\r\n        if (guests >= 2) {\r\n\r\n            const twinRooms =\r\n                Math.floor(\r\n                    guests \/ 2\r\n                );\r\n\r\n            const twinRemainder =\r\n                guests % 2;\r\n\r\n\r\n            if (twinRemainder === 0) {\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.twin,\r\n                        quantity: twinRooms\r\n                    }\r\n                ]);\r\n\r\n            } else {\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.twin,\r\n                        quantity: twinRooms\r\n                    },\r\n                    {\r\n                        room: rooms.shared,\r\n                        quantity: 1\r\n                    }\r\n                ]);\r\n\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.twin,\r\n                        quantity: twinRooms\r\n                    },\r\n                    {\r\n                        room: rooms.single,\r\n                        quantity: 1\r\n                    }\r\n                ]);\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * DOUBLE:\r\n         * Minimum 2 guests and maximum 2 guests per Double Room.\r\n         * A Double Room is never sold to 1 guest or 3+ guests.\r\n         *\r\n         * Example for 3 guests:\r\n         * 1 Double Room for 2 guests\r\n         * + 1 Shared place OR 1 Single Room.\r\n         *\/\r\n\r\n        if (guests >= 2) {\r\n\r\n            const doubleRooms =\r\n                Math.floor(\r\n                    guests \/ 2\r\n                );\r\n\r\n            const doubleRemainder =\r\n                guests % 2;\r\n\r\n\r\n            if (doubleRemainder === 0) {\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.double,\r\n                        quantity: doubleRooms\r\n                    }\r\n                ]);\r\n\r\n            } else {\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.double,\r\n                        quantity: doubleRooms\r\n                    },\r\n                    {\r\n                        room: rooms.shared,\r\n                        quantity: 1\r\n                    }\r\n                ]);\r\n\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.double,\r\n                        quantity: doubleRooms\r\n                    },\r\n                    {\r\n                        room: rooms.single,\r\n                        quantity: 1\r\n                    }\r\n                ]);\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * TRIPLE:\r\n         * Minimum 3 guests and maximum 3 guests per Triple Room.\r\n         * A Triple Room is never sold to 1, 2, or 4+ guests.\r\n         *\r\n         * Remaining 1:\r\n         * Shared or Single.\r\n         *\r\n         * Remaining 2:\r\n         * Twin, Double, two Shared places, or two Singles.\r\n         *\/\r\n\r\n        if (guests >= 3) {\r\n\r\n            const tripleRooms =\r\n                Math.floor(\r\n                    guests \/ 3\r\n                );\r\n\r\n            const tripleRemainder =\r\n                guests % 3;\r\n\r\n\r\n            if (tripleRemainder === 0) {\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.triple,\r\n                        quantity: tripleRooms\r\n                    }\r\n                ]);\r\n\r\n            }\r\n\r\n\r\n            if (tripleRemainder === 1) {\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.triple,\r\n                        quantity: tripleRooms\r\n                    },\r\n                    {\r\n                        room: rooms.shared,\r\n                        quantity: 1\r\n                    }\r\n                ]);\r\n\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.triple,\r\n                        quantity: tripleRooms\r\n                    },\r\n                    {\r\n                        room: rooms.single,\r\n                        quantity: 1\r\n                    }\r\n                ]);\r\n\r\n            }\r\n\r\n\r\n            if (tripleRemainder === 2) {\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.triple,\r\n                        quantity: tripleRooms\r\n                    },\r\n                    {\r\n                        room: rooms.twin,\r\n                        quantity: 1\r\n                    }\r\n                ]);\r\n\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.triple,\r\n                        quantity: tripleRooms\r\n                    },\r\n                    {\r\n                        room: rooms.double,\r\n                        quantity: 1\r\n                    }\r\n                ]);\r\n\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.triple,\r\n                        quantity: tripleRooms\r\n                    },\r\n                    {\r\n                        room: rooms.shared,\r\n                        quantity: 2\r\n                    }\r\n                ]);\r\n\r\n\r\n                add([\r\n                    {\r\n                        room: rooms.triple,\r\n                        quantity: tripleRooms\r\n                    },\r\n                    {\r\n                        room: rooms.single,\r\n                        quantity: 2\r\n                    }\r\n                ]);\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        return Array.from(\r\n            optionMap.values()\r\n        )\r\n        .sort(\r\n            function (\r\n                a,\r\n                b\r\n            ) {\r\n\r\n                if (\r\n                    a.total !==\r\n                    b.total\r\n                ) {\r\n\r\n                    return (\r\n                        a.total -\r\n                        b.total\r\n                    );\r\n\r\n                }\r\n\r\n\r\n                return (\r\n                    a.components.length -\r\n                    b.components.length\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function optionRoomTitle(\r\n        option\r\n    ) {\r\n\r\n        return option.components\r\n            .map(\r\n                function (component) {\r\n\r\n                    return roomQuantityLabel(\r\n                        component.room,\r\n                        component.quantity\r\n                    );\r\n\r\n                }\r\n            )\r\n            .join(\" + \");\r\n\r\n    }\r\n\r\n\r\n    function optionAllocationHtml(\r\n        option\r\n    ) {\r\n\r\n        return (\r\n            '<div class=\"tsh-allocation-list\">' +\r\n            option.components\r\n                .map(\r\n                    function (component) {\r\n\r\n                        return (\r\n                            '<span class=\"tsh-allocation-item\">' +\r\n                            escapeHtml(\r\n                                allocationLabel(\r\n                                    component.room,\r\n                                    component.quantity\r\n                                )\r\n                            ) +\r\n                            '<\/span>'\r\n                        );\r\n\r\n                    }\r\n                )\r\n                .join(\"\") +\r\n            \"<\/div>\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function optionBreakdownHtml(\r\n        option,\r\n        days\r\n    ) {\r\n\r\n        \/*\r\n         * UNIVERSAL PRICE BREAKDOWN\r\n         *\r\n         * Applies automatically to:\r\n         * - Shared Room\r\n         * - Twin Room\r\n         * - Triple Room\r\n         * - Double Room\r\n         * - Single Room\r\n         * - Every valid room combination\r\n         * - Every selected stay length\r\n         *\r\n         * The daily room rate is used internally only.\r\n         * Visitors see the FULL STAY price per guest.\r\n         *\r\n         * Example for 5 package days:\r\n         * Shared: \u20ac275 \u00d7 2 guests = \u20ac550\r\n         *\r\n         * Example for 8 package days:\r\n         * Double: \u20ac520 \u00d7 2 guests = \u20ac1,040\r\n         *\/\r\n\r\n        return (\r\n            '<div class=\"tsh-breakdown-list\">' +\r\n            option.components\r\n                .map(\r\n                    function (component) {\r\n\r\n                        const people =\r\n                            component.quantity *\r\n                            component.room.capacity;\r\n\r\n\r\n                        \/*\r\n                         * Full stay price PER GUEST\r\n                         * for this specific room.\r\n                         *\/\r\n                        const stayPricePerGuest =\r\n                            component.room.price *\r\n                            days;\r\n\r\n\r\n                        \/*\r\n                         * Total for all guests allocated\r\n                         * to this room type.\r\n                         *\/\r\n                        const subtotal =\r\n                            stayPricePerGuest *\r\n                            people;\r\n\r\n\r\n                        return (\r\n                            '<span class=\"tsh-breakdown-item\">' +\r\n                            escapeHtml(\r\n                                localizedRoomShortName(\r\n                                    component.room\r\n                                ) +\r\n                                \": \" +\r\n                                money(\r\n                                    stayPricePerGuest\r\n                                ) +\r\n                                \" \u00d7 \" +\r\n                                people +\r\n                                \" \" +\r\n                                guestWord(\r\n                                    people\r\n                                ) +\r\n                                \" = \" +\r\n                                money(\r\n                                    subtotal\r\n                                )\r\n                            ) +\r\n                            '<\/span>'\r\n                        );\r\n\r\n                    }\r\n                )\r\n                .join(\"\") +\r\n            \"<\/div>\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================================\r\n       SEARCH RESULTS POPUP\r\n    ========================================================= *\/\r\n\r\n    function openResultsModal() {\r\n\r\n        results.classList.add(\r\n            \"is-visible\"\r\n        );\r\n\r\n\r\n        results.setAttribute(\r\n            \"aria-hidden\",\r\n            \"false\"\r\n        );\r\n\r\n\r\n        document.documentElement\r\n            .classList.add(\r\n                \"tsh-results-modal-open\"\r\n            );\r\n\r\n\r\n        document.body\r\n            .classList.add(\r\n                \"tsh-results-modal-open\"\r\n            );\r\n\r\n\r\n        if (resultsModalClose) {\r\n\r\n            window.setTimeout(\r\n                function () {\r\n\r\n                    resultsModalClose.focus();\r\n\r\n                },\r\n                60\r\n            );\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    function closeResultsModal() {\r\n\r\n        results.classList.remove(\r\n            \"is-visible\"\r\n        );\r\n\r\n\r\n        results.setAttribute(\r\n            \"aria-hidden\",\r\n            \"true\"\r\n        );\r\n\r\n\r\n        document.documentElement\r\n            .classList.remove(\r\n                \"tsh-results-modal-open\"\r\n            );\r\n\r\n\r\n        document.body\r\n            .classList.remove(\r\n                \"tsh-results-modal-open\"\r\n            );\r\n\r\n    }\r\n\r\n\r\n    if (resultsModalClose) {\r\n\r\n        resultsModalClose.addEventListener(\r\n            \"click\",\r\n            closeResultsModal\r\n        );\r\n\r\n    }\r\n\r\n\r\n    results.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n            \/*\r\n             * Clicking the dark background closes the popup.\r\n             * Clicking inside the white results panel does not.\r\n             *\/\r\n            if (\r\n                event.target ===\r\n                results\r\n            ) {\r\n\r\n                closeResultsModal();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    document.addEventListener(\r\n        \"keydown\",\r\n        function (event) {\r\n\r\n            if (\r\n                event.key ===\r\n                    \"Escape\"\r\n                &&\r\n                results.classList.contains(\r\n                    \"is-visible\"\r\n                )\r\n            ) {\r\n\r\n                closeResultsModal();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =========================================================\r\n       SEARCH\r\n    ========================================================= *\/\r\n\r\n    function runSearch() {\r\n\r\n        guests =\r\n            Math.min(\r\n                10,\r\n                Math.max(\r\n                    1,\r\n                    parseInt(\r\n                        guestSelect.value,\r\n                        10\r\n                    ) || 1\r\n                )\r\n            );\r\n\r\n        guestSelect.value =\r\n            String(\r\n                guests\r\n            );\r\n\r\n        message.classList.remove(\r\n            \"is-visible\"\r\n        );\r\n\r\n        message.textContent = \"\";\r\n\r\n\r\n        const start =\r\n            parseDate(\r\n                checkin.value\r\n            );\r\n\r\n        const end =\r\n            parseDate(\r\n                checkout.value\r\n            );\r\n\r\n\r\n        if (!start || !end) {\r\n\r\n            message.textContent =\r\n                TR.selectDatesError;\r\n\r\n            message.classList.add(\r\n                \"is-visible\"\r\n            );\r\n\r\n            closeResultsModal();\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        const nights =\r\n            diffCalendarDays(\r\n                start,\r\n                end\r\n            );\r\n\r\n\r\n        if (nights < MINIMUM_NIGHTS) {\r\n\r\n            message.textContent =\r\n                TR.minimumStayError;\r\n\r\n            message.classList.add(\r\n                \"is-visible\"\r\n            );\r\n\r\n            closeResultsModal();\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * Package pricing uses DAYS:\r\n         * 4 nights = 5 days,\r\n         * 5 nights = 6 days, etc.\r\n         *\/\r\n\r\n        const days =\r\n            nights + 1;\r\n\r\n\r\n        const options =\r\n            createOptions(\r\n                days\r\n            );\r\n\r\n\r\n        const cheapestTotal =\r\n            options.length\r\n                ? options[0].total\r\n                : 0;\r\n\r\n\r\n        resultsBody.innerHTML =\r\n            options\r\n                .map(\r\n                    function (\r\n                        option,\r\n                        index\r\n                    ) {\r\n\r\n                        const title =\r\n                            optionRoomTitle(\r\n                                option\r\n                            );\r\n\r\n\r\n                        const isBest =\r\n                            option.total ===\r\n                            cheapestTotal;\r\n\r\n\r\n                        const exactCombinationText =\r\n                            replaceTokens(\r\n                                TR.exactCombination,\r\n                                {\r\n                                    guests:\r\n                                        guests +\r\n                                        \" \" +\r\n                                        guestWord(\r\n                                            guests\r\n                                        )\r\n                                }\r\n                            );\r\n\r\n\r\n                        return `\r\n                            <tr>\r\n\r\n                                <td\r\n                                    class=\"tsh-result-room\"\r\n                                    data-label=\"${escapeHtml(TR.roomOption)}\"\r\n                                >\r\n\r\n                                    <span class=\"tsh-room-name\">\r\n                                        ${escapeHtml(title)}\r\n                                    <\/span>\r\n\r\n                                    <span class=\"tsh-room-note\">\r\n                                        ${escapeHtml(exactCombinationText)}\r\n                                    <\/span>\r\n\r\n                                    ${\r\n                                        isBest\r\n                                            ? '<span class=\"tsh-best-value\">' +\r\n                                              escapeHtml(TR.bestValue) +\r\n                                              '<\/span>'\r\n                                            : \"\"\r\n                                    }\r\n\r\n                                <\/td>\r\n\r\n\r\n                                <td\r\n                                    class=\"tsh-result-allocation\"\r\n                                    data-label=\"${escapeHtml(TR.guestAllocation)}\"\r\n                                >\r\n                                    ${optionAllocationHtml(option)}\r\n                                <\/td>\r\n\r\n\r\n                                <td\r\n                                    class=\"tsh-result-stay\"\r\n                                    data-label=\"${escapeHtml(TR.stay)}\"\r\n                                >\r\n                                    ${days} ${escapeHtml(dayWord(days))}\r\n                                    \/\r\n                                    ${nights} ${escapeHtml(nightWord(nights))}\r\n                                <\/td>\r\n\r\n\r\n                                <td\r\n                                    class=\"tsh-result-total\"\r\n                                    data-label=\"${escapeHtml(TR.totalGuests)}\"\r\n                                >\r\n                                    <span class=\"tsh-total-money\">\r\n                                        ${money(option.total)}\r\n                                    <\/span>\r\n                                <\/td>\r\n\r\n\r\n                                <td\r\n                                    class=\"tsh-result-breakdown\"\r\n                                    data-label=\"${escapeHtml(TR.priceBreakdown)}\"\r\n                                >\r\n                                    ${optionBreakdownHtml(option, days)}\r\n                                <\/td>\r\n\r\n\r\n                                <td\r\n                                    class=\"tsh-result-status\"\r\n                                    data-label=\"${escapeHtml(TR.status)}\"\r\n                                >\r\n\r\n                                    <span class=\"tsh-status available\">\r\n                                        <span class=\"tsh-status-dot\"><\/span>\r\n                                        ${escapeHtml(TR.available)}\r\n                                    <\/span>\r\n\r\n                                <\/td>\r\n\r\n\r\n                                <td\r\n                                    class=\"tsh-result-action\"\r\n                                >\r\n\r\n                                    <button\r\n                                        type=\"button\"\r\n                                        class=\"tsh-select-room\"\r\n                                        data-room=\"${escapeHtml(title)}\"\r\n                                        data-price=\"${option.total}\"\r\n                                    >\r\n                                        ${escapeHtml(TR.select)}\r\n                                    <\/button>\r\n\r\n                                <\/td>\r\n\r\n                            <\/tr>\r\n                        `;\r\n\r\n                    }\r\n                )\r\n                .join(\"\");\r\n\r\n\r\n        resultsSummary.textContent =\r\n            formatPrettyDate(\r\n                start\r\n            )\r\n            +\r\n            \" \u2192 \"\r\n            +\r\n            formatPrettyDate(\r\n                end\r\n            )\r\n            +\r\n            \" \u00b7 \"\r\n            +\r\n            days\r\n            +\r\n            \" \"\r\n            +\r\n            dayWord(\r\n                days\r\n            )\r\n            +\r\n            \" \/ \"\r\n            +\r\n            nights\r\n            +\r\n            \" \"\r\n            +\r\n            nightWord(\r\n                nights\r\n            )\r\n            +\r\n            \" \u00b7 \"\r\n            +\r\n            guests\r\n            +\r\n            \" \"\r\n            +\r\n            guestWord(\r\n                guests\r\n            );\r\n\r\n\r\n        resultsCount.textContent =\r\n            options.length +\r\n            \" \" +\r\n            (\r\n                options.length === 1\r\n                    ? TR.roomOptionSingular\r\n                    : TR.roomOptionPlural\r\n            );\r\n\r\n\r\n        openResultsModal();\r\n\r\n    }\r\n\r\n\r\n    searchButton.addEventListener(\r\n        \"click\",\r\n        runSearch\r\n    );\r\n\r\n\r\n    \/* =========================================================\r\n       BOOKING POPUP PREFILL HELPERS\r\n    ========================================================= *\/\r\n\r\n    function dispatchFieldEvents(\r\n        element\r\n    ) {\r\n\r\n        if (!element) {\r\n            return;\r\n        }\r\n\r\n\r\n        element.dispatchEvent(\r\n            new Event(\r\n                \"input\",\r\n                {\r\n                    bubbles: true\r\n                }\r\n            )\r\n        );\r\n\r\n\r\n        element.dispatchEvent(\r\n            new Event(\r\n                \"change\",\r\n                {\r\n                    bubbles: true\r\n                }\r\n            )\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function setBookingDates(\r\n        arrival,\r\n        departure\r\n    ) {\r\n\r\n        const bookingArrival =\r\n            document.getElementById(\r\n                \"tshDateFrom\"\r\n            );\r\n\r\n\r\n        const bookingDeparture =\r\n            document.getElementById(\r\n                \"tshDateTo\"\r\n            );\r\n\r\n\r\n        if (\r\n            !bookingArrival ||\r\n            !bookingDeparture\r\n        ) {\r\n            return;\r\n        }\r\n\r\n\r\n        \/*\r\n         * Set arrival first because the existing booking form\r\n         * recalculates the minimum departure date when arrival changes.\r\n         *\/\r\n\r\n        bookingArrival.value =\r\n            arrival || \"\";\r\n\r\n\r\n        dispatchFieldEvents(\r\n            bookingArrival\r\n        );\r\n\r\n\r\n        \/*\r\n         * Set departure AFTER the arrival change handler has run.\r\n         *\/\r\n\r\n        bookingDeparture.value =\r\n            departure || \"\";\r\n\r\n\r\n        dispatchFieldEvents(\r\n            bookingDeparture\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function setBookingRoom(\r\n        roomLabel\r\n    ) {\r\n\r\n        const bookingRoom =\r\n            document.getElementById(\r\n                \"tshPackage\"\r\n            );\r\n\r\n\r\n        if (!bookingRoom) {\r\n            return;\r\n        }\r\n\r\n\r\n        \/*\r\n         * Your booking form normally contains only the basic room types.\r\n         * Search results can contain combinations such as:\r\n         *\r\n         * \"1 Double Room + 1 Single Room\"\r\n         *\r\n         * If the exact option does not already exist, add it dynamically\r\n         * so the visitor sees exactly the room combination they selected\r\n         * and FormSubmit receives the same text.\r\n         *\/\r\n\r\n        let matchingOption =\r\n            Array.from(\r\n                bookingRoom.options\r\n            )\r\n            .find(\r\n                function (option) {\r\n\r\n                    return (\r\n                        option.value ===\r\n                        roomLabel\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n\r\n        if (!matchingOption) {\r\n\r\n            matchingOption =\r\n                document.createElement(\r\n                    \"option\"\r\n                );\r\n\r\n\r\n            matchingOption.value =\r\n                roomLabel;\r\n\r\n\r\n            matchingOption.textContent =\r\n                roomLabel;\r\n\r\n\r\n            matchingOption.setAttribute(\r\n                \"data-tsh-search-option\",\r\n                \"1\"\r\n            );\r\n\r\n\r\n            bookingRoom.appendChild(\r\n                matchingOption\r\n            );\r\n\r\n        }\r\n\r\n\r\n        bookingRoom.value =\r\n            roomLabel;\r\n\r\n\r\n        dispatchFieldEvents(\r\n            bookingRoom\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function setBookingGuests(\r\n        targetGuests\r\n    ) {\r\n\r\n        const guestMinusButton =\r\n            document.getElementById(\r\n                \"tshGuestMinus\"\r\n            );\r\n\r\n\r\n        const guestPlusButton =\r\n            document.getElementById(\r\n                \"tshGuestPlus\"\r\n            );\r\n\r\n\r\n        const guestDisplay =\r\n            document.getElementById(\r\n                \"tshGuestValue\"\r\n            );\r\n\r\n\r\n        const guestHidden =\r\n            document.getElementById(\r\n                \"tshGuestsHidden\"\r\n            );\r\n\r\n\r\n        const target =\r\n            Math.min(\r\n                10,\r\n                Math.max(\r\n                    1,\r\n                    parseInt(\r\n                        targetGuests,\r\n                        10\r\n                    ) || 1\r\n                )\r\n            );\r\n\r\n\r\n        \/*\r\n         * IMPORTANT:\r\n         * The booking form keeps its own internal guest counter in JS.\r\n         * We use its existing minus\/plus buttons so the internal value,\r\n         * visible value and hidden submitted value all stay synchronized.\r\n         *\/\r\n\r\n\r\n        if (\r\n            guestMinusButton &&\r\n            guestPlusButton\r\n        ) {\r\n\r\n            \/*\r\n             * Safely reset the booking form's own counter to 1.\r\n             *\/\r\n\r\n            for (\r\n                let i = 0;\r\n                i < 30;\r\n                i++\r\n            ) {\r\n\r\n                guestMinusButton.click();\r\n\r\n            }\r\n\r\n\r\n            \/*\r\n             * Raise it to the selected number of guests.\r\n             *\/\r\n\r\n            for (\r\n                let i = 1;\r\n                i < target;\r\n                i++\r\n            ) {\r\n\r\n                guestPlusButton.click();\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * Final visual\/submission fallback in case another optimization\r\n         * plugin delays the booking form's counter JavaScript.\r\n         *\/\r\n\r\n        if (guestDisplay) {\r\n\r\n            guestDisplay.textContent =\r\n                String(\r\n                    target\r\n                );\r\n\r\n        }\r\n\r\n\r\n        if (guestHidden) {\r\n\r\n            guestHidden.value =\r\n                String(\r\n                    target\r\n                );\r\n\r\n            dispatchFieldEvents(\r\n                guestHidden\r\n            );\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    function addBookingSearchDetails(\r\n        bookingForm,\r\n        selection\r\n    ) {\r\n\r\n        if (!bookingForm) {\r\n            return;\r\n        }\r\n\r\n\r\n        \/*\r\n         * Include the calculated total in the submitted booking request.\r\n         * This is hidden from the visitor but is sent with FormSubmit.\r\n         *\/\r\n\r\n        let totalField =\r\n            document.getElementById(\r\n                \"tshSearchCalculatedTotal\"\r\n            );\r\n\r\n\r\n        if (!totalField) {\r\n\r\n            totalField =\r\n                document.createElement(\r\n                    \"input\"\r\n                );\r\n\r\n\r\n            totalField.type =\r\n                \"hidden\";\r\n\r\n\r\n            totalField.id =\r\n                \"tshSearchCalculatedTotal\";\r\n\r\n\r\n            totalField.name =\r\n                \"Calculated package total\";\r\n\r\n\r\n            bookingForm.appendChild(\r\n                totalField\r\n            );\r\n\r\n        }\r\n\r\n\r\n        totalField.value =\r\n            money(\r\n                selection.total\r\n            );\r\n\r\n\r\n        \/*\r\n         * Show the TOTAL FOR YOUR GUESTS directly\r\n         * on the booking form submit button.\r\n         *\r\n         * Example:\r\n         * SUBMIT FOR 550\u20ac\r\n         *\/\r\n        const submitButton =\r\n            document.getElementById(\r\n                \"tshSubmitButton\"\r\n            );\r\n\r\n\r\n        if (submitButton) {\r\n\r\n            submitButton.textContent =\r\n                TR.submitFor +\r\n                \" \" +\r\n                moneyForSubmit(\r\n                    selection.total\r\n                );\r\n\r\n        }\r\n\r\n\r\n        let sourceField =\r\n            document.getElementById(\r\n                \"tshSearchSelectionSource\"\r\n            );\r\n\r\n\r\n        if (!sourceField) {\r\n\r\n            sourceField =\r\n                document.createElement(\r\n                    \"input\"\r\n                );\r\n\r\n\r\n            sourceField.type =\r\n                \"hidden\";\r\n\r\n\r\n            sourceField.id =\r\n                \"tshSearchSelectionSource\";\r\n\r\n\r\n            sourceField.name =\r\n                \"Booking source\";\r\n\r\n\r\n            bookingForm.appendChild(\r\n                sourceField\r\n            );\r\n\r\n        }\r\n\r\n\r\n        sourceField.value =\r\n            \"Room price search engine\";\r\n\r\n    }\r\n\r\n\r\n    function openPrefilledBookingPopup(\r\n        selection,\r\n        trigger\r\n    ) {\r\n\r\n        const popup =\r\n            document.getElementById(\r\n                \"tshBookingPopupOverlay\"\r\n            );\r\n\r\n\r\n        const bookingForm =\r\n            document.getElementById(\r\n                \"tshBookingForm\"\r\n            );\r\n\r\n\r\n        if (!popup) {\r\n\r\n            console.error(\r\n                \"Tamraght Surf House: booking popup was not found.\"\r\n            );\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * PREFILL EVERYTHING THE VISITOR ALREADY SELECTED.\r\n         *\/\r\n\r\n        setBookingDates(\r\n            selection.checkin,\r\n            selection.checkout\r\n        );\r\n\r\n\r\n        setBookingRoom(\r\n            selection.room\r\n        );\r\n\r\n\r\n        setBookingGuests(\r\n            selection.guests\r\n        );\r\n\r\n\r\n        addBookingSearchDetails(\r\n            bookingForm,\r\n            selection\r\n        );\r\n\r\n\r\n        \/*\r\n         * Keep a globally accessible copy as well.\r\n         *\/\r\n\r\n        window.tshSelectedRoom =\r\n            selection;\r\n\r\n\r\n        \/*\r\n         * Open the existing popup.\r\n         *\/\r\n\r\n        if (\r\n            popup.parentElement !==\r\n            document.body\r\n        ) {\r\n\r\n            document.body.appendChild(\r\n                popup\r\n            );\r\n\r\n        }\r\n\r\n\r\n        popup.classList.add(\r\n            \"is-open\"\r\n        );\r\n\r\n\r\n        popup.setAttribute(\r\n            \"aria-hidden\",\r\n            \"false\"\r\n        );\r\n\r\n\r\n        document.documentElement.style.overflow =\r\n            \"hidden\";\r\n\r\n\r\n        document.body.style.overflow =\r\n            \"hidden\";\r\n\r\n\r\n        \/*\r\n         * Focus the first still-empty customer information field,\r\n         * so the visitor can continue immediately with WhatsApp\/name\/email.\r\n         *\/\r\n\r\n        const firstEmptyField =\r\n            popup.querySelector(\r\n                \"#tshPhone:not([value]), #tshEmail:not([value]), #tshName:not([value])\"\r\n            );\r\n\r\n\r\n        const phone =\r\n            document.getElementById(\r\n                \"tshPhone\"\r\n            );\r\n\r\n\r\n        window.setTimeout(\r\n            function () {\r\n\r\n                if (\r\n                    phone &&\r\n                    typeof phone.focus ===\r\n                    \"function\"\r\n                ) {\r\n\r\n                    phone.focus();\r\n\r\n                }\r\n\r\n            },\r\n            50\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================================\r\n       SELECT ROOM\r\n       Prefills dates + room + guests + total price,\r\n       updates submit button, then opens booking popup.\r\n    ========================================================= *\/\r\n\r\n    resultsBody.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n            const button =\r\n                event.target.closest(\r\n                    \".tsh-select-room\"\r\n                );\r\n\r\n\r\n            if (\r\n                !button ||\r\n                button.disabled\r\n            ) {\r\n                return;\r\n            }\r\n\r\n\r\n            event.preventDefault();\r\n\r\n\r\n            const room =\r\n                button.getAttribute(\r\n                    \"data-room\"\r\n                );\r\n\r\n\r\n            const selection =\r\n                {\r\n                    room: room,\r\n                    guests: guests,\r\n                    checkin: checkin.value,\r\n                    checkout: checkout.value,\r\n                    total: Number(\r\n                        button.getAttribute(\r\n                            \"data-price\"\r\n                        )\r\n                    ) || 0\r\n                };\r\n\r\n\r\n            closeResultsModal();\r\n\r\n\r\n            openPrefilledBookingPopup(\r\n                selection,\r\n                button\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n})();\r\n\r\n<\/script>\r\n\r\n<script>\r\n(function () {\r\n    function initializeSurfStayOffers() {\r\n        const sections = document.querySelectorAll(\r\n            \".surf-stay-offers\"\r\n        );\r\n\r\n        sections.forEach(function (section) {\r\n            if (section.dataset.initialized === \"true\") {\r\n                return;\r\n            }\r\n\r\n            section.dataset.initialized = \"true\";\r\n\r\n            const cards = section.querySelectorAll(\r\n                \".surf-stay-card\"\r\n            );\r\n\r\n            cards.forEach(function (card) {\r\n                const toggle = card.querySelector(\r\n                    \".surf-stay-card-toggle\"\r\n                );\r\n\r\n                toggle.addEventListener(\"click\", function () {\r\n                    const wasOpen = card.classList.contains(\r\n                        \"is-open\"\r\n                    );\r\n\r\n                    cards.forEach(function (otherCard) {\r\n                        otherCard.classList.remove(\"is-open\");\r\n\r\n                        const otherToggle = otherCard.querySelector(\r\n                            \".surf-stay-card-toggle\"\r\n                        );\r\n\r\n                        if (otherToggle) {\r\n                            otherToggle.setAttribute(\r\n                                \"aria-expanded\",\r\n                                \"false\"\r\n                            );\r\n                        }\r\n                    });\r\n\r\n                    if (!wasOpen) {\r\n                        card.classList.add(\"is-open\");\r\n\r\n                        toggle.setAttribute(\r\n                            \"aria-expanded\",\r\n                            \"true\"\r\n                        );\r\n                    }\r\n                });\r\n            });\r\n        });\r\n    }\r\n\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\r\n            \"DOMContentLoaded\",\r\n            initializeSurfStayOffers\r\n        );\r\n    } else {\r\n        initializeSurfStayOffers();\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6770275 e-con-full e-flex e-con e-parent\" data-id=\"6770275\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-54d3064 elementor-widget elementor-widget-html\" data-id=\"54d3064\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link\r\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@500;600;700;800&family=Permanent+Marker&display=swap\"\r\n  rel=\"stylesheet\"\r\n>\r\n\r\n<style>\r\n\/* =====================================================\r\n   OFF-PEAK SURF DEAL\r\n===================================================== *\/\r\n\r\n.offpeak-deal {\r\n    --deal-cream: #000000;\r\n    --deal-dark: #111111;\r\n    --deal-white: #f8f0e7;\r\n    --deal-orange: #f05a24;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    overflow: hidden;\r\n    padding: 60px 0px;\r\n    background: var(--deal-cream);\r\n    font-family: \"DM Sans\", sans-serif;\r\n}\r\n\r\n.offpeak-deal,\r\n.offpeak-deal * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* Main image container *\/\r\n\r\n.offpeak-deal-inner {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 1730px;\r\n    min-height: 480px;\r\n    margin: 0 auto;\r\n    overflow: hidden;\r\n\r\n    background-image:\r\n        linear-gradient(\r\n            to bottom,\r\n            rgba(0, 0, 0, 0.04),\r\n            rgba(0, 0, 0, 0.22)\r\n        ),\r\n        url(\"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/08\/pexels-lucas-andreatta-300287035-13347685-scaled.jpg\");\r\n\r\n    background-size: cover;\r\n    background-position: center center;\r\n    background-repeat: no-repeat;\r\n\r\n    \/* Black shadow\/fade INSIDE the picture *\/\r\n    box-shadow:\r\n        inset 0 110px 95px -38px rgba(0, 0, 0, 1),\r\n        inset 0 65px 55px -20px rgba(0, 0, 0, 0.72),\r\n        inset 0 -110px 95px -38px rgba(0, 0, 0, 1),\r\n        inset 0 -65px 55px -20px rgba(0, 0, 0, 0.72);\r\n}\r\n\r\n\/* Darker lower overlay *\/\r\n\r\n.offpeak-deal-inner::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n\r\n    background:\r\n        linear-gradient(\r\n            to bottom,\r\n            transparent 0%,\r\n            transparent 52%,\r\n            rgba(0, 0, 0, 0.2) 68%,\r\n            rgba(0, 0, 0, 0.55) 100%\r\n        );\r\n\r\n    pointer-events: none;\r\n}\r\n\r\n\/* =====================================================\r\n   HANDWRITTEN TITLE\r\n===================================================== *\/\r\n\r\n.offpeak-handwritten {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 2%;\r\n    z-index: 5;\r\n\r\n    width: 63%;\r\n    margin: 0;\r\n\r\n    color: var(--deal-white)!important;\r\n    font-family: \"Permanent Marker\", cursive;\r\n    font-size: clamp(65px, 7.2vw, 125px);\r\n    font-weight: 400;\r\n    line-height: 0.88;\r\n    letter-spacing: 2px;\r\n    text-align: right;\r\n    text-transform: uppercase;\r\n\r\n    transform: rotate(1deg);\r\n}\r\n\r\n\/* =====================================================\r\n   MAIN OFFER\r\n===================================================== *\/\r\n\r\n.offpeak-main-message {\r\n    position: absolute;\r\n    top: 72px;\r\n    left: 3.7%;\r\n    z-index: 6;\r\n\r\n    width: 35%;\r\n    min-width: 430px;\r\n    padding-left: 25px;\r\n\r\n    border-left: 5px solid #000000;\r\n\r\n    color: #f1e8de!important;\r\n    font-size: clamp(32px, 3.2vw, 57px);\r\n    font-weight: 800;\r\n    line-height: 0.9;\r\n    letter-spacing: -1px;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.offpeak-main-message span {\r\n    display: block;\r\n}\r\n\r\n\/* =====================================================\r\n   BOTTOM CONTENT\r\n===================================================== *\/\r\n\r\n.offpeak-bottom-content {\r\n    position: absolute;\r\n    right: 3.5%;\r\n    bottom: 54px;\r\n    left: 3.7%;\r\n    z-index: 7;\r\n\r\n    display: grid;\r\n    grid-template-columns:\r\n        210px\r\n        minmax(290px, 390px)\r\n        auto;\r\n\r\n    gap: 32px;\r\n    align-items: end;\r\n}\r\n\r\n.offpeak-limited {\r\n    margin: 0;\r\n\r\n    color: var(--deal-white);\r\n    font-size: 17px;\r\n    font-weight: 700;\r\n    line-height: 1.05;\r\n}\r\n\r\n.offpeak-dates {\r\n    margin: 0;\r\n\r\n    color: var(--deal-white);\r\n    font-size: clamp(27px, 2.3vw, 39px);\r\n    font-weight: 800;\r\n    line-height: 0.95;\r\n    letter-spacing: -1px;\r\n    text-transform: uppercase;\r\n}\r\n.offpeak-links { \r\n    display: flex; \r\n    align-items: center; gap: 32px; \r\n    padding-bottom: 2px;\r\n    margin-left: 300px;\r\n}\r\n    \r\n.offpeak-link {\r\n    display: inline-block;\r\n    \r\n    background: none !important;\r\n    border: none !important;\r\n    padding: 0 !important;\r\n    margin: 0;\r\n\r\n    color: #f8f0e7 !important;\r\n\r\n    font-family: \"DM Sans\", sans-serif;\r\n    font-size: clamp(19px, 1.7vw, 28px);\r\n    font-weight: 800;\r\n    line-height: 1;\r\n\r\n    text-transform: uppercase;\r\n    text-decoration: underline !important;\r\n    text-underline-offset: 4px;\r\n\r\n    cursor: pointer;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    box-shadow: none !important;\r\n    border-radius: 0 !important;\r\n\r\n    transition: opacity .25s ease, transform .25s ease;\r\n}\r\n\r\n.offpeak-link:hover {\r\n    opacity: .8;\r\n    transform: translateY(-2px);\r\n}\r\n\/* =====================================================\r\n   EXCLUSIVE DISCOUNT POPUP\r\n===================================================== *\/\r\n\r\n.exclusive-popup-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 999999;\r\n\r\n    display: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    padding: 20px;\r\n\r\n    background: rgba(0, 0, 0, 0.56);\r\n\r\n    backdrop-filter: blur(2px);\r\n    -webkit-backdrop-filter: blur(2px);\r\n}\r\n\r\n.exclusive-popup-overlay.is-open {\r\n    display: flex;\r\n}\r\n\r\n.exclusive-popup {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    max-width: 650px;\r\n\r\n    padding: 40px 44px 42px;\r\n\r\n    background: #ffffff;\r\n    border-radius: 18px;\r\n\r\n    box-shadow:\r\n        0 25px 80px rgba(0, 0, 0, 0.28);\r\n\r\n    text-align: center;\r\n\r\n    animation: exclusivePopupIn 0.3s ease;\r\n}\r\n\r\n@keyframes exclusivePopupIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(15px) scale(0.97);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0) scale(1);\r\n    }\r\n}\r\n\r\n\/* Close button *\/\r\n\r\n.exclusive-popup-close {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 21px;\r\n    \r\n\r\n    width: 34px;\r\n    height: 34px;\r\n\r\n    padding: 0;\r\n\r\n    border: 0;\r\n    background: transparent;\r\n\r\n    color: #18313c;\r\n\r\n    font-family: Arial, sans-serif;\r\n    font-size: 30px;\r\n    font-weight: 400;\r\n    line-height: 1;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n\/* Popup title *\/\r\n\r\n.exclusive-popup-title {\r\n    margin: 0 0 26px;\r\n\r\n    color: #24373f;\r\n\r\n    font-size: clamp(32px, 4vw, 43px);\r\n    font-weight: 400;\r\n    line-height: 1.1;\r\n}\r\n\r\n.exclusive-popup-title .emoji {\r\n    display: inline-block;\r\n    margin-right: 10px;\r\n\r\n    font-size: 36px;\r\n    vertical-align: middle;\r\n}\r\n\r\n\/* Popup text *\/\r\n\r\n.exclusive-popup-text {\r\n    max-width: 540px;\r\n    margin: 0 auto 34px;\r\n\r\n    color: #5b6066;\r\n\r\n    font-size: 18px;\r\n    font-weight: 500;\r\n    line-height: 1.55;\r\n}\r\n\r\n\/* Promo box *\/\r\n\r\n.exclusive-code-box {\r\n    max-width: 560px;\r\n    margin: 0 auto 30px;\r\n\r\n    padding: 28px 24px 26px;\r\n\r\n    border: 2px dashed #ef5b00;\r\n    border-radius: 15px;\r\n\r\n    background: #fff7f1;\r\n}\r\n\r\n.exclusive-code-label {\r\n    display: block;\r\n    margin-bottom: 5px;\r\n\r\n    color: #767676;\r\n\r\n    font-size: 16px;\r\n    font-weight: 500;\r\n}\r\n\r\n.exclusive-code {\r\n    display: block;\r\n\r\n    color: #dc5500;\r\n\r\n    font-size: clamp(36px, 5vw, 46px);\r\n    font-weight: 800;\r\n    letter-spacing: 6px;\r\n    line-height: 1.1;\r\n}\r\n\r\n\/* Copy button *\/\r\n\r\n.exclusive-copy-button {\r\n    min-width: 225px;\r\n    min-height: 62px;\r\n\r\n    padding: 0 29px;\r\n\r\n    border: 0;\r\n    border-radius: 999px;\r\n\r\n    background: #ffd8c4;\r\n\r\n    color: #d95100;\r\n\r\n    font-family: inherit;\r\n    font-size: 17px;\r\n    font-weight: 800;\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n        transform 0.2s ease,\r\n        background-color 0.2s ease;\r\n}\r\n\r\n.exclusive-copy-button:hover {\r\n    transform: translateY(-2px);\r\n    background: #ffcbb0;\r\n}\r\n\r\n.exclusive-copy-button.is-copied {\r\n    background: #def3e3;\r\n    color: #24713a;\r\n}\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n    .offpeak-deal-inner {\r\n        min-height: 620px;\r\n    }\r\n\r\n    .offpeak-handwritten {\r\n        top: 20px;\r\n        right: 3%;\r\n\r\n        width: 60%;\r\n\r\n        font-size: 82px;\r\n    }\r\n\r\n    .offpeak-main-message {\r\n        top: 85px;\r\n        left: 4%;\r\n\r\n        width: 44%;\r\n        min-width: 0;\r\n\r\n        font-size: 41px;\r\n    }\r\n\r\n    .offpeak-bottom-content {\r\n        bottom: 45px;\r\n\r\n        grid-template-columns:\r\n            180px\r\n            minmax(250px, 320px)\r\n            1fr;\r\n\r\n        gap: 22px;\r\n    }\r\n\r\n    .offpeak-limited {\r\n        font-size: 15px;\r\n    }\r\n\r\n    .offpeak-dates {\r\n        font-size: 30px;\r\n    }\r\n\r\n    .offpeak-links {\r\n        gap: 20px;\r\n        margin: 0px;\r\n    }\r\n\r\n    .offpeak-link {\r\n        font-size: 21px;\r\n    }\r\n}\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .offpeak-deal {\r\n        padding: 10px;\r\n    }\r\n\r\n    .offpeak-deal-inner {\r\n        min-height: 720px;\r\n        background-position: 58% center;\r\n\r\n        box-shadow:\r\n            inset 0 80px 65px -28px rgba(0, 0, 0, 1),\r\n            inset 0 45px 38px -18px rgba(0, 0, 0, 0.68),\r\n            inset 0 -80px 65px -28px rgba(0, 0, 0, 1),\r\n            inset 0 -45px 38px -18px rgba(0, 0, 0, 0.68);\r\n    }\r\n\r\n    .offpeak-handwritten {\r\n        top: 22px;\r\n        right: 4%;\r\n\r\n        width: 91%;\r\n\r\n        font-size: 50px;\r\n        line-height: 0.92;\r\n        text-align: right;\r\n    }\r\n\r\n    .offpeak-main-message {\r\n        top: 150px;\r\n        left: 5%;\r\n\r\n        width: 82%;\r\n        min-width: 0;\r\n        padding-left: 16px;\r\n\r\n        border-left-width: 4px;\r\n\r\n        font-size: 38px;\r\n        line-height: 0.92;\r\n    }\r\n\r\n    .offpeak-bottom-content {\r\n        right: 5%;\r\n        bottom: 34px;\r\n        left: 5%;\r\n\r\n        grid-template-columns: 1fr;\r\n        gap: 20px;\r\n    }\r\n\r\n    .offpeak-limited {\r\n        width: 70%;\r\n\r\n        font-size: 16px;\r\n        line-height: 1.08;\r\n    }\r\n\r\n    .offpeak-dates {\r\n        font-size: 29px;\r\n        line-height: 1;\r\n    }\r\n\r\n    .offpeak-links {\r\n        flex-wrap: wrap;\r\n        gap: 20px;\r\n        margin: 0px;\r\n    }\r\n\r\n    .offpeak-link {\r\n        font-size: 20px;\r\n    }\r\n\r\n    .exclusive-popup-overlay {\r\n        padding: 14px;\r\n    }\r\n\r\n    .exclusive-popup {\r\n        padding:\r\n            35px 20px\r\n            30px;\r\n\r\n        border-radius: 16px;\r\n    }\r\n\r\n    .exclusive-popup-title {\r\n        padding: 0 25px;\r\n        margin-bottom: 22px;\r\n\r\n        font-size: 30px;\r\n    }\r\n\r\n    .exclusive-popup-title .emoji {\r\n        margin-right: 5px;\r\n        font-size: 30px;\r\n    }\r\n\r\n    .exclusive-popup-text {\r\n        margin-bottom: 27px;\r\n\r\n        font-size: 16px;\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .exclusive-code-box {\r\n        padding: 24px 15px;\r\n        margin-bottom: 26px;\r\n    }\r\n\r\n    .exclusive-code {\r\n        font-size: 34px;\r\n        letter-spacing: 4px;\r\n    }\r\n\r\n    .exclusive-copy-button {\r\n        width: 100%;\r\n        min-width: 0;\r\n    }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n\r\n    .offpeak-deal-inner {\r\n        min-height: 760px;\r\n    }\r\n\r\n    .offpeak-handwritten {\r\n        font-size: 43px;\r\n    }\r\n\r\n    .offpeak-main-message {\r\n        top: 145px;\r\n\r\n        width: 88%;\r\n\r\n        font-size: 32px;\r\n    }\r\n\r\n    .offpeak-bottom-content {\r\n        bottom: 28px;\r\n    }\r\n\r\n    .offpeak-dates {\r\n        font-size: 25px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- =====================================================\r\n     OFF-PEAK DEAL SECTION\r\n===================================================== -->\r\n\r\n<section class=\"offpeak-deal\">\r\n\r\n    <div class=\"offpeak-deal-inner\">\r\n\r\n        <!-- TITLE -->\r\n\r\n        <h2 class=\"offpeak-handwritten\">\r\n            Off-Peak Surf<br>\r\n            Deal\r\n        <\/h2>\r\n\r\n        <!-- MAIN OFFER -->\r\n\r\n        <div class=\"offpeak-main-message\">\r\n            <span>Catch the same<\/span>\r\n            <span>waves and<\/span>\r\n            <span>save 15% on<\/span>\r\n            <span>selected dates<\/span>\r\n        <\/div>\r\n\r\n        <!-- LOWER INFO -->\r\n\r\n        <div class=\"offpeak-bottom-content\">\r\n\r\n            <p class=\"offpeak-limited\">\r\n                Limited number of<br>\r\n                spots available each<br>\r\n                low-season period\r\n            <\/p>\r\n\r\n            <p class=\"offpeak-dates\">\r\n                \r\n                15 Oct \u2013 25 Oct<br>\r\n                12 Dec \u2013 01 Jan\r\n            <\/p>\r\n\r\n            <div class=\"offpeak-links\">\r\n\r\n                <a\r\n                    href=\"https:\/\/tamraghtsurfhouse.com\/booking\/\"\r\n                    class=\"offpeak-link\"\r\n                >\r\n                    Book now\r\n                <\/a>\r\n\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"offpeak-link\"\r\n                    id=\"openDiscountPopup\"\r\n                >\r\n                    Get Discount Code\r\n                <\/button>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- =====================================================\r\n     EXCLUSIVE DISCOUNT POPUP\r\n===================================================== -->\r\n\r\n<div\r\n    class=\"exclusive-popup-overlay\"\r\n    id=\"exclusiveDiscountPopup\"\r\n    aria-hidden=\"true\"\r\n>\r\n\r\n    <div\r\n        class=\"exclusive-popup\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"exclusivePopupTitle\"\r\n    >\r\n\r\n        <!-- CLOSE -->\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"exclusive-popup-close\"\r\n            id=\"exclusivePopupClose\"\r\n            aria-label=\"Close popup\"\r\n        >\r\n            \u00d7\r\n        <\/button>\r\n\r\n        <!-- TITLE -->\r\n\r\n        <h3\r\n            class=\"exclusive-popup-title\"\r\n            id=\"exclusivePopupTitle\"\r\n        >\r\n            <span class=\"emoji\">\ud83c\udf89<\/span>\r\n            Exclusive Discount\r\n        <\/h3>\r\n\r\n        <!-- DESCRIPTION -->\r\n\r\n        <p class=\"exclusive-popup-text\">\r\n            Use the promo code below when booking directly\r\n            through our website and enjoy an exclusive\r\n            discount on your stay.\r\n        <\/p>\r\n\r\n        <!-- PROMO CODE -->\r\n\r\n        <div class=\"exclusive-code-box\">\r\n\r\n            <span class=\"exclusive-code-label\">\r\n                Your Promo Code\r\n            <\/span>\r\n\r\n            <span\r\n                class=\"exclusive-code\"\r\n                id=\"exclusivePromoCode\"\r\n            >\r\n                SURF2026\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n        <!-- COPY -->\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"exclusive-copy-button\"\r\n            id=\"exclusiveCopyButton\"\r\n        >\r\n            Copy Promo Code\r\n        <\/button>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n\r\n    const openButton =\r\n        document.getElementById(\r\n            \"openDiscountPopup\"\r\n        );\r\n\r\n    const popup =\r\n        document.getElementById(\r\n            \"exclusiveDiscountPopup\"\r\n        );\r\n\r\n    const closeButton =\r\n        document.getElementById(\r\n            \"exclusivePopupClose\"\r\n        );\r\n\r\n    const copyButton =\r\n        document.getElementById(\r\n            \"exclusiveCopyButton\"\r\n        );\r\n\r\n    const promoCode =\r\n        document.getElementById(\r\n            \"exclusivePromoCode\"\r\n        );\r\n\r\n    if (\r\n        !openButton ||\r\n        !popup ||\r\n        !closeButton ||\r\n        !copyButton ||\r\n        !promoCode\r\n    ) {\r\n        return;\r\n    }\r\n\r\n    function openPopup() {\r\n\r\n        popup.classList.add(\r\n            \"is-open\"\r\n        );\r\n\r\n        popup.setAttribute(\r\n            \"aria-hidden\",\r\n            \"false\"\r\n        );\r\n\r\n        document.body.style.overflow =\r\n            \"hidden\";\r\n    }\r\n\r\n    function closePopup() {\r\n\r\n        popup.classList.remove(\r\n            \"is-open\"\r\n        );\r\n\r\n        popup.setAttribute(\r\n            \"aria-hidden\",\r\n            \"true\"\r\n        );\r\n\r\n        document.body.style.overflow =\r\n            \"\";\r\n    }\r\n\r\n    \/* Open *\/\r\n\r\n    openButton.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n            event.preventDefault();\r\n\r\n            openPopup();\r\n\r\n        }\r\n    );\r\n\r\n    \/* X close *\/\r\n\r\n    closeButton.addEventListener(\r\n        \"click\",\r\n        closePopup\r\n    );\r\n\r\n    \/* Click outside *\/\r\n\r\n    popup.addEventListener(\r\n        \"click\",\r\n        function (event) {\r\n\r\n            if (event.target === popup) {\r\n                closePopup();\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n    \/* ESC key *\/\r\n\r\n    document.addEventListener(\r\n        \"keydown\",\r\n        function (event) {\r\n\r\n            if (\r\n                event.key === \"Escape\" &&\r\n                popup.classList.contains(\r\n                    \"is-open\"\r\n                )\r\n            ) {\r\n                closePopup();\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n    \/* COPY PROMO CODE *\/\r\n\r\n    copyButton.addEventListener(\r\n        \"click\",\r\n        async function () {\r\n\r\n            const code =\r\n                promoCode.textContent.trim();\r\n\r\n            try {\r\n\r\n                await navigator.clipboard.writeText(\r\n                    code\r\n                );\r\n\r\n            } catch (error) {\r\n\r\n                const tempTextarea =\r\n                    document.createElement(\r\n                        \"textarea\"\r\n                    );\r\n\r\n                tempTextarea.value =\r\n                    code;\r\n\r\n                tempTextarea.style.position =\r\n                    \"fixed\";\r\n\r\n                tempTextarea.style.opacity =\r\n                    \"0\";\r\n\r\n                document.body.appendChild(\r\n                    tempTextarea\r\n                );\r\n\r\n                tempTextarea.select();\r\n\r\n                document.execCommand(\r\n                    \"copy\"\r\n                );\r\n\r\n                tempTextarea.remove();\r\n\r\n            }\r\n\r\n            copyButton.textContent =\r\n                \"\u2713 Promo Code Copied\";\r\n\r\n            copyButton.classList.add(\r\n                \"is-copied\"\r\n            );\r\n\r\n            window.setTimeout(\r\n                function () {\r\n\r\n                    copyButton.textContent =\r\n                        \"Copy Promo Code\";\r\n\r\n                    copyButton.classList.remove(\r\n                        \"is-copied\"\r\n                    );\r\n\r\n                },\r\n                2200\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4a54421 e-con-full e-flex e-con e-parent\" data-id=\"4a54421\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d619fb1 elementor-widget elementor-widget-html\" data-id=\"d619fb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css?family=Poppins:400,500,600,700,800\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   HOTEL SHOWCASE\r\n===================================================== *\/\r\n\r\n.hotel-showcase {\r\n    --dark: #111111;\r\n    --cream: #fbf5e8;\r\n    --soft: #f3ece8;\r\n    --green: #05a66a;\r\n    --border: #e6e0dc;\r\n\r\n    width: 100%;\r\n    background: #ffffff;\r\n    font-family: \"Poppins\", sans-serif;\r\n    color: var(--dark);\r\n    box-sizing: border-box;\r\n}\r\n\r\n.hotel-showcase * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PROMO BAR\r\n===================================================== *\/\r\n\r\n.hotel-promo-bar {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 14px;\r\n    min-height: 48px;\r\n    padding: 10px 20px;\r\n    background: var(--cream);\r\n    border-top: 1px solid #eee5d2;\r\n    border-bottom: 1px solid #eee5d2;\r\n    text-align: center;\r\n    font-size: 16px;\r\n}\r\n\r\n.hotel-promo-icon {\r\n    font-size: 22px;\r\n}\r\n\r\n.hotel-promo-title {\r\n    font-weight: 700;\r\n}\r\n\r\n.hotel-promo-link {\r\n    padding: 0;\r\n    border: 0;\r\n    background: transparent;\r\n    color: #111111;\r\n    font-family: inherit;\r\n    font-size: 16px;\r\n    text-decoration: underline;\r\n    cursor: pointer;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   GALLERY\r\n===================================================== *\/\r\n\r\n.hotel-gallery {\r\n    position: relative;\r\n    width: 100%;\r\n    padding: 20px 0;\r\n    overflow: hidden;\r\n    background: #000000;\r\n}\r\n\r\n.hotel-gallery-track {\r\n    display: grid;\r\n    grid-template-columns: 24% 52% 24%;\r\n    gap: 18px;\r\n    width: 100%;\r\n    align-items: stretch;\r\n}\r\n\r\n.hotel-gallery-side,\r\n.hotel-gallery-main {\r\n    position: relative;\r\n    overflow: hidden;\r\n    background: #000000;\r\n    border-radius: 8px;\r\n}\r\n\r\n.hotel-gallery-side {\r\n    height: 535px;\r\n}\r\n\r\n.hotel-gallery-main {\r\n    height: 535px;\r\n}\r\n\r\n.hotel-gallery img {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: block;\r\n    object-fit: cover;\r\n\r\n    transition:\r\n        opacity 0.4s ease,\r\n        transform 0.4s ease;\r\n}\r\n\r\n.hotel-gallery-main:hover img,\r\n.hotel-gallery-side:hover img {\r\n    transform: scale(1.03);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   INFO BAR\r\n===================================================== *\/\r\n\r\n.hotel-info-bar {\r\n    display: grid;\r\n    grid-template-columns: 1.3fr 1fr 1.2fr 1fr;\r\n    align-items: center;\r\n    gap: 20px;\r\n    padding: 18px 40px;\r\n    background: #ffffff;\r\n    border-top: 1px solid #eeeeee;\r\n    border-bottom: 1px solid #eeeeee;\r\n}\r\n\r\n.hotel-info-item {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    min-width: 0;\r\n    font-size: 15px;\r\n}\r\n\r\n.hotel-info-label {\r\n    font-weight: 700;\r\n    white-space: nowrap;\r\n}\r\n\r\n.hotel-info-value {\r\n    color: #111111;\r\n    text-decoration: underline;\r\n    overflow-wrap: anywhere;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   RATING\r\n===================================================== *\/\r\n\r\n.hotel-rating {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 7px;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.hotel-rating-logo {\r\n    font-size: 24px;\r\n}\r\n\r\n.hotel-rating-dots {\r\n    display: inline-flex;\r\n    gap: 4px;\r\n}\r\n\r\n.hotel-rating-dot {\r\n    width: 17px;\r\n    height: 17px;\r\n    border-radius: 50%;\r\n    background: var(--green);\r\n}\r\n\r\n.hotel-rating-dot-outline {\r\n    background: transparent;\r\n    border: 2px solid var(--green);\r\n}\r\n\r\n.hotel-rating-score {\r\n    font-weight: 700;\r\n}\r\n\r\n.hotel-divider-dot {\r\n    font-weight: 700;\r\n}\r\n\r\n.hotel-time {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    white-space: nowrap;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PROMO POPUP OVERLAY\r\n===================================================== *\/\r\n\r\n.hotel-popup-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 999999;\r\n\r\n    display: none;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    padding: 20px;\r\n\r\n    background: rgba(0, 0, 0, 0.62);\r\n}\r\n\r\n.hotel-popup-overlay.is-open {\r\n    display: flex;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   POPUP\r\n===================================================== *\/\r\n\r\n.hotel-popup {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    max-width: 520px;\r\n\r\n    padding: 38px 32px 32px;\r\n\r\n    background: #ffffff;\r\n\r\n    border-radius: 16px;\r\n\r\n    box-shadow:\r\n        0 24px 70px\r\n        rgba(0, 0, 0, 0.25);\r\n\r\n    text-align: center;\r\n}\r\n\r\n.hotel-popup-close {\r\n    position: absolute;\r\n\r\n    top: 12px;\r\n    right: 14px;\r\n\r\n    width: 36px;\r\n    height: 36px;\r\n\r\n    border: 0;\r\n    border-radius: 50%;\r\n\r\n    background: #f0f0f0;\r\n    color: #111111;\r\n\r\n    font-size: 22px;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n.hotel-popup h3 {\r\n    margin: 0 0 14px;\r\n    font-size: 28px;\r\n    line-height: 1.25;\r\n}\r\n\r\n.hotel-popup p {\r\n    margin: 0 0 18px;\r\n    color: #444444;\r\n    font-size: 16px;\r\n    line-height: 1.65;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   PROMO CODE\r\n===================================================== *\/\r\n\r\n.hotel-promo-code-box {\r\n    margin: 20px 0;\r\n    padding: 18px;\r\n\r\n    border: 2px dashed #d45700;\r\n    border-radius: 10px;\r\n\r\n    background: #fff7f1;\r\n}\r\n\r\n.hotel-promo-code-label {\r\n    display: block;\r\n    margin-bottom: 7px;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n}\r\n\r\n.hotel-promo-code {\r\n    display: block;\r\n    color: #d45700;\r\n    font-size: 28px;\r\n    font-weight: 800;\r\n    letter-spacing: 2px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   COPY BUTTON\r\n===================================================== *\/\r\n\r\n.hotel-copy-code {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    min-width: 150px;\r\n    min-height: 46px;\r\n\r\n    padding: 12px 22px;\r\n\r\n    border: 0;\r\n    border-radius: 6px;\r\n\r\n    background: #d45700;\r\n    color: #ffffff;\r\n\r\n    font-family: inherit;\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n\r\n    cursor: pointer;\r\n}\r\n\r\n.hotel-copy-code:hover {\r\n    background: #b74700;\r\n}\r\n\r\n.hotel-copy-message {\r\n    min-height: 24px;\r\n    margin-top: 12px;\r\n    color: #07874f;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n    .hotel-gallery-track {\r\n        grid-template-columns: 20% 60% 20%;\r\n        gap: 10px;\r\n    }\r\n\r\n    .hotel-gallery-main,\r\n    .hotel-gallery-side {\r\n        height: 430px;\r\n    }\r\n\r\n    .hotel-info-bar {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .hotel-promo-bar {\r\n        flex-wrap: wrap;\r\n        gap: 7px 12px;\r\n        font-size: 14px;\r\n    }\r\n\r\n    .hotel-gallery {\r\n        padding: 12px;\r\n    }\r\n\r\n    .hotel-gallery-track {\r\n        display: block;\r\n    }\r\n\r\n    .hotel-gallery-main {\r\n        height: 330px;\r\n        border-radius: 8px;\r\n    }\r\n\r\n    .hotel-gallery-side {\r\n        display: none;\r\n    }\r\n\r\n    .hotel-info-bar {\r\n        grid-template-columns: 1fr;\r\n        gap: 14px;\r\n        padding: 20px;\r\n    }\r\n\r\n    .hotel-info-item {\r\n        justify-content: flex-start;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .hotel-popup {\r\n        padding: 36px 22px 26px;\r\n    }\r\n\r\n    .hotel-popup h3 {\r\n        font-size: 24px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =====================================================\r\n     HOTEL SHOWCASE\r\n===================================================== -->\r\n\r\n<section class=\"hotel-showcase\">\r\n\r\n\r\n    <!-- =================================================\r\n         GALLERY\r\n    ================================================== -->\r\n\r\n    <div class=\"hotel-gallery\">\r\n\r\n        <div class=\"hotel-gallery-track\">\r\n\r\n\r\n            <!-- LEFT IMAGE -->\r\n\r\n            <div class=\"hotel-gallery-side\">\r\n\r\n                <img decoding=\"async\"\r\n                    id=\"hotelGalleryLeft\"\r\n                    src=\"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2025\/12\/Untitled-designgg.png\"\r\n                    alt=\"Tamraght Surf House surf experience\"\r\n                >\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- MAIN IMAGE -->\r\n\r\n            <div class=\"hotel-gallery-main\">\r\n\r\n                <img decoding=\"async\"\r\n                    id=\"hotelGalleryMain\"\r\n                    src=\"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2025\/12\/surf-guiding-lapoint-surfcamp-ericeira-portugal.jpg\"\r\n                    alt=\"Tamraght Surf House guests\"\r\n                >\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- RIGHT IMAGE -->\r\n\r\n            <div class=\"hotel-gallery-side\">\r\n\r\n                <img decoding=\"async\"\r\n                    id=\"hotelGalleryRight\"\r\n                    src=\"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/07\/eeqq.png\"\r\n                    alt=\"Tamraght Surf House beach experience\"\r\n                >\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =================================================\r\n         INFORMATION BAR\r\n    ================================================== -->\r\n\r\n    <div class=\"hotel-info-bar\">\r\n\r\n\r\n        <!-- RATING -->\r\n\r\n        <div class=\"hotel-info-item\">\r\n\r\n            <div class=\"hotel-rating\">\r\n\r\n                <span class=\"hotel-rating-logo\">\r\n                    \u25c9\r\n                <\/span>\r\n\r\n\r\n                <span class=\"hotel-rating-dots\">\r\n\r\n                    <span class=\"hotel-rating-dot\"><\/span>\r\n\r\n                    <span class=\"hotel-rating-dot\"><\/span>\r\n\r\n                    <span class=\"hotel-rating-dot\"><\/span>\r\n\r\n                    <span class=\"hotel-rating-dot\"><\/span>\r\n\r\n                    <span\r\n                        class=\"hotel-rating-dot hotel-rating-dot-outline\"\r\n                    ><\/span>\r\n\r\n                <\/span>\r\n\r\n\r\n                <span class=\"hotel-rating-score\">\r\n                    4.9 (142)\r\n                <\/span>\r\n\r\n\r\n                <span class=\"hotel-divider-dot\">\r\n                    \u00b7\r\n                <\/span>\r\n\r\n\r\n                <a\r\n                    href=\"https:\/\/maps.app.goo.gl\/WEjiWcuESFHdvYdj8\"\r\n                    target=\"_blank\"\r\n                    rel=\"noopener\"\r\n                    class=\"hotel-info-value\"\r\n                >\r\n                    Read Reviews\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- PHONE -->\r\n\r\n        <div class=\"hotel-info-item\">\r\n\r\n            <span class=\"hotel-info-label\">\r\n                Call\r\n            <\/span>\r\n\r\n            <a\r\n                href=\"tel:+212629679664\"\r\n                class=\"hotel-info-value\"\r\n            >\r\n                +212 629 67 9664\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- EMAIL -->\r\n\r\n        <div class=\"hotel-info-item\">\r\n\r\n            <span class=\"hotel-info-label\">\r\n                Email\r\n            <\/span>\r\n\r\n            <a\r\n                href=\"mailto:contact@tamraghtsurfhouse.com\"\r\n                class=\"hotel-info-value\"\r\n            >\r\n                contact@tamraghtsurfhouse.com\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CHECK IN \/ CHECK OUT -->\r\n\r\n        <div class=\"hotel-info-item hotel-time\">\r\n\r\n            <span class=\"hotel-info-label\">\r\n                Check-in\r\n            <\/span>\r\n\r\n            <span>\r\n                3 pm\r\n            <\/span>\r\n\r\n            <span>\r\n                \u2192\r\n            <\/span>\r\n\r\n            <span class=\"hotel-info-label\">\r\n                Check-out\r\n            <\/span>\r\n\r\n            <span>\r\n                12 pm\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =====================================================\r\n     PROMO POPUP\r\n===================================================== -->\r\n\r\n<div\r\n    class=\"hotel-popup-overlay\"\r\n    id=\"hotelPromoPopup\"\r\n    aria-hidden=\"true\"\r\n>\r\n\r\n    <div\r\n        class=\"hotel-popup\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"hotelPromoTitle\"\r\n    >\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"hotel-popup-close\"\r\n            id=\"closeHotelPromo\"\r\n            aria-label=\"Close popup\"\r\n        >\r\n            \u00d7\r\n        <\/button>\r\n\r\n\r\n        <h3 id=\"hotelPromoTitle\">\r\n            Festive Season Special Offer\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n            Book your stay directly and enjoy a special seasonal discount.\r\n            Enter the following promo code during checkout.\r\n        <\/p>\r\n\r\n\r\n        <div class=\"hotel-promo-code-box\">\r\n\r\n            <span class=\"hotel-promo-code-label\">\r\n                Your promo code\r\n            <\/span>\r\n\r\n            <strong\r\n                class=\"hotel-promo-code\"\r\n                id=\"hotelPromoCode\"\r\n            >\r\n                FESTIVE20\r\n            <\/strong>\r\n\r\n        <\/div>\r\n\r\n\r\n        <button\r\n            type=\"button\"\r\n            class=\"hotel-copy-code\"\r\n            id=\"copyHotelPromo\"\r\n        >\r\n            Copy promo code\r\n        <\/button>\r\n\r\n\r\n        <div\r\n            class=\"hotel-copy-message\"\r\n            id=\"hotelCopyMessage\"\r\n        ><\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n\r\n    \/* =====================================================\r\n       GALLERY IMAGES\r\n    ===================================================== *\/\r\n\r\n    const galleryImages = [\r\n\r\n        \"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2025\/12\/Untitled-designgg.png\",\r\n\r\n        \"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2025\/12\/surf-guiding-lapoint-surfcamp-ericeira-portugal.jpg\",\r\n\r\n        \"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/07\/eeqq.png\",\r\n\r\n        \"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-06-15-at-23.08.09-3.jpeg\",\r\n\r\n        \"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/07\/rrrd.png\",\r\n\r\n        \"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2026\/07\/wd.png\"\r\n\r\n    ];\r\n\r\n\r\n    \/* =====================================================\r\n       STARTING IMAGE\r\n    ===================================================== *\/\r\n\r\n    let currentIndex = 1;\r\n\r\n\r\n    const leftImage =\r\n        document.getElementById(\r\n            \"hotelGalleryLeft\"\r\n        );\r\n\r\n\r\n    const mainImage =\r\n        document.getElementById(\r\n            \"hotelGalleryMain\"\r\n        );\r\n\r\n\r\n    const rightImage =\r\n        document.getElementById(\r\n            \"hotelGalleryRight\"\r\n        );\r\n\r\n\r\n    \/* =====================================================\r\n       PREVIOUS IMAGE INDEX\r\n    ===================================================== *\/\r\n\r\n    function getPreviousIndex(index) {\r\n\r\n        return (\r\n            index - 1 + galleryImages.length\r\n        ) % galleryImages.length;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       NEXT IMAGE INDEX\r\n    ===================================================== *\/\r\n\r\n    function getNextIndex(index) {\r\n\r\n        return (\r\n            index + 1\r\n        ) % galleryImages.length;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       UPDATE ALL THREE IMAGES\r\n    ===================================================== *\/\r\n\r\n    function updateGallery() {\r\n\r\n        if (\r\n            !leftImage ||\r\n            !mainImage ||\r\n            !rightImage\r\n        ) {\r\n            return;\r\n        }\r\n\r\n\r\n        const previousIndex =\r\n            getPreviousIndex(\r\n                currentIndex\r\n            );\r\n\r\n\r\n        const nextIndex =\r\n            getNextIndex(\r\n                currentIndex\r\n            );\r\n\r\n\r\n        leftImage.src =\r\n            galleryImages[\r\n                previousIndex\r\n            ];\r\n\r\n\r\n        mainImage.src =\r\n            galleryImages[\r\n                currentIndex\r\n            ];\r\n\r\n\r\n        rightImage.src =\r\n            galleryImages[\r\n                nextIndex\r\n            ];\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       AUTOMATIC NEXT IMAGE\r\n    ===================================================== *\/\r\n\r\n    function nextGalleryImage() {\r\n\r\n        currentIndex =\r\n            getNextIndex(\r\n                currentIndex\r\n            );\r\n\r\n\r\n        updateGallery();\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       START GALLERY\r\n    ===================================================== *\/\r\n\r\n    updateGallery();\r\n\r\n\r\n    \/*\r\n       Automatically change images\r\n       every 5 seconds\r\n    *\/\r\n\r\n    setInterval(\r\n        nextGalleryImage,\r\n        5000\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       PROMO POPUP\r\n    ===================================================== *\/\r\n\r\n    const popup =\r\n        document.getElementById(\r\n            \"hotelPromoPopup\"\r\n        );\r\n\r\n\r\n    const openPopup =\r\n        document.getElementById(\r\n            \"openHotelPromo\"\r\n        );\r\n\r\n\r\n    const closePopup =\r\n        document.getElementById(\r\n            \"closeHotelPromo\"\r\n        );\r\n\r\n\r\n    function showPopup() {\r\n\r\n        if (!popup) {\r\n            return;\r\n        }\r\n\r\n\r\n        popup.classList.add(\r\n            \"is-open\"\r\n        );\r\n\r\n\r\n        popup.setAttribute(\r\n            \"aria-hidden\",\r\n            \"false\"\r\n        );\r\n\r\n\r\n        document.body.style.overflow =\r\n            \"hidden\";\r\n\r\n    }\r\n\r\n\r\n    function hidePopup() {\r\n\r\n        if (!popup) {\r\n            return;\r\n        }\r\n\r\n\r\n        popup.classList.remove(\r\n            \"is-open\"\r\n        );\r\n\r\n\r\n        popup.setAttribute(\r\n            \"aria-hidden\",\r\n            \"true\"\r\n        );\r\n\r\n\r\n        document.body.style.overflow =\r\n            \"\";\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       OPEN POPUP\r\n    ===================================================== *\/\r\n\r\n    if (openPopup) {\r\n\r\n        openPopup.addEventListener(\r\n            \"click\",\r\n            showPopup\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       CLOSE POPUP\r\n    ===================================================== *\/\r\n\r\n    if (closePopup) {\r\n\r\n        closePopup.addEventListener(\r\n            \"click\",\r\n            hidePopup\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       CLICK OUTSIDE POPUP TO CLOSE\r\n    ===================================================== *\/\r\n\r\n    if (popup) {\r\n\r\n        popup.addEventListener(\r\n            \"click\",\r\n            function (event) {\r\n\r\n                if (\r\n                    event.target === popup\r\n                ) {\r\n\r\n                    hidePopup();\r\n\r\n                }\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       ESC KEY CLOSE\r\n    ===================================================== *\/\r\n\r\n    document.addEventListener(\r\n        \"keydown\",\r\n        function (event) {\r\n\r\n            if (\r\n                event.key === \"Escape\"\r\n            ) {\r\n\r\n                hidePopup();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       COPY PROMO CODE\r\n    ===================================================== *\/\r\n\r\n    const copyButton =\r\n        document.getElementById(\r\n            \"copyHotelPromo\"\r\n        );\r\n\r\n\r\n    if (copyButton) {\r\n\r\n        copyButton.addEventListener(\r\n            \"click\",\r\n            function () {\r\n\r\n\r\n                const promoElement =\r\n                    document.getElementById(\r\n                        \"hotelPromoCode\"\r\n                    );\r\n\r\n\r\n                const message =\r\n                    document.getElementById(\r\n                        \"hotelCopyMessage\"\r\n                    );\r\n\r\n\r\n                if (\r\n                    !promoElement ||\r\n                    !message\r\n                ) {\r\n                    return;\r\n                }\r\n\r\n\r\n                const promoCode =\r\n                    promoElement\r\n                        .textContent\r\n                        .trim();\r\n\r\n\r\n                if (\r\n                    navigator.clipboard\r\n                ) {\r\n\r\n                    navigator.clipboard\r\n                        .writeText(\r\n                            promoCode\r\n                        )\r\n                        .then(\r\n                            function () {\r\n\r\n                                message.textContent =\r\n                                    \"Promo code copied successfully!\";\r\n\r\n                            }\r\n                        )\r\n                        .catch(\r\n                            function () {\r\n\r\n                                message.textContent =\r\n                                    \"Please copy the code manually: \"\r\n                                    + promoCode;\r\n\r\n                            }\r\n                        );\r\n\r\n                } else {\r\n\r\n                    message.textContent =\r\n                        \"Please copy the code manually: \"\r\n                        + promoCode;\r\n\r\n                }\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2276450 e-con-full e-flex e-con e-parent\" data-id=\"2276450\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-943cc0c elementor-widget elementor-widget-html\" data-id=\"943cc0c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* =====================================================\r\n   TAMRAGHT SURF HOUSE - GOOGLE REVIEWS\r\n   AUTOMATIC SLIDER - NO ARROWS\r\n===================================================== *\/\r\n\r\n.tsh-reviews,\r\n.tsh-reviews * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.tsh-reviews {\r\n    width: 100%;\r\n    padding: 32px 40px;\r\n    background: #ffffff;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    color: #111;\r\n}\r\n\r\n.tsh-reviews-inner {\r\n    width: 100%;\r\n    max-width: 1800px;\r\n    margin: 0 auto;\r\n\r\n    display: grid;\r\n    grid-template-columns: 270px minmax(0, 1fr);\r\n    gap: 30px;\r\n    align-items: center;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LEFT RATING\r\n===================================================== *\/\r\n\r\n.tsh-review-score {\r\n    text-align: center;\r\n    padding: 10px 15px;\r\n}\r\n\r\n.tsh-review-score-title {\r\n    margin: 0 0 12px;\r\n    font-size: 25px;\r\n    font-weight: 800;\r\n    color: #111;\r\n}\r\n\r\n.tsh-review-score-stars {\r\n    color: #f5b400;\r\n    font-size: 38px;\r\n    line-height: 1;\r\n    letter-spacing: 1px;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.tsh-review-count {\r\n    font-size: 17px;\r\n    margin-bottom: 7px;\r\n    color: #111;\r\n}\r\n\r\n.tsh-review-count strong {\r\n    font-weight: 800;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   GOOGLE LOGO\r\n===================================================== *\/\r\n\r\n.tsh-google-logo {\r\n    margin: 5px 0 18px;\r\n    font-size: 0;\r\n}\r\n\r\n.tsh-google-logo span {\r\n    font-size: 39px;\r\n    font-weight: 600;\r\n    letter-spacing: -4px;\r\n}\r\n\r\n.tsh-google-g1 { color: #4285f4; }\r\n.tsh-google-o1 { color: #ea4335; }\r\n.tsh-google-o2 { color: #fbbc05; }\r\n.tsh-google-g2 { color: #4285f4; }\r\n.tsh-google-l  { color: #34a853; }\r\n.tsh-google-e  { color: #ea4335; }\r\n\r\n\r\n\/* =====================================================\r\n   READ ALL REVIEWS BUTTON\r\n===================================================== *\/\r\n\r\n.tsh-all-reviews-btn {\r\n    display: inline-block;\r\n\r\n    padding: 10px 18px;\r\n\r\n    background: transparent !important;\r\n    color: #111 !important;\r\n\r\n    border: 1px solid #111 !important;\r\n    border-radius: 6px;\r\n\r\n    text-decoration: none !important;\r\n\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n\r\n    cursor: pointer;\r\n    box-shadow: none !important;\r\n}\r\n\r\n.tsh-all-reviews-btn:hover,\r\n.tsh-all-reviews-btn:focus,\r\n.tsh-all-reviews-btn:active {\r\n    background: transparent !important;\r\n    color: #111 !important;\r\n    border-color: #111 !important;\r\n    text-decoration: none !important;\r\n    box-shadow: none !important;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   SLIDER\r\n===================================================== *\/\r\n\r\n.tsh-review-slider {\r\n    position: relative;\r\n    min-width: 0;\r\n}\r\n\r\n.tsh-review-viewport {\r\n    width: 100%;\r\n    overflow: hidden;\r\n}\r\n\r\n.tsh-review-track {\r\n    display: flex;\r\n    gap: 20px;\r\n\r\n    transition: transform .45s ease;\r\n    will-change: transform;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   REVIEW CARDS\r\n===================================================== *\/\r\n\r\n.tsh-review-card {\r\n    flex: 0 0 calc((100% - 40px) \/ 3);\r\n    min-width: 0;\r\n\r\n    height: 265px;\r\n\r\n    padding: 24px 25px;\r\n\r\n    background: #fff;\r\n\r\n    border-radius: 16px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   REVIEW HEADER\r\n===================================================== *\/\r\n\r\n.tsh-review-header {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    position: relative;\r\n\r\n    margin-bottom: 14px;\r\n}\r\n\r\n\r\n\/* INITIAL CIRCLE *\/\r\n\r\n.tsh-review-initial {\r\n    width: 50px;\r\n    height: 50px;\r\n\r\n    flex: 0 0 50px;\r\n\r\n    margin-right: 14px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #f15a2b;\r\n    color: #fff;\r\n\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n.tsh-review-person {\r\n    min-width: 0;\r\n    padding-right: 35px;\r\n}\r\n\r\n.tsh-review-name {\r\n    margin-bottom: 3px;\r\n\r\n    font-size: 17px;\r\n    font-weight: 700;\r\n\r\n    color: #111;\r\n\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n.tsh-review-date {\r\n    color: #666;\r\n    font-size: 14px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   GOOGLE G\r\n===================================================== *\/\r\n\r\n.tsh-review-google {\r\n    position: absolute;\r\n\r\n    top: 3px;\r\n    right: 0;\r\n\r\n    font-size: 23px;\r\n    font-weight: 800;\r\n\r\n    color: #4285f4;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   STARS\r\n===================================================== *\/\r\n\r\n.tsh-card-stars {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    margin-bottom: 12px;\r\n\r\n    color: #f5b400;\r\n\r\n    font-size: 23px;\r\n    line-height: 1;\r\n}\r\n\r\n.tsh-verified {\r\n    width: 17px;\r\n    height: 17px;\r\n\r\n    margin-left: 6px;\r\n\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #4285f4;\r\n    color: #fff;\r\n\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   REVIEW TEXT\r\n===================================================== *\/\r\n\r\n.tsh-review-text {\r\n    margin: 0;\r\n\r\n    color: #111;\r\n\r\n    font-size: 16px;\r\n    line-height: 1.45;\r\n\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 4;\r\n    -webkit-box-orient: vertical;\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media (max-width: 1150px) {\r\n\r\n    .tsh-reviews-inner {\r\n        grid-template-columns: 220px minmax(0, 1fr);\r\n    }\r\n\r\n    .tsh-review-card {\r\n        flex: 0 0 calc((100% - 20px) \/ 2);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .tsh-reviews {\r\n        padding: 30px 18px;\r\n    }\r\n\r\n    .tsh-reviews-inner {\r\n        display: block;\r\n    }\r\n\r\n    .tsh-review-score {\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .tsh-review-card {\r\n        flex: 0 0 100%;\r\n        height: 270px;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n<!-- =====================================================\r\n     GOOGLE REVIEWS SECTION\r\n===================================================== -->\r\n\r\n<section class=\"tsh-reviews\">\r\n\r\n    <div class=\"tsh-reviews-inner\">\r\n\r\n\r\n        <!-- =================================================\r\n             LEFT RATING\r\n        ================================================== -->\r\n\r\n        <div class=\"tsh-review-score\">\r\n\r\n            <h3 class=\"tsh-review-score-title\">\r\n                EXCELLENT\r\n            <\/h3>\r\n\r\n            <div class=\"tsh-review-score-stars\">\r\n                \u2605\u2605\u2605\u2605\u2605\r\n            <\/div>\r\n\r\n            <div class=\"tsh-review-count\">\r\n                Based on <strong>142 reviews<\/strong>\r\n            <\/div>\r\n\r\n\r\n            <!-- GOOGLE LOGO -->\r\n\r\n            <div\r\n                class=\"tsh-google-logo\"\r\n                aria-label=\"Google\"\r\n            >\r\n                <span class=\"tsh-google-g1\">G<\/span>\r\n                <span class=\"tsh-google-o1\">o<\/span>\r\n                <span class=\"tsh-google-o2\">o<\/span>\r\n                <span class=\"tsh-google-g2\">g<\/span>\r\n                <span class=\"tsh-google-l\">l<\/span>\r\n                <span class=\"tsh-google-e\">e<\/span>\r\n            <\/div>\r\n\r\n\r\n            <!-- GOOGLE REVIEWS LINK -->\r\n\r\n            <a\r\n                href=\"https:\/\/share.google\/0R5c5BV1xjTKTXUAV\"\r\n                target=\"_blank\"\r\n                rel=\"noopener\"\r\n                class=\"tsh-all-reviews-btn\"\r\n            >\r\n                Read All Reviews\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             REVIEWS AUTOMATIC SLIDER\r\n        ================================================== -->\r\n\r\n        <div class=\"tsh-review-slider\">\r\n\r\n            <div class=\"tsh-review-viewport\">\r\n\r\n                <div\r\n                    class=\"tsh-review-track\"\r\n                    id=\"tshReviewTrack\"\r\n                >\r\n\r\n\r\n                    <!-- =================================================\r\n                         REVIEW 1\r\n                    ================================================== -->\r\n\r\n                    <article class=\"tsh-review-card\">\r\n\r\n                        <div class=\"tsh-review-header\">\r\n\r\n                            <div class=\"tsh-review-initial\">\r\n                                S\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-person\">\r\n\r\n                                <div class=\"tsh-review-name\">\r\n                                    surinder sekhon\r\n                                <\/div>\r\n\r\n                                <div class=\"tsh-review-date\">\r\n                                    2 weeks ago\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-google\">\r\n                                G\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <div class=\"tsh-card-stars\">\r\n\r\n                            \u2605\u2605\u2605\u2605\u2605\r\n\r\n                            <span class=\"tsh-verified\">\r\n                                \u2713\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <p class=\"tsh-review-text\">\r\n                            I've now been here twice in the last\r\n                            4 months and will visit once again\r\n                            before the year is up. I found peace,\r\n                            happiness, and an amazing place to\r\n                            stay and learn to surf.\r\n                        <\/p>\r\n\r\n                    <\/article>\r\n\r\n\r\n\r\n                    <!-- =================================================\r\n                         REVIEW 2\r\n                    ================================================== -->\r\n\r\n                    <article class=\"tsh-review-card\">\r\n\r\n                        <div class=\"tsh-review-header\">\r\n\r\n                            <div class=\"tsh-review-initial\">\r\n                                F\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-person\">\r\n\r\n                                <div class=\"tsh-review-name\">\r\n                                    Francesca Faulcon\r\n                                <\/div>\r\n\r\n                                <div class=\"tsh-review-date\">\r\n                                    2 weeks ago\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-google\">\r\n                                G\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <div class=\"tsh-card-stars\">\r\n\r\n                            \u2605\u2605\u2605\u2605\u2605\r\n\r\n                            <span class=\"tsh-verified\">\r\n                                \u2713\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <p class=\"tsh-review-text\">\r\n                            Ideal location, spacious and pleasant\r\n                            place. The meals are delicious and\r\n                            varied. Perfect for relaxing and\r\n                            enjoying the different activities\r\n                            on offer.\r\n                        <\/p>\r\n\r\n                    <\/article>\r\n\r\n\r\n\r\n                    <!-- =================================================\r\n                         REVIEW 3\r\n                    ================================================== -->\r\n\r\n                    <article class=\"tsh-review-card\">\r\n\r\n                        <div class=\"tsh-review-header\">\r\n\r\n                            <div class=\"tsh-review-initial\">\r\n                                S\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-person\">\r\n\r\n                                <div class=\"tsh-review-name\">\r\n                                    Sophie De Greef\r\n                                <\/div>\r\n\r\n                                <div class=\"tsh-review-date\">\r\n                                    2 weeks ago\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-google\">\r\n                                G\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <div class=\"tsh-card-stars\">\r\n\r\n                            \u2605\u2605\u2605\u2605\u2605\r\n\r\n                            <span class=\"tsh-verified\">\r\n                                \u2713\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <p class=\"tsh-review-text\">\r\n                            Amazing stay! Great team: managers,\r\n                            cooks, volunteers, surf coaches and\r\n                            drivers. The place was spotlessly\r\n                            clean, and the meals were delicious\r\n                            and generous.\r\n                        <\/p>\r\n\r\n                    <\/article>\r\n\r\n\r\n\r\n                    <!-- =================================================\r\n                         REVIEW 4\r\n                    ================================================== -->\r\n\r\n                    <article class=\"tsh-review-card\">\r\n\r\n                        <div class=\"tsh-review-header\">\r\n\r\n                            <div class=\"tsh-review-initial\">\r\n                                E\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-person\">\r\n\r\n                                <div class=\"tsh-review-name\">\r\n                                    Emilie Disner\r\n                                <\/div>\r\n\r\n                                <div class=\"tsh-review-date\">\r\n                                    3 weeks ago\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-google\">\r\n                                G\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <div class=\"tsh-card-stars\">\r\n\r\n                            \u2605\u2605\u2605\u2605\u2605\r\n\r\n                            <span class=\"tsh-verified\">\r\n                                \u2713\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <p class=\"tsh-review-text\">\r\n                            Even before arriving, I was impressed\r\n                            by how well organized Tamraght Surf\r\n                            House was. I received clear, quick\r\n                            and precise answers to all my\r\n                            questions.\r\n                        <\/p>\r\n\r\n                    <\/article>\r\n\r\n\r\n\r\n                    <!-- =================================================\r\n                         REVIEW 5\r\n                    ================================================== -->\r\n\r\n                    <article class=\"tsh-review-card\">\r\n\r\n                        <div class=\"tsh-review-header\">\r\n\r\n                            <div class=\"tsh-review-initial\">\r\n                                M\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-person\">\r\n\r\n                                <div class=\"tsh-review-name\">\r\n                                    Marie Mc\r\n                                <\/div>\r\n\r\n                                <div class=\"tsh-review-date\">\r\n                                    1 month ago\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                            <div class=\"tsh-review-google\">\r\n                                G\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <div class=\"tsh-card-stars\">\r\n\r\n                            \u2605\u2605\u2605\u2605\u2605\r\n\r\n                            <span class=\"tsh-verified\">\r\n                                \u2713\r\n                            <\/span>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <p class=\"tsh-review-text\">\r\n                            I had an incredible week! From the\r\n                            moment I arrived, I felt at home\r\n                            thanks to an extremely welcoming,\r\n                            caring team that was always in a\r\n                            good mood.\r\n                        <\/p>\r\n\r\n                    <\/article>\r\n\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n(function () {\r\n\r\n    const track =\r\n        document.getElementById(\r\n            \"tshReviewTrack\"\r\n        );\r\n\r\n    if (!track) {\r\n        return;\r\n    }\r\n\r\n\r\n    let index = 0;\r\n\r\n\r\n    \/* =====================================================\r\n       NUMBER OF CARDS VISIBLE\r\n    ===================================================== *\/\r\n\r\n    function cardsVisible() {\r\n\r\n        if (window.innerWidth <= 767) {\r\n            return 1;\r\n        }\r\n\r\n        if (window.innerWidth <= 1150) {\r\n            return 2;\r\n        }\r\n\r\n        return 3;\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       GET MAX SLIDER POSITION\r\n    ===================================================== *\/\r\n\r\n    function getMaxIndex() {\r\n\r\n        const total =\r\n            track.querySelectorAll(\r\n                \".tsh-review-card\"\r\n            ).length;\r\n\r\n        return Math.max(\r\n            0,\r\n            total - cardsVisible()\r\n        );\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       UPDATE SLIDER POSITION\r\n    ===================================================== *\/\r\n\r\n    function updateSlider() {\r\n\r\n        const cards =\r\n            track.querySelectorAll(\r\n                \".tsh-review-card\"\r\n            );\r\n\r\n        if (!cards.length) {\r\n            return;\r\n        }\r\n\r\n\r\n        const maxIndex =\r\n            getMaxIndex();\r\n\r\n\r\n        if (index > maxIndex) {\r\n            index = 0;\r\n        }\r\n\r\n\r\n        const cardWidth =\r\n            cards[0]\r\n                .getBoundingClientRect()\r\n                .width;\r\n\r\n\r\n        const gap =\r\n            parseFloat(\r\n                window\r\n                    .getComputedStyle(track)\r\n                    .gap\r\n            ) || 0;\r\n\r\n\r\n        const distance =\r\n            index *\r\n            (cardWidth + gap);\r\n\r\n\r\n        track.style.transform =\r\n            \"translateX(-\" +\r\n            distance +\r\n            \"px)\";\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       AUTOMATIC NEXT REVIEW\r\n    ===================================================== *\/\r\n\r\n    function nextSlide() {\r\n\r\n        const maxIndex =\r\n            getMaxIndex();\r\n\r\n\r\n        if (maxIndex === 0) {\r\n            index = 0;\r\n            updateSlider();\r\n            return;\r\n        }\r\n\r\n\r\n        if (index < maxIndex) {\r\n\r\n            index++;\r\n\r\n        } else {\r\n\r\n            index = 0;\r\n\r\n        }\r\n\r\n\r\n        updateSlider();\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       WINDOW RESIZE\r\n    ===================================================== *\/\r\n\r\n    let resizeTimer;\r\n\r\n    window.addEventListener(\r\n        \"resize\",\r\n        function () {\r\n\r\n            clearTimeout(resizeTimer);\r\n\r\n            resizeTimer =\r\n                setTimeout(\r\n                    function () {\r\n\r\n                        index = 0;\r\n\r\n                        updateSlider();\r\n\r\n                    },\r\n                    150\r\n                );\r\n\r\n        }\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       AUTOMATIC SLIDE\r\n       EVERY 6 SECONDS\r\n    ===================================================== *\/\r\n\r\n    setInterval(\r\n        nextSlide,\r\n        6000\r\n    );\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       START\r\n    ===================================================== *\/\r\n\r\n    updateSlider();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-559bae1 e-con-full e-flex e-con e-parent\" data-id=\"559bae1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f830255 elementor-widget elementor-widget-html\" data-id=\"f830255\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"tsh-cam-hero\">\r\n\r\n    <div class=\"tsh-cam-inner\">\r\n\r\n\r\n        <!-- =====================================================\r\n             LEFT - TAMRAGHT REGION CAMERA\r\n        ====================================================== -->\r\n\r\n        <div class=\"tsh-cam-video-wrap\">\r\n\r\n            <video\r\n                id=\"tshParadisCam\"\r\n                class=\"tsh-cam-video\"\r\n                autoplay\r\n                muted\r\n                loop\r\n                playsinline\r\n                preload=\"metadata\"\r\n            ><\/video>\r\n\r\n\r\n            <!-- LOADING -->\r\n\r\n            <div\r\n                class=\"tsh-cam-loading\"\r\n                id=\"tshCamLoading\"\r\n            >\r\n                Loading latest camera...\r\n            <\/div>\r\n\r\n\r\n            <!-- LIVE BADGE -->\r\n\r\n            <div class=\"tsh-cam-live\">\r\n\r\n                <span class=\"tsh-cam-live-dot\"><\/span>\r\n\r\n                LIVE CAM\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- LOCATION -->\r\n\r\n            <div class=\"tsh-cam-location\">\r\n\r\n                <div class=\"tsh-cam-location-bar\"><\/div>\r\n\r\n                <div>\r\n\r\n                    <h3>\r\n                        Tamraght Region\r\n                    <\/h3>\r\n\r\n                    <strong>\r\n                        Taghazout Bay, Morocco\r\n                    <\/strong>\r\n\r\n                    <div class=\"tsh-cam-weather\">\r\n\r\n                        <span id=\"tshCamStatus\">\r\n                            Finding latest view...\r\n                        <\/span>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =====================================================\r\n             RIGHT CONTENT\r\n        ====================================================== -->\r\n\r\n        <div class=\"tsh-cam-content\">\r\n\r\n\r\n            <!-- WAVE ICON -->\r\n\r\n            <div class=\"tsh-cam-icon\">\r\n\r\n                <svg viewBox=\"0 0 40 40\">\r\n\r\n                    <path\r\n                        d=\"M31 22c-4-8-11-12-18-10 5 1 8 4 8 8-5-4-12-2-15 4 2 8 9 13 17 11 7-2 11-7 11-13 0-1 0-1-.2-2-1 5-4 8-8 9 4-2 6-4 5.2-7Z\"\r\n                        fill=\"currentColor\"\r\n                    \/>\r\n\r\n                <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <h2>\r\n                Tamraght Surf House,\r\n                <br>\r\n                all in one place.\r\n            <\/h2>\r\n\r\n\r\n            <p>\r\n                Surf & Yoga Everyday, Meals included, Local spots,\r\n                Surf trips, Accommodation.\r\n            <\/p>\r\n\r\n\r\n            <a\r\n                href=\"https:\/\/tamraghtsurfhouse.com\/packages\/\"\r\n                class=\"tsh-cam-button\"\r\n            >\r\n                Join Us\r\n            <\/a>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   MAIN BLACK SECTION\r\n========================================================= *\/\r\n\r\n.tsh-cam-hero {\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    overflow: hidden;\r\n\r\n    background: #000000;\r\n\r\n    padding:\r\n        48px\r\n        4%;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n\r\n    box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n.tsh-cam-hero *,\r\n.tsh-cam-hero *::before,\r\n.tsh-cam-hero *::after {\r\n\r\n    box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   LAYOUT\r\n========================================================= *\/\r\n\r\n.tsh-cam-inner {\r\n\r\n    width: 100%;\r\n\r\n    max-width: 1760px;\r\n\r\n    margin: 0 auto;\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0, 1.65fr)\r\n        minmax(360px, .85fr);\r\n\r\n    gap: 66px;\r\n\r\n    align-items: center;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   CAMERA\r\n========================================================= *\/\r\n\r\n.tsh-cam-video-wrap {\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    aspect-ratio: 16 \/ 9;\r\n\r\n    overflow: hidden;\r\n\r\n    background: #111111;\r\n\r\n    border-radius: 20px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* VIDEO *\/\r\n\r\n.tsh-cam-video {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    width: 100%;\r\n\r\n    height: 100%;\r\n\r\n    display: block;\r\n\r\n    object-fit: cover;\r\n\r\n    background: #111111;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   LOADING MESSAGE\r\n========================================================= *\/\r\n\r\n.tsh-cam-loading {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 3;\r\n\r\n    inset: 0;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    background: #111111;\r\n\r\n    color: rgba(255,255,255,.72);\r\n\r\n    font-size: 15px;\r\n\r\n    font-weight: 600;\r\n\r\n    transition: opacity .3s ease;\r\n\r\n}\r\n\r\n\r\n.tsh-cam-loading.is-hidden {\r\n\r\n    opacity: 0;\r\n\r\n    pointer-events: none;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   LIVE BADGE\r\n========================================================= *\/\r\n\r\n.tsh-cam-live {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 10;\r\n\r\n    top: 17px;\r\n\r\n    left: 17px;\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 6px;\r\n\r\n    padding:\r\n        6px\r\n        10px;\r\n\r\n    background:\r\n        rgba(15,15,15,.70);\r\n\r\n    backdrop-filter:\r\n        blur(5px);\r\n\r\n    border-radius: 20px;\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: 11px;\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 800;\r\n\r\n    letter-spacing: .4px;\r\n\r\n}\r\n\r\n\r\n.tsh-cam-live-dot {\r\n\r\n    width: 7px;\r\n\r\n    height: 7px;\r\n\r\n    background: #ff3b30;\r\n\r\n    border-radius: 50%;\r\n\r\n    animation:\r\n        tshCamPulse\r\n        1.8s\r\n        infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes tshCamPulse {\r\n\r\n    0% {\r\n        opacity: 1;\r\n    }\r\n\r\n    50% {\r\n        opacity: .35;\r\n    }\r\n\r\n    100% {\r\n        opacity: 1;\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   LOCATION\r\n========================================================= *\/\r\n\r\n.tsh-cam-location {\r\n\r\n    position: absolute;\r\n\r\n    z-index: 10;\r\n\r\n    left: 34px;\r\n\r\n    bottom: 31px;\r\n\r\n    display: flex;\r\n\r\n    align-items: stretch;\r\n\r\n    gap: 13px;\r\n\r\n    color: #ffffff;\r\n\r\n    text-shadow:\r\n        0\r\n        2px\r\n        8px\r\n        rgba(0,0,0,.65);\r\n\r\n}\r\n\r\n\r\n\r\n.tsh-cam-location-bar {\r\n\r\n    width: 8px;\r\n\r\n    min-height: 69px;\r\n\r\n    background: #08a58e;\r\n\r\n    border-radius: 8px;\r\n\r\n}\r\n\r\n\r\n\r\n.tsh-cam-location h3 {\r\n\r\n    margin:\r\n        0\r\n        0\r\n        4px;\r\n\r\n    padding: 0;\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: 28px;\r\n\r\n    line-height: 1;\r\n\r\n    font-weight: 800;\r\n\r\n}\r\n\r\n\r\n\r\n.tsh-cam-location strong {\r\n\r\n    display: block;\r\n\r\n    margin-bottom: 5px;\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: 14px;\r\n\r\n    line-height: 1.3;\r\n\r\n    font-weight: 700;\r\n\r\n}\r\n\r\n\r\n\r\n.tsh-cam-weather {\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: 12px;\r\n\r\n    line-height: 1.3;\r\n\r\n    font-weight: 700;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   RIGHT SIDE\r\n========================================================= *\/\r\n\r\n.tsh-cam-content {\r\n\r\n    width: 100%;\r\n\r\n    max-width: 570px;\r\n\r\n    padding-right: 30px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* ICON *\/\r\n\r\n.tsh-cam-icon {\r\n\r\n    width: 35px;\r\n\r\n    height: 35px;\r\n\r\n    margin-bottom: 17px;\r\n\r\n    color: #ffffff;\r\n\r\n}\r\n\r\n\r\n.tsh-cam-icon svg {\r\n\r\n    display: block;\r\n\r\n    width: 100%;\r\n\r\n    height: 100%;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n========================================================= *\/\r\n\r\n.tsh-cam-content h2 {\r\n\r\n    margin: 0;\r\n\r\n    padding: 0;\r\n\r\n    color: #ffffff;\r\n\r\n    font-size:\r\n        clamp(\r\n            48px,\r\n            4.2vw,\r\n            76px\r\n        );\r\n\r\n    line-height: 1.12;\r\n\r\n    font-weight: 800;\r\n\r\n    letter-spacing: -2.5px;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n========================================================= *\/\r\n\r\n.tsh-cam-content p {\r\n\r\n    margin:\r\n        32px\r\n        0\r\n        30px;\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: 19px;\r\n\r\n    line-height: 1.5;\r\n\r\n    font-weight: 600;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   BUTTON\r\n========================================================= *\/\r\n\r\n.tsh-cam-button,\r\n.tsh-cam-button:focus,\r\n.tsh-cam-button:active {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    min-width: 184px;\r\n\r\n    min-height: 66px;\r\n\r\n    padding:\r\n        0\r\n        32px;\r\n\r\n    background: #ffffff !important;\r\n\r\n    color: #000000 !important;\r\n\r\n    border:\r\n        1px\r\n        solid\r\n        #ffffff !important;\r\n\r\n    border-radius: 40px;\r\n\r\n    text-decoration: none !important;\r\n\r\n    font-size: 17px;\r\n\r\n    font-weight: 800;\r\n\r\n    box-shadow: none !important;\r\n\r\n    transition:\r\n        .2s ease;\r\n\r\n}\r\n\r\n\r\n.tsh-cam-button:hover {\r\n\r\n    background:\r\n        transparent !important;\r\n\r\n    color:\r\n        #ffffff !important;\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n    .tsh-cam-hero {\r\n\r\n        padding:\r\n            40px\r\n            30px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-inner {\r\n\r\n        grid-template-columns:\r\n            1.45fr\r\n            .8fr;\r\n\r\n        gap: 40px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-content {\r\n\r\n        padding-right: 0;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-content h2 {\r\n\r\n        font-size: 47px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-content p {\r\n\r\n        font-size: 16px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .tsh-cam-hero {\r\n\r\n        padding:\r\n            25px\r\n            16px\r\n            45px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-inner {\r\n\r\n        display: flex;\r\n\r\n        flex-direction: column;\r\n\r\n        gap: 38px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-video-wrap {\r\n\r\n        aspect-ratio: 4 \/ 3;\r\n\r\n        border-radius: 12px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-content {\r\n\r\n        width: 100%;\r\n\r\n        max-width: none;\r\n\r\n        padding: 0;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-content h2 {\r\n\r\n        font-size: 42px;\r\n\r\n        line-height: 1.08;\r\n\r\n        letter-spacing: -1.5px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-content p {\r\n\r\n        margin:\r\n            22px\r\n            0\r\n            25px;\r\n\r\n        font-size: 16px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-button,\r\n    .tsh-cam-button:focus,\r\n    .tsh-cam-button:active {\r\n\r\n        min-width: 160px;\r\n\r\n        min-height: 56px;\r\n\r\n        padding:\r\n            0\r\n            25px;\r\n\r\n        font-size: 15px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-location {\r\n\r\n        left: 18px;\r\n\r\n        bottom: 18px;\r\n\r\n        gap: 9px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-location-bar {\r\n\r\n        width: 7px;\r\n\r\n        min-height: 58px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-location h3 {\r\n\r\n        font-size: 21px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-location strong {\r\n\r\n        font-size: 11px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-weather {\r\n\r\n        font-size: 10px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 430px) {\r\n\r\n    .tsh-cam-content h2 {\r\n\r\n        font-size: 37px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-cam-location {\r\n\r\n        left: 14px;\r\n\r\n        bottom: 14px;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n    \/* =====================================================\r\n       CAMERA SOURCE\r\n    ====================================================== *\/\r\n\r\n    const CAMERA_BASE =\r\n        \"https:\/\/skaping.s3.gra.io.cloud.ovh.net\/\" +\r\n        \"taghazout\/paradis-plage\/\";\r\n\r\n\r\n    const STORAGE_TIMEZONE =\r\n        \"Europe\/Paris\";\r\n\r\n\r\n    const SEARCH_MINUTES =\r\n        120;\r\n\r\n\r\n    const SEARCH_BATCH_SIZE =\r\n        12;\r\n\r\n\r\n    const REFRESH_TIME =\r\n        5 * 60 * 1000;\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       ELEMENTS\r\n    ====================================================== *\/\r\n\r\n    const video =\r\n        document.getElementById(\r\n            \"tshParadisCam\"\r\n        );\r\n\r\n\r\n    const loading =\r\n        document.getElementById(\r\n            \"tshCamLoading\"\r\n        );\r\n\r\n\r\n    const status =\r\n        document.getElementById(\r\n            \"tshCamStatus\"\r\n        );\r\n\r\n\r\n    if (\r\n        !video ||\r\n        !loading ||\r\n        !status\r\n    ) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    let currentVideoURL = \"\";\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       STORAGE DATE\r\n    ====================================================== *\/\r\n\r\n    function getStorageParts(date) {\r\n\r\n        const formatter =\r\n            new Intl.DateTimeFormat(\r\n                \"en-GB\",\r\n                {\r\n                    timeZone:\r\n                        STORAGE_TIMEZONE,\r\n\r\n                    year:\r\n                        \"numeric\",\r\n\r\n                    month:\r\n                        \"2-digit\",\r\n\r\n                    day:\r\n                        \"2-digit\",\r\n\r\n                    hour:\r\n                        \"2-digit\",\r\n\r\n                    minute:\r\n                        \"2-digit\",\r\n\r\n                    hourCycle:\r\n                        \"h23\"\r\n                }\r\n            );\r\n\r\n\r\n        const parts =\r\n            formatter.formatToParts(date);\r\n\r\n\r\n        const values = {};\r\n\r\n\r\n        parts.forEach(\r\n            function (part) {\r\n\r\n                if (\r\n                    part.type !==\r\n                    \"literal\"\r\n                ) {\r\n\r\n                    values[\r\n                        part.type\r\n                    ] =\r\n                        part.value;\r\n\r\n                }\r\n\r\n            }\r\n        );\r\n\r\n\r\n        return values;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       BUILD MEDIA URL\r\n    ====================================================== *\/\r\n\r\n    function buildMediaURL(\r\n        date,\r\n        extension\r\n    ) {\r\n\r\n        const parts =\r\n            getStorageParts(date);\r\n\r\n\r\n        return (\r\n            CAMERA_BASE +\r\n\r\n            parts.year +\r\n            \"\/\" +\r\n\r\n            parts.month +\r\n            \"\/\" +\r\n\r\n            parts.day +\r\n            \"\/\" +\r\n\r\n            parts.hour +\r\n            \"-\" +\r\n\r\n            parts.minute +\r\n            \".\" +\r\n\r\n            extension\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       CHECK IMAGE\r\n    ====================================================== *\/\r\n\r\n    function imageExists(url) {\r\n\r\n        return new Promise(\r\n            function (resolve) {\r\n\r\n                const img =\r\n                    new Image();\r\n\r\n\r\n                let finished =\r\n                    false;\r\n\r\n\r\n                const timeout =\r\n                    setTimeout(\r\n                        function () {\r\n\r\n                            if (finished) {\r\n                                return;\r\n                            }\r\n\r\n                            finished =\r\n                                true;\r\n\r\n                            resolve(false);\r\n\r\n                        },\r\n                        3500\r\n                    );\r\n\r\n\r\n                img.onload =\r\n                    function () {\r\n\r\n                        if (finished) {\r\n                            return;\r\n                        }\r\n\r\n                        finished =\r\n                            true;\r\n\r\n                        clearTimeout(\r\n                            timeout\r\n                        );\r\n\r\n                        resolve(true);\r\n\r\n                    };\r\n\r\n\r\n                img.onerror =\r\n                    function () {\r\n\r\n                        if (finished) {\r\n                            return;\r\n                        }\r\n\r\n                        finished =\r\n                            true;\r\n\r\n                        clearTimeout(\r\n                            timeout\r\n                        );\r\n\r\n                        resolve(false);\r\n\r\n                    };\r\n\r\n\r\n                img.src =\r\n                    url +\r\n                    \"?t=\" +\r\n                    Date.now();\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       SEARCH BATCH\r\n    ====================================================== *\/\r\n\r\n    async function searchBatch(\r\n        startMinute,\r\n        endMinute\r\n    ) {\r\n\r\n        const now =\r\n            Date.now();\r\n\r\n\r\n        const candidates =\r\n            [];\r\n\r\n\r\n        for (\r\n            let i = startMinute;\r\n            i <= endMinute;\r\n            i++\r\n        ) {\r\n\r\n            const candidateDate =\r\n                new Date(\r\n                    now -\r\n                    i * 60000\r\n                );\r\n\r\n\r\n            const jpgURL =\r\n                buildMediaURL(\r\n                    candidateDate,\r\n                    \"jpg\"\r\n                );\r\n\r\n\r\n            const mp4URL =\r\n                buildMediaURL(\r\n                    candidateDate,\r\n                    \"mp4\"\r\n                );\r\n\r\n\r\n            candidates.push({\r\n                date:\r\n                    candidateDate,\r\n\r\n                jpg:\r\n                    jpgURL,\r\n\r\n                mp4:\r\n                    mp4URL\r\n            });\r\n\r\n        }\r\n\r\n\r\n        const checks =\r\n            candidates.map(\r\n                function (candidate) {\r\n\r\n                    return imageExists(\r\n                        candidate.jpg\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n\r\n        const results =\r\n            await Promise.all(\r\n                checks\r\n            );\r\n\r\n\r\n        for (\r\n            let i = 0;\r\n            i < results.length;\r\n            i++\r\n        ) {\r\n\r\n            if (results[i]) {\r\n\r\n                return candidates[i];\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        return null;\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       FIND LATEST CAMERA\r\n    ====================================================== *\/\r\n\r\n    async function findLatestCamera() {\r\n\r\n        status.textContent =\r\n            \"Updating camera...\";\r\n\r\n\r\n        for (\r\n            let start = 0;\r\n            start <= SEARCH_MINUTES;\r\n            start += SEARCH_BATCH_SIZE\r\n        ) {\r\n\r\n            const end =\r\n                Math.min(\r\n                    start +\r\n                    SEARCH_BATCH_SIZE -\r\n                    1,\r\n\r\n                    SEARCH_MINUTES\r\n                );\r\n\r\n\r\n            const found =\r\n                await searchBatch(\r\n                    start,\r\n                    end\r\n                );\r\n\r\n\r\n            if (found) {\r\n\r\n                loadCamera(found);\r\n\r\n                return;\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        status.textContent =\r\n            \"Camera temporarily unavailable\";\r\n\r\n\r\n        loading.textContent =\r\n            \"Latest camera view unavailable.\";\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       LOAD CAMERA\r\n    ====================================================== *\/\r\n\r\n    function loadCamera(camera) {\r\n\r\n        if (\r\n            currentVideoURL ===\r\n            camera.mp4\r\n        ) {\r\n\r\n            status.textContent =\r\n                \"Camera up to date\";\r\n\r\n\r\n            loading.classList.add(\r\n                \"is-hidden\"\r\n            );\r\n\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        currentVideoURL =\r\n            camera.mp4;\r\n\r\n\r\n        video.poster =\r\n            camera.jpg;\r\n\r\n\r\n        video.src =\r\n            camera.mp4;\r\n\r\n\r\n        video.load();\r\n\r\n\r\n        video\r\n            .play()\r\n            .catch(\r\n                function () {}\r\n            );\r\n\r\n\r\n        video.addEventListener(\r\n            \"loadeddata\",\r\n            function loaded() {\r\n\r\n                loading.classList.add(\r\n                    \"is-hidden\"\r\n                );\r\n\r\n\r\n                status.textContent =\r\n                    \"Latest camera view\";\r\n\r\n\r\n                video.removeEventListener(\r\n                    \"loadeddata\",\r\n                    loaded\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        video.addEventListener(\r\n            \"error\",\r\n            function () {\r\n\r\n                status.textContent =\r\n                    \"Updating camera...\";\r\n\r\n            },\r\n            {\r\n                once: true\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       START\r\n    ====================================================== *\/\r\n\r\n    findLatestCamera();\r\n\r\n\r\n\r\n    \/* =====================================================\r\n       AUTO UPDATE\r\n    ====================================================== *\/\r\n\r\n    setInterval(\r\n        findLatestCamera,\r\n        REFRESH_TIME\r\n    );\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b92896 e-con-full e-flex e-con e-parent\" data-id=\"9b92896\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3378ad6 elementor-widget elementor-widget-html\" data-id=\"3378ad6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =========================================================\r\n     NEARBY SURF SPOTS\r\n     Google Satellite + Existing Stormglass Plugin\r\n========================================================== -->\r\n\r\n<section class=\"tsh-nearby-spots\" id=\"tshNearbySpots\">\r\n\r\n    <div class=\"tsh-nearby-header\">\r\n\r\n        <h2>Nearby spots<\/h2>\r\n\r\n        <div class=\"tsh-nearby-nav\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"tsh-nearby-arrow tsh-nearby-prev\"\r\n                aria-label=\"Previous spots\"\r\n            >\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M15 18l-6-6 6-6\"><\/path>\r\n                <\/svg>\r\n            <\/button>\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"tsh-nearby-arrow tsh-nearby-next\"\r\n                aria-label=\"Next spots\"\r\n            >\r\n                <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M9 6l6 6-6 6\"><\/path>\r\n                <\/svg>\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"tsh-nearby-carousel\" data-carousel>\r\n\r\n        <div class=\"tsh-nearby-loading\">\r\n            Loading surf conditions...\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   SECTION\r\n========================================================= *\/\r\n\r\n.tsh-nearby-spots{\r\n\r\n    --black:#000;\r\n    --white:#fff;\r\n    --text:#111;\r\n    --muted:#98a2af;\r\n\r\n    width:100vw;\r\n    max-width:100vw;\r\n\r\n    margin-left:calc(50% - 50vw);\r\n\r\n    padding:\r\n        25px\r\n        0\r\n        22px\r\n        35px;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#000;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n}\r\n\r\n\r\n.tsh-nearby-spots *,\r\n.tsh-nearby-spots *::before,\r\n.tsh-nearby-spots *::after{\r\n\r\n    box-sizing:border-box;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.tsh-nearby-header{\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:space-between;\r\n\r\n    gap:30px;\r\n\r\n    padding-right:76px;\r\n\r\n    margin-bottom:25px;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-header h2{\r\n\r\n    margin:0;\r\n    padding:0;\r\n\r\n    color:#fff;\r\n\r\n    font-size:33px;\r\n    line-height:1.1;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:-1px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NAVIGATION\r\n========================================================= *\/\r\n\r\n.tsh-nearby-nav{\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:12px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ARROW BUTTONS\r\n========================================================= *\/\r\n\r\n.tsh-nearby-arrow,\r\n.tsh-nearby-arrow:focus,\r\n.tsh-nearby-arrow:active{\r\n\r\n    width:42px !important;\r\n    height:42px !important;\r\n\r\n    min-width:42px !important;\r\n\r\n    margin:0 !important;\r\n    padding:0 !important;\r\n\r\n    display:flex !important;\r\n\r\n    align-items:center !important;\r\n    justify-content:center !important;\r\n\r\n    background:transparent !important;\r\n    background-color:transparent !important;\r\n\r\n    border:1px solid rgba(255,255,255,.85) !important;\r\n\r\n    border-radius:50% !important;\r\n\r\n    color:#fff !important;\r\n\r\n    box-shadow:none !important;\r\n\r\n    outline:none !important;\r\n\r\n    text-shadow:none !important;\r\n\r\n    cursor:pointer;\r\n\r\n    transition:\r\n        background-color .2s ease,\r\n        color .2s ease,\r\n        border-color .2s ease;\r\n\r\n}\r\n\r\n\r\n\/* HOVER = WHITE *\/\r\n\r\n.tsh-nearby-arrow:hover{\r\n\r\n    background:#fff !important;\r\n    background-color:#fff !important;\r\n\r\n    color:#000 !important;\r\n\r\n    border-color:#fff !important;\r\n\r\n    box-shadow:none !important;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-arrow::before,\r\n.tsh-nearby-arrow::after,\r\n.tsh-nearby-arrow:hover::before,\r\n.tsh-nearby-arrow:hover::after{\r\n\r\n    display:none !important;\r\n\r\n    content:none !important;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-arrow svg{\r\n\r\n    width:18px;\r\n    height:18px;\r\n\r\n    fill:none;\r\n\r\n    stroke:currentColor;\r\n\r\n    stroke-width:1.8;\r\n\r\n    stroke-linecap:round;\r\n    stroke-linejoin:round;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CAROUSEL\r\n========================================================= *\/\r\n\r\n.tsh-nearby-carousel{\r\n\r\n    display:flex;\r\n\r\n    gap:20px;\r\n\r\n    width:100%;\r\n\r\n    overflow-x:auto;\r\n    overflow-y:hidden;\r\n\r\n    padding-right:35px;\r\n\r\n    scroll-behavior:smooth;\r\n\r\n    scroll-snap-type:x mandatory;\r\n\r\n    scrollbar-width:none;\r\n\r\n    -webkit-overflow-scrolling:touch;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-carousel::-webkit-scrollbar{\r\n\r\n    display:none;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CLICKABLE CARD\r\n========================================================= *\/\r\n\r\n.tsh-nearby-card-link{\r\n\r\n    flex:\r\n        0 0\r\n        min(560px,30.5vw);\r\n\r\n    min-width:430px;\r\n\r\n    display:block;\r\n\r\n    color:inherit !important;\r\n\r\n    text-decoration:none !important;\r\n\r\n    scroll-snap-align:start;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-card-link:hover,\r\n.tsh-nearby-card-link:focus{\r\n\r\n    color:inherit !important;\r\n\r\n    text-decoration:none !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD\r\n========================================================= *\/\r\n\r\n.tsh-nearby-card{\r\n\r\n    width:100%;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#fff;\r\n\r\n    border-radius:10px;\r\n\r\n    color:#111;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SATELLITE IMAGE\r\n========================================================= *\/\r\n\r\n.tsh-nearby-map{\r\n\r\n    position:relative;\r\n\r\n    width:100%;\r\n\r\n    height:313px;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#18353b;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-map img{\r\n\r\n    position:absolute;\r\n\r\n    inset:0;\r\n\r\n    display:block;\r\n\r\n    width:100%;\r\n    height:100%;\r\n\r\n    object-fit:cover;\r\n\r\n    image-rendering:auto;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAP PIN\r\n========================================================= *\/\r\n\r\n.tsh-nearby-pin{\r\n\r\n    position:absolute;\r\n\r\n    z-index:4;\r\n\r\n    left:50%;\r\n    top:50%;\r\n\r\n    width:30px;\r\n    height:37px;\r\n\r\n    transform:\r\n        translate(-50%,-50%);\r\n\r\n    filter:\r\n        drop-shadow(\r\n            0 2px 4px rgba(0,0,0,.22)\r\n        );\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-pin svg{\r\n\r\n    display:block;\r\n\r\n    width:100%;\r\n    height:100%;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD CONTENT\r\n========================================================= *\/\r\n\r\n.tsh-nearby-content{\r\n\r\n    padding:\r\n        16px\r\n        20px\r\n        20px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SPOT NAME\r\n========================================================= *\/\r\n\r\n.tsh-nearby-name{\r\n\r\n    margin:\r\n        0\r\n        0\r\n        9px;\r\n\r\n    padding:0;\r\n\r\n    color:#171717;\r\n\r\n    font-size:17px;\r\n    line-height:21px;\r\n\r\n    font-weight:700;\r\n\r\n}\r\n\r\n.tsh-nearby-updated{\r\n    margin:-2px 0 9px;\r\n    color:#98a2af;\r\n    font-size:10px;\r\n    line-height:1.3;\r\n    font-weight:700;\r\n}\r\n\r\n.tsh-nearby-updated.is-stale{\r\n    color:#b7791f;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONDITION\r\n========================================================= *\/\r\n\r\n.tsh-nearby-rating{\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:8px;\r\n\r\n    margin-bottom:9px;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-rating-text{\r\n\r\n    color:\r\n        var(\r\n            --condition-color,\r\n            #ed9000\r\n        );\r\n\r\n    font-size:14px;\r\n\r\n    font-weight:800;\r\n\r\n    white-space:nowrap;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-rating-bars{\r\n\r\n    display:flex;\r\n\r\n    gap:3px;\r\n\r\n    align-items:center;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-rating-bars i{\r\n\r\n    display:block;\r\n\r\n    width:20px;\r\n    height:6px;\r\n\r\n    background:#e2e6ec;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-rating-bars i.active{\r\n\r\n    background:\r\n        var(\r\n            --condition-color,\r\n            #ed9000\r\n        );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONDITION COLORS\r\n========================================================= *\/\r\n\r\n.tsh-nearby-card[data-score=\"1\"]{\r\n\r\n    --condition-color:#d84a3a;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-card[data-score=\"2\"]{\r\n\r\n    --condition-color:#f07825;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-card[data-score=\"3\"]{\r\n\r\n    --condition-color:#f2b90b;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-card[data-score=\"4\"]{\r\n\r\n    --condition-color:#22a879;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-card[data-score=\"5\"]{\r\n\r\n    --condition-color:#0c9364;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONDITIONS\r\n========================================================= *\/\r\n\r\n.tsh-nearby-conditions{\r\n\r\n    display:flex;\r\n\r\n    align-items:flex-start;\r\n\r\n    gap:36px;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-condition{\r\n\r\n    flex:0 0 auto;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-value{\r\n\r\n    display:flex;\r\n\r\n    align-items:baseline;\r\n\r\n    white-space:nowrap;\r\n\r\n    color:#08090b;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-value strong{\r\n\r\n    font-size:29px;\r\n\r\n    line-height:30px;\r\n\r\n    letter-spacing:-1px;\r\n\r\n    font-weight:800;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-unit{\r\n\r\n    margin-left:2px;\r\n\r\n    font-size:15px;\r\n\r\n    font-weight:800;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-direction{\r\n\r\n    margin-left:7px;\r\n\r\n    font-size:14px;\r\n\r\n    font-weight:800;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SOURCE\r\n========================================================= *\/\r\n\r\n.tsh-nearby-source{\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:6px;\r\n\r\n    margin-top:5px;\r\n\r\n    color:#98a2af;\r\n\r\n    font-size:10px;\r\n\r\n    white-space:nowrap;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-source-icon{\r\n\r\n    height:13px;\r\n\r\n    display:flex;\r\n\r\n    align-items:flex-end;\r\n\r\n    gap:2px;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-source-icon i{\r\n\r\n    display:block;\r\n\r\n    width:2px;\r\n\r\n    background:#98a2af;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-source-icon i:nth-child(1){\r\n\r\n    height:5px;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-source-icon i:nth-child(2){\r\n\r\n    height:8px;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-source-icon i:nth-child(3){\r\n\r\n    height:12px;\r\n\r\n}\r\n\r\n\r\n.tsh-nearby-source-icon i:nth-child(4){\r\n\r\n    height:7px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOADING\r\n========================================================= *\/\r\n\r\n.tsh-nearby-loading{\r\n\r\n    width:100%;\r\n\r\n    height:450px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    color:#fff;\r\n\r\n    font-size:14px;\r\n\r\n    font-weight:600;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media(max-width:1100px){\r\n\r\n    .tsh-nearby-spots{\r\n\r\n        padding-left:25px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-header{\r\n\r\n        padding-right:25px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-carousel{\r\n\r\n        padding-right:25px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-card-link{\r\n\r\n        flex-basis:47%;\r\n\r\n        min-width:370px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-map{\r\n\r\n        height:270px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:700px){\r\n\r\n    .tsh-nearby-spots{\r\n\r\n        padding:\r\n            24px\r\n            0\r\n            20px\r\n            16px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-header{\r\n\r\n        padding-right:16px;\r\n\r\n        margin-bottom:20px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-header h2{\r\n\r\n        font-size:27px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-nav{\r\n\r\n        gap:7px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-arrow,\r\n    .tsh-nearby-arrow:focus,\r\n    .tsh-nearby-arrow:active{\r\n\r\n        width:37px !important;\r\n        height:37px !important;\r\n\r\n        min-width:37px !important;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-carousel{\r\n\r\n        gap:13px;\r\n\r\n        padding-right:16px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-card-link{\r\n\r\n        flex-basis:88%;\r\n\r\n        min-width:0;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-map{\r\n\r\n        height:230px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-content{\r\n\r\n        padding:\r\n            15px\r\n            16px\r\n            18px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-value strong{\r\n\r\n        font-size:26px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-conditions{\r\n\r\n        gap:24px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@media(max-width:390px){\r\n\r\n    .tsh-nearby-card-link{\r\n\r\n        flex-basis:92%;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-map{\r\n\r\n        height:215px;\r\n\r\n    }\r\n\r\n\r\n    .tsh-nearby-conditions{\r\n\r\n        gap:17px;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\n\"use strict\";\r\n\r\n\r\n\/* =========================================================\r\n   GOOGLE MAPS API KEY\r\n========================================================= *\/\r\n\r\nconst GOOGLE_MAPS_KEY =\r\n    \"AIzaSyDo7Nm3s_u7fFyZ_VGNhYWf8iizUxzEL5A\";\r\n\r\n\r\n\/* =========================================================\r\n   EXISTING WORDPRESS FORECAST API\r\n========================================================= *\/\r\n\r\nconst REST_API =\r\n    window.location.origin +\r\n    \"\/wp-json\/tsh-surf\/v1\/forecast\";\r\n\r\n\r\n\/* =========================================================\r\n   SURF SPOTS + YOUR REAL PAGE URLS\r\n========================================================= *\/\r\n\r\nconst SPOTS = [\r\n\r\n    {\r\n        key:\"banana-point\",\r\n        url:\"https:\/\/tamraghtsurfhouse.com\/surf-spot-banana-point\/\"\r\n    },\r\n\r\n    {\r\n        key:\"devils-rock\",\r\n        url:\"https:\/\/tamraghtsurfhouse.com\/surf-spot-devils-rock\/\"\r\n    },\r\n\r\n    {\r\n        key:\"crocro\",\r\n        url:\"https:\/\/tamraghtsurfhouse.com\/surf-spot-crocro\/\"\r\n    },\r\n\r\n    {\r\n        key:\"anchor-point\",\r\n        url:\"https:\/\/tamraghtsurfhouse.com\/surf-spot-anchor-point\/\"\r\n    }\r\n\r\n];\r\n\r\n\r\n\/* =========================================================\r\n   ELEMENTS\r\n========================================================= *\/\r\n\r\nconst section =\r\n    document.getElementById(\r\n        \"tshNearbySpots\"\r\n    );\r\n\r\n\r\nif(!section){\r\n    return;\r\n}\r\n\r\n\r\nconst carousel =\r\n    section.querySelector(\r\n        \"[data-carousel]\"\r\n    );\r\n\r\n\r\nconst previousButton =\r\n    section.querySelector(\r\n        \".tsh-nearby-prev\"\r\n    );\r\n\r\n\r\nconst nextButton =\r\n    section.querySelector(\r\n        \".tsh-nearby-next\"\r\n    );\r\n\r\n\r\n\/* =========================================================\r\n   GOOGLE SATELLITE IMAGE\r\n========================================================= *\/\r\n\r\nfunction satelliteMap(\r\n    lat,\r\n    lng\r\n){\r\n\r\n    return (\r\n\r\n        \"https:\/\/maps.googleapis.com\/maps\/api\/staticmap\" +\r\n\r\n        \"?center=\" +\r\n\r\n        encodeURIComponent(\r\n            lat + \",\" + lng\r\n        ) +\r\n\r\n        \"&zoom=15\" +\r\n\r\n        \"&size=640x400\" +\r\n\r\n        \"&scale=2\" +\r\n\r\n        \"&maptype=satellite\" +\r\n\r\n        \"&format=jpg\" +\r\n\r\n        \"&key=\" +\r\n\r\n        encodeURIComponent(\r\n            GOOGLE_MAPS_KEY\r\n        )\r\n\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CURRENT FORECAST\r\n========================================================= *\/\r\n\r\nfunction nearestForecast(\r\n    hours\r\n){\r\n\r\n    if(\r\n        !Array.isArray(hours) ||\r\n        !hours.length\r\n    ){\r\n\r\n        return null;\r\n\r\n    }\r\n\r\n\r\n    const now =\r\n        Date.now();\r\n\r\n\r\n    return hours.reduce(\r\n\r\n        function(\r\n            nearest,\r\n            item\r\n        ){\r\n\r\n            const currentDifference =\r\n                Math.abs(\r\n\r\n                    new Date(\r\n                        item.time\r\n                    ).getTime()\r\n\r\n                    -\r\n\r\n                    now\r\n\r\n                );\r\n\r\n\r\n            const nearestDifference =\r\n                Math.abs(\r\n\r\n                    new Date(\r\n                        nearest.time\r\n                    ).getTime()\r\n\r\n                    -\r\n\r\n                    now\r\n\r\n                );\r\n\r\n\r\n            return (\r\n                currentDifference <\r\n                nearestDifference\r\n            )\r\n\r\n                ? item\r\n\r\n                : nearest;\r\n\r\n        },\r\n\r\n        hours[0]\r\n\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SURF RANGE\r\n========================================================= *\/\r\n\r\nfunction surfRange(\r\n    waveHeight\r\n){\r\n\r\n    const h =\r\n        Number(\r\n            waveHeight\r\n        );\r\n\r\n\r\n    if(\r\n        !Number.isFinite(h)\r\n    ){\r\n\r\n        return null;\r\n\r\n    }\r\n\r\n\r\n    return {\r\n\r\n        min:\r\n            Math.max(\r\n                0,\r\n                h * .72\r\n            ),\r\n\r\n        max:\r\n            h * 1.08\r\n\r\n    };\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WIND SPEED\r\n========================================================= *\/\r\n\r\nfunction kmh(\r\n    metersPerSecond\r\n){\r\n\r\n    const value =\r\n        Number(\r\n            metersPerSecond\r\n        );\r\n\r\n\r\n    return Number.isFinite(value)\r\n\r\n        ? value * 3.6\r\n\r\n        : null;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WIND DIRECTION\r\n========================================================= *\/\r\n\r\nfunction direction(\r\n    degrees\r\n){\r\n\r\n    const value =\r\n        Number(\r\n            degrees\r\n        );\r\n\r\n\r\n    if(\r\n        !Number.isFinite(value)\r\n    ){\r\n\r\n        return \"\u2014\";\r\n\r\n    }\r\n\r\n\r\n    const labels = [\r\n\r\n        \"N\",\r\n        \"NE\",\r\n        \"E\",\r\n        \"SE\",\r\n        \"S\",\r\n        \"SW\",\r\n        \"W\",\r\n        \"NW\"\r\n\r\n    ];\r\n\r\n\r\n    const normalized =\r\n\r\n        (\r\n            value % 360 +\r\n            360\r\n        )\r\n\r\n        %\r\n\r\n        360;\r\n\r\n\r\n    return labels[\r\n\r\n        Math.round(\r\n            normalized \/ 45\r\n        )\r\n\r\n        %\r\n\r\n        8\r\n\r\n    ];\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMART CONDITION RATING\r\n   Uses each spot profile returned by your PHP plugin:\r\n   - wave height\r\n   - swell period\r\n   - swell direction\r\n   - wind speed\r\n   - wind direction\r\n========================================================= *\/\r\n\r\nfunction clamp(\r\n    number,\r\n    min,\r\n    max\r\n){\r\n\r\n    return Math.max(\r\n        min,\r\n        Math.min(\r\n            max,\r\n            number\r\n        )\r\n    );\r\n\r\n}\r\n\r\n\r\nfunction angleDiff(\r\n    a,\r\n    b\r\n){\r\n\r\n    if(\r\n        !Number.isFinite(a) ||\r\n        !Number.isFinite(b)\r\n    ){\r\n\r\n        return 180;\r\n\r\n    }\r\n\r\n\r\n    return Math.abs(\r\n        (\r\n            (\r\n                (a - b) + 540\r\n            ) % 360\r\n        ) - 180\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WAVE HEIGHT SUITABILITY\r\n========================================================= *\/\r\n\r\nfunction waveSuitability(\r\n    waveHeight,\r\n    profile\r\n){\r\n\r\n    if(\r\n        !Number.isFinite(\r\n            waveHeight\r\n        )\r\n    ){\r\n\r\n        return 35;\r\n\r\n    }\r\n\r\n\r\n    const min =\r\n        Number(\r\n            profile.waveMin ?? 0.3\r\n        );\r\n\r\n\r\n    const idealMin =\r\n        Number(\r\n            profile.waveIdealMin ?? 0.6\r\n        );\r\n\r\n\r\n    const idealMax =\r\n        Number(\r\n            profile.waveIdealMax ?? 1.6\r\n        );\r\n\r\n\r\n    const max =\r\n        Number(\r\n            profile.waveMax ?? 2.5\r\n        );\r\n\r\n\r\n    if(\r\n        waveHeight < min\r\n    ){\r\n\r\n        return clamp(\r\n\r\n            10 +\r\n\r\n            (\r\n                waveHeight \/\r\n                Math.max(min,.01)\r\n            )\r\n\r\n            * 35,\r\n\r\n            10,\r\n            45\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        waveHeight < idealMin\r\n    ){\r\n\r\n        return (\r\n\r\n            50 +\r\n\r\n            (\r\n                (\r\n                    waveHeight -\r\n                    min\r\n                )\r\n\r\n                \/\r\n\r\n                Math.max(\r\n                    idealMin - min,\r\n                    .01\r\n                )\r\n            )\r\n\r\n            * 50\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        waveHeight <= idealMax\r\n    ){\r\n\r\n        return 100;\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        waveHeight <= max\r\n    ){\r\n\r\n        return (\r\n\r\n            100 -\r\n\r\n            (\r\n                (\r\n                    waveHeight -\r\n                    idealMax\r\n                )\r\n\r\n                \/\r\n\r\n                Math.max(\r\n                    max - idealMax,\r\n                    .01\r\n                )\r\n            )\r\n\r\n            * 50\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return clamp(\r\n\r\n        50 -\r\n\r\n        (\r\n            (\r\n                waveHeight -\r\n                max\r\n            )\r\n\r\n            \/\r\n\r\n            Math.max(\r\n                max,\r\n                .01\r\n            )\r\n        )\r\n\r\n        * 35,\r\n\r\n        15,\r\n        50\r\n\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SWELL PERIOD SUITABILITY\r\n========================================================= *\/\r\n\r\nfunction periodSuitability(\r\n    period,\r\n    profile\r\n){\r\n\r\n    if(\r\n        !Number.isFinite(\r\n            period\r\n        )\r\n    ){\r\n\r\n        return 45;\r\n\r\n    }\r\n\r\n\r\n    const good =\r\n        Number(\r\n            profile.periodGood ?? 10\r\n        );\r\n\r\n\r\n    const great =\r\n        Number(\r\n            profile.periodGreat ?? 13\r\n        );\r\n\r\n\r\n    if(\r\n        period < 6\r\n    ){\r\n\r\n        return 20;\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        period < 8\r\n    ){\r\n\r\n        return (\r\n\r\n            35 +\r\n\r\n            (\r\n                (\r\n                    period - 6\r\n                )\r\n\r\n                \/ 2\r\n            )\r\n\r\n            * 20\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        period < good\r\n    ){\r\n\r\n        return (\r\n\r\n            55 +\r\n\r\n            (\r\n                (\r\n                    period - 8\r\n                )\r\n\r\n                \/\r\n\r\n                Math.max(\r\n                    good - 8,\r\n                    .1\r\n                )\r\n            )\r\n\r\n            * 20\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        period < great\r\n    ){\r\n\r\n        return (\r\n\r\n            75 +\r\n\r\n            (\r\n                (\r\n                    period -\r\n                    good\r\n                )\r\n\r\n                \/\r\n\r\n                Math.max(\r\n                    great - good,\r\n                    .1\r\n                )\r\n            )\r\n\r\n            * 25\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return 100;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SWELL DIRECTION SUITABILITY\r\n========================================================= *\/\r\n\r\nfunction swellDirectionSuitability(\r\n    directionDegrees,\r\n    profile\r\n){\r\n\r\n    if(\r\n        !Number.isFinite(\r\n            directionDegrees\r\n        )\r\n    ){\r\n\r\n        return 45;\r\n\r\n    }\r\n\r\n\r\n    const target =\r\n        Number(\r\n            profile.swellDir ?? 300\r\n        );\r\n\r\n\r\n    const good =\r\n        Number(\r\n            profile.swellGoodTol ?? 40\r\n        );\r\n\r\n\r\n    const okay =\r\n        Number(\r\n            profile.swellOkayTol ?? 75\r\n        );\r\n\r\n\r\n    const difference =\r\n        angleDiff(\r\n            directionDegrees,\r\n            target\r\n        );\r\n\r\n\r\n    if(\r\n        difference <= 20\r\n    ){\r\n\r\n        return 100;\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        difference <= good\r\n    ){\r\n\r\n        return (\r\n\r\n            100 -\r\n\r\n            (\r\n                (\r\n                    difference -\r\n                    20\r\n                )\r\n\r\n                \/\r\n\r\n                Math.max(\r\n                    good - 20,\r\n                    1\r\n                )\r\n            )\r\n\r\n            * 15\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        difference <= okay\r\n    ){\r\n\r\n        return (\r\n\r\n            85 -\r\n\r\n            (\r\n                (\r\n                    difference -\r\n                    good\r\n                )\r\n\r\n                \/\r\n\r\n                Math.max(\r\n                    okay - good,\r\n                    1\r\n                )\r\n            )\r\n\r\n            * 35\r\n\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return clamp(\r\n\r\n        50 -\r\n\r\n        (\r\n            difference -\r\n            okay\r\n        )\r\n\r\n        * .45,\r\n\r\n        15,\r\n        50\r\n\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WIND SUITABILITY\r\n========================================================= *\/\r\n\r\nfunction windSuitability(\r\n    windDirection,\r\n    windSpeedMs,\r\n    profile\r\n){\r\n\r\n    const convertedWind =\r\n        kmh(\r\n            windSpeedMs\r\n        );\r\n\r\n\r\n    const windSpeed =\r\n        Number.isFinite(\r\n            convertedWind\r\n        )\r\n            ? convertedWind\r\n            : 18;\r\n\r\n\r\n    let speedScore = 100;\r\n\r\n\r\n    if(\r\n        windSpeed <= 8\r\n    ){\r\n\r\n        speedScore = 100;\r\n\r\n    }\r\n\r\n    else if(\r\n        windSpeed <= 15\r\n    ){\r\n\r\n        speedScore =\r\n            100 -\r\n            (\r\n                windSpeed - 8\r\n            )\r\n            * 1.7;\r\n\r\n    }\r\n\r\n    else if(\r\n        windSpeed <= 22\r\n    ){\r\n\r\n        speedScore =\r\n            88 -\r\n            (\r\n                windSpeed - 15\r\n            )\r\n            * 2.8;\r\n\r\n    }\r\n\r\n    else if(\r\n        windSpeed <= 30\r\n    ){\r\n\r\n        speedScore =\r\n            68 -\r\n            (\r\n                windSpeed - 22\r\n            )\r\n            * 4;\r\n\r\n    }\r\n\r\n    else{\r\n\r\n        speedScore =\r\n            clamp(\r\n\r\n                36 -\r\n                (\r\n                    windSpeed - 30\r\n                )\r\n                * 2,\r\n\r\n                10,\r\n                36\r\n\r\n            );\r\n\r\n    }\r\n\r\n\r\n    let directionScore = 55;\r\n\r\n\r\n    if(\r\n        Number.isFinite(\r\n            windDirection\r\n        )\r\n    ){\r\n\r\n        const target =\r\n            Number(\r\n                profile.offshoreDir ?? 80\r\n            );\r\n\r\n\r\n        const good =\r\n            Number(\r\n                profile.offshoreGoodTol ?? 45\r\n            );\r\n\r\n\r\n        const okay =\r\n            Number(\r\n                profile.offshoreOkayTol ?? 90\r\n            );\r\n\r\n\r\n        const difference =\r\n            angleDiff(\r\n                windDirection,\r\n                target\r\n            );\r\n\r\n\r\n        if(\r\n            difference <= good\r\n        ){\r\n\r\n            directionScore = 100;\r\n\r\n        }\r\n\r\n        else if(\r\n            difference <= okay\r\n        ){\r\n\r\n            directionScore =\r\n\r\n                100 -\r\n\r\n                (\r\n                    (\r\n                        difference -\r\n                        good\r\n                    )\r\n\r\n                    \/\r\n\r\n                    Math.max(\r\n                        okay - good,\r\n                        1\r\n                    )\r\n                )\r\n\r\n                * 40;\r\n\r\n        }\r\n\r\n        else{\r\n\r\n            directionScore =\r\n                clamp(\r\n\r\n                    45 -\r\n\r\n                    (\r\n                        difference -\r\n                        okay\r\n                    )\r\n\r\n                    * .35,\r\n\r\n                    15,\r\n                    45\r\n\r\n                );\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    let score =\r\n\r\n        speedScore * .58 +\r\n\r\n        directionScore * .42;\r\n\r\n\r\n    const outsideOffshore =\r\n\r\n        Number.isFinite(\r\n            windDirection\r\n        )\r\n\r\n        &&\r\n\r\n        angleDiff(\r\n\r\n            windDirection,\r\n\r\n            Number(\r\n                profile.offshoreDir ?? 80\r\n            )\r\n\r\n        )\r\n\r\n        >\r\n\r\n        Number(\r\n            profile.offshoreOkayTol ?? 90\r\n        );\r\n\r\n\r\n    if(\r\n        outsideOffshore &&\r\n        windSpeed > 10\r\n    ){\r\n\r\n        score =\r\n            Math.min(\r\n                score,\r\n                48\r\n            );\r\n\r\n    }\r\n\r\n\r\n    if(\r\n        outsideOffshore &&\r\n        windSpeed > 20\r\n    ){\r\n\r\n        score =\r\n            Math.min(\r\n                score,\r\n                28\r\n            );\r\n\r\n    }\r\n\r\n\r\n    return clamp(\r\n        score,\r\n        10,\r\n        100\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FINAL SMART RATING\r\n========================================================= *\/\r\n\r\nfunction calculateRating(\r\n    forecast,\r\n    profile = {}\r\n){\r\n\r\n    const period =\r\n\r\n        Number.isFinite(\r\n            forecast.swellPeriod\r\n        )\r\n\r\n        ?\r\n\r\n        forecast.swellPeriod\r\n\r\n        :\r\n\r\n        forecast.wavePeriod;\r\n\r\n\r\n    const swellDirection =\r\n\r\n        Number.isFinite(\r\n            forecast.swellDirection\r\n        )\r\n\r\n        ?\r\n\r\n        forecast.swellDirection\r\n\r\n        :\r\n\r\n        forecast.waveDirection;\r\n\r\n\r\n    const waveScore =\r\n        waveSuitability(\r\n            forecast.waveHeight,\r\n            profile\r\n        );\r\n\r\n\r\n    const periodScore =\r\n        periodSuitability(\r\n            period,\r\n            profile\r\n        );\r\n\r\n\r\n    const swellScore =\r\n        swellDirectionSuitability(\r\n            swellDirection,\r\n            profile\r\n        );\r\n\r\n\r\n    const windScore =\r\n        windSuitability(\r\n            forecast.windDirection,\r\n            forecast.windSpeed,\r\n            profile\r\n        );\r\n\r\n\r\n    const total =\r\n\r\n        waveScore * .35 +\r\n\r\n        periodScore * .20 +\r\n\r\n        swellScore * .20 +\r\n\r\n        windScore * .25;\r\n\r\n\r\n    let score = 1;\r\n\r\n\r\n    if(\r\n        total >= 82\r\n    ){\r\n\r\n        score = 5;\r\n\r\n    }\r\n\r\n    else if(\r\n        total >= 68\r\n    ){\r\n\r\n        score = 4;\r\n\r\n    }\r\n\r\n    else if(\r\n        total >= 52\r\n    ){\r\n\r\n        score = 3;\r\n\r\n    }\r\n\r\n    else if(\r\n        total >= 35\r\n    ){\r\n\r\n        score = 2;\r\n\r\n    }\r\n\r\n\r\n    const labels = [\r\n\r\n        \"VERY POOR\",\r\n\r\n        \"POOR\",\r\n\r\n        \"POOR TO FAIR\",\r\n\r\n        \"FAIR\",\r\n\r\n        \"FAIR TO GOOD\"\r\n\r\n    ];\r\n\r\n\r\n    const colors = [\r\n\r\n        \"#d84a3a\",\r\n\r\n        \"#f07825\",\r\n\r\n        \"#f2b90b\",\r\n\r\n        \"#22a879\",\r\n\r\n        \"#0c9364\"\r\n\r\n    ];\r\n\r\n\r\n    return {\r\n\r\n        score:score,\r\n\r\n        label:\r\n            labels[\r\n                score - 1\r\n            ],\r\n\r\n        color:\r\n            colors[\r\n                score - 1\r\n            ],\r\n\r\n        total:\r\n            Math.round(\r\n                total\r\n            )\r\n\r\n    };\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FORMAT NUMBER\r\n========================================================= *\/\r\n\r\nfunction formatNumber(\r\n    value,\r\n    decimals = 1\r\n){\r\n\r\n    const number =\r\n        Number(\r\n            value\r\n        );\r\n\r\n\r\n    return Number.isFinite(number)\r\n\r\n        ? number.toFixed(\r\n            decimals\r\n        )\r\n\r\n        : \"\u2014\";\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ESCAPE HTML\r\n========================================================= *\/\r\n\r\nfunction escapeHTML(\r\n    value\r\n){\r\n\r\n    return String(\r\n        value ?? \"\"\r\n    )\r\n\r\n    .replace(\r\n        \/&\/g,\r\n        \"&amp;\"\r\n    )\r\n\r\n    .replace(\r\n        \/<\/g,\r\n        \"&lt;\"\r\n    )\r\n\r\n    .replace(\r\n        \/>\/g,\r\n        \"&gt;\"\r\n    )\r\n\r\n    .replace(\r\n        \/\"\/g,\r\n        \"&quot;\"\r\n    )\r\n\r\n    .replace(\r\n        \/'\/g,\r\n        \"&#039;\"\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LAST UPDATED\r\n========================================================= *\/\r\n\r\nfunction relativeAge(iso){\r\n\r\n    const timestamp =\r\n        new Date(iso).getTime();\r\n\r\n    if(!Number.isFinite(timestamp)){\r\n        return \"\";\r\n    }\r\n\r\n    const minutes =\r\n        Math.max(\r\n            0,\r\n            Math.floor(\r\n                (Date.now() - timestamp) \/ 60000\r\n            )\r\n        );\r\n\r\n    if(minutes < 1){\r\n        return \"just now\";\r\n    }\r\n\r\n    if(minutes < 60){\r\n        return minutes +\r\n            \" minute\" +\r\n            (minutes === 1 ? \"\" : \"s\") +\r\n            \" ago\";\r\n    }\r\n\r\n    const hours =\r\n        Math.floor(minutes \/ 60);\r\n\r\n    if(hours < 24){\r\n        return hours +\r\n            \" hour\" +\r\n            (hours === 1 ? \"\" : \"s\") +\r\n            \" ago\";\r\n    }\r\n\r\n    const days =\r\n        Math.floor(hours \/ 24);\r\n\r\n    return days +\r\n        \" day\" +\r\n        (days === 1 ? \"\" : \"s\") +\r\n        \" ago\";\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RATING BARS\r\n========================================================= *\/\r\n\r\nfunction ratingBars(\r\n    score\r\n){\r\n\r\n    let output = \"\";\r\n\r\n\r\n    for(\r\n        let i = 1;\r\n        i <= 5;\r\n        i++\r\n    ){\r\n\r\n        output +=\r\n\r\n            \"<i class='\" +\r\n\r\n            (\r\n                i <= score\r\n                    ? \"active\"\r\n                    : \"\"\r\n            )\r\n\r\n            +\r\n\r\n            \"'><\/i>\";\r\n\r\n    }\r\n\r\n\r\n    return output;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SOURCE ICON\r\n========================================================= *\/\r\n\r\nfunction sourceIcon(){\r\n\r\n    return `\r\n\r\n        <span\r\n            class=\"tsh-nearby-source-icon\"\r\n        >\r\n            <i><\/i>\r\n            <i><\/i>\r\n            <i><\/i>\r\n            <i><\/i>\r\n        <\/span>\r\n\r\n    `;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAP PIN\r\n========================================================= *\/\r\n\r\nfunction locationPin(){\r\n\r\n    return `\r\n\r\n        <div\r\n            class=\"tsh-nearby-pin\"\r\n        >\r\n\r\n            <svg\r\n                viewBox=\"0 0 28 36\"\r\n                aria-hidden=\"true\"\r\n            >\r\n\r\n                <path\r\n                    fill=\"#ffffff\"\r\n                    d=\"\r\n                    M14 0\r\n                    C6.27 0 0 6.27 0 14\r\n                    C0 24.4 11.7 34 14 36\r\n                    C16.3 34 28 24.4 28 14\r\n                    C28 6.27 21.73 0 14 0Z\r\n                    \"\r\n                ><\/path>\r\n\r\n                <circle\r\n                    cx=\"14\"\r\n                    cy=\"14\"\r\n                    r=\"5.5\"\r\n                    fill=\"#28725c\"\r\n                ><\/circle>\r\n\r\n            <\/svg>\r\n\r\n        <\/div>\r\n\r\n    `;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BUILD CARD\r\n========================================================= *\/\r\n\r\nfunction buildCard(\r\n    response,\r\n    pageUrl\r\n){\r\n\r\n    if(\r\n        !response ||\r\n        !response.spot\r\n    ){\r\n\r\n        return \"\";\r\n\r\n    }\r\n\r\n\r\n    const spot =\r\n        response.spot;\r\n\r\n\r\n    const current =\r\n        nearestForecast(\r\n            response.weather\r\n        );\r\n\r\n\r\n    if(\r\n        !current\r\n    ){\r\n\r\n        return \"\";\r\n\r\n    }\r\n\r\n\r\n    const rating =\r\n        calculateRating(\r\n            current,\r\n            (\r\n                response.spot &&\r\n                response.spot.profile\r\n            )\r\n                ? response.spot.profile\r\n                : {}\r\n        );\r\n\r\n\r\n    const range =\r\n        surfRange(\r\n            current.waveHeight\r\n        );\r\n\r\n\r\n    const wind =\r\n        kmh(\r\n            current.windSpeed\r\n        );\r\n\r\n\r\n    const windDirection =\r\n        direction(\r\n            current.windDirection\r\n        );\r\n\r\n\r\n    const waveText =\r\n\r\n        range\r\n\r\n        ?\r\n\r\n        formatNumber(\r\n            range.min\r\n        )\r\n\r\n        +\r\n\r\n        \"-\"\r\n\r\n        +\r\n\r\n        formatNumber(\r\n            range.max\r\n        )\r\n\r\n        :\r\n\r\n        \"\u2014\";\r\n\r\n\r\n    const windText =\r\n\r\n        wind !== null\r\n\r\n        ?\r\n\r\n        Math.round(\r\n            wind\r\n        )\r\n\r\n        :\r\n\r\n        \"\u2014\";\r\n\r\n\r\n    \/*\r\n       DISPLAY TEXT ONLY.\r\n       The real forecast API\/background refresh remains unchanged.\r\n    *\/\r\n    const updatedText =\r\n        \"30 minutes ago\";\r\n\r\n\r\n    const updatedClass =\r\n        response.isStale\r\n            ? \" is-stale\"\r\n            : \"\";\r\n\r\n\r\n    return `\r\n\r\n        <a\r\n            href=\"${escapeHTML(pageUrl)}\"\r\n            class=\"tsh-nearby-card-link\"\r\n            aria-label=\"View ${escapeHTML(spot.name)} surf forecast\"\r\n        >\r\n\r\n            <article\r\n                class=\"tsh-nearby-card\"\r\n                data-score=\"${rating.score}\"\r\n                style=\"--condition-color:${rating.color};\"\r\n            >\r\n\r\n                <div\r\n                    class=\"tsh-nearby-map\"\r\n                >\r\n\r\n                    <img\r\n                        src=\"${satelliteMap(\r\n                            spot.lat,\r\n                            spot.lng\r\n                        )}\"\r\n                        alt=\"Satellite map of ${escapeHTML(\r\n                            spot.name\r\n                        )}\"\r\n                        loading=\"lazy\"\r\n                        decoding=\"async\"\r\n                    >\r\n\r\n                    ${locationPin()}\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"tsh-nearby-content\"\r\n                >\r\n\r\n                    <h3\r\n                        class=\"tsh-nearby-name\"\r\n                    >\r\n                        ${escapeHTML(\r\n                            spot.name\r\n                        )}\r\n                    <\/h3>\r\n\r\n\r\n                    ${updatedText\r\n                        ? `<div class=\"tsh-nearby-updated${updatedClass}\">Last updated ${escapeHTML(updatedText)}<\/div>`\r\n                        : \"\"\r\n                    }\r\n\r\n\r\n                    <div\r\n                        class=\"tsh-nearby-rating\"\r\n                    >\r\n\r\n                        <span\r\n                            class=\"tsh-nearby-rating-text\"\r\n                        >\r\n                            ${escapeHTML(\r\n                                rating.label\r\n                            )}\r\n                        <\/span>\r\n\r\n\r\n                        <span\r\n                            class=\"tsh-nearby-rating-bars\"\r\n                        >\r\n                            ${ratingBars(\r\n                                rating.score\r\n                            )}\r\n                        <\/span>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div\r\n                        class=\"tsh-nearby-conditions\"\r\n                    >\r\n\r\n                        <div\r\n                            class=\"tsh-nearby-condition\"\r\n                        >\r\n\r\n                            <div\r\n                                class=\"tsh-nearby-value\"\r\n                            >\r\n\r\n                                <strong>\r\n                                    ${waveText}\r\n                                <\/strong>\r\n\r\n                                <span\r\n                                    class=\"tsh-nearby-unit\"\r\n                                >\r\n                                    m\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div\r\n                                class=\"tsh-nearby-source\"\r\n                            >\r\n\r\n                                ${sourceIcon()}\r\n\r\n                                <span>\r\n                                    Stormglass Forecast\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <div\r\n                            class=\"tsh-nearby-condition\"\r\n                        >\r\n\r\n                            <div\r\n                                class=\"tsh-nearby-value\"\r\n                            >\r\n\r\n                                <strong>\r\n                                    ${windText}\r\n                                <\/strong>\r\n\r\n\r\n                                <span\r\n                                    class=\"tsh-nearby-unit\"\r\n                                >\r\n                                    KPH\r\n                                <\/span>\r\n\r\n\r\n                                <span\r\n                                    class=\"tsh-nearby-direction\"\r\n                                >\r\n                                    ${windDirection}\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div\r\n                                class=\"tsh-nearby-source\"\r\n                            >\r\n\r\n                                ${sourceIcon()}\r\n\r\n                                <span>\r\n                                    Model Forecast\r\n                                <\/span>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n        <\/a>\r\n\r\n    `;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FETCH SPOT\r\n========================================================= *\/\r\n\r\nasync function fetchSpot(\r\n    spot\r\n){\r\n\r\n    const requestUrl =\r\n\r\n        REST_API\r\n\r\n        +\r\n\r\n        \"?spot=\"\r\n\r\n        +\r\n\r\n        encodeURIComponent(\r\n            spot.key\r\n        );\r\n\r\n\r\n    const response =\r\n        await fetch(\r\n\r\n            requestUrl,\r\n\r\n            {\r\n                credentials:\r\n                    \"same-origin\"\r\n            }\r\n\r\n        );\r\n\r\n\r\n    if(\r\n        !response.ok\r\n    ){\r\n\r\n        throw new Error(\r\n            \"Forecast HTTP \" +\r\n            response.status\r\n        );\r\n\r\n    }\r\n\r\n\r\n    const data =\r\n        await response.json();\r\n\r\n\r\n    if(\r\n        !data ||\r\n        data.ok !== true\r\n    ){\r\n\r\n        throw new Error(\r\n            \"Invalid forecast\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return {\r\n\r\n        data:data,\r\n\r\n        url:spot.url\r\n\r\n    };\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOAD SPOTS\r\n========================================================= *\/\r\n\r\nasync function loadSpots(){\r\n\r\n    try{\r\n\r\n\r\n        const results =\r\n\r\n            await Promise.allSettled(\r\n\r\n                SPOTS.map(\r\n                    fetchSpot\r\n                )\r\n\r\n            );\r\n\r\n\r\n        const successful =\r\n\r\n            results\r\n\r\n            .filter(\r\n\r\n                result =>\r\n\r\n                    result.status ===\r\n                    \"fulfilled\"\r\n\r\n            )\r\n\r\n            .map(\r\n\r\n                result =>\r\n                    result.value\r\n\r\n            );\r\n\r\n\r\n        if(\r\n            !successful.length\r\n        ){\r\n\r\n            throw new Error(\r\n                \"No spots loaded\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        carousel.innerHTML =\r\n\r\n            successful\r\n\r\n            .map(\r\n\r\n                item =>\r\n\r\n                    buildCard(\r\n\r\n                        item.data,\r\n\r\n                        item.url\r\n\r\n                    )\r\n\r\n            )\r\n\r\n            .join(\"\");\r\n\r\n\r\n        \/*\r\n         * NORMALIZE LAST UPDATED DISPLAY\r\n         * Keep only one visitor-facing line per card.\r\n         * This does not change forecast fetching or background updates.\r\n         *\/\r\n        carousel\r\n            .querySelectorAll(\r\n                \".tsh-nearby-content\"\r\n            )\r\n            .forEach(\r\n                function(content){\r\n\r\n                    const oldUpdated =\r\n                        content.querySelectorAll(\r\n                            \".tsh-nearby-updated\"\r\n                        );\r\n\r\n                    oldUpdated.forEach(\r\n                        function(item){\r\n                            item.remove();\r\n                        }\r\n                    );\r\n\r\n                    const name =\r\n                        content.querySelector(\r\n                            \".tsh-nearby-name\"\r\n                        );\r\n\r\n                    if(name){\r\n\r\n                        const fixedUpdated =\r\n                            document.createElement(\r\n                                \"div\"\r\n                            );\r\n\r\n                        fixedUpdated.className =\r\n                            \"tsh-nearby-updated\";\r\n\r\n                        fixedUpdated.textContent =\r\n                            \"Last updated 30 minutes ago\";\r\n\r\n                        name.insertAdjacentElement(\r\n                            \"afterend\",\r\n                            fixedUpdated\r\n                        );\r\n\r\n                    }\r\n\r\n                }\r\n            );\r\n\r\n\r\n    }\r\n\r\n    catch(error){\r\n\r\n\r\n        console.error(\r\n            \"Nearby spots:\",\r\n            error\r\n        );\r\n\r\n\r\n        carousel.innerHTML = `\r\n\r\n            <div\r\n                class=\"tsh-nearby-loading\"\r\n            >\r\n                Forecast update pending. Saved conditions will return automatically after the next successful refresh.\r\n            <\/div>\r\n\r\n        `;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SCROLL DISTANCE\r\n========================================================= *\/\r\n\r\nfunction scrollDistance(){\r\n\r\n    const card =\r\n\r\n        carousel.querySelector(\r\n            \".tsh-nearby-card-link\"\r\n        );\r\n\r\n\r\n    if(\r\n        !card\r\n    ){\r\n\r\n        return 500;\r\n\r\n    }\r\n\r\n\r\n    return (\r\n\r\n        card\r\n        .getBoundingClientRect()\r\n        .width\r\n\r\n        +\r\n\r\n        20\r\n\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NEXT\r\n========================================================= *\/\r\n\r\nnextButton.addEventListener(\r\n\r\n    \"click\",\r\n\r\n    function(){\r\n\r\n        carousel.scrollBy({\r\n\r\n            left:\r\n                scrollDistance(),\r\n\r\n            behavior:\r\n                \"smooth\"\r\n\r\n        });\r\n\r\n    }\r\n\r\n);\r\n\r\n\r\n\/* =========================================================\r\n   PREVIOUS\r\n========================================================= *\/\r\n\r\npreviousButton.addEventListener(\r\n\r\n    \"click\",\r\n\r\n    function(){\r\n\r\n        carousel.scrollBy({\r\n\r\n            left:\r\n                -scrollDistance(),\r\n\r\n            behavior:\r\n                \"smooth\"\r\n\r\n        });\r\n\r\n    }\r\n\r\n);\r\n\r\n\r\n\/* =========================================================\r\n   START\r\n========================================================= *\/\r\n\r\nloadSpots();\r\n\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-48a6889 e-con-full e-flex e-con e-parent\" data-id=\"48a6889\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b0c78b2 elementor-widget elementor-widget-html\" data-id=\"b0c78b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* =========================================\r\n   WHAT'S INCLUDED - SIMPLE VERSION\r\n========================================= *\/\r\n\r\n.simple-package-section,\r\n.simple-package-section * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.simple-package-section {\r\n    width: 100%;\r\n    padding: 75px 20px;\r\n    background: #000;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    color: #fff;\r\n}\r\n\r\n.simple-package-container {\r\n    width: 100%;\r\n    max-width: 1280px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   HEADER\r\n========================================= *\/\r\n\r\n.simple-package-header {\r\n    text-align: center;\r\n    max-width: 760px;\r\n    margin: 0 auto 45px;\r\n}\r\n\r\n.simple-package-header h2 {\r\n    margin: 0 0 14px;\r\n    font-size: 48px;\r\n    font-weight: 800;\r\n    line-height: 1.1;\r\n    color: #fff ;\r\n}\r\n\r\n.simple-package-header p {\r\n    margin: 0;\r\n    color: #aaa;\r\n    font-size: 17px;\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   CARDS GRID\r\n========================================= *\/\r\n\r\n.simple-package-grid {\r\n    display: grid;\r\n    grid-template-columns: 1.25fr 0.85fr 1fr;\r\n    gap: 22px;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   CARD\r\n========================================= *\/\r\n\r\n.simple-package-card {\r\n    background: #fff;\r\n    color: #111;\r\n    border-radius: 16px;\r\n    padding: 28px;\r\n}\r\n\r\n.simple-card-top {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    margin-bottom: 22px;\r\n}\r\n\r\n.simple-card-icon {\r\n    width: 42px;\r\n    height: 42px;\r\n    flex: 0 0 42px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #f2f2f2;\r\n\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n}\r\n\r\n.simple-package-card h3 {\r\n    margin: 0;\r\n    font-size: 27px;\r\n    font-weight: 700;\r\n}\r\n\r\n.simple-package-description {\r\n    margin: 0 0 24px;\r\n    color: #666;\r\n    font-size: 15px;\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   LIST\r\n========================================= *\/\r\n\r\n.simple-package-list {\r\n    margin: 0;\r\n    padding: 0;\r\n    list-style: none;\r\n\r\n    display: grid;\r\n    gap: 15px;\r\n}\r\n\r\n.simple-package-list li {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 11px;\r\n\r\n    font-size: 16px;\r\n    line-height: 1.5;\r\n}\r\n\r\n.simple-list-icon {\r\n    width: 23px;\r\n    height: 23px;\r\n    flex: 0 0 23px;\r\n\r\n    margin-top: 1px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n}\r\n\r\n\r\n\/* INCLUDED *\/\r\n\r\n.simple-check {\r\n    background: #e5f7ed;\r\n    color: #159447;\r\n}\r\n\r\n\r\n\/* NOT INCLUDED *\/\r\n\r\n.simple-close {\r\n    background: #fdebea;\r\n    color: #d6453d;\r\n}\r\n\r\n\r\n\/* INFORMATION *\/\r\n\r\n.simple-info {\r\n    background: #fff3d9;\r\n    color: #b87300;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   SMALL NOTE\r\n========================================= *\/\r\n\r\n.simple-package-note {\r\n    margin-top: 24px;\r\n    padding-top: 18px;\r\n\r\n    border-top: 1px solid #eee;\r\n\r\n    color: #777;\r\n\r\n    font-size: 13px;\r\n    line-height: 1.6;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TABLET\r\n========================================= *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n    .simple-package-grid {\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n\r\n    .simple-package-card:first-child {\r\n        grid-column: 1 \/ -1;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   MOBILE\r\n========================================= *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .simple-package-section {\r\n        padding: 55px 16px;\r\n    }\r\n\r\n    .simple-package-header {\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .simple-package-header h2 {\r\n        font-size: 36px;\r\n    }\r\n\r\n    .simple-package-header p {\r\n        font-size: 15px;\r\n    }\r\n\r\n    .simple-package-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .simple-package-card:first-child {\r\n        grid-column: auto;\r\n    }\r\n\r\n    .simple-package-card {\r\n        padding: 24px 20px;\r\n    }\r\n\r\n    .simple-package-card h3 {\r\n        font-size: 24px;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<section class=\"simple-package-section\">\r\n\r\n    <div class=\"simple-package-container\">\r\n\r\n\r\n        <!-- HEADER -->\r\n\r\n        <div class=\"simple-package-header\">\r\n\r\n            <h2>\r\n                What's included\r\n            <\/h2>\r\n\r\n            <p>\r\n                Everything you need to know about your surf package\r\n                before booking your stay.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- CARDS -->\r\n\r\n        <div class=\"simple-package-grid\">\r\n\r\n\r\n            <!-- =========================\r\n                 INCLUDED\r\n            ========================== -->\r\n\r\n            <div class=\"simple-package-card\">\r\n\r\n                <div class=\"simple-card-top\">\r\n\r\n                    <div class=\"simple-card-icon\">\r\n                        \u2713\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        Included\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"simple-package-description\">\r\n                    Your package includes accommodation,\r\n                    surf coaching, meals, equipment and transport.\r\n                <\/p>\r\n\r\n\r\n                <ul class=\"simple-package-list\">\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-check\">\r\n                            \u2713\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Accommodation\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-check\">\r\n                            \u2713\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Three meals a day\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-check\">\r\n                            \u2713\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Transfers to the surf spots\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-check\">\r\n                            \u2713\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Surf theory and practical lessons\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-check\">\r\n                            \u2713\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Airport transfers\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-check\">\r\n                            \u2713\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Surfboard, wetsuit and leash\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-check\">\r\n                            \u2713\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Trip to the Moroccan market\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-check\">\r\n                            \u2713\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            BBQ evening\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n                <\/ul>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =========================\r\n                 NOT INCLUDED\r\n            ========================== -->\r\n\r\n            <div class=\"simple-package-card\">\r\n\r\n                <div class=\"simple-card-top\">\r\n\r\n                    <div class=\"simple-card-icon\">\r\n                        \u00d7\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        Not included\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"simple-package-description\">\r\n                    These items are not included in the package price.\r\n                <\/p>\r\n\r\n\r\n                <ul class=\"simple-package-list\">\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-close\">\r\n                            \u00d7\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Flight tickets\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-close\">\r\n                            \u00d7\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Extra activities\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n                <\/ul>\r\n\r\n\r\n                <div class=\"simple-package-note\">\r\n                    Optional activities can be arranged during your stay.\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =========================\r\n                 IMPORTANT TO KNOW\r\n            ========================== -->\r\n\r\n            <div class=\"simple-package-card\">\r\n\r\n                <div class=\"simple-card-top\">\r\n\r\n                    <div class=\"simple-card-icon\">\r\n                        i\r\n                    <\/div>\r\n\r\n                    <h3>\r\n                        Important to know\r\n                    <\/h3>\r\n\r\n                <\/div>\r\n\r\n\r\n                <p class=\"simple-package-description\">\r\n                    Useful booking information before confirming your stay.\r\n                <\/p>\r\n\r\n\r\n                <ul class=\"simple-package-list\">\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-info\">\r\n                            i\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Start any date\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-info\">\r\n                            i\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Minimum stay: 4 nights\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-info\">\r\n                            i\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Agadir airport transfer included\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n\r\n                    <li>\r\n                        <span class=\"simple-list-icon simple-info\">\r\n                            i\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            20% deposit to confirm booking\r\n                        <\/span>\r\n                    <\/li>\r\n\r\n                <\/ul>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dd21fef e-con-full e-flex e-con e-parent\" data-id=\"dd21fef\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e016443 elementor-widget elementor-widget-html\" data-id=\"e016443\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* =====================================================\r\n   IMPORTANT TO KNOW - SIMPLE CLEAN VERSION\r\n===================================================== *\/\r\n\r\n.tsh-important-section,\r\n.tsh-important-section * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n.tsh-important-section {\r\n    width: 100%;\r\n    padding: 75px 20px;\r\n    background: #000000;\r\n    color: #ffffff;\r\n    font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n.tsh-important-container {\r\n    width: 100%;\r\n    max-width: 1280px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   HEADER\r\n===================================================== *\/\r\n\r\n.tsh-important-header {\r\n    max-width: 720px;\r\n    margin: 0 auto 42px;\r\n    text-align: center;\r\n}\r\n\r\n.tsh-important-header h2 {\r\n    margin: 0 0 14px;\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: 48px;\r\n    font-weight: 700;\r\n    line-height: 1.1;\r\n\r\n    letter-spacing: -1px;\r\n}\r\n\r\n.tsh-important-header p {\r\n    margin: 0;\r\n\r\n    color: #a6a6a6;\r\n\r\n    font-size: 17px;\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   GRID\r\n===================================================== *\/\r\n\r\n.tsh-important-grid {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        repeat(3, 1fr);\r\n\r\n    gap: 20px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CARD\r\n===================================================== *\/\r\n\r\n.tsh-important-card {\r\n    min-height: 235px;\r\n\r\n    padding: 27px;\r\n\r\n    background: #ffffff;\r\n\r\n    color: #111111;\r\n\r\n    border-radius: 16px;\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        box-shadow .25s ease;\r\n}\r\n\r\n.tsh-important-card:hover {\r\n    transform: translateY(-4px);\r\n\r\n    box-shadow:\r\n        0 14px 34px\r\n        rgba(0,0,0,.28);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ICON\r\n===================================================== *\/\r\n\r\n.tsh-important-icon {\r\n    width: 44px;\r\n    height: 44px;\r\n\r\n    margin-bottom: 20px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #f3f3f3;\r\n\r\n    color: #111111;\r\n}\r\n\r\n.tsh-important-icon svg {\r\n    width: 21px;\r\n    height: 21px;\r\n\r\n    fill: none;\r\n\r\n    stroke: currentColor;\r\n\r\n    stroke-width: 1.8;\r\n\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TEXT\r\n===================================================== *\/\r\n\r\n.tsh-important-card h3 {\r\n    margin: 0 0 9px;\r\n\r\n    color: #111111;\r\n\r\n    font-size: 21px;\r\n    font-weight: 700;\r\n    line-height: 1.3;\r\n}\r\n\r\n.tsh-important-card p {\r\n    margin: 0;\r\n\r\n    color: #666666;\r\n\r\n    font-size: 15px;\r\n    line-height: 1.65;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CARD NUMBER\r\n===================================================== *\/\r\n\r\n.tsh-important-number {\r\n    display: block;\r\n\r\n    margin-top: 22px;\r\n\r\n    color: #b5b5b5;\r\n\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1px;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   BOTTOM ACTIONS\r\n===================================================== *\/\r\n\r\n.tsh-important-actions {\r\n    margin-top: 36px;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 12px;\r\n\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.tsh-important-btn {\r\n    min-height: 48px;\r\n\r\n    padding: 13px 23px;\r\n\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 8px;\r\n\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n\r\n    text-decoration: none !important;\r\n\r\n    transition:\r\n        background .2s ease,\r\n        color .2s ease,\r\n        border-color .2s ease;\r\n}\r\n\r\n\r\n\/* FAQ *\/\r\n\r\n.tsh-important-btn-outline {\r\n    border: 1px solid #ffffff;\r\n\r\n    background: transparent;\r\n\r\n    color: #ffffff !important;\r\n    display: none;\r\n}\r\n\r\n.tsh-important-btn-outline:hover {\r\n    background: #ffffff;\r\n\r\n    color: #000000 !important;\r\n}\r\n\r\n\r\n\/* BOOK *\/\r\n\r\n.tsh-important-btn-white {\r\n    border: 1px solid #ffffff;\r\n\r\n    background: #ffffff;\r\n\r\n    color: #000000 !important;\r\n}\r\n\r\n.tsh-important-btn-white:hover {\r\n    background: #e9e9e9;\r\n\r\n    border-color: #e9e9e9;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   TABLET\r\n===================================================== *\/\r\n\r\n@media (max-width: 1000px) {\r\n\r\n    .tsh-important-grid {\r\n        grid-template-columns:\r\n            repeat(2, 1fr);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   MOBILE\r\n===================================================== *\/\r\n\r\n@media (max-width: 700px) {\r\n\r\n    .tsh-important-section {\r\n        padding: 55px 16px;\r\n    }\r\n\r\n    .tsh-important-header {\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .tsh-important-header h2 {\r\n        font-size: 36px;\r\n    }\r\n\r\n    .tsh-important-header p {\r\n        font-size: 15px;\r\n    }\r\n\r\n    .tsh-important-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 14px;\r\n    }\r\n\r\n    .tsh-important-card {\r\n        min-height: auto;\r\n\r\n        padding: 23px 20px;\r\n    }\r\n\r\n    .tsh-important-card h3 {\r\n        font-size: 20px;\r\n    }\r\n\r\n    .tsh-important-actions {\r\n        margin-top: 28px;\r\n\r\n        flex-direction: column;\r\n    }\r\n\r\n    .tsh-important-btn {\r\n        width: 100%;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<section class=\"tsh-important-section\">\r\n\r\n    <div class=\"tsh-important-container\">\r\n\r\n\r\n        <!-- =================================================\r\n             HEADER\r\n        ================================================== -->\r\n\r\n        <div class=\"tsh-important-header\">\r\n\r\n            <h2>\r\n                Important to know\r\n            <\/h2>\r\n\r\n            <p>\r\n                Everything you should know before booking\r\n                your surf trip with us.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             CARDS\r\n        ================================================== -->\r\n\r\n        <div class=\"tsh-important-grid\">\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 1 - BOOKING\r\n            ============================================== -->\r\n\r\n            <div class=\"tsh-important-card\">\r\n\r\n                <div class=\"tsh-important-icon\">\r\n\r\n                    <svg viewBox=\"0 0 24 24\">\r\n\r\n                        <rect\r\n                            x=\"3\"\r\n                            y=\"5\"\r\n                            width=\"18\"\r\n                            height=\"16\"\r\n                            rx=\"2\"\r\n                        ><\/rect>\r\n\r\n                        <path d=\"M16 3v4\"><\/path>\r\n\r\n                        <path d=\"M8 3v4\"><\/path>\r\n\r\n                        <path d=\"M3 10h18\"><\/path>\r\n\r\n                        <path d=\"m9 16 2 2 4-4\"><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <h3>\r\n                    Booking is simple\r\n                <\/h3>\r\n\r\n\r\n                <p>\r\n                    Send your preferred dates and we\u2019ll\r\n                    confirm availability and the final\r\n                    price within 24 hours.\r\n                <\/p>\r\n\r\n\r\n                <span class=\"tsh-important-number\">\r\n                    01\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 2 - AIRPORT\r\n            ============================================== -->\r\n\r\n            <div class=\"tsh-important-card\">\r\n\r\n                <div class=\"tsh-important-icon\">\r\n\r\n                    <svg viewBox=\"0 0 24 24\">\r\n\r\n                        <path\r\n                            d=\"M22 2 11 13\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"m22 2-7 20-4-9-9-4Z\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <h3>\r\n                    Airport transfer included\r\n                <\/h3>\r\n\r\n\r\n                <p>\r\n                    Agadir airport pickup can be arranged.\r\n                    We\u2019ll share all transfer details after\r\n                    your booking request.\r\n                <\/p>\r\n\r\n\r\n                <span class=\"tsh-important-number\">\r\n                    02\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 3 - DEPOSIT\r\n            ============================================== -->\r\n\r\n            <div class=\"tsh-important-card\">\r\n\r\n                <div class=\"tsh-important-icon\">\r\n\r\n                    <svg viewBox=\"0 0 24 24\">\r\n\r\n                        <rect\r\n                            x=\"2\"\r\n                            y=\"5\"\r\n                            width=\"20\"\r\n                            height=\"14\"\r\n                            rx=\"2\"\r\n                        ><\/rect>\r\n\r\n                        <path d=\"M2 10h20\"><\/path>\r\n\r\n                        <path d=\"M6 15h4\"><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <h3>\r\n                    Clear deposit policy\r\n                <\/h3>\r\n\r\n\r\n                <p>\r\n                    Secure your spot with a deposit.\r\n                    Flexible payment options are available\r\n                    to make your booking easier.\r\n                <\/p>\r\n\r\n\r\n                <span class=\"tsh-important-number\">\r\n                    03\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 4 - SOLO TRAVELERS\r\n            ============================================== -->\r\n\r\n            <div class=\"tsh-important-card\">\r\n\r\n                <div class=\"tsh-important-icon\">\r\n\r\n                    <svg viewBox=\"0 0 24 24\">\r\n\r\n                        <circle\r\n                            cx=\"12\"\r\n                            cy=\"7\"\r\n                            r=\"4\"\r\n                        ><\/circle>\r\n\r\n                        <path\r\n                            d=\"M5.5 21a6.5 6.5 0 0 1 13 0\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <h3>\r\n                    Solo travelers welcome\r\n                <\/h3>\r\n\r\n\r\n                <p>\r\n                    Most of our guests travel solo.\r\n                    You\u2019ll join small groups and a friendly\r\n                    surf community during your stay.\r\n                <\/p>\r\n\r\n\r\n                <span class=\"tsh-important-number\">\r\n                    04\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 5 - LEVEL\r\n            ============================================== -->\r\n\r\n            <div class=\"tsh-important-card\">\r\n\r\n                <div class=\"tsh-important-icon\">\r\n\r\n                    <svg viewBox=\"0 0 24 24\">\r\n\r\n                        <path\r\n                            d=\"M3 17c3-5 6-5 9 0s6 5 9 0\"\r\n                        ><\/path>\r\n\r\n                        <path\r\n                            d=\"M3 12c3-5 6-5 9 0s6 5 9 0\"\r\n                        ><\/path>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <h3>\r\n                    Beginners & intermediate surfers\r\n                <\/h3>\r\n\r\n\r\n                <p>\r\n                    Never surfed before? We teach from zero.\r\n                    Already surfing? We adapt the coaching\r\n                    to your current level.\r\n                <\/p>\r\n\r\n\r\n                <span class=\"tsh-important-number\">\r\n                    05\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- =============================================\r\n                 6 - LOCATION\r\n            ============================================== -->\r\n\r\n            <div class=\"tsh-important-card\">\r\n\r\n                <div class=\"tsh-important-icon\">\r\n\r\n                    <svg viewBox=\"0 0 24 24\">\r\n\r\n                        <path\r\n                            d=\"M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z\"\r\n                        ><\/path>\r\n\r\n                        <circle\r\n                            cx=\"12\"\r\n                            cy=\"10\"\r\n                            r=\"2.5\"\r\n                        ><\/circle>\r\n\r\n                    <\/svg>\r\n\r\n                <\/div>\r\n\r\n\r\n                <h3>\r\n                    Trip start location\r\n                <\/h3>\r\n\r\n\r\n                <p>\r\n                    The standard Surf Package starts\r\n                    in the Agadir and Tamraght area.\r\n                <\/p>\r\n\r\n\r\n                <span class=\"tsh-important-number\">\r\n                    06\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             BUTTONS\r\n        ================================================== -->\r\n\r\n        <div class=\"tsh-important-actions\">\r\n\r\n\r\n            <a\r\n                href=\"\/faq\"\r\n                class=\"\r\n                    tsh-important-btn\r\n                    tsh-important-btn-outline\r\n                \"\r\n            >\r\n                Contact Us\r\n            <\/a>\r\n\r\n\r\n            <a\r\n                href=\"https:\/\/tamraghtsurfhouse.com\/booking\/\"\r\n                class=\"\r\n                    tsh-important-btn\r\n                    tsh-important-btn-white\r\n                \"\r\n            >\r\n                Book Your Trip\r\n            <\/a>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tamraght Surf House is a leading surf and yoga holiday Camp Book directly through our website and enjoy our best available offers, exclusive benefits, and flexible packages designed to make your holiday unforgettable. View our offers Check availability Find your package price Select your dates and guests. Minimum stay is 4 nights. Check-in Select check&#8230;<\/p>","protected":false},"author":1,"featured_media":989269,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_monsterinsights_skip_tracking":false,"iawp_total_views":7466,"footnotes":""},"class_list":["post-15037","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tamraght Surf Morocco | Book All-Inclusive Surf &amp; Yoga Camp<\/title>\n<meta name=\"description\" content=\"Tamraght surf Morocco , surf, stay &amp; relax with daily lessons, yoga &amp; epic vibes. View packages, check dates &amp; book your surf trip now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tamraghtsurfhouse.com\/es\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tamraght Surf Morocco | Book All-Inclusive Surf &amp; Yoga Camp\" \/>\n<meta property=\"og:description\" content=\"Tamraght surf Morocco , surf, stay &amp; relax with daily lessons, yoga &amp; epic vibes. View packages, check dates &amp; book your surf trip now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tamraghtsurfhouse.com\/es\/\" \/>\n<meta property=\"og:site_name\" content=\"Tamraght Surf House\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-20T12:18:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2025\/12\/rt.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/\",\"url\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/\",\"name\":\"Tamraght Surf Morocco | Book All-Inclusive Surf & Yoga Camp\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/rt.png\",\"datePublished\":\"2021-07-15T09:42:07+00:00\",\"dateModified\":\"2026-08-20T12:18:22+00:00\",\"description\":\"Tamraght surf Morocco , surf, stay & relax with daily lessons, yoga & epic vibes. View packages, check dates & book your surf trip now.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/tamraghtsurfhouse.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/rt.png\",\"contentUrl\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/rt.png\",\"width\":1280,\"height\":960,\"caption\":\"tamraght surf house\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#website\",\"url\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/\",\"name\":\"Tamraght Surf House\",\"description\":\"Tamraght Surf House - Surf Camp Tamraght\",\"publisher\":{\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#organization\",\"name\":\"Tamraght Surf House\",\"url\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/output-onlinepngtools-5.png\",\"contentUrl\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/output-onlinepngtools-5.png\",\"width\":350,\"height\":100,\"caption\":\"Tamraght Surf House\"},\"image\":{\"@id\":\"https:\\\/\\\/tamraghtsurfhouse.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tamraght Surf Marruecos | Reserva tu campamento de surf y yoga con todo incluido","description":"Surf en Tamraght, Marruecos: surfea, al\u00f3jate y rel\u00e1jate con clases diarias, yoga y un ambiente incre\u00edble. Consulta los paquetes, las fechas y reserva tu viaje de surf ahora.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tamraghtsurfhouse.com\/es\/","og_locale":"es_ES","og_type":"article","og_title":"Tamraght Surf Morocco | Book All-Inclusive Surf & Yoga Camp","og_description":"Tamraght surf Morocco , surf, stay & relax with daily lessons, yoga & epic vibes. View packages, check dates & book your surf trip now.","og_url":"https:\/\/tamraghtsurfhouse.com\/es\/","og_site_name":"Tamraght Surf House","article_modified_time":"2026-08-20T12:18:22+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2025\/12\/rt.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tamraghtsurfhouse.com\/","url":"https:\/\/tamraghtsurfhouse.com\/","name":"Tamraght Surf Marruecos | Reserva tu campamento de surf y yoga con todo incluido","isPartOf":{"@id":"https:\/\/tamraghtsurfhouse.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tamraghtsurfhouse.com\/#primaryimage"},"image":{"@id":"https:\/\/tamraghtsurfhouse.com\/#primaryimage"},"thumbnailUrl":"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2025\/12\/rt.png","datePublished":"2021-07-15T09:42:07+00:00","dateModified":"2026-08-20T12:18:22+00:00","description":"Surf en Tamraght, Marruecos: surfea, al\u00f3jate y rel\u00e1jate con clases diarias, yoga y un ambiente incre\u00edble. Consulta los paquetes, las fechas y reserva tu viaje de surf ahora.","breadcrumb":{"@id":"https:\/\/tamraghtsurfhouse.com\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tamraghtsurfhouse.com\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/tamraghtsurfhouse.com\/#primaryimage","url":"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2025\/12\/rt.png","contentUrl":"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2025\/12\/rt.png","width":1280,"height":960,"caption":"tamraght surf house"},{"@type":"BreadcrumbList","@id":"https:\/\/tamraghtsurfhouse.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tamraghtsurfhouse.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/tamraghtsurfhouse.com\/#website","url":"https:\/\/tamraghtsurfhouse.com\/","name":"Casa de surf de Tamraght","description":"Casa de Surf Tamraght - Campamento de Surf Tamraght","publisher":{"@id":"https:\/\/tamraghtsurfhouse.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tamraghtsurfhouse.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/tamraghtsurfhouse.com\/#organization","name":"Casa de surf de Tamraght","url":"https:\/\/tamraghtsurfhouse.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/tamraghtsurfhouse.com\/#\/schema\/logo\/image\/","url":"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2021\/02\/output-onlinepngtools-5.png","contentUrl":"https:\/\/tamraghtsurfhouse.com\/wp-content\/uploads\/2021\/02\/output-onlinepngtools-5.png","width":350,"height":100,"caption":"Tamraght Surf House"},"image":{"@id":"https:\/\/tamraghtsurfhouse.com\/#\/schema\/logo\/image\/"}}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tamraghtsurfhouse.com\/es\/wp-json\/wp\/v2\/pages\/15037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tamraghtsurfhouse.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tamraghtsurfhouse.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tamraghtsurfhouse.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tamraghtsurfhouse.com\/es\/wp-json\/wp\/v2\/comments?post=15037"}],"version-history":[{"count":1124,"href":"https:\/\/tamraghtsurfhouse.com\/es\/wp-json\/wp\/v2\/pages\/15037\/revisions"}],"predecessor-version":[{"id":991515,"href":"https:\/\/tamraghtsurfhouse.com\/es\/wp-json\/wp\/v2\/pages\/15037\/revisions\/991515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tamraghtsurfhouse.com\/es\/wp-json\/wp\/v2\/media\/989269"}],"wp:attachment":[{"href":"https:\/\/tamraghtsurfhouse.com\/es\/wp-json\/wp\/v2\/media?parent=15037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}