/* ==========================================================================
   WEBINAR DETAIL
   Markup: views/general/view_included_pages/webinar_hero.php + webinar_body.php
   Πηγη σχεδιασμου: Q:/FILES/Optisleek/optisleek-claude/webinar-detail.html

   ΤΑ ΧΡΩΜΑΤΑ ΕΡΧΟΝΤΑΙ ΑΠΟ ΤΗ ΒΑΣΗ: το webinars.webinar_thumb_color γινεται
   κλαση .wd-c1 / .wd-c2 / .wd-c3 πανω στο section, και ΜΟΝΟ αυτη οριζει τις
   τεσσερις μεταβλητες πιο κατω. Ολα τα υπολοιπα διαβαζουν τις μεταβλητες,
   ωστε ενα νεο χρωμα να ειναι ενα block και οχι κυνηγι σε ολο το αρχειο.

   ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ: μονο απο το views/general/css/fonts.css - καμια εισαγωγη
   νεας. Ακολουθειται το μοτιβο του slideshow (01-general-style.css):
     Syne-Bold     -> τιτλοι
     Syne-SemiBold -> labels, κουμπια, εντονα
     Syne-Regular  -> τρεχουμενο κειμενο
   Καθε βαρος ειναι ΞΕΧΩΡΙΣΤΗ οικογενεια, γι' αυτο ΔΕΝ μπαινει font-weight
   απο πανω: θα ζητουσε απο τον browser να "παχυνει" μια ηδη bold γραμματοσειρα
   (faux bold). Ιδιο μοτιβο με το .slider-container .title του site.

   Τα ονοματα ειναι με προθεμα wd- και τα κουμπια wd-btn (οχι .btn), ωστε να
   μη συγκρουονται με το bootstrap που φορτωνει το site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Η ΠΑΛΕΤΑ ΤΟΥ WEBINAR

   Το webinars.webinar_thumb_color γινεται κλαση .wd-c1/.wd-c2/.wd-c3 και ΟΛΗ
   η χρωματολογια βγαινει απο εδω:

     τιμη 1 (Μωβ)     -> #8C3CFA
     τιμη 2 (Μπλε)    -> #4A6FD8
     τιμη 3 (Πράσινο) -> #00E09D
     κενο / 0         -> #8C3CFA (default)

     --wd-c       το βασικο χρωμα
     --wd-c-dark  σκουρο, για hover
     --wd-on-c    το κειμενο ΠΑΝΩ στο βασικο χρωμα
     --wd-grad    το φοντο του hero, χτισμενο γυρω απο το βασικο
     --wd-accent  ανοιχτος τονος για τα εικονιδια πανω στο gradient

   ΚΑΘΕ section του webinar παιρνει την ιδια κλαση wd-cN, γι' αυτο ειναι
   ολα γραμμενα μαζι. Αν προστεθει νεο section, ΠΡΕΠΕΙ να μπει και εδω -
   αλλιως τα var(--wd-*) μενουν αοριστα και π.χ. το κουμπι βγαινει ασχημάτιστο.
   -------------------------------------------------------------------------- */

