/* =========================================================
   SGDIEN Contact Footer – Admin CSS (FREE lite)
   Version: 2.8.6-lite (no VIP)
   ========================================================= */

/* ========= Tokens ========= */
:root {
  --sg-wp-blue: #1e8cbe;
  --sg-wp-blue-dark: #135e96;
  --sg-wp-outline: rgba(30,140,190,.12);
  --sg-muted: #646970;
  --sg-border: #e0e0e0;
  --sg-panel: #fcfcfc;
  --sg-shadow: 0 1px 1px rgba(0,0,0,.04);
  --sg-inset: inset 0 1px 1px rgba(0,0,0,.02);
}

/* ========= Khung trang ========= */
.sgdien-settings-page { margin-right: 20px; }

.sgdien-settings-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.sgdien-settings-form {
  flex: 2;
  min-width: 450px;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #c3c4c7;
  box-shadow: var(--sg-shadow);
  box-sizing: border-box;
  border-radius: 8px;
}

.sgdien-sidebar {
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #c3c4c7;
  box-shadow: var(--sg-shadow);
  box-sizing: border-box;
  align-self: flex-start;
  position: sticky;
  top: 30px;
  border-radius: 8px;
}

.sgdien-sidebar h3 {
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #23282d;
}

/* ========= Preview preset ========= */
.sgdien-preset-preview-wrap {
  margin: 15px 0 25px;
  background-color: #fcfcfc;
  border: 1px solid #e0e0e0;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
}
.sgdien-preset-preview-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
}
.sgdien-preset-preview-wrap p {
  color: #888;
  font-style: italic;
  margin: 0;
  padding: 15px 0;
  font-size: 0.9em;
}

