/* responsive.css - phone / tablet / PC fixes (fix20261028-resp).
   Loaded last on every public and client page, so these rules win over the theme.
   Widths checked: 360, 390, 768, 1024, 1366, 1920. */

/* ---------- Header: Hosting / Domain are <button>s now; make them look like the other menu links ---------- */
.pk-menu-toggle {
    background: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
}
/* PC header (992px and up) */
.tgmenu__navbar-wrap > ul li > .pk-menu-toggle {
    display: flex;
    align-items: center;
    padding: 29px 16px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--tg-heading-font-family);
    line-height: 1;
    color: var(--tg-heading-color);
    text-transform: capitalize;
}
.tgmenu__navbar-wrap > ul li > .pk-menu-toggle:hover,
.tgmenu__navbar-wrap > ul li.pk-open > .pk-menu-toggle { color: var(--tg-theme-primary); }
/* small down chevron, same as the other dropdown links */
.tgmenu__navbar-wrap > ul li.menu-item-has-children > .pk-menu-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 8px;
    position: relative;
    top: -2px;
}
.pk-menu-toggle:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; border-radius: 4px; }
/* Open the mega menu on click / Enter (touch screens and keyboard), not only on hover */
.tgmenu__navbar-wrap > ul li.pk-open .tg-mega-menu-wrap,
.tgmenu__navbar-wrap > ul li:focus-within .tg-mega-menu-wrap {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateX(-50%);
}
@media (max-width: 991.98px) {
    .tgmenu__navbar-wrap > ul li.pk-open .tg-mega-menu-wrap,
    .tgmenu__navbar-wrap > ul li:focus-within .tg-mega-menu-wrap { transform: scale(1) translateX(0); }
}
/* Phone / tablet slide-out menu: the buttons look like the menu links */
.tgmobile__menu .navigation li > .pk-menu-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 60px 10px 25px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tg-body-color);
    text-transform: capitalize;
}