.wd-hero,
.wd-body-out,
.wd-register,
.wd-faq-out,
.wd-state,
.wd-sticky,
.wd-next,
.wd-lib-item,
.wd-modal {
    /* Μωβ - ισχυει και για webinar_thumb_color=0 ("Επιλογή") */
    --wd-c: #8C3CFA;
    --wd-c-dark: #6E23D6;
    --wd-on-c: #FFFFFF;
    --wd-grad: linear-gradient(115deg, #7A2FF0 0%, #8C3CFA 38%, #4A6FD8 72%, #00E09D 100%);
    /* Δυο τονοι του ΙΔΙΟΥ χρωματος - για μικρα κουτια (thumb καρτας), οπου το
       τεσσαρων σταθμων --wd-grad θα εβγαζε ολη την παλετα σε 120px υψος. */
    --wd-thumb: linear-gradient(135deg, #7A2FF0, #A560FF);
    --wd-accent: #7BF2E7;
}

.wd-hero.wd-c2,
.wd-body-out.wd-c2,
.wd-register.wd-c2,
.wd-faq-out.wd-c2,
.wd-state.wd-c2,
.wd-sticky.wd-c2,
.wd-next.wd-c2,
.wd-lib-item.wd-c2,
.wd-modal.wd-c2 {
    /* Μπλε */
    --wd-c: #4A6FD8;
    --wd-c-dark: #3554B0;
    --wd-on-c: #FFFFFF;
    --wd-grad: linear-gradient(115deg, #3D5BC9 0%, #4A6FD8 38%, #3E93D8 72%, #00E09D 100%);
    --wd-thumb: linear-gradient(135deg, #3E63D8, #6FA0F0);
    --wd-accent: #7BF2E7;
}

.wd-hero.wd-c3,
.wd-body-out.wd-c3,
.wd-register.wd-c3,
.wd-faq-out.wd-c3,
.wd-state.wd-c3,
.wd-sticky.wd-c3,
.wd-next.wd-c3,
.wd-lib-item.wd-c3,
.wd-modal.wd-c3 {
    /* Πράσινο.
       ΣΗΜ.: το --wd-on-c ειναι ΛΕΥΚΟ κατ' απαιτηση, ωστε τα κουμπια να
       συμπεριφερονται ιδια σε ολα τα χρωματα. Ειναι συνειδητη επιλογη, οχι
       παραλειψη: το λευκο πανω στο #00E09D δινει αντιθεση ~1,7:1 (το WCAG
       ζηταει 4,5:1). Αν καποτε θελησουμε αναγνωσιμοτητα αντι για συνεπεια,
       η τιμη που περναει ειναι #10352A. */
    --wd-c: #00E09D;
    --wd-c-dark: #00B37D;
    --wd-on-c: #FFFFFF;
    --wd-grad: linear-gradient(115deg, #00C489 0%, #00E09D 38%, #4A6FD8 78%, #8C3CFA 100%);
    --wd-thumb: linear-gradient(135deg, #0C8A83, #17C9BE);
    --wd-accent: #FFFFFF;
}

.wd-hero {
    background: var(--wd-grad);
    color: #fff;
    padding: 56px 0 64px;
    position: relative;
    overflow: hidden;
}

/* Ο header του site ειναι fixed, οποτε ενα anchor (#register κλπ) προσγειωνει
   την ενοτητα ΚΑΤΩ απο αυτον και κοβεται ο τιτλος της. Το scroll-margin-top
   κραταει το κενο - το --wd-sticky-top το μετραει το js απο το πραγματικο
   υψος του header (webinar_body.php). */
.wd-hero,
.wd-register,
.wd-faq-out,
.wd-body-out {
    scroll-margin-top: var(--wd-sticky-top, 88px);
}

/* Ο φωτεινος κυκλος πανω δεξια. Καθαρα διακοσμητικος. */
.wd-hero::before {
    content: "";
    position: absolute;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    top: -340px;
    right: -180px;
}

/* Ο κοινος container. ΜΟΝΟ πλατος/περιθωρια - το grid το βαζει καθε ενοτητα
   ξεχωριστα (.wd-hero .wd-wrap, .wd-body), αλλιως οι δυο ενοτητες θα
   πατουσαν η μια τους κανονες της αλλης. */
.wd-wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.wd-hero .wd-wrap {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: start;
}

/* ---------- Badges ---------- */

.wd-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.wd-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
}

/* Κοκκινο + κουκκιδα = "τρεχει ΤΩΡΑ" (webinar_status=2). */
.wd-badge.is-live {
    background: #fff;
    color: #D8354B;
    border-color: #fff;
}

/* Προγραμματισμενο (webinar_status=1). Ιδιο σχημα, ουδετερο χρωμα και ΧΩΡΙΣ
   κουκκιδα: ειναι ζωντανη συνεδρια αλλα δεν εχει ξεκινησει. */
.wd-badge.is-upcoming {
    background: #fff;
    color: #1C1B22;
    border-color: #fff;
}

.wd-badge.is-ondemand {
    background: rgba(255, 255, 255, .16);
    color: var(--wd-accent);
}

.wd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: wd-pulse 1.6s ease-in-out infinite;
}

@keyframes wd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

/* ---------- Κείμενο ---------- */

.wd-hero h1 {
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: clamp(28px, 3.9vw, 44px);
    line-height: 1.15;
    letter-spacing: -.5px;
    margin-bottom: 16px;
    color: #fff;
}

/* Περιεχομενο απο editor (webinars.text_gr/en): δεν ξερουμε τι tags θα βαλει
   ο χρηστης, γι' αυτο στυλιζονται και τα εσωτερικα - αλλιως οι παραγραφοι θα
   επαιρναν τα default του browser (μαυρο κειμενο, αλλο μεγεθος) μεσα στο
   χρωματιστο hero. */
.wd-hero .wd-lede,
.wd-hero .wd-lede p,
.wd-hero .wd-lede li,
.wd-hero .wd-lede span,
.wd-hero .wd-lede div {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 16.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

.wd-hero .wd-lede {
    max-width: 560px;
    margin-bottom: 26px;
}

.wd-hero .wd-lede p {
    margin: 0 0 10px 0;
}

.wd-hero .wd-lede p:last-child {
    margin-bottom: 0;
}

.wd-hero .wd-lede b,
.wd-hero .wd-lede strong {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    color: #fff;
}

.wd-hero .wd-lede a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wd-hero .wd-lede ul,
.wd-hero .wd-lede ol {
    margin: 0 0 10px 20px;
    padding: 0;
}

.wd-meta {
    display: flex;
    gap: 14px 26px;
    flex-wrap: wrap;
}

.wd-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, .95);
}

.wd-meta svg {
    display: block;
    width: 17px;
    height: 17px;
    stroke: var(--wd-accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Το κουτί δράσης ---------- */

.wd-panel {
    background: #fff;
    color: #1C1B22;
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(28, 27, 34, .22);
    padding: 26px;
    position: sticky;
    top: var(--wd-sticky-top, 88px);
}

.wd-panel h2 {
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin-bottom: 4px;
    color: #1C1B22;
}

.wd-panel .wd-panel-sub {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #55535F;
    margin-bottom: 18px;
}

.wd-count {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.wd-count div {
    background: #F2F2F4;
    border-radius: 12px;
    padding: 10px 4px;
    text-align: center;
}

.wd-count b {
    display: block;
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: 22px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.wd-count span {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #55535F;
}

.wd-tba {
    background: #F2F2F4;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    color: #55535F;
    margin-bottom: 18px;
}

/* ---------- Player της καταγραφής (on-demand) ---------- */

/* Αναλογια 16:9 με padding-top: το κουτι κραταει το υψος του πριν φορτωσει
   οτιδηποτε, οποτε η σελιδα δεν "πηδαει" οταν μπει το iframe. */
.wd-player {
    position: relative;
    padding-top: 56.25%;
    background: #17161D;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 18px;
}

.wd-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.wd-player .wd-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wd-grad);
    border: none;
    padding: 0;
    cursor: pointer;
    color: #fff;
}

.wd-player .wd-play svg {
    display: block;
    width: 64px;
    height: 64px;
    fill: #fff;
    stroke: none;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
    transition: transform .15s ease;
}

.wd-player .wd-play:hover svg,
.wd-player .wd-play:focus svg {
    transform: scale(1.08);
}

/* ---------- Κουμπιά ---------- */

.wd-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.2;
    border-radius: 999px;
    padding: 12px 26px;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.wd-btn:focus-visible {
    outline: 3px solid var(--wd-c);
    outline-offset: 2px;
}

.wd-btn-primary {
    background: var(--wd-c);
    color: var(--wd-on-c);
}

.wd-btn-primary:hover,
.wd-btn-primary:focus {
    background: var(--wd-c-dark);
    color: var(--wd-on-c);
    transform: translateY(-1px);
}

.wd-btn-outline {
    background: #fff;
    color: var(--wd-c);
    border: 1.5px solid var(--wd-c);
}

.wd-btn-outline:hover,
.wd-btn-outline:focus {
    background: var(--wd-c);
    color: var(--wd-on-c);
}

.wd-mini {
    display: flex;
    gap: 8px;
}

.wd-mini .wd-btn {
    flex: 1;
    padding: 9px 10px;
    font-size: 12.5px;
}

.wd-seats {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    color: #55535F;
    text-align: center;
    margin: 12px 0 0 0;
}

.wd-seats b {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    color: #1C1B22;
}

/* ==========================================================================
   ΣΩΜΑ ΣΕΛΙΔΑΣ
   ========================================================================== */

.wd-body-out {
    padding: 64px 0;
}

.wd-body {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: start;
}

/* ==========================================================================
   STICKY ΠΛΑΪΝΗ ΣΤΗΛΗ

   Το position:sticky ακυρωνεται αν ΟΠΟΙΟΣΔΗΠΟΤΕ προγονος εχει overflow
   διαφορετικο απο visible: γινεται scroll container και το sticky κολλαει
   μεσα σε ενα κουτι που δεν σκρολαρει, δηλαδη δεν κανει τιποτα.

   Το site εχει δυο τετοιους wrappers (css/global-style.css):
       #wrapper_out  { overflow-x: hidden !important; }
       #wrapper_inner{ overflow: hidden; }

   Δεν τους πειραζουμε καθολου - τους ξαναγραφουμε ΜΟΝΟ στη σελιδα webinar
   (κλαση webinar-page στο <body>, δες included_pages/body_classes.php) με
   `clip` αντι για `hidden`. Το clip κοβει ακριβως το ιδιο, αλλα ΔΕΝ φτιαχνει
   scroll container, οποτε το sticky δουλευει.

   Το body δεν χρειαζεται πειραγμα: το overflow του μεταφερεται στο viewport
   απο τον browser, οποτε το ιδιο δεν ειναι scroll container.
   ========================================================================== */

body.webinar-page #wrapper_out {
    overflow-x: clip !important;
}

body.webinar-page #wrapper_inner {
    overflow: clip;
}

.wd-aside {
    position: sticky;
    /* Το --wd-sticky-top το μετραει το js απο το πραγματικο υψος του fixed
       header (webinar_body.php). Το 88px ειναι το fallback. */
    top: var(--wd-sticky-top, 88px);
    /* Ρητο, να μη χαθει αν αλλαξει το align-items του .wd-body: χωρις αυτο το
       grid item τεντωνεται σε ολο το υψος της γραμμης και δεν εχει που να
       κολλησει. */
    align-self: start;
    display: grid;
    gap: 20px;
}

/* ---------- Κύρια στήλη ---------- */

.wd-main h2 {
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    letter-spacing: -.3px;
    line-height: 1.25;
    color: #1C1B22;
    margin: 0 0 14px 0;
}

.wd-main h2:not(:first-child) {
    margin-top: 44px;
}

/* Περιεχομενο απο editor: δεν ξερουμε τι tags θα βαλει ο χρηστης, οποτε
   στυλιζουμε τα βασικα αντι να βασιζομαστε σε συγκεκριμενη δομη. */
.wd-rte,
.wd-rte p,
.wd-rte ul,
.wd-rte ol,
.wd-rte li,
.wd-rte span,
.wd-rte div {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
}

.wd-rte p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #55535F;
    margin: 0 0 14px 0;
}

.wd-rte p:last-child {
    margin-bottom: 0;
}

.wd-rte ul,
.wd-rte ol {
    margin: 0 0 14px 20px;
    padding: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: #55535F;
}

.wd-rte li {
    margin-bottom: 6px;
}

.wd-rte a {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    color: var(--wd-c);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wd-rte b,
.wd-rte strong {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    color: #1C1B22;
}

.wd-rte h2,
.wd-rte h3,
.wd-rte h4 {
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    color: #1C1B22;
    margin: 24px 0 10px 0;
}

.wd-rte img {
    max-width: 100%;
    height: auto;
}

/* ---------- What you'll learn ---------- */

.wd-learn {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.wd-learn li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #1C1B22;
}

/* ΣΤΑΘΕΡΟ χρωμα, σκοπιμα ΟΧΙ var(--wd-c): το τσεκακι ειναι σημα "ναι, θα το
   μαθεις" και μενει ιδιο σε καθε webinar, ανεξαρτητα απο το
   webinar_thumb_color. Ειναι το teal της παλετας του site. */
.wd-learn svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    stroke: #0FA79E;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Agenda ---------- */

/* Η καθετη γραμμη ειναι border ΤΟΥ ΙΔΙΟΥ του <ol>, οχι ξεχωριστο στοιχειο -
   ετσι μεγαλωνει μονη της οσο προστιθενται βηματα. */
.wd-agenda {
    list-style: none;
    border-left: 2px solid #E7E6EC;
    padding: 0 0 0 26px;
    margin: 6px 0 0 0;
}

.wd-agenda li {
    position: relative;
    padding-bottom: 22px;
}

.wd-agenda li:last-child {
    padding-bottom: 0;
}

/* Η κουκιδα πανω στη γραμμη. Το λευκο border την "κοβει" απο τη γραμμη και
   το box-shadow ξαναφτιαχνει τον εξωτερικο δακτυλιο. */
.wd-agenda li::before {
    content: "";
    position: absolute;
    left: -33px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--wd-c);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--wd-c);
}

.wd-agenda .t {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wd-c);
}

