{"id":7758,"date":"2026-05-05T07:05:18","date_gmt":"2026-05-05T07:05:18","guid":{"rendered":"https:\/\/teditour.com\/?page_id=7758"},"modified":"2026-05-05T07:25:36","modified_gmt":"2026-05-05T07:25:36","slug":"demo-area-privata","status":"publish","type":"page","link":"https:\/\/teditour.com\/en\/demo-area-privata\/","title":{"rendered":"Demo Area Privata"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7758\" class=\"elementor elementor-7758\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bfbdcc e-con-full e-flex e-con e-parent\" data-id=\"1bfbdcc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/teditour.com\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/18195603-hd_1920_1080_50fps.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-9d48842 e-con-full e-flex e-con e-child\" data-id=\"9d48842\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f6b4ad elementor-widget elementor-widget-html\" data-id=\"0f6b4ad\" 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<html>\r\n      <div class=\"langs\">\r\n    <span class=\"maiuscolo1\">\r\nArea Privata Tedi Tour Operator |<\/span>\r\n        \r\n  <span class=\"maiuscolo1\">\r\nArea Privata Tedi Tour Operator<\/span>\r\n        \r\n\r\n\r\n  <\/div>\r\n<\/html>\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<div class=\"elementor-element elementor-element-b2a681a e-con-full e-flex e-con e-parent\" data-id=\"b2a681a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a77d1d8 elementor-widget elementor-widget-html\" data-id=\"a77d1d8\" 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\n<style>\n  @import url(\"https:\/\/use.typekit.net\/brl5kki.css\");\n\n  .b2b-configurator {\n    --cfg-bg: linear-gradient(180deg, #022340 0%, #11385e 100%);\n    --cfg-card: rgba(255, 255, 255, 0.96);\n    --cfg-card-strong: #ffffff;\n    --cfg-paper: #f6f1e8;\n    --cfg-ink: #0c2238;\n    --cfg-muted: #5e7083;\n    --cfg-line: rgba(2, 35, 64, 0.12);\n    --cfg-accent: #c9a96d;\n    --cfg-accent-strong: #af8a4c;\n    --cfg-shadow: 0 30px 80px rgba(2, 35, 64, 0.2);\n    --cfg-radius-xl: 30px;\n    --cfg-radius-lg: 22px;\n    --cfg-radius-md: 14px;\n    position: relative;\n    overflow: hidden;\n    padding: 16px;\n    border-radius: 32px;\n    background: var(--cfg-bg);\n    color: #ffffff;\n    box-shadow: var(--cfg-shadow);\n    font-family: \"area-normal\", \"Helvetica Neue\", Arial, sans-serif;\n  }\n\n  .b2b-configurator * {\n    box-sizing: border-box;\n  }\n\n  .b2b-config-card {\n    border: 1px solid rgba(255, 255, 255, 0.14);\n    border-radius: var(--cfg-radius-xl);\n    background: var(--cfg-card);\n    box-shadow: var(--cfg-shadow);\n  }\n\n  .b2b-config-card + .b2b-config-card {\n    margin-top: 18px;\n  }\n\n  .b2b-config-card__head {\n    display: grid;\n    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(130px, 0.6fr));\n    gap: 0;\n    align-items: stretch;\n  }\n\n  .b2b-config-card__main,\n  .b2b-config-card__meta {\n    padding: 22px 24px;\n  }\n\n  .b2b-config-card__main {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    gap: 14px;\n    border-right: 1px solid rgba(255, 255, 255, 0.1);\n    background:\n      linear-gradient(180deg, rgba(2, 35, 64, 0.96), rgba(9, 47, 81, 0.96)),\n      radial-gradient(circle at top left, rgba(201, 169, 109, 0.18), transparent 30%);\n    color: #ffffff;\n    border-top-left-radius: calc(var(--cfg-radius-xl) - 1px);\n    border-bottom-left-radius: calc(var(--cfg-radius-xl) - 1px);\n  }\n\n  .b2b-config-card__label {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    width: fit-content;\n    padding: 8px 12px;\n    border-radius: 999px;\n    background: rgba(255, 255, 255, 0.1);\n    color: rgba(255, 255, 255, 0.88);\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  .b2b-config-card__experience {\n    margin: 0;\n    font-size: clamp(24px, 2.6vw, 34px);\n    font-family: \"amandine\", Georgia, serif;\n    font-weight: 500;\n    line-height: 1.02;\n  }\n\n  .b2b-config-card__subtext {\n    margin: 0;\n    color: rgba(255, 255, 255, 0.74);\n    font-size: 14px;\n    line-height: 1.55;\n  }\n\n  .b2b-config-card__toggle {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    width: fit-content;\n    border: 0;\n    padding: 0;\n    background: transparent;\n    color: #ffffff;\n    font-size: 14px;\n    font-weight: 700;\n    cursor: pointer;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n  }\n\n  .b2b-config-card__toggle-badge {\n    display: grid;\n    place-items: center;\n    width: 34px;\n    height: 34px;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.14);\n    border: 1px solid rgba(255, 255, 255, 0.22);\n    color: #fff;\n    font-size: 22px;\n    line-height: 1;\n    transition: transform 220ms ease, background 220ms ease;\n  }\n\n  .b2b-config-card.is-open .b2b-config-card__toggle-badge {\n    transform: rotate(45deg);\n    background: var(--cfg-accent);\n  }\n\n  .b2b-config-card__meta {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 8px;\n    border-right: 1px solid var(--cfg-line);\n  }\n\n  .b2b-config-card__meta:last-child {\n    border-right: 0;\n  }\n\n  .b2b-config-card__meta-label {\n    margin: 0;\n    color: var(--cfg-muted);\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  .b2b-config-card__meta-value {\n    margin: 0;\n    font-size: clamp(28px, 2.7vw, 42px);\n    font-family: \"area-normal\", \"Helvetica Neue\", Arial, sans-serif;\n    font-weight: 800;\n    line-height: 1;\n    color: #022340;\n  }\n\n  .b2b-config-card__meta-value--total {\n    color: var(--cfg-accent-strong);\n  }\n\n  .b2b-stepper {\n    display: inline-grid;\n    grid-template-columns: 42px minmax(44px, auto) 42px;\n    align-items: center;\n    width: fit-content;\n    border: 1px solid var(--cfg-line);\n    border-radius: 999px;\n    background: var(--cfg-paper);\n  }\n\n  .b2b-stepper button {\n    width: 42px;\n    height: 42px;\n    border: 0;\n    background: transparent;\n    color: var(--cfg-ink);\n    font-size: 22px;\n    cursor: pointer;\n  }\n\n  .b2b-stepper__value {\n    min-width: 44px;\n    text-align: center;\n    font-size: 18px;\n    font-weight: 700;\n    color: #022340;\n  }\n\n  .b2b-config-card__panel {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 280ms ease;\n    border-top: 1px solid transparent;\n  }\n\n  .b2b-config-card.is-open .b2b-config-card__panel {\n    grid-template-rows: 1fr;\n    border-top-color: var(--cfg-line);\n  }\n\n  .b2b-config-card__panel-inner {\n    overflow: hidden;\n  }\n\n  .b2b-config-card__panel-content {\n    padding: 24px;\n    background: var(--cfg-paper);\n    color: var(--cfg-ink);\n  }\n\n  .b2b-config-card__panel-header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 12px 18px;\n    margin-bottom: 18px;\n  }\n\n  .b2b-config-card__panel-title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n\n  .b2b-config-card__panel-note {\n    margin: 0;\n    color: var(--cfg-muted);\n    font-size: 14px;\n  }\n\n  .b2b-option-list {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 14px;\n  }\n\n  .b2b-option {\n    display: flex;\n    gap: 14px;\n    align-items: flex-start;\n    padding: 16px 18px;\n    border: 1px solid var(--cfg-line);\n    border-radius: var(--cfg-radius-lg);\n    background: rgba(255, 255, 255, 0.82);\n  }\n\n  .b2b-option input {\n    width: 18px;\n    height: 18px;\n    margin-top: 2px;\n    accent-color: var(--cfg-accent-strong);\n    flex: 0 0 auto;\n  }\n\n  .b2b-option__content {\n    flex: 1;\n  }\n\n  .b2b-option__top {\n    display: flex;\n    justify-content: space-between;\n    gap: 16px;\n    align-items: baseline;\n  }\n\n  .b2b-option__title,\n  .b2b-option__price {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 700;\n  }\n\n  .b2b-option__description {\n    margin: 6px 0 0;\n    color: var(--cfg-muted);\n    font-size: 13px;\n    line-height: 1.5;\n  }\n\n  .b2b-config-card__summary {\n    margin-top: 18px;\n    padding: 16px 18px;\n    border-radius: var(--cfg-radius-md);\n    background: rgba(2, 35, 64, 0.06);\n    color: var(--cfg-muted);\n    font-size: 14px;\n    line-height: 1.6;\n  }\n\n  .b2b-config-card__summary strong {\n    color: var(--cfg-ink);\n  }\n\n  @media (max-width: 980px) {\n    .b2b-config-card__head {\n      grid-template-columns: 1fr 1fr;\n    }\n\n    .b2b-config-card__main {\n      grid-column: 1 \/ -1;\n      border-right: 0;\n      border-bottom: 1px solid var(--cfg-line);\n    }\n\n    .b2b-config-card__meta:nth-child(3) {\n      border-right: 0;\n    }\n\n    .b2b-option-list {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  @media (max-width: 640px) {\n    .b2b-configurator {\n      padding: 18px;\n      border-radius: 24px;\n    }\n\n    .b2b-config-card__head {\n      grid-template-columns: 1fr;\n    }\n\n    .b2b-config-card__main,\n    .b2b-config-card__meta {\n      padding: 18px;\n      border-right: 0;\n      border-bottom: 1px solid var(--cfg-line);\n    }\n\n    .b2b-config-card__meta:last-child {\n      border-bottom: 0;\n    }\n\n    .b2b-config-card__panel-content {\n      padding: 18px;\n    }\n\n    .b2b-option__top {\n      flex-direction: column;\n      gap: 4px;\n    }\n  }\n<\/style>\n\n<div class=\"b2b-configurator\">\n  <div\n    class=\"b2b-config-card is-open\"\n    data-config-card\n    data-base-price=\"20\"\n    data-base-label=\"Guida ad Alberobello\"\n    data-start-people=\"10\"\n  >\n    <div class=\"b2b-config-card__head\">\n      <div class=\"b2b-config-card__main\">\n        <div>\n          <span class=\"b2b-config-card__label\">Esperienza<\/span>\n          <h3 class=\"b2b-config-card__experience\">Guida ad Alberobello<\/h3>\n          <p class=\"b2b-config-card__subtext\">\n            Visita base con tariffa per persona. Puoi aggiungere servizi opzionali dal pannello qui sotto.\n          <\/p>\n        <\/div>\n\n        <button class=\"b2b-config-card__toggle\" type=\"button\" aria-expanded=\"true\">\n          <span class=\"b2b-config-card__toggle-badge\">+<\/span>\n          <span>Servizi aggiuntivi<\/span>\n        <\/button>\n      <\/div>\n\n      <div class=\"b2b-config-card__meta\">\n        <p class=\"b2b-config-card__meta-label\">Tariffa<\/p>\n        <p class=\"b2b-config-card__meta-value\"><span data-base-price-display>20<\/span> \u20ac<\/p>\n      <\/div>\n\n      <div class=\"b2b-config-card__meta\">\n        <p class=\"b2b-config-card__meta-label\">N. persone<\/p>\n        <div class=\"b2b-stepper\" aria-label=\"Numero persone\">\n          <button type=\"button\" data-stepper-action=\"decrease\" aria-label=\"Riduci persone\">-<\/button>\n          <span class=\"b2b-stepper__value\" data-people-display>10<\/span>\n          <button type=\"button\" data-stepper-action=\"increase\" aria-label=\"Aumenta persone\">+<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"b2b-config-card__meta\">\n        <p class=\"b2b-config-card__meta-label\">Totale<\/p>\n        <p class=\"b2b-config-card__meta-value b2b-config-card__meta-value--total\"><span data-total-display>200<\/span> \u20ac<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"b2b-config-card__panel\">\n      <div class=\"b2b-config-card__panel-inner\">\n        <div class=\"b2b-config-card__panel-content\">\n          <div class=\"b2b-config-card__panel-header\">\n            <h4 class=\"b2b-config-card__panel-title\">Seleziona i servizi extra<\/h4>\n            <p class=\"b2b-config-card__panel-note\">In questo esempio tutti gli extra sono calcolati per persona.<\/p>\n          <\/div>\n\n          <div class=\"b2b-option-list\">\n            <label class=\"b2b-option\">\n              <input type=\"checkbox\" data-extra-price=\"10\" data-extra-label=\"Aperitivo in trullo\" data-extra-mode=\"per-person\">\n              <span class=\"b2b-option__content\">\n                <span class=\"b2b-option__top\">\n                  <span class=\"b2b-option__title\">Aperitivo in trullo<\/span>\n                  <span class=\"b2b-option__price\">+10 \u20ac \/ persona<\/span>\n                <\/span>\n                <span class=\"b2b-option__description\">Momento conviviale di benvenuto prima dell'esperienza.<\/span>\n              <\/span>\n            <\/label>\n\n            <label class=\"b2b-option\">\n              <input type=\"checkbox\" data-extra-price=\"3\" data-extra-label=\"Dimostrazione mozzarella\" data-extra-mode=\"per-person\">\n              <span class=\"b2b-option__content\">\n                <span class=\"b2b-option__top\">\n                  <span class=\"b2b-option__title\">Dimostrazione mozzarella<\/span>\n                  <span class=\"b2b-option__price\">+3 \u20ac \/ persona<\/span>\n                <\/span>\n                <span class=\"b2b-option__description\">Mini experience con dimostrazione e racconto del prodotto.<\/span>\n              <\/span>\n            <\/label>\n\n            <label class=\"b2b-option\">\n              <input type=\"checkbox\" data-extra-price=\"5\" data-extra-label=\"Visita in chiostrina\" data-extra-mode=\"per-person\">\n              <span class=\"b2b-option__content\">\n                <span class=\"b2b-option__top\">\n                  <span class=\"b2b-option__title\">Visita in chiostrina<\/span>\n                  <span class=\"b2b-option__price\">+5 \u20ac \/ persona<\/span>\n                <\/span>\n                <span class=\"b2b-option__description\">Approfondimento finale in uno spazio riservato al gruppo.<\/span>\n              <\/span>\n            <\/label>\n          <\/div>\n\n          <div class=\"b2b-config-card__summary\" data-summary><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  (function () {\n    var formatEuro = function (value) {\n      return new Intl.NumberFormat(\"it-IT\", {\n        maximumFractionDigits: 0\n      }).format(value);\n    };\n\n    document.querySelectorAll(\"[data-config-card]\").forEach(function (card) {\n      var basePrice = Number(card.dataset.basePrice || 0);\n      var baseLabel = card.dataset.baseLabel || \"Esperienza\";\n      var people = Number(card.dataset.startPeople || 1);\n\n      var toggleButton = card.querySelector(\".b2b-config-card__toggle\");\n      var peopleDisplay = card.querySelector(\"[data-people-display]\");\n      var totalDisplay = card.querySelector(\"[data-total-display]\");\n      var summary = card.querySelector(\"[data-summary]\");\n      var basePriceDisplay = card.querySelector(\"[data-base-price-display]\");\n      var checkboxes = Array.prototype.slice.call(card.querySelectorAll(\"input[type='checkbox']\"));\n\n      var render = function () {\n        var extras = checkboxes\n          .filter(function (item) { return item.checked; })\n          .map(function (item) {\n            return {\n              label: item.dataset.extraLabel || \"Extra\",\n              price: Number(item.dataset.extraPrice || 0),\n              mode: item.dataset.extraMode || \"per-person\"\n            };\n          });\n\n        var extrasPerPerson = extras.reduce(function (sum, item) {\n          return item.mode === \"per-person\" ? sum + item.price : sum;\n        }, 0);\n\n        var extrasFixed = extras.reduce(function (sum, item) {\n          return item.mode === \"fixed\" ? sum + item.price : sum;\n        }, 0);\n\n        var totalPerPerson = basePrice + extrasPerPerson;\n        var total = (totalPerPerson * people) + extrasFixed;\n        var selectedLabels = extras.map(function (item) { return item.label; });\n\n        peopleDisplay.textContent = people;\n        basePriceDisplay.textContent = formatEuro(basePrice);\n        totalDisplay.textContent = formatEuro(total);\n\n        summary.innerHTML = \"<strong>Riepilogo \" +\n          baseLabel +\n          \":<\/strong> \" +\n          people +\n          \" persone x \" +\n          formatEuro(totalPerPerson) +\n          \" \u20ac = <strong>\" +\n          formatEuro(total) +\n          \" \u20ac<\/strong>\" +\n          (extrasFixed ? \" \u00b7 Extra fissi inclusi: \" + formatEuro(extrasFixed) + \" \u20ac\" : \"\") +\n          (selectedLabels.length ? \" \u00b7 Extra selezionati: \" + selectedLabels.join(\", \") : \" \u00b7 Nessun extra selezionato.\");\n      };\n\n      card.querySelectorAll(\"[data-stepper-action]\").forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n          if (button.dataset.stepperAction === \"increase\") {\n            people += 1;\n          } else {\n            people = Math.max(1, people - 1);\n          }\n\n          render();\n        });\n      });\n\n      checkboxes.forEach(function (checkbox) {\n        checkbox.addEventListener(\"change\", render);\n      });\n\n      toggleButton.addEventListener(\"click\", function () {\n        var isOpen = card.classList.toggle(\"is-open\");\n        toggleButton.setAttribute(\"aria-expanded\", String(isOpen));\n      });\n\n      render();\n    });\n  })();\n<\/script>\n\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>Area Privata Tedi Tour Operator | Area Privata Tedi Tour Operator Esperienza Guida ad Alberobello Visita base con tariffa per persona. Puoi aggiungere servizi opzionali dal pannello qui sotto. + Servizi aggiuntivi Tariffa 20 \u20ac N. persone &#8211; 10 + Totale 200 \u20ac Seleziona i servizi extra In questo esempio tutti gli extra sono calcolati [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7758","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teditour.com\/en\/wp-json\/wp\/v2\/pages\/7758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teditour.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teditour.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teditour.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/teditour.com\/en\/wp-json\/wp\/v2\/comments?post=7758"}],"version-history":[{"count":16,"href":"https:\/\/teditour.com\/en\/wp-json\/wp\/v2\/pages\/7758\/revisions"}],"predecessor-version":[{"id":7774,"href":"https:\/\/teditour.com\/en\/wp-json\/wp\/v2\/pages\/7758\/revisions\/7774"}],"wp:attachment":[{"href":"https:\/\/teditour.com\/en\/wp-json\/wp\/v2\/media?parent=7758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}