/**
 * OceanVPS Customer Layout — Premium Proxy Setup presentation layer.
 *
 * Enhances the standalone OceanVPS Proxy Setup shortcode's existing markup
 * (.ovps-proxy-*) when it is rendered inside the Customer Layout dashboard shell
 * (the /proxy-setup/ page, wrapped in .ovps-customer-page-content). Everything is
 * scoped under `.ovps-customer-page-content .ovps-proxy` so it cannot affect the
 * dashboard, wallet, or any other view. Presentation only — no markup, fields,
 * IDs, names, JS, AJAX, nonce or business logic are changed, and toggled
 * elements ([hidden]) are never forced visible.
 */

.ovps-customer-page-content .ovps-proxy {
    --owp-teal-900: #0e3b3a;
    --owp-teal-700: #145b56;
    --owp-teal-600: #1a6b64;
    --owp-gold: #c8a45a;
    --owp-gold-soft: #efe2c4;
    --owp-cream: #fbf7ee;
    --owp-cream-2: #f6efe0;
    --owp-ink: #1e2a29;
    --owp-muted: #6b7a78;
    --owp-border: #e7e1d3;
    --owp-card: #ffffff;
    --owp-ok: #1f7a52;
    --owp-ok-bg: #e6f4ec;
    --owp-err: #b23b3b;
    --owp-err-bg: #fbe9e9;
    --owp-radius: 16px;
    --owp-shadow: 0 6px 20px rgba(14, 59, 58, .07);
    --owp-shadow-sm: 0 2px 8px rgba(14, 59, 58, .06);
    color: var(--owp-ink);
}

.ovps-customer-page-content .ovps-proxy-intro {
    margin: 0 0 18px; color: var(--owp-muted); font-size: 14.5px; max-width: 760px;
}

/* ---------- Layout: form column + progress column ---------- */
/*
 * Three balanced columns: Server Credentials | Proxy Login | Setup Progress,
 * with the success Result spanning full width below.
 *
 * The Proxy shortcode wraps its Server + Proxy + Result cards in a single
 * <form>, with the Progress panel as a sibling. To make all three cards equal
 * grid columns WITHOUT touching the Proxy markup, we flatten the form with
 * display:contents — the <form> stays in the DOM (its id, inputs, nonce, submit
 * button and JS bindings are untouched; it simply stops generating a layout
 * box), so its cards place directly into the grid. Presentation only.
 */
.ovps-customer-page-content .ovps-proxy-grid {
    display: grid;
    grid-template-columns: 1fr;   /* mobile: single column */
    gap: 18px;
    align-items: stretch;
}
.ovps-customer-page-content .ovps-proxy-form { display: contents; }

/* Mobile DOM order is server, proxy, result, progress (result lives inside the
   form, before the sibling progress panel). Reorder so the flow reads
   server -> proxy -> progress -> result. */
.ovps-customer-page-content .ovps-proxy-progress-panel { order: 3; }
.ovps-customer-page-content .ovps-proxy-result { order: 4; }

/* Tablet: two equal columns (server | proxy), progress + result full width. */
@media (min-width: 768px) and (max-width: 1023px) {
    .ovps-customer-page-content .ovps-proxy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ovps-customer-page-content .ovps-proxy-server-card    { grid-column: 1; grid-row: 1; order: 0; }
    .ovps-customer-page-content .ovps-proxy-proxy-card     { grid-column: 2; grid-row: 1; order: 0; }
    .ovps-customer-page-content .ovps-proxy-progress-panel { grid-column: 1 / -1; grid-row: 2; order: 0; }
    .ovps-customer-page-content .ovps-proxy-result         { grid-column: 1 / -1; grid-row: 3; order: 0; }
}

/* Desktop: three equal columns, top edges aligned, result full width below. */
@media (min-width: 1024px) {
    .ovps-customer-page-content .ovps-proxy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ovps-customer-page-content .ovps-proxy-server-card    { grid-column: 1; grid-row: 1; order: 0; }
    .ovps-customer-page-content .ovps-proxy-proxy-card     { grid-column: 2; grid-row: 1; order: 0; }
    .ovps-customer-page-content .ovps-proxy-progress-panel { grid-column: 3; grid-row: 1; order: 0; }
    .ovps-customer-page-content .ovps-proxy-result         { grid-column: 1 / -1; grid-row: 2; order: 0; }
}

/* ---------- Cards ---------- */
.ovps-customer-page-content .ovps-proxy-panel {
    background: var(--owp-card);
    border: 1px solid var(--owp-border);
    border-radius: var(--owp-radius);
    box-shadow: var(--owp-shadow-sm);
    padding: 22px 24px;
}
.ovps-customer-page-content .ovps-proxy-h2 {
    margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--owp-teal-900);
}
.ovps-customer-page-content .ovps-proxy-sub { margin: 0 0 14px; font-size: 13px; color: var(--owp-muted); }
.ovps-customer-page-content .ovps-proxy-hint { margin: 4px 0 12px; font-size: 12px; color: var(--owp-muted); }