.wd-agenda b {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15.5px;
    color: #1C1B22;
    margin: 2px 0 3px 0;
}

.wd-agenda .d {
    display: block;
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #55535F;
}

/* ---------- Your host ---------- */

.wd-speaker {
    display: flex;
    gap: 18px;
    align-items: center;
    background: #F2F2F4;
    border-radius: 16px;
    padding: 22px;
}

/* Δεν υπαρχει πεδιο φωτογραφιας ομιλητη: το εικαστικο ειναι τα αρχικα πανω
   στο ΙΔΙΟ gradient με το hero, δηλαδη ακολουθει κι αυτο το
   webinar_thumb_color. */
.wd-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wd-grad);
    color: #fff;
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: 26px;
    line-height: 1;
    letter-spacing: .5px;
}

.wd-speaker-txt {
    min-width: 0;
}

.wd-speaker b {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 16.5px;
    color: #1C1B22;
    margin-bottom: 6px;
}

/* Το βιογραφικο ειναι πιο μικρο απο το κυριως κειμενο της σελιδας. */
.wd-speaker .wd-rte p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* ---------- Πλαϊνά κουτιά ---------- */

.wd-box {
    background: #fff;
    border: 1px solid #E7E6EC;
    border-radius: 16px;
    padding: 22px;
}

