/* Domains view on the My Sites dashboard (js/dashboard-domains.js). The list reuses the Sites table
   classes from dashboard.css (sites-table-card, site-row, site-status-badge, site-action-btn); only the
   toolbar alignment, the anchor-as-button reset and the warning badge colour are this file's. */
.dash-domains-toolbar { justify-content: flex-end; }
.dash-shell a.dash-new-site-btn, .dash-shell a.site-action-btn { text-decoration: none; }
.site-status-badge.is-warn, .site-status-tag.is-warn { background: var(--dash-coral-tint); color: var(--dash-coral-text); }

/* Drawer: everything right of the sidebar while the sidebar shows (dashboard.css hides it at 1100px) */
.dd-drawer { position: fixed; inset: 0; z-index: 2000; display: none; }
.dd-drawer.show { display: block; }
.dd-drawer-backdrop { position: absolute; inset: 0; background: rgba(44,62,80,0.5); }
.dd-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0; left: var(--dash-sidebar-w, 248px); background: var(--bg-primary, #FFFCF7); color: var(--text-primary);
    box-shadow: -12px 0 40px rgba(61,50,41,0.18); display: flex; flex-direction: column; animation: ddSlide 0.25s ease;
}
@media (max-width: 1100px) { .dd-drawer-panel { left: 0; } }
@keyframes ddSlide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.dd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid rgba(45,125,125,0.15); }
.dd-head h2 { margin: 0; font-size: 18px; font-family: var(--dash-font-display, inherit); word-break: break-all; }
/* a 44px tap target that keeps the header's height (the negative margins absorb the box) */
.dd-close { font: inherit; font-size: 26px; line-height: 1; background: none; border: 0; color: var(--text-tertiary); cursor: pointer; width: 44px; height: 44px; margin: -10px -12px -10px 0; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; }
.dd-close:hover { background: rgba(45,125,125,0.08); }
.dd-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 18px 0; border-bottom: 1px solid rgba(45,125,125,0.15); }
.dd-tab { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.dd-tab.active { color: var(--primary-color-dark); border-bottom-color: var(--primary-color); }
.dd-body { padding: 18px 24px 28px; overflow-y: auto; flex: 1; }
.dd-section { display: grid; gap: 14px; max-width: 1100px; }
.dd-subhead { margin: 4px 0 -6px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.dd-divider { height: 1px; background: rgba(45,125,125,0.15); margin: 4px 0; }
.dd-rows { display: grid; gap: 8px; }
.dd-kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px; font-size: 14px; align-items: center; }
.dd-kv dt { color: var(--text-secondary); margin: 0; }
.dd-kv dd { margin: 0; color: var(--text-primary); word-break: break-word; }
.dd-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.dd-toggle input { width: 18px; height: 18px; accent-color: var(--primary-color); }
.dd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-actions-end { justify-content: flex-end; }
.dd-btn { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(45,125,125,0.3); background: #fff; color: var(--primary-color-dark); cursor: pointer; }
.dd-btn.primary { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.dd-btn.danger { color: var(--dash-coral-text, #B5402F); border-color: rgba(181,64,47,0.35); }
.dd-btn:disabled { opacity: 0.55; cursor: default; }
.dd-note { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.dd-warn { color: var(--dash-coral-text, #B5402F); font-weight: 600; }
.dd-msg { font-size: 13px; margin: 0; color: var(--primary-color-dark); }
.dd-msg.is-error { color: var(--dash-coral-text, #B5402F); }
.dd-msg:empty { display: none; }

/* Tables: the DNS editor's columns are fixed so a type name never truncates */
.dd-table-wrap { overflow-x: auto; }
.dd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dd-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); padding: 6px 4px; }
.dd-table td { padding: 4px; vertical-align: middle; border-top: 1px solid rgba(45,125,125,0.1); }
.dd-dns-table { min-width: 640px; table-layout: fixed; }
.dd-col-type { width: 190px; }
.dd-col-host { width: 150px; }
.dd-col-value { width: auto; }
.dd-col-pref { width: 90px; }
.dd-col-ttl { width: 120px; }
.dd-col-tools { width: 150px; }
.dd-table input, .dd-table select, .dd-field input, .dd-field select { font: inherit; font-size: 13px; height: 36px; padding: 7px 8px; border: 1px solid rgba(45,125,125,0.25); border-radius: 8px; background: #fff; color: var(--text-primary); width: 100%; min-width: 0; box-sizing: border-box; }
/* selects match the inputs: no native look, the dashboard's chevron (#siteSortSelect's) at the right */
.dd-table select, .dd-field select { -webkit-appearance: none; appearance: none; padding-right: 28px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A8B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center; }
.dd-table select:disabled { color: var(--text-primary); opacity: 1; }
.dd-table tr.is-managed td { background: var(--dash-teal-tint, rgba(45,125,125,0.08)); }
.dd-table tr.is-locked select { pointer-events: none; }
.dd-table tr.is-locked input { cursor: pointer; }
.dd-table tr.is-error td { background: rgba(181,64,47,0.08); }
.dd-table input.is-error, .dd-table select.is-error { border-color: var(--dash-coral-text, #B5402F); box-shadow: 0 0 0 2px rgba(181,64,47,0.2); }
/* the tag may wrap; the column keeps its width so the email table's boxes never squeeze */
.dd-row-tools { white-space: normal; }
/* The DNS tab's message and buttons stay in view at the bottom of the scrolling body (bottom -28px
   cancels .dd-body's bottom padding, which sticky subtracts from the scrollport); the right padding
   keeps Save clear of the support chat bubble (56px wide, 24px from the edge, above the drawer) */
.dd-foot { position: sticky; bottom: -28px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; padding: 10px 64px 10px 0; background: var(--bg-primary, #FFFCF7); border-top: 1px solid rgba(45,125,125,0.15); }
.dd-foot .dd-msg { flex: 1 1 240px; }
.dd-foot .dd-actions { margin: 0; }
/* a button (the locked row's one keyboard stop) drawn as the plain tag it was */
.dd-managed-tag { font: inherit; font-size: 11px; color: var(--primary-color-dark); margin-right: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
/* a 36px tap target for the row's remove button */
.dd-icon-btn { font: inherit; background: none; border: 0; color: var(--text-tertiary); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; width: 36px; height: 36px; display: inline-grid; place-items: center; vertical-align: middle; border-radius: 8px; }
.dd-icon-btn:hover { color: var(--dash-coral-text, #B5402F); }
.dd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dd-form .full { grid-column: 1 / -1; }
.dd-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.dd-radio { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.dd-loading { padding: 30px 0; text-align: center; color: var(--text-secondary); }

.dd-spinner { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid rgba(45,125,125,0.2); border-top-color: var(--primary-color); border-radius: 50%; animation: ddSpin 0.9s linear infinite; }
@keyframes ddSpin { to { transform: rotate(360deg); } }
.dd-pick { display: grid; gap: 8px; text-align: left; margin-bottom: 16px; max-height: 300px; overflow-y: auto; }
.dd-pick button { font: inherit; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(45,125,125,0.25); background: #fff; cursor: pointer; color: var(--text-primary); }
.dd-pick button:hover { background: var(--dash-teal-tint); }
.dd-pick small { display: block; color: var(--text-tertiary); }
/* The CONFIRM word and the emailed code inside the dialog */
.dd-dialog-input { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid rgba(45,125,125,0.3); border-radius: 10px; background: #fff; color: var(--text-primary); width: 100%; box-sizing: border-box; letter-spacing: 0.08em; }
.dd-dialog-input:focus { outline: none; border-color: var(--primary-color); }
/* Unlock and the code button wait for the exact word / six digits: greyed, no hover lift */
#ddDialog .site-action-btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

/* The done dialog after a purchase (showModal variant 'celebrate'): the title centred and
   large with the close button in the corner, a teal check badge, stacked full-width buttons */
.dash-dialog.is-celebrate .dash-dialog-head { position: relative; justify-content: center; text-align: center; border-bottom: 0; padding: 30px 52px 0; }
.dash-dialog.is-celebrate .dash-dialog-head h2 { font-size: 24px; line-height: 1.2; word-break: break-word; }
.dash-dialog.is-celebrate .dash-dialog-close { position: absolute; top: 12px; right: 12px; }
.dash-dialog.is-celebrate .dash-dialog-body { text-align: center; padding: 14px 28px 28px; justify-items: center; }
.dash-dialog.is-celebrate .dd-note { font-size: 16px; color: var(--text-primary); }
.dash-dialog.is-celebrate .dash-dialog-actions { justify-self: stretch; flex-direction: column; gap: 10px; margin-top: 6px; }
.dash-dialog.is-celebrate .dash-dialog-actions > * { width: 100%; height: 44px; }
.dd-celebrate-badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%); color: #fff; box-shadow: 3px 3px 0 #236060; }

@media (max-width: 767px) {
    /* dashboard.css folds the toolbar's New Site button to its icon here; "Buy a domain" keeps its label */
    #dashDomainsView .dash-new-site-btn { width: auto; padding: 0 16px; }
    #dashDomainsView .dash-new-site-btn span { display: inline; }
    .dd-head, .dd-body { padding-left: 16px; padding-right: 16px; }
    .dd-kv { grid-template-columns: 1fr; gap: 2px; }
    .dd-form { grid-template-columns: 1fr; }
    .dd-form .full { grid-column: auto; }
    /* Each DNS row as a stacked card (the five fixed columns leave the Value no room here);
       the forwarding table (.dd-table alone) keeps its columns */
    .dd-dns-table, .dd-dns-table tbody, .dd-dns-table tr, .dd-dns-table td { display: block; }
    .dd-dns-table { min-width: 0; }
    .dd-dns-table colgroup, .dd-dns-table thead { display: none; }
    .dd-dns-table tr { padding: 10px 0; border-top: 1px solid rgba(45,125,125,0.15); }
    .dd-dns-table td { border-top: 0; padding: 4px 0; }
    .dd-dns-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 2px; }
    .dd-dns-table td.dd-row-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: normal; }
}

/* phones: dashboard.css folds every row button to a 36px icon (dashboard.css --dash-row-cols at 640px);
   the Domains row keeps the word "Manage" instead (text only: "Administrar" needs 109px with the
   10px padding, so the 116px track fits both languages and leaves 92px of name text at 320px) */
@media (max-width: 640px) {
    #dashDomainsView { --dash-row-cols: 18px minmax(0, 1fr) 116px; }
    #dashDomainsView .site-row .site-actions .site-action-btn { width: auto; padding: 0 10px; }
    #dashDomainsView .site-row .site-actions .site-action-btn span { display: inline; }
    #dashDomainsView .site-row .site-actions .site-action-btn svg { display: none; }
}