/* konet-buttons.css (28/10/2026, Christianos): ενιαίο στυλ κουμπιών για όλο το site = Σ4 του /demo-koumpia/
   (ορθογώνιο με στρογγυλεμένες γωνίες, πεζά) + το βέλος του Σ2 στα κουμπιά που σε πάνε κάπου (κινείται λίγο στο hover).
   Φορτώνει σε κάθε σελίδα από το Base.astro, μετά το bundle. Τα χρώματα ανά section (inline styles) υπερισχύουν όπως πριν.
   Επαναφορά: αφαίρεση του <link> στο Base.astro. */

/* Σχήμα και γραφή */
.btn{border-radius:1.2rem;text-transform:none;letter-spacing:-.005em}
.btn--m,.btn--s{border-radius:1rem}
.btn:focus-visible{outline:2px solid #4D82C8;outline-offset:2px}

/* Hover: σταθερό πιο σκούρο χρώμα αντί για το λευκό πέπλο του ::after */
.btn:hover::after,.btn:focus::after{opacity:0}
.btn.btn--bg-dark,.btn.btn--bg-pri{background-color:#265DAB;color:#fff;transition:background-color .3s,color .3s,box-shadow .3s}
.btn.btn--bg-dark:hover,.btn.btn--bg-pri:hover{background-color:#1E4E93}
.btn.btn--bg-contrast{transition:background-color .3s,color .3s}
.btn.btn--bg-contrast:hover{background-color:#DCE9F8}

/* Δεύτερο κουμπί σε σκούρο φόντο (CTA, heroes) */
.btn.kn-cta__outline{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28)}
.btn.kn-cta__outline{transition:background-color .3s,border-color .3s}
.btn.kn-cta__outline:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}

/* Βέλος: μόνο σε συνδέσμους-κουμπιά (όχι tabs/διακόπτες). Μπαίνει στο τελευταίο span ώστε να παίρνει το χρώμα του κειμένου,
   ή στο ίδιο το <a> όταν δεν έχει span. */
a.btn:is(.btn--bg-dark,.btn--bg-pri,.btn--bg-contrast,.kn-cta__outline):not(.tab-btn,.toggle-btn)>span:last-child::after,
a.btn:is(.btn--bg-dark,.btn--bg-pri,.btn--bg-contrast,.kn-cta__outline):not(.tab-btn,.toggle-btn):not(:has(>span))::before{
  content:"";display:inline-block;flex:none;width:1.7rem;height:1.7rem;margin-left:.8rem;vertical-align:-.3rem;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .35s cubic-bezier(.25,.8,.3,1)}
a.btn:not(:has(>span))::before{order:2;margin-left:0}
a.btn:is(.btn--bg-dark,.btn--bg-pri,.btn--bg-contrast,.kn-cta__outline):hover>span:last-child::after,
a.btn:is(.btn--bg-dark,.btn--bg-pri,.btn--bg-contrast,.kn-cta__outline):not(:has(>span)):hover::before{transform:translateX(.4rem)}

/* «Σύγκρινε όλα τα χαρακτηριστικά» (desktop): δευτερεύον κουμπί με περίγραμμα και βελάκι που γυρίζει.
   Στο hover σκούρο φόντο με ΛΕΥΚΑ γράμματα. Στο κινητό μένει ο σύνδεσμος με βέλος (FeaturesTable, 20/10). */
@media screen and (min-width:768px){
  .btn.features-toggle-label{background:#fff;color:#15243A;box-shadow:inset 0 0 0 1px #C9D4E3,0 1px 2px rgba(13,23,38,.06);transition:background-color .3s,color .3s,box-shadow .3s}
  .btn.features-toggle-label span{color:inherit}
  .btn.features-toggle-label:hover{background:#15243A;color:#fff;box-shadow:inset 0 0 0 1px #15243A}
  .btn.features-toggle-label::before{content:"";order:2;flex:none;width:1.8rem;height:1.8rem;margin-left:.2rem;background-color:currentColor;transition:transform .35s cubic-bezier(.25,.8,.3,1);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  #features-toggle:checked~div .btn.features-toggle-label::before{transform:rotate(180deg)}
}

/* Αρχική (bento): τα κουμπιά έχουν δικό τους svg βέλος που εμφανιζόταν μόνο στο hover της κάρτας. Τώρα φαίνεται πάντα,
   με την ίδια μικρή κίνηση με τα υπόλοιπα κουμπιά. */
.bento__item a.btn .knt-cta-arrow,.bento__item:hover a.btn .knt-cta-arrow{position:static;opacity:1;width:1.7rem;height:1.7rem;margin-left:.8rem;transform:none;transition:transform .35s cubic-bezier(.25,.8,.3,1)}
.bento__item:hover a.btn>span{transform:none}
.bento__item a.btn:hover .knt-cta-arrow,.bento__item:hover a.btn:hover .knt-cta-arrow{transform:translateX(.4rem)}

/* Διακόπτες ετήσιο/μηνιαίο (toggle-btn): μένουν χάπι, γιατί κάθονται μέσα σε στρογγυλό πλαίσιο. */
.btn.toggle-btn{border-radius:50vh}

/* 28/10 β΄: κουμπί hero της αρχικής (knt-hero__cta, γυάλινο): ίδιες γωνίες και ίδια κίνηση βέλους με τα υπόλοιπα. */
.knt-hero__cta{border-radius:1.2rem;transition:background-color .3s,color .3s}
.knt-hero__cta svg{width:1.7rem;height:1.7rem;transition:transform .35s cubic-bezier(.25,.8,.3,1)}
.knt-hero__cta:hover svg{transform:translateX(.4rem)}

/* 28/10 β΄: στον πίνακα σύγκρισης (desktop) τα κουμπιά δεν τεντώνονται σε όλο το πλάτος της στήλης. */
#table-order .grid{justify-items:center}
#table-order .btn{width:auto;padding-left:2.4rem;padding-right:2rem}