.wd-box h3 {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #55535F;
    margin: 0 0 14px 0;
}

/* ---------- Session details ---------- */

.wd-facts {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.wd-facts li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
}

/* Το εικονιδιο ειναι ανεβασμενη φωτο (session_detail.photo) - γι' αυτο
   σταθερο κουτι και object-fit, ωστε μια στραβη αναλογια να μη σπρωχνει
   το κειμενο. */
.wd-fact-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
    object-fit: contain;
    display: block;
}

.wd-fact-ico.is-empty {
    /* Κρατα τη στοιχιση οταν δεν εχει ανεβει εικονα. */
    visibility: hidden;
}

/* Ανεβασμενο SVG που μπηκε inline (webinar_body.php): τα stroke/fill του
   εγιναν currentColor, οποτε το χρωμα το δινει αυτο το `color` - δηλαδη το
   επιλεγμενο χρωμα του webinar. Γινεται ΜΟΝΟ οταν εχει επιλεγει
   webinar_thumb_color· αλλιως το αρχειο μπαινει σαν <img> ως εχει. */
.wd-fact-ico.is-svg {
    color: var(--wd-c);
}

.wd-fact-ico.is-svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wd-fact-txt {
    display: block;
}

.wd-facts b {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    color: #1C1B22;
}

.wd-facts .wd-fact-txt span {
    display: block;
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    color: #55535F;
    font-size: 13px;
}

/* ---------- Topics ---------- */

.wd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wd-tag {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    border: 1.5px solid #E7E6EC;
    border-radius: 999px;
    padding: 5px 14px;
    color: #55535F;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

/* Την κλαση τη βαζει το script των "Σχετικων συνεδριων" - μονο τοτε το chip
   κανει κατι, οποτε μονο τοτε δειχνει οτι πατιεται. */
.wd-tag.is-clickable {
    cursor: pointer;
    user-select: none;
}

.wd-tag.is-clickable:hover,
.wd-tag.is-clickable:focus-visible {
    border-color: var(--wd-c);
    color: var(--wd-c);
    outline: none;
}

.wd-tag.is-on,
.wd-tag.is-on:hover {
    background: var(--wd-c);
    border-color: var(--wd-c);
    color: var(--wd-on-c);
}

/* ---------- Share ---------- */

.wd-share {
    display: flex;
    gap: 8px;
}

.wd-share button,
.wd-share a {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid #E7E6EC;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--wd-c);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.wd-share button:hover,
.wd-share a:hover,
.wd-share button:focus,
.wd-share a:focus {
    border-color: var(--wd-c);
    background: var(--wd-c);
    color: var(--wd-on-c);
}

/* Το κουμπι αντιγραφης ειναι εικονιδιο: η επιβεβαιωση γινεται με χρωμα,
   γιατι δεν υπαρχει κειμενο να αλλαξει. */
.wd-share button.is-copied {
    border-color: var(--wd-c);
    background: var(--wd-c);
    color: var(--wd-on-c);
}

.wd-share svg {
    display: block;
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   ΦΟΡΜΑ ΕΓΓΡΑΦΗΣ (#register)
   Markup: views/general/view_included_pages/webinar_form.php
   ========================================================================== */

/* Το 88/52 ειναι ο ρυθμος του σχεδιαστικου (section + sec-head) - ο ιδιος
   ισχυει και στο FAQ πιο κατω, ωστε οι ενοτητες να αναπνεουν το ιδιο.

   ΓΡΑΜΜΕΝΟ ΩΣ #register.wd-register ΕΠΙΤΗΔΕΣ: το css/global-style.css:2486
   εχει `#register { padding-top: 20px }` απο παλια φορμα εγγραφης. Το id
   (1,0,0) νικαει σκετη κλαση (0,1,0), οποτε το `.wd-register` αγνοουνταν.
   Ο συνδυασμος id+κλαση (1,1,0) κερδιζει χωρις !important. */
#register.wd-register {
    background: #F2F2F4;
    padding: 88px 0;
}

.wd-sec-head {
    max-width: 720px;
    margin: 0 auto 52px auto;
    text-align: center;
}

.wd-sec-head h2 {
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: clamp(24px, 3.4vw, 38px);
    letter-spacing: -.4px;
    line-height: 1.2;
    color: #1C1B22;
    margin: 0 0 14px 0;
}

.wd-sec-head p {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 16.5px;
    line-height: 1.6;
    color: #55535F;
    margin: 0;
}

.wd-form-box {
    max-width: 560px;
    margin: 0 auto;
    padding: 32px;
}

.wd-form {
    display: grid;
    gap: 14px;
}

.wd-field label {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #1C1B22;
    margin-bottom: 6px;
}

.wd-field input[type="text"],
.wd-field input[type="email"],
.wd-field select {
    width: 100%;
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #1C1B22;
    background: #fff;
    border: 1.5px solid #E7E6EC;
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wd-field input:focus,
.wd-field select:focus {
    outline: none;
    border-color: var(--wd-c);
    /* Το χρωμα του δαχτυλιδιου δεν μπορει να βγει απο το --wd-c (δεν εχουμε
       color-mix), οποτε μενει ουδετερο σκιαγραφημα - δουλευει και στα τρια. */
    box-shadow: 0 0 0 3px rgba(28, 27, 34, .10);
}

.wd-field.has-error input,
.wd-field.has-error select {
    border-color: #D8354B;
}

.wd-err {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    color: #D8354B;
    margin: 5px 0 0 0;
}

.wd-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #55535F;
    margin-bottom: 0;
    cursor: pointer;
}

/* Το native checkbox δεν δενει με τα υπολοιπα πεδια (1.5px περιγραμμα,
   στρογγυλεμενες γωνιες), γι' αυτο το ξαναχτιζουμε. Μενει πραγματικο
   <input type="checkbox"> - αλλαζει μονο η οψη, οποτε κραταει πληκτρολογιο
   και screen readers. */
.wd-consent input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 1px 0 0 0;
    padding: 0;
    background: #fff;
    border: 1.5px solid #E7E6EC;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

.wd-consent input[type="checkbox"]:hover {
    border-color: var(--wd-c);
}

.wd-consent input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--wd-c);
    outline-offset: 2px;
}

.wd-consent input[type="checkbox"]:checked {
    background: var(--wd-c);
    border-color: var(--wd-c);
}

/* Το τσεκακι ειναι δυο borders γυρισμενα 45 μοιρες - χωρις εικονα ή svg,
   ωστε να παιρνει το --wd-on-c και να μενει καθαρο σε καθε zoom. */
.wd-consent input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--wd-on-c);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.wd-field.has-error .wd-consent input[type="checkbox"] {
    border-color: #D8354B;
}