/* ========= Info box ========= */
.sgdien-info-box {
  margin-top: 30px;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #0073aa;
  border-radius: 8px;
}
.sgdien-info-box h4 { margin: 0 0 10px; color: #0073aa; }
.sgdien-info-box p { margin-bottom: 5px; font-size: 0.9em; line-height: 1.5; }

/* ========= Bng form ========= */
.form-table th {
  width: 150px;
  padding-right: 20px;
  vertical-align: top;
  line-height: 1.3;
}
.form-table td { padding-top: 10px; padding-bottom: 10px; }
.form-table tr:first-child th,
.form-table tr:first-child td { padding-top: 0; }

.form-table .description {
  font-style: italic;
  margin-top: 8px;
  color: #666;
  font-size: 0.85em;
  display: block;
}

/* Ẩn label mặc định cho trường chọn preset */
.sgdien-settings-page tr#sgdien_contact_footer_preset_select th { display: none; }
.sgdien-settings-page tr#sgdien_contact_footer_preset_select td { padding-top: 0; padding-bottom: 0; }

/* ========= Nhóm khung ========= */
.sgdien-settings-group {
  background-color: var(--sg-panel);
  border: 1px solid var(--sg-border);
  padding: 15px;
  margin-top: 25px;
  border-radius: 8px;
  box-shadow: var(--sg-inset);
}
.sgdien-settings-group:first-of-type { margin-top: 15px; }
.sgdien-settings-group h2 {
  font-size: 1.1em;
  margin: 0 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #005187;
}
.sgdien-settings-group .form-table { margin: 0; }
.sgdien-settings-group .form-table tr th,
.sgdien-settings-group .form-table tr td { padding-top: 8px; padding-bottom: 8px; }

/* ========= Responsive ========= */
@media screen and (max-width: 960px) {
  .sgdien-settings-form { min-width: unset; flex-basis: 100%; }
  .sgdien-sidebar { min-width: unset; max-width: unset; flex-basis: 100%; position: static; }
}
.sgdien-settings-form .settings-section:last-of-type { margin-bottom: 0; }

/* ========= Nút “Khôi phục mặc đnh mẫu” ========= */
.sgdien-reset-container { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sgdien-muted { color: var(--sg-muted); font-size: 12px; }

.sgdien-btn-reset{
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 9999px;
  border: 1px solid var(--sg-wp-blue-dark);
  background: linear-gradient(180deg, var(--sg-wp-blue) 0%, var(--sg-wp-blue-dark) 100%);
  color: #fff; font-weight: 600;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 6px 14px rgba(19,94,150,.20);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s;
}
.sgdien-btn-reset:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(19,94,150,.25); color: #fff; }
.sgdien-btn-reset:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(19,94,150,.15); }
.sgdien-btn-reset .sgdien-btn-icon { font-size: 16px; line-height: 1; }
.sgdien-btn-reset.is-busy { opacity: .85; cursor: default; }
.sgdien-btn-reset.is-busy .sgdien-btn-icon { animation: sgdien-spin 1s linear infinite; }
@keyframes sgdien-spin { to { transform: rotate(360deg); } }
@media (prefers-color-scheme: dark){
  .sgdien-muted { color: #a0a7b2; }
  .sgdien-btn-reset{
    border-color: #2e9ad9;
    background: linear-gradient(180deg, #2eaadc 0%, #177bb5 100%);
    box-shadow: 0 6px 14px rgba(46,154,217,.25);
  }
}

/* ========= Field width & disabled ========= */
.sgdien-settings-page .sgdien-setting-field { max-width: 520px; }
.sgdien-settings-page select.sgdien-setting-field { min-width: 200px; }
.sgdien-settings-page .sgdien-setting-field:disabled { opacity: .6; cursor: not-allowed; }

/* ========= Color Picker polish ========= */
.sgdien-color-field[type="color"]{
  appearance: none; -webkit-appearance: none;
  width: 42px; height: 32px; padding: 0;
  border: 1px solid #ccd0d4; border-radius: 6px; background: #fff; cursor: pointer; vertical-align: middle;
}
.sgdien-color-field[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.sgdien-color-field[type="color"]::-webkit-color-swatch { border: 1px solid #e2e4e7; border-radius: 4px; }
.wp-picker-container .wp-color-result.button { height: 32px; border-radius: 6px; border-color: #ccd0d4; box-shadow: none; }
.wp-picker-container .wp-picker-input-wrap input[type="text"] { height: 32px; border-radius: 6px; }
.wp-picker-container .wp-color-result-text { line-height: 30px; }
.sgdien-color-hint { display: inline-block; margin-left: 8px; color: #646970; font-size: 12px; }
.sgdien-color-chip { display: inline-block; width: 18px; height: 18px; border: 1px solid #e2e4e7; border-radius: 4px; vertical-align: middle; margin-left: 6px; }

/* ========= MEDIA FIELD (URL + nút + preview) ========= */
.form-table td .sgdien-media-upload-url,
.form-table td .sgdien-media-upload-button,
.form-table td .sgdien-media-preview-wrap { display: inline-flex; vertical-align: middle; }
.form-table td .sgdien-media-upload-url { max-width: 350px; width: 100%; min-width: 260px; box-sizing: border-box; }
.form-table td .sgdien-media-upload-button { margin-left: 8px; }
.form-table td .sgdien-media-preview-wrap {
  width: 72px; height: 72px; margin-left: 12px;
  border: 1px solid #e2e8f0; border-radius: 8px; background: #fafafa;
  align-items: center; justify-content: center; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  transition: transform .15s ease, box-shadow .15s ease;
}
.form-table td .sgdien-media-preview-wrap:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.06), inset 0 1px 0 rgba(0,0,0,.03);
}
.form-table td .sgdien-media-preview-wrap img {
  max-width: 100%; max-height: 100%; height: auto; width: auto; object-fit: contain; display: block;
}
.form-table td .sgdien-media-preview-wrap:empty::after { content: "No image"; font-size: 11px; color: #94a3b8; }
.form-table td .sgdien-media-preview-wrap + .description,
.form-table td .sgdien-media-upload-button + .description,
.form-table td .sgdien-media-upload-url + .description { margin-top: 8px; }

@media (max-width: 782px){
  .form-table td .sgdien-media-upload-url,
  .form-table td .sgdien-media-upload-button,
  .form-table td .sgdien-media-preview-wrap { display: block; margin-left: 0; }
  .form-table td .sgdien-media-upload-button { margin-top: 6px; }
  .form-table td .sgdien-media-preview-wrap { margin-top: 8px; width: 86px; height: 86px; }
}

/* Thêm quy tắc ẩn các trường không mong muốn */
/* Ẩn hoàn toàn hàng chứa checkbox Hiệu ứng hover lift */
.sgdien-settings-page .form-table tr:has(input[name="sgdien_contact_footer_options[desktop_hotline_hover_lift]"]) {
    display: none !important;
}