/* =====================================================================
   TotalNet 21 – child theme του Twenty-One (WHMCS)
   Ίδια εμφάνιση με το totalnet.gr. Χρώματα & γραμματοσειρές μόνο στο :root.
   Οι κλάσεις του site έχουν πρόθεμα tn- για να μη συγκρούονται με το Bootstrap.
   Κεφαλαία: γράφονται απευθείας χωρίς τόνους στο HTML (όχι text-transform).
   ===================================================================== */
:root{
  --bg:#f6f8fb; --surface:#ffffff; --ink:#0f1c2e; --muted:#566377; --line:#dfe5ee;
  --cyan:#16aee6; --red:#e3101c; --navy:#0b2a55; --navy-2:#12396f; --link:#0d5c9e;
  --s-host:#1f5fff; --s-web:#9a3cf0; --s-srv:#f2380f; --s-bak:#149fe8; --s-str:#f5900f; --s-mail:#d9a400; --s-dom:#c3102f; --s-mkt:#14a870;
  --hero-a:#0b2a55; --hero-b:#0f4a8a; --on-dark-2:#c7d6ea; --ok:#14a870;
  --display:"Commissioner",system-ui,sans-serif; --body:"Noto Sans",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:10px;
}

/* ---------- βάση ---------- */
body.tn-theme{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px}
.tn-theme h1,.tn-theme h2,.tn-theme h3,.tn-theme h4,.tn-theme h5,.tn-theme h6,
.tn-theme .h1,.tn-theme .h2,.tn-theme .h3,.tn-theme .h4,.tn-theme .h5{font-family:var(--display);color:var(--ink);letter-spacing:-.005em}
:where(.tn-theme) a{color:var(--link)}
:where(.tn-theme) a:hover{color:var(--navy)}
.tn-theme :focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.tn-wrap{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}

/* ---------- πάνω μπάρα (λογότυπο, χρήσιμα, καλάθι) ---------- */
.tn-top{background:var(--surface);border-bottom:1px solid var(--line)}
.tn-top .tn-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.tn-logo{display:flex;text-decoration:none!important;border-radius:6px;overflow:hidden;flex:none}
.tn-logo .mark{background:var(--cyan);width:54px;display:grid;place-items:center}
.tn-logo .word{background:var(--red);color:#fff;padding:6px 12px 6px 10px;display:flex;flex-direction:column;justify-content:center}
.tn-logo .word b{font:800 22px/1 var(--display);letter-spacing:-.01em;color:#fff}
.tn-logo .word small{font:500 10px/1.3 var(--display);letter-spacing:.04em;color:#fff}
.tn-logo .word i{font:600 9px/1 var(--display);font-style:normal;align-self:flex-end;opacity:.9;margin-top:-2px}
.tn-util{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:14px}
.tn-util a{text-decoration:none!important;color:var(--muted)}
.tn-util a:hover{color:var(--ink)}
.tn-util .phone{font:600 15px var(--mono);color:var(--ink);white-space:nowrap}
.tn-util .cta{background:var(--navy);color:#fff;padding:8px 14px;border-radius:8px;font-weight:600}
.tn-util .cta:hover{color:#fff;background:var(--navy-2)}
.tn-cart{position:relative;font-size:18px;color:var(--ink)!important;padding:4px}
.tn-cart .badge{position:absolute;top:-6px;right:-10px;font:700 11px/1 var(--body);padding:3px 6px;border-radius:10px;background:var(--red);color:#fff}
.tn-menu-btn{display:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px var(--display);padding:8px 12px;border-radius:8px;cursor:pointer;line-height:1.2}

/* ---------- τα 8 κουμπιά υπηρεσιών + υπομενού ---------- */
.tn-keys{background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:1030}
.tn-keys>ul{list-style:none;margin:0 auto;padding:0 20px;max-width:1180px;display:grid;grid-template-columns:repeat(8,1fr)}
.tn-keys>ul>li{position:relative}
.tn-keys>ul>li>a{display:flex;flex-direction:column;gap:2px;padding:12px;text-decoration:none!important;color:var(--ink);border-top:4px solid var(--kk);height:100%;transition:background .15s}
.tn-keys>ul>li>a:hover,.tn-keys>ul>li.on>a{background:color-mix(in srgb,var(--kk) 12%,transparent);color:var(--ink)}
.tn-keys b{font:700 14px/1.2 var(--display)}
.tn-keys>ul>li>a>span{font-size:12px;color:var(--muted);line-height:1.3}
.tn-keys .tn-sub{display:none;position:absolute;top:100%;left:0;min-width:260px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--kk);border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(8,20,40,.14);padding:8px;list-style:none;margin:0}
.tn-keys>ul>li:nth-child(n+6) .tn-sub{left:auto;right:0}
.tn-keys>ul>li:hover .tn-sub,.tn-keys>ul>li:focus-within .tn-sub{display:block}
.tn-keys .tn-sub a{display:block;padding:7px 10px;border-radius:6px;text-decoration:none!important;font-size:14px;color:var(--ink)}
.tn-keys .tn-sub a:hover{background:var(--bg)}
@media (max-width:980px){
  .tn-menu-btn{display:inline-block}
  .tn-keys{display:none} .tn-keys.open{display:block}
  .tn-keys>ul{grid-template-columns:1fr;padding:0}
  .tn-keys>ul>li>a{border-top:0;border-left:4px solid var(--kk);flex-direction:row;align-items:baseline;gap:10px}
  .tn-keys .tn-sub{display:block;position:static;box-shadow:none;border:0;border-left:4px solid var(--kk);border-radius:0;padding:0 0 8px 20px;min-width:0}
}

/* ---------- μενού του WHMCS (λογαριασμός, κατάστημα κ.λπ.) ---------- */
header.header .topbar{background:var(--navy);color:var(--on-dark-2)}
header.header .topbar .btn,header.header .topbar .active-client .btn{color:var(--on-dark-2)}
header.header .main-navbar-wrapper{background:var(--bg);border-bottom:1px solid var(--line)}
header.header .main-navbar-wrapper .navbar-nav .nav-link{font:600 14px var(--display);color:var(--muted)}
header.header .main-navbar-wrapper .navbar-nav .nav-link:hover,
header.header .main-navbar-wrapper .navbar-nav .active>.nav-link{color:var(--navy)}
header.header .main-navbar-wrapper .dropdown-menu{border-color:var(--line);border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(8,20,40,.12)}
header.header .main-navbar-wrapper .dropdown-item{font-size:14px}
header.header .main-navbar-wrapper .dropdown-item.active,header.header .main-navbar-wrapper .dropdown-item:active{background:var(--navy);color:#fff}
.master-breadcrumb,.master-breadcrumb .breadcrumb{background:transparent}
.master-breadcrumb .breadcrumb{font-size:13px;padding:12px 0 4px}

/* ---------- κουμπιά / φόρμες / κάρτες ---------- */
.tn-theme .btn{font-family:var(--display);font-weight:600;border-radius:8px}
.tn-theme .btn-primary,.tn-theme .btn-info{background:var(--navy);border-color:var(--navy);color:#fff}
.tn-theme .btn-primary:hover,.tn-theme .btn-primary:focus,.tn-theme .btn-info:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.tn-theme .btn-success{background:var(--ok);border-color:var(--ok);color:#fff}
.tn-theme .btn-success:focus,.tn-theme .btn-danger,.tn-theme .btn-danger:hover{color:#fff}
.tn-theme .btn-success:hover{background:#0f8c5d;border-color:#0f8c5d}
.tn-theme .btn-danger{background:var(--red);border-color:var(--red)}
.tn-theme .form-control:focus{border-color:var(--cyan);box-shadow:0 0 0 .2rem rgba(22,174,230,.2)}
.tn-theme .card{border-color:var(--line);border-radius:var(--r)}
.tn-theme .card-header{background:var(--surface);border-bottom-color:var(--line)}
.tn-theme .card-sidebar .card-header{font-family:var(--display)}
.tn-theme .card-sidebar .list-group-item.active{background:var(--navy);border-color:var(--navy)}
.tn-theme .card-sidebar .list-group-item.active .badge{background:#fff;color:var(--navy)}
.tn-theme .pagination .page-item.active .page-link{background:var(--navy);border-color:var(--navy)}
.tn-theme .nav-tabs .nav-link.active{border-top:3px solid var(--cyan)}
.tn-theme .tile .highlight{background:var(--cyan)}
.tn-theme .client-home-cards .card-header .card-title i{color:var(--cyan)}

/* αναζήτηση domain στην αρχική του WHMCS */
.tn-theme .home-domain-search{background:linear-gradient(160deg,var(--hero-a),var(--hero-b))!important;color:#fff;padding:36px 0}
.tn-theme .home-domain-search h2,.tn-theme .home-domain-search .h2{color:#fff;font-weight:800}
.tn-theme .home-domain-search .tld-logos{color:var(--on-dark-2)}
.tn-theme .home-domain-search .input-group-wrapper{border:0;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.tn-theme .home-domain-search .btn-primary,.tn-theme .home-domain-search .btn-success{background:var(--red)!important;border-color:var(--red)!important}

/* ---------- καλάθι (standard_cart) ---------- */
#order-standard_cart .order-summary{background:var(--navy);border-bottom-color:var(--navy);border-radius:var(--r)}
#order-standard_cart .order-summary h2{font-family:var(--display)}
#order-standard_cart .view-cart-items-header{background:var(--navy)}
#order-standard_cart .empty-cart .btn{background:var(--navy)}
#order-standard_cart .products .product{border-radius:var(--r);border-color:var(--line)}
#order-standard_cart .products .product header{background:var(--surface);border-bottom:3px solid var(--cyan)}
#order-standard_cart .products .product header span{font-family:var(--display);font-weight:700}
#order-standard_cart .products .product .price{font-family:var(--display);color:var(--ink)}
#order-standard_cart .header-lined h1{font-family:var(--display);font-weight:800}
#order-standard_cart .panel-addon .panel-add,#order-standard_cart .panel-addon-selected .panel-add{background:var(--ok)}
#order-standard_cart .domain-checker-container{background:linear-gradient(160deg,var(--hero-a),var(--hero-b));border-radius:12px}
#order-standard_cart .domain-checker-bg{background:none}
#order-standard_cart .domain-checker-container .btn-primary{background:var(--red);border-color:var(--red)}
.tn-theme .spotlight-tld .btn:not(.domain-contact-support),.tn-theme .suggested-domains .btn:not(.domain-contact-support){background:var(--navy);border-color:var(--navy)}
.tn-theme .domain-pricing .tld-pricing-header div:nth-child(odd){border-color:var(--navy)}
.tn-theme .domain-pricing .tld-pricing-header .col-xs-2,.tn-theme .domain-pricing .tld-pricing-header .col-sm-2{border-bottom-color:var(--cyan)}

/* ---------- footer του site ---------- */
.tn-strip{background:var(--navy);color:#fff;margin-top:40px}
.tn-strip .tn-wrap{padding-top:36px;padding-bottom:36px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.tn-strip h2{font:700 26px/1.2 var(--display);color:#fff;margin:0}
.tn-strip p{margin:4px 0 0;color:var(--on-dark-2)}
.tn-strip .acts{display:flex;gap:10px;flex-wrap:wrap}
.tn-strip a{text-decoration:none!important;font:700 15px var(--display);padding:12px 18px;border-radius:9px;background:#fff;color:var(--navy)}
.tn-strip a:hover{color:var(--navy);background:#e8f3fb}
.tn-strip a.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.tn-strip a.ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.tn-foot{background:var(--surface);border-top:1px solid var(--line);font-size:14px;color:var(--ink)}
.tn-foot .cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px;padding-top:44px;padding-bottom:44px}
.tn-foot h4{font:700 13px var(--display);letter-spacing:.06em;margin:0 0 10px;color:var(--ink)}
.tn-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tn-foot a{text-decoration:none!important;color:var(--muted)}
.tn-foot a:hover{color:var(--ink)}
.tn-foot .tn-muted{color:var(--muted);margin:14px 0 0;line-height:1.65}
.tn-foot .legal{border-top:1px solid var(--line);padding-top:16px;padding-bottom:16px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tn-legal-end{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tn-social{display:inline-flex;gap:4px}
.tn-social .list-inline-item{margin:0}
.tn-social .btn{background:var(--bg);color:var(--muted);border-radius:6px;width:30px;height:30px;padding:0;line-height:30px}
.tn-lang{border:1px solid var(--line);background:var(--surface);color:var(--muted);font:500 13px var(--body);padding:4px 10px;border-radius:6px;cursor:pointer}
.tn-lang .iti-flag{display:inline-block;vertical-align:middle;margin-right:4px}
@media (max-width:860px){.tn-foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.tn-foot .cols{grid-template-columns:1fr}}
.tn-nav-btn{display:inline-block}
#order-standard_cart .domain-checker-container .input-group-btn,#order-standard_cart .domain-checker-container .domain-check-availability{width:auto;min-width:100px;white-space:nowrap}#order-standard_cart .domain-checker-container .domain-check-availability{font-size:17px;padding-left:20px;padding-right:20px}