.wd-consent a {
    color: var(--wd-c);
    text-decoration: underline;
}

.wd-form-alert {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #D8354B;
    background: rgba(216, 53, 75, .08);
    border-radius: 12px;
    padding: 12px 14px;
}

/* Τα honeypot δεν κρυβονται με display:none: καποια bots το διαβαζουν και τα
   προσπερνουν. Τα βγαζουμε εκτος οθονης, ωστε να μοιαζουν κανονικα πεδια. */
.wd-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---------- Loader στο submit ---------- */

.wd-form-submit {
    position: relative;
}

.wd-loader {
    display: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: currentColor;
    animation: wd-spin .7s linear infinite;
}

.wd-form.is-sending .wd-loader {
    display: block;
}

.wd-form.is-sending .wd-form-submit {
    cursor: wait;
    opacity: .85;
}

@keyframes wd-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Μήνυμα επιτυχίας ---------- */

.wd-success {
    text-align: center;
    padding: 22px 6px;
}

.wd-success svg {
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px auto;
    stroke: #0FA79E;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wd-success b {
    display: block;
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #1C1B22;
    margin-bottom: 6px;
}

.wd-success p {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #55535F;
    margin: 0;
}

/* ==========================================================================
   FAQ ("Questions before you join")
   Markup: views/general/view_included_pages/webinar_faq.php
   ========================================================================== */

.wd-faq-out {
    padding: 88px 0;
}

.wd-faq {
    max-width: 760px;
    margin: 0 auto;
}

.wd-faq-item {
    border-bottom: 1px solid #E7E6EC;
}

.wd-faq-q {
    width: 100%;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #1C1B22;
    text-align: left;
    padding: 20px 0;
    transition: color .15s ease;
    /* Χωρις πλαισιο στο κλικ. Η ενδειξη οτι το πεδιο ειναι εστιασμενο ειναι η
       αλλαγη χρωματος πιο κατω - οποτε δεν χανεται η πληροφορια για οποιον
       πλοηγειται με πληκτρολογιο. */
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.wd-faq-q::-moz-focus-inner {
    border: 0;
}

.wd-faq-q:hover,
.wd-faq-q:focus,
.wd-faq-q:focus-visible,
.wd-faq-q[aria-expanded="true"] {
    color: var(--wd-c);
    outline: none;
    box-shadow: none;
}

.wd-faq-q svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--wd-c);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    transition: transform .2s ease;
}

/* Το "+" γινεται "×" γυριζοντας 45 μοιρες - ενα συμβολο, δυο καταστασεις. */
.wd-faq-q[aria-expanded="true"] svg {
    transform: rotate(45deg);
}

/* Ανοιγμα με grid-template-rows 0fr -> 1fr: κινειται χωρις να ξερουμε το υψος,
   οποτε δεν χρειαζεται js μετρηση ουτε ξαναϋπολογισμος στο resize. */
.wd-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}

.wd-faq-q[aria-expanded="true"] + .wd-faq-a {
    grid-template-rows: 1fr;
}

.wd-faq-a > div {
    overflow: hidden;
}

.wd-faq-a .wd-rte {
    padding-bottom: 20px;
}

.wd-faq-a .wd-rte p {
    font-size: 15px;
    line-height: 1.7;
    color: #55535F;
}

.wd-faq-a .wd-rte p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   STICKY CTA (μπαρα κατω)
   Markup: views/general/view_included_pages/webinar_hero.php
   Εμφανιζεται μολις φυγει απο την οθονη το κουτι δρασης του hero.
   ========================================================================== */

.wd-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* ΠΡΟΣΟΧΗ: το #wrapper του site ειναι position:relative με z-index:100 -
       οτιδηποτε fixed με μικροτερο χανεται απο κατω του. */
    z-index: 1500;
    background: #fff;
    border-top: 1px solid #E7E6EC;
    box-shadow: 0 -6px 24px rgba(28, 27, 34, .12);
    padding: 12px 0;
    /* Κρυμμενη ΕΚΤΟΣ οθονης, οχι με display:none: ετσι το transform μπορει
       να κινηθει και η μπαρα δεν "αναβοσβηνει". */
    transform: translateY(110%);
    transition: transform .25s ease;
}

.wd-sticky.is-on {
    transform: translateY(0);
}

.wd-sticky .wd-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wd-sticky-txt {
    min-width: 0;
}