/* ---------- Inputs ---------- */
.ovps-customer-page-content .ovps-proxy-label {
    display: block; font-size: 12.5px; font-weight: 600; color: var(--owp-ink); margin: 10px 0 5px;
}
.ovps-customer-page-content .ovps-proxy-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--owp-border); border-radius: 10px;
    padding: 11px 13px; font-size: 15px; background: #fff; color: var(--owp-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ovps-customer-page-content .ovps-proxy-input:focus {
    outline: none; border-color: var(--owp-teal-600); box-shadow: 0 0 0 3px rgba(26,107,100,.12);
}
.ovps-customer-page-content .ovps-proxy-input-small { max-width: 140px; }
.ovps-customer-page-content .ovps-proxy-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* "or enter manually" divider */
.ovps-customer-page-content .ovps-proxy-or {
    display: flex; align-items: center; text-align: center; gap: 12px; color: var(--owp-muted);
    font-size: 12px; margin: 14px 0 6px;
}
.ovps-customer-page-content .ovps-proxy-or::before,
.ovps-customer-page-content .ovps-proxy-or::after {
    content: ""; flex: 1; height: 1px; background: var(--owp-border);
}

/* ---------- Alert ---------- */
.ovps-customer-page-content .ovps-proxy-alert {
    border-radius: 10px; padding: 11px 13px; font-size: 13px; margin: 0 0 14px;
    background: var(--owp-err-bg); color: var(--owp-err); border: 1px solid #f1c9c9;
}

/* ---------- Mode selector ---------- */
.ovps-customer-page-content .ovps-proxy-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 16px; }
.ovps-customer-page-content .ovps-proxy-mode {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--owp-border); border-radius: 12px; padding: 12px 14px; cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.ovps-customer-page-content .ovps-proxy-mode:hover { border-color: var(--owp-gold); background: var(--owp-cream); }
.ovps-customer-page-content .ovps-proxy-mode-body { display: flex; flex-direction: column; gap: 2px; }
.ovps-customer-page-content .ovps-proxy-mode-body strong { font-size: 13.5px; color: var(--owp-teal-900); }
.ovps-customer-page-content .ovps-proxy-mode-body span { font-size: 12px; color: var(--owp-muted); }
@media (max-width: 560px) { .ovps-customer-page-content .ovps-proxy-modes { grid-template-columns: 1fr; } }

/* ---------- Primary button ---------- */
.ovps-customer-page-content .ovps-proxy-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; background: var(--owp-teal-700); color: #fff; border: 0; border-radius: 10px;
    padding: 13px 20px; font-size: 14.5px; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 6px rgba(14,59,58,.18); transition: background .15s ease, transform .05s ease;
}
.ovps-customer-page-content .ovps-proxy-button:hover { background: var(--owp-teal-900); }
.ovps-customer-page-content .ovps-proxy-button:active { transform: translateY(1px); }
.ovps-customer-page-content .ovps-proxy-button[disabled] { opacity: .6; cursor: default; }

/* ---------- Progress ---------- */
.ovps-customer-page-content .ovps-proxy-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ovps-customer-page-content .ovps-proxy-pct { font-size: 20px; font-weight: 800; color: var(--owp-teal-900); }
.ovps-customer-page-content .ovps-proxy-bar {
    height: 10px; background: var(--owp-cream-2); border-radius: 999px; overflow: hidden; margin: 10px 0 12px;
}
.ovps-customer-page-content .ovps-proxy-bar-fill {
    display: block; height: 100%; background: linear-gradient(90deg, var(--owp-teal-600), var(--owp-teal-900));
    border-radius: 999px; transition: width .4s ease;
}
.ovps-customer-page-content .ovps-proxy-current { margin: 0 0 4px; font-weight: 600; font-size: 13.5px; color: var(--owp-ink); }
.ovps-customer-page-content .ovps-proxy-stepcount { margin: 0 0 10px; font-size: 12px; color: var(--owp-muted); }
.ovps-customer-page-content .ovps-proxy-checklist { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ovps-customer-page-content .ovps-proxy-checklist li { font-size: 13px; color: var(--owp-ink); padding-left: 4px; }
.ovps-customer-page-content .ovps-proxy-activity-wrap { border-top: 1px solid var(--owp-border); padding-top: 12px; }
.ovps-customer-page-content .ovps-proxy-activity-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--owp-muted); font-weight: 700; margin-bottom: 6px; }
.ovps-customer-page-content .ovps-proxy-activity {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
    background: #0e2a29; color: #cfeae6; border-radius: 10px; padding: 12px; max-height: 220px; overflow: auto; white-space: pre-wrap;
}

/* ---------- Result ---------- */
.ovps-customer-page-content .ovps-proxy-result {
    background: linear-gradient(135deg, var(--owp-cream) 0%, var(--owp-cream-2) 100%);
    border: 1px solid var(--owp-gold-soft); border-radius: var(--owp-radius);
    box-shadow: var(--owp-shadow); padding: 22px 24px;
}
.ovps-customer-page-content .ovps-proxy-result .ovps-proxy-h2 { color: var(--owp-teal-900); }
.ovps-customer-page-content .ovps-proxy-save-note { color: var(--owp-err); font-weight: 600; }
.ovps-customer-page-content .ovps-proxy-result-rows { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Defensive proxy-view panels (dashboard ?ovps_view=proxy) ---------- */
.ovps-customer-main .ovps-proxy-open .ovps-inline-button,
.ovps-customer-main .ovps-proxy-open a.ovps-inline-button {
    display: inline-flex; align-items: center; gap: 8px; background: var(--owp-teal-700, #145b56);
    color: #fff !important; border-radius: 10px; padding: 11px 18px; font-weight: 600; text-decoration: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .ovps-customer-page-content .ovps-proxy-panel { padding: 18px; }
    .ovps-customer-page-content .ovps-proxy-h2 { font-size: 16px; }
    .ovps-customer-page-content .ovps-proxy-input-small { max-width: 100%; }
}