/* Closed slide-out menu: its shadow showed as a gray strip on the right edge of the page */
body:not(.mobile-menu-visible) .tgmobile__menu-box { box-shadow: none; }
body:not(.mobile-menu-visible) .tgmobile__menu { visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
.mobile-menu-visible .tgmobile__menu { visibility: visible; }

/* ---------- Monthly / Yearly switch: fits on small phones ---------- */
.pk-yb-short { display: none; }
@media (max-width: 479.98px) {
    .pricing__area .pricing-tab { width: 100%; max-width: 340px; }
    .pricing__area .pricing-tab .tab-btn { padding: 10px 8px; font-size: 15px; }
    .pk-yb-long { display: none; }
    .pk-yb-short { display: inline; }
}

/* ---------- Plan cards: 3 in one row on tablets (768-991) need tighter insides ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pricing__area .row > .col-md-4 { padding-left: 8px; padding-right: 8px; }
    .pricing__area .col-md-4 .pricing__box { padding-left: 18px !important; padding-right: 18px !important; }
    .pricing__area .col-md-4 .pricing__price .price { font-size: 34px !important; }
    .pricing__area .col-md-4 .tg-btn { padding-left: 12px !important; padding-right: 12px !important; white-space: nowrap; }
}

/* ---------- Client area tabs: scroll sideways on phones, with a fade on the right as a hint ---------- */
@media (max-width: 767.98px) {
    .ts-client-bar .ts-client-nav {
        justify-content: flex-start !important;
        padding-right: 28px !important; /* last tab can scroll clear of the fade */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
}

/* ---------- Billing: overdue invoices stand out ---------- */
.ts-bills li.is-overdue .ts-bill-state { background: #fde8e8; color: #b42318; }
.ts-bills li.is-overdue .ts-bill-icon { background: #fde8e8; color: #b42318; }
.ts-bill-summary-note { display: block; margin-top: 8px; font-size: 14px; color: #5b6270; }

/* ---------- Domain transfer: prices as small cards ---------- */
.ts-transfer-prices-title { font-size: 18px; margin: 28px 0 12px; }
.ts-transfer-prices {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.ts-transfer-prices li {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    text-align: center;
}
.ts-transfer-prices .ts-tp-tld { display: block; font-size: 18px; font-weight: 700; color: #111; }
.ts-transfer-prices .ts-tp-price { display: block; font-size: 14px; color: #4b5563; margin-top: 2px; }

/* ---------- Buttons with an icon: a little space between icon and text ---------- */
/* Flex buttons drop the space between "<i></i> Text"; a gap puts it back (no effect on non-flex buttons). */
.btn, .tg-btn, .ts-linkbtn { column-gap: .4em; }

/* ---------- Buttons: label always in the middle ---------- */
/* Old buttons were inline-block, so when a min-height made them taller (44px tap targets)
   the text stayed at the top. Flex keeps the text and icon in the middle both ways.
   Padding, font and line-height are not changed, so button sizes stay the same. */
.btn,
.tg-btn,
.tg-border-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;        /* a long label that wraps stays centred */
    vertical-align: middle;
    box-sizing: border-box;
}
/* Full-width buttons stay full width. */
.btn-block { display: flex; }
/* Icons keep their size next to the text. */
.btn > i, .btn > svg, .btn > img,
.tg-btn > i, .tg-btn > svg, .tg-btn > img { flex-shrink: 0; }
/* The theme button hides overflow, so a flex row could squeeze it narrower than its label
   (the domain "Search" button, text pushed to the right edge). Keep it as wide as its text. */
.tg-btn { flex-shrink: 0; }
.ts-copy-text { margin-left: .35em; }

/* ---------- Contact page: details card above the form ---------- */
.ts-contact-card i { color: #0f766e; margin-right: 4px; }
.ts-contact-card a { word-break: break-word; }

/* ---------- Never scroll sideways because of one wide element ---------- */
/* "clip" (not "hidden") so sticky boxes such as the order summary keep working */
body { overflow-x: clip; }
img, picture, video { max-width: 100%; }

/* ---------- Mobile menu: Billing and Support links under "Client Area" ---------- */
.ts-mobile-account-links { display: flex; justify-content: center; gap: 24px; margin: -8px 0 20px; }
.ts-mobile-account-links a { display: inline-flex; align-items: center; gap: .4em; color: var(--tg-heading-color, #111); font-weight: 600; font-size: 15px; text-decoration: none; }
.ts-mobile-account-links i { color: #0f766e; }

/* ---------- Account menu (client area): icon first, then the label, clean gaps ---------- */
/* Each item is its own pill with a small gap, so a hovered item never touches the active one. */
.ts-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    margin: 0 0 3px;
    border-radius: 8px;
    color: #2b2f36;
    white-space: nowrap;
}
.ts-account-menu form .dropdown-item { margin: 0; }
.ts-account-menu .ts-account-label { display: inline-flex; align-items: center; }
.ts-account-menu .ts-note-count { float: none; margin: 0 0 0 8px; }
/* icons: same size, muted grey */
.ts-account-menu .dropdown-item i { flex-shrink: 0; margin: 0; width: 1.25em; font-size: 15px; text-align: center; color: #9ca3af; }
/* no grey box after a click (Bootstrap focus) and no blue box while pressing */
.ts-account-menu .dropdown-item:focus { background: transparent; color: #2b2f36; }
.ts-account-menu .dropdown-item:focus-visible { outline: 2px solid var(--ts-teal); outline-offset: -2px; }
/* hover: subtle grey; icon turns teal */
.ts-account-menu .dropdown-item:hover,
.ts-account-menu .dropdown-item:active { background: #f4f5f7; color: #111; }
.ts-account-menu .dropdown-item:hover i,
.ts-account-menu .dropdown-item:active i { color: var(--ts-teal); }
/* current page only: light teal */
.ts-account-menu .dropdown-item.active,
.ts-account-menu .dropdown-item.active:hover,
.ts-account-menu .dropdown-item.active:focus { background: #eaf7f7; color: var(--ts-teal); font-weight: 600; }
.ts-account-menu .dropdown-item.active i { color: var(--ts-teal); }
/* log out: red on hover */
.ts-account-menu .ts-logout:hover, .ts-account-menu .ts-logout:active { background: #fdecec; color: #c0392b; }
.ts-account-menu .ts-logout:hover i, .ts-account-menu .ts-logout:active i { color: #c0392b; }
/* divider lines */
.ts-account-menu .dropdown-divider { margin: 5px 4px 6px; border-top-color: #f0f1f3; }

/* Account menu: after a click the item's icon turns into a small teal spinner until the next page loads
   (assets/account-menu.js adds .is-loading). The icon box keeps its size, so nothing moves. */
.ts-account-menu .dropdown-item i { position: relative; }
.ts-account-menu .dropdown-item.is-loading i::before { opacity: 0; }
.ts-account-menu .dropdown-item.is-loading i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    box-sizing: border-box;
    border: 2px solid rgba(0, 151, 157, .25);
    border-top-color: var(--ts-teal, #00979D);
    border-radius: 50%;
    animation: ts-spin .7s linear infinite;
}
@keyframes ts-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ts-account-menu .dropdown-item.is-loading i::after { animation-duration: 1.6s; }
}

/* Account button (client area): only the name and the chevron, no profile icon.
   Same padding on both sides, text and chevron centred, at every width. */
.ts-account-btn { gap: 8px; padding: 7px 14px 7px 16px; line-height: 1.2; }
.ts-account-btn .ts-account-name {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ts-account-btn .ts-account-caret { display: inline-block; line-height: 1; }
/* red "new notifications" dot sits on the pill's top-right corner now */
.ts-account-btn .ts-note-dot { top: -3px; right: -3px; left: auto; }
@media (max-width: 767.98px) {
    /* phones/tablets showed only the icon before; now they show the name */
    .ts-account-btn { padding: 6px 12px 6px 14px; }
    .ts-account-btn .ts-account-name { max-width: 110px; }
    .ts-client-title { padding-right: 110px; }   /* room for the name button on the right */
}

/* ---------- Security page on PC: two columns ---------- */
/* Password and Two-factor login side by side (same height), Active sessions full width below.
   Uses the normal page width so it lines up with the breadcrumb, title and name button.
   Tablets and phones keep the single column. */
@media (min-width: 1024px) {
    main.ts-client > .container.ts-narrow.ts-sec-grid {
        max-width: 1020px;   /* same width as the header row above (breadcrumb, title, name button) */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: stretch;
    }
    main.ts-client .ts-sec-grid > .ts-card,
    main.ts-client .ts-sec-grid > .ts-sec + .ts-sec { margin: 0; min-width: 0; }   /* the grid gap does the spacing */
    .ts-sec-grid > #sessions { grid-column: 1 / -1; }
}

/* ---------- Signup step 2 of 2: address (views/auth/signup-address.php) ---------- */
/* Same look as the "Create your account" inputs: left icon, 56px tall, rounded border. */
.pk-auth .ts-addr-form .form__grp label { z-index: 2; pointer-events: none; }
.pk-auth .ts-addr-form .form__grp select {
  width: 100%;
  height: 56px;
  font-size: 16px;
  color: var(--tg-heading-color);
  border: 1px solid var(--tg-border-2);
  border-radius: 8px;
  padding: 14px 40px 14px 55px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23717484' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  transition: border-color .3s ease-out;
  display: block;
}
.pk-auth .ts-addr-form .form__grp select:focus { border-color: var(--tg-heading-color); outline: 0; }
.pk-auth .ts-addr-form .form__grp select:disabled { background-color: #f3f4f6; color: #9ca3af; }
/* State and PIN side by side on tablet and PC; stacked on phones */
@media (min-width: 576px) {
  .pk-auth .ts-addr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
.pk-auth .ts-addr-form #register { margin-top: 4px; }
.pk-auth .ts-addr-out p { flex-wrap: wrap; font-size: 14px; color: #6b7280; }
.pk-auth .ts-link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--tg-theme-secondary);
  cursor: pointer;
  font: inherit;
}
.pk-auth .ts-link-btn:hover { color: var(--tg-theme-primary); text-decoration: underline; }

/* ---------- Signup and login: Google button, Google email, field errors ---------- */
/* Our own "Continue with Google" button (always opens the account chooser); same height as the inputs. */
.pk-auth .ts-gsi-btn .ts-google-btn {
  min-height: 52px;
  font-size: 16px;
  font-weight: 500;
  gap: 12px;
  cursor: pointer;
}
.pk-auth .ts-gsi-btn .ts-google-btn:disabled { opacity: .7; cursor: default; }
.pk-auth .ts-gsi-btn .ts-google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Google email: fixed field with a small "Google" badge on the right */
.pk-auth .ts-google-email input[readonly] {
  background: #f3f4f6;
  color: #374151;
  padding-right: 104px;
  cursor: default;
  text-overflow: ellipsis;
}
.pk-auth .ts-google-email input[readonly]:focus { border-color: var(--tg-border-2); }
.pk-auth .ts-google-badge {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  pointer-events: none;
}
.pk-auth .ts-google-badge svg { width: 13px; height: 13px; }
.pk-auth .ts-google-back .ts-link-btn { font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
/* Error line under a field */
.pk-auth .ts-field-err {
  margin: -10px 0 14px 2px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #b91c1c;
}
.pk-auth .login__form .form__grp input.is-invalid,
.pk-auth .login__form .form__grp select.is-invalid { border-color: #dc2626; }
.pk-auth .ts-reg-tos + .ts-field-err { margin-top: -12px; }

/* ---------- Client list pages: "+ Order new ..." button next to the title (views/client/nav.php) ---------- */
.ts-client-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ts-client-titlerow .ts-client-title { margin-bottom: 0; min-width: 0; }
.ts-client-head .btn.ts-head-action {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 999px;          /* teal pill, same as the other client buttons */
    padding: 8px 18px;
    font-size: 14px; font-weight: 600; line-height: 1.3;
    white-space: nowrap;
}
.ts-head-action i { font-size: 12px; }
/* phones and small tablets: the account button sits on the title line, so the order button goes below the title */
@media (max-width: 767.98px) {
    .ts-client-titlerow { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
    .ts-client-head .btn.ts-head-action { min-height: 40px; max-width: 100%; white-space: normal; }
}

/* ---------- Domain search skeleton (public /domains page and the order page search) ---------- */
/* Grey shimmer bars in the shape of a result row: domain name, price, button pill.
   The shimmer itself (.ts-skeleton) is in loading.css; here only the sizes. */
.ts-dskel .ts-domain-row, .ts-dskel-row { pointer-events: none; }
.ts-dskel-row { border-color: #eef0f3; }
.ts-skeleton.ts-skel-name, .ts-skeleton.ts-skel-price, .ts-skeleton.ts-skel-btn { display: inline-block; animation-duration: 1.6s; }
.ts-skel-name { width: 55%; max-width: 260px; height: 18px; }
.ts-skel-price { width: 72px; height: 16px; }
.ts-skel-btn { width: 84px; height: 32px; border-radius: 999px; }   /* pill, like the Register / Select button */
.ts-dskel .ts-domain-row:nth-child(3) .ts-skel-name, .ts-dskel-row:nth-child(3) .ts-skel-name { width: 45%; }
.ts-dskel .ts-domain-row:nth-child(4) .ts-skel-name, .ts-dskel-row:nth-child(4) .ts-skel-name { width: 62%; }
@media (max-width: 575.98px) {
    .ts-skel-name { width: 70%; }
}
/* no shimmer for people who turned off animations */
@media (prefers-reduced-motion: reduce) {
    .ts-skeleton { animation: none !important; }
}