.wd-sticky-txt b {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #1C1B22;
    /* Ενας μεγαλος τιτλος δεν πρεπει να σπρωξει το κουμπι εκτος οθονης. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wd-sticky-txt span {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    color: #55535F;
}

.wd-sticky-btn {
    width: auto;
    margin-left: auto;
    flex-shrink: 0;
    padding: 9px 22px;
    font-size: 13.5px;
}

/* ==========================================================================
   ΕΝΔΕΙΞΗ ΚΑΤΑΣΤΑΣΗΣ (pill κατω δεξια)
   Markup: views/general/view_included_pages/webinar_hero.php
   Η ενεργη επιλογη οριζεται απο το webinar_status, το χρωμα απο το
   webinar_thumb_color. Ειναι ΕΝΔΕΙΞΗ, οχι διακοπτης - γι' αυτο <span> και οχι
   <button>: τιποτα δεν αλλαζει με κλικ.
   ========================================================================== */

.wd-state {
    position: fixed;
    right: 16px;
    bottom: 16px;
    /* ΠΡΟΣΟΧΗ: το #wrapper του site ειναι position:relative με z-index:100 -
       οτιδηποτε fixed με μικροτερο z-index χανεται απο κατω του. Ιδιο νουμερο
       με τη support bar. */
    z-index: 1600;
    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: #17161D;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    transition: bottom .25s ease;
}

/* Οταν βγει η sticky μπαρα, το pill ανεβαινει για να μη σκεπαστει. Η κλαση
   μπαινει στο <body> απο το ιδιο IntersectionObserver. */
body.wd-sticky-on .wd-state {
    bottom: 84px;
}

.wd-state-item {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1;
    color: rgba(255, 255, 255, .7);
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.wd-state-item:hover,
.wd-state-item:focus {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    text-decoration: none;
}

.wd-state-item.is-on,
.wd-state-item.is-on:hover,
.wd-state-item.is-on:focus {
    background: var(--wd-c);
    color: var(--wd-on-c);
}

/* ==========================================================================
   ΚΑΡΤΑ "ΕΠΟΜΕΝΟ LIVE WEBINAR" (banner kind 38)
   Markup: views/general/view_included_pages/banners.php
   Τα χρωματα ερχονται απο το webinar_thumb_color ΤΟΥ WEBINAR - οχι του
   banner: η καρτα ανηκει στο webinar που δειχνει.
   ========================================================================== */

.wd-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1160px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    /* overflow:hidden ωστε το gradient να κοβεται στις στρογγυλες γωνιες. */
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(28, 27, 34, .12);
}

/* ---------- Αριστερή μεριά (gradient) ---------- */

.wd-next-side {
    background: var(--wd-grad);
    color: #fff;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wd-next-badge {
    display: inline-block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wd-accent);
    margin-bottom: 14px;
}

.wd-next-title {
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -.3px;
    color: #fff;
}

/* ---------- Δεξιά μεριά (λευκή) ---------- */

.wd-next-main {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wd-next-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-bottom: 18px;
}

.wd-next-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    color: #1C1B22;
}

.wd-next-meta svg {
    display: block;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    stroke: var(--wd-c);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Περιεχομενο απο editor - στυλιζουμε και τα εσωτερικα, δεν ξερουμε τι tags
   θα βαλει ο χρηστης. */
.wd-next-text,
.wd-next-text p,
.wd-next-text li,
.wd-next-text span,
.wd-next-text div {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    color: #55535F;
}

.wd-next-text p {
    margin: 0 0 10px 0;
}

.wd-next-text p:last-child {
    margin-bottom: 0;
}

.wd-next-text b,
.wd-next-text strong {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    color: #1C1B22;
}

.wd-next-action {
    margin-top: 22px;
}

.wd-next-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.2;
    border-radius: 999px;
    padding: 13px 32px;
    background: var(--wd-c);
    color: var(--wd-on-c);
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.wd-next-btn:hover,
.wd-next-btn:focus {
    background: var(--wd-c-dark);
    color: var(--wd-on-c);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ==========================================================================
   ON-DEMAND LIBRARY (banner kind 39)
   Markup: views/general/view_included_pages/banners.php
   Καθε καρτα κουβαλαει τη ΔΙΚΗ ΤΗΣ κλαση wd-cN, απο το webinar_thumb_color
   του webinar που δειχνει - γι' αυτο οι μεταβλητες οριζονται στο .wd-lib-item
   και οχι στο section.
   ========================================================================== */

/* Ιδιο πλατος με το σχεδιαστικο (.wrap). Χωρις αυτο οι καρτες απλωνονται σε
   ολο το πλατος του container-fluid του banner και βγαινουν υπερμεγεθεις. */
.wd-lib {
    max-width: 1160px;
    margin: 0 auto;
}

.wd-lib-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}

/* ΓΡΑΜΜΕΝΟ ΩΣ .wd-lib .wd-lib-filter ΕΠΙΤΗΔΕΣ: το 01-general-style.css:3154
   εχει `.cardsBanner button` που δινει σε ΚΑΘΕ κουμπι του banner μωβ φοντο,
   υψος 62px, padding 35px και margin:0 auto. Ειναι (0,1,1) και νικουσε τη
   σκετη κλαση (0,1,0) - τα φιλτρα εβγαιναν τεραστια μωβ πληκτρα.
   Οι τιμες ξαναγραφονται ολες, γιατι ο κανονας εκεινος τις οριζει ολες. */
.wd-lib .wd-lib-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    margin: 0;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #55535F;
    background: #fff;
    border: 1.5px solid #E7E6EC;
    border-radius: 999px;
    padding: 9px 18px;
    cursor: pointer;
    outline: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.wd-lib .wd-lib-filter:hover,
.wd-lib .wd-lib-filter:focus {
    border-color: #8C3CFA;
    color: #8C3CFA;
    background: #fff;
    outline: none;
}

/* Το ενεργο φιλτρο ειναι στο ΒΑΣΙΚΟ μωβ και οχι σε χρωμα webinar: τα φιλτρα
   ανηκουν στη λιστα, οχι σε καποιο συγκεκριμενο webinar. */
.wd-lib .wd-lib-filter.is-on,
.wd-lib .wd-lib-filter.is-on:hover,
.wd-lib .wd-lib-filter.is-on:focus {
    background: #8C3CFA;
    border-color: #8C3CFA;
    color: #fff;
}

/* ---------- Η κάρτα ---------- */

.wd-lib-card {
    background: #fff;
    border: 1px solid #E7E6EC;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(28, 27, 34, .08);
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ΟΧΙ το --wd-grad του hero: εκεινο ειναι το τεσσαρων σταθμων gradient της
   μαρκας και σε κουτι 120px εβγαζε ολα τα χρωματα μαζι. Εδω θελουμε δυο
   τονους του ΙΔΙΟΥ χρωματος, οπως το σχεδιαστικο. */
.wd-lib-top {
    background: var(--wd-thumb);
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ανεβασμενη φωτο (webinars.photo). Οταν λειπει, πεφτουμε στο τριγωνο. */
.wd-lib-photo {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* Το τριγωνο ειναι το μονο εικονιδιο του sprite που θελει fill αντι για stroke. */
.wd-lib-ico {
    display: block;
    width: 44px;
    height: 44px;
    fill: #fff;
    stroke: none;
}

.wd-lib-body {
    padding: 22px 24px 26px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wd-lib-eyebrow {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wd-c);
    margin-bottom: 8px;
}

.wd-lib-title {
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: 16.5px;
    line-height: 1.35;
    color: #1C1B22;
    margin: 0 0 8px 0;
}

.wd-lib-text {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #55535F;
    margin: 0;
}

/* margin-top:auto ωστε τα κουμπια να ευθυγραμμιζονται μεταξυ τους ακομα κι αν
   οι τιτλοι εχουν διαφορετικο υψος. */
.wd-lib-action {
    margin-top: auto;
    padding-top: 16px;
}

.wd-lib-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.2;
    border-radius: 999px;
    padding: 10px 22px;
    background: #fff;
    color: var(--wd-c);
    border: 1.5px solid var(--wd-c);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.wd-lib-btn:hover,
.wd-lib-btn:focus {
    background: var(--wd-c);
    color: var(--wd-on-c);
    text-decoration: none;
}

.wd-lib-note {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #55535F;
    text-align: center;
    margin-top: 32px;
}

/* ΙΣΟ ΥΨΟΣ ΚΑΡΤΩΝ.
   Το owl στοιχιζει τα items με inline-block, οποτε καθε καρτα παιρνει το
   ΦΥΣΙΚΟ της υψος - ενας τιτλος τριων γραμμων εκανε την καρτα ψηλοτερη απο
   τη διπλανη. Φαινοταν να "φτιαχνει" στο πρωτο slide μονο επειδη το owl
   ξαναϋπολογιζε τοτε τις διαστασεις.

   Λυση: το ΙΔΙΟ το stage γινεται flex με align-items:stretch. Ετσι ολα τα
   items τεντωνονται στο υψος του ψηλοτερου, απο το πρωτο paint. Το
   transform που κινει το carousel δεν επηρεαζεται - το stage παραμενει μια
   σειρα, απλα με flex αντι για inline-block. */
.wd-lib-track .owl-stage {
    display: flex;
    align-items: stretch;
}

.wd-lib-track .owl-item {
    display: flex;
    /* Το owl οριζει inline width σε καθε item - χωρις αυτο το flex θα
       μπορουσε να τα συρρικνωσει. */
    flex-shrink: 0;
    height: auto;
}

.wd-lib-track .wd-lib-item {
    display: flex;
    width: 100%;
}

/* ΧΩΡΟΣ ΓΙΑ ΤΗ ΣΚΙΑ.
   Το .owl-stage-outer εχει overflow:hidden (το χρειαζεται το carousel), οποτε
   εκοβε τη σκια ακριβως στα ορια της καρτας - φαινοταν σαν γραμμη που κοβει
   το background. Δινουμε padding να χωρεσει η σκια και το ακυρωνουμε με ισο
   αρνητικο margin, ωστε να μη μετακινηθει τιποτα στη σελιδα. */
.wd-lib-track .owl-stage-outer {
    padding: 14px 14px 30px 14px;
    margin: -14px -14px -30px -14px;
}

/* ---------- Βελάκια carousel ---------- */

/* ΠΡΟΣΟΧΗ στο margin-top: το .owl-stage-outer απο πανω εχει margin-bottom:-30px
   (ο χωρος της σκιας), οποτε τα βελακια ξεκινανε 30px ψηλοτερα απ' οσο δειχνει
   ο αριθμος. Το 46 αφηνει ~16px πραγματικο κενο κατω απο τη σκια. */
.wd-lib-track .owl-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 46px;
}

/* Γραμμενο με αυτη τη σειρα selector ωστε να νικαει το `.cardsBanner button`
   του 01-general-style.css:3154, που αλλιως τα κανει μωβ πληκτρα 62px. */
.wd-lib-track .owl-nav button.owl-prev,
.wd-lib-track .owl-nav button.owl-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid #E7E6EC;
    background: #fff;
    color: #8C3CFA;
    font-size: 16px;
    line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* ΤΟ ΒΕΛΟΣ ΣΤΟ ΚΕΝΤΡΟ ΤΟΥ ΚΥΚΛΟΥ.
   Το 01-general-style.css:3222 εχει `.cardsBanner button i { margin-top:3px;
   margin-left:10px }` - φτιαγμενο για κουμπια με κειμενο+βελακι διπλα. Εδω
   το βελος ειναι ΜΟΝΟ του, οποτε αυτα τα margin το εσπρωχναν κατω-δεξια.
   Τα μηδενιζουμε ρητα· το line-height:1 βγαζει και το κενο της γραμματοσειρας,
   ωστε να το κεντραρει καθαρα το flex του κουμπιου. */
.wd-lib-track .owl-nav button.owl-prev i,
.wd-lib-track .owl-nav button.owl-next i {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.wd-lib-track .owl-nav button.owl-prev:hover,
.wd-lib-track .owl-nav button.owl-next:hover,
.wd-lib-track .owl-nav button.owl-prev:focus,
.wd-lib-track .owl-nav button.owl-next:focus {
    background: #8C3CFA;
    border-color: #8C3CFA;
    color: #fff;
}

/* Το owl κραταει τα κουμπια στο dom οταν δεν εχει που να παει - σβησμενα
   αλλα κλικαρισιμα. Τα κανουμε και ξεκαθαρα ανενεργα. */
.wd-lib-track .owl-nav button.disabled {
    opacity: .35;
    cursor: default;
}

.wd-lib-track .owl-nav button.disabled:hover {
    background: #fff;
    border-color: #E7E6EC;
    color: #8C3CFA;
}

/* ==========================================================================
   ΣΧΕΤΙΚΕΣ ΣΥΝΕΔΡΙΕΣ (webinar_related.php)
   Ιδιες καρτες με τη βιβλιοθηκη (.wd-lib-card) - εδω σε grid αντι για
   carousel, γιατι τα αποτελεσματα ειναι το πολυ τρια.
   ========================================================================== */

.wd-related {
    background: #F2F2F4;
    padding: 88px 0;
}

/* Το carousel κληρονομει ολους τους κανονες του .wd-lib-track (ισο υψος,
   βελακια, χωρος για τη σκια) - εδω μενει μονο ο,τι διαφερει. */
.wd-related-track {
    /* Ιδιο πλατος με τη βιβλιοθηκη, ωστε οι δυο λιστες να ευθυγραμμιζονται. */
    max-width: 1160px;
    margin: 0 auto;
}

/* ==========================================================================
   MODAL ΘΕΜΑΤΙΚΩΝ (webinar_topics_modal.php)
   Ανοιγει με κλικ σε chip "ΘΕΜΑΤΙΚΕΣ" και δειχνει ολες τις on-demand
   συνεδριες της θεματικης. Ιδιες καρτες με τη βιβλιοθηκη.
   ========================================================================== */

.wd-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* ΠΡΟΣΟΧΗ: το #wrapper του site ειναι position:relative με z-index:100 -
       οτιδηποτε fixed με μικροτερο χανεται απο κατω του. Πανω απο τη sticky
       μπαρα (1500) και το pill κατααστασης (1600). */
    z-index: 1700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.wd-modal[hidden] {
    display: none;
}

.wd-modal-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(28, 27, 34, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Οσο ειναι ανοιχτο, το φοντο δεν σκρολαρει. */
body.wd-modal-open {
    overflow: hidden;
}

.wd-modal-box {
    position: relative;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(28, 27, 34, .3);
    width: 100%;
    max-width: 1100px;
    /* Το κουτι δεν ξεπερναει ποτε την οθονη - σκρολαρει το σωμα του. */
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    outline: none;
}

.wd-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 28px 18px 28px;
    border-bottom: 1px solid #E7E6EC;
}

.wd-modal-eyebrow {
    display: block;
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wd-c);
    margin-bottom: 6px;
}

.wd-modal-head h2 {
    font-family: 'Syne-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    line-height: 1.25;
    color: #1C1B22;
    margin: 0;
}

.wd-modal-count {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    color: #55535F;
    margin: 6px 0 0 0;
}

.wd-modal-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid #E7E6EC;
    background: #fff;
    color: #55535F;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.wd-modal-close:hover,
.wd-modal-close:focus {
    border-color: var(--wd-c);
    background: var(--wd-c);
    color: var(--wd-on-c);
    outline: none;
}

.wd-modal-close svg {
    display: block;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.wd-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
}

.wd-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* Εξω απο το owl το .wd-lib-item δεν εχει flex γονεα - του το δινουμε εδω
   ωστε η καρτα να γεμιζει το κελι και τα κουμπια να ευθυγραμμιζονται. */
.wd-modal-grid .wd-lib-item {
    display: flex;
}

/* Τα items ξεκινανε hidden απο τον server και τα ανοιγει το js ανα θεματικη -
   χωρις αυτο θα φαινονταν ολα για μια στιγμη πριν ανοιξει το modal. */
.wd-modal-grid .wd-lib-item[hidden] {
    display: none;
}

.wd-modal-empty {
    font-family: 'Syne-Regular', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #55535F;
    text-align: center;
    margin: 12px 0;
}

.wd-modal-foot {
    padding: 18px 28px 24px 28px;
    border-top: 1px solid #E7E6EC;
    text-align: center;
}

.wd-modal-all {
    font-family: 'Syne-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: var(--wd-c);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wd-modal-all:hover,
.wd-modal-all:focus {
    color: var(--wd-c-dark);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
    /* Η καρτα του "Επομενο Live" στοιβαζεται: το gradient παει πανω, τα
       στοιχεια απο κατω - αλλιως και οι δυο στηλες γινονται ασηκωτα στενες. */
    .wd-next {
        grid-template-columns: 1fr;
    }

    .wd-next-side {
        padding: 32px 28px;
    }

    .wd-next-main {
        padding: 28px;
    }

    .wd-next-title {
        font-size: 21px;
    }

    .wd-modal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wd-body {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .wd-aside {
        position: static;
    }

    .wd-body-out {
        padding: 44px 0;
    }

    /* Το κουτι δρασης παει ΠΑΝΩ απο το κειμενο: εκει ειναι το κουμπι, και σε
       μικρη οθονη δεν θελουμε ο χρηστης να σκρολαρει ολη την περιγραφη πρωτα. */
    .wd-hero .wd-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .wd-panel {
        position: static;
    }

    .wd-hero .wd-col-action {
        order: -1;
    }
}

@media (max-width: 600px) {
    .wd-hero {
        padding: 36px 0 44px;
    }

    /* Ιδιος λογος με πανω: χωρις το id, το #register του global-style
       ξαναγυριζει το padding-top στα 20px και σε αυτο το breakpoint. */
    #register.wd-register,
    .wd-faq-out,
    .wd-related {
        padding: 56px 0;
    }

    .wd-modal {
        padding: 12px;
    }

    .wd-modal-grid {
        grid-template-columns: 1fr;
    }

    .wd-modal-head,
    .wd-modal-body,
    .wd-modal-foot {
        padding-left: 18px;
        padding-right: 18px;
    }

    .wd-modal-head h2 {
        font-size: 20px;
    }

    .wd-sec-head {
        margin-bottom: 32px;
    }

    /* Σε στενη οθονη ο τιτλος δεν χωραει διπλα στο κουμπι - μενει το κουμπι,
       που ειναι και ο λογος που υπαρχει η μπαρα. */
    .wd-sticky-txt {
        display: none;
    }

    .wd-sticky-btn {
        margin-left: 0;
        width: 100%;
    }

    .wd-form-box {
        padding: 22px;
    }

    .wd-wrap {
        padding: 0 15px;
    }

    .wd-meta {
        gap: 10px 18px;
    }

    .wd-meta span {
        font-size: 13px;
    }
}