/* USER ADS — FRONTEND */

.ua-frontend {/*max-width: 1100px; margin: 30px auto;*/ padding: 0 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #333;}
.ua-frontend * {box-sizing: border-box;}

.ua-frontend-head {display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 12px; flex-wrap: wrap;}
.ua-frontend-head h1 {font-size: 26px; margin: 0; font-weight: 600;}

.ua-balance-box {display: inline-flex; align-items: center; gap: 8px; background: #f0f8fb; padding: 10px 16px; border-radius: 6px; font-size: 14px;}
.ua-balance-box i {color: #2eacce; font-size: 18px;}
.ua-balance-box strong {font-size: 16px; color: #2eacce;}

.ua-frontend-actions {margin-bottom: 20px; display: flex; gap: 8px; flex-wrap: wrap;}

.ua-btn {display: inline-block; padding: 9px 16px; border: 1px solid #d0d7dd; border-radius: 4px; background: #fff; color: #444; text-decoration: none; font-size: 13px; cursor: pointer; transition: 0.15s; line-height: 1.4;}
.ua-btn:hover {background: #f5f8f9; text-decoration: none; color: #333;}
.ua-btn-primary {background: #2eacce; color: #fff; border-color: #2eacce;}
.ua-btn-primary:hover {background: #26a0bf; color: #fff; border-color: #26a0bf;}
.ua-btn-danger {color: #d9534f; border-color: #e8c5c3;}
.ua-btn-danger:hover {background: #fde8e7; color: #b02a26;}
.ua-btn-sm {padding: 5px 10px; font-size: 12px;}
.ua-btn-lg {padding: 13px 28px; font-size: 15px; font-weight: 600;}

/* Banners list */
.ua-banners-list {display: grid; gap: 16px;}

.ua-banner-card {display: flex; gap: 18px; background: #fff; border: 1px solid #e5ebef; border-radius: 8px; padding: 16px; transition: 0.15s;}
.ua-banner-card:hover {box-shadow: 0 4px 16px rgba(0,0,0,0.06);}

.ua-banner-preview {flex: 0 0 180px; height: 120px; background: #f5f8f9; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.ua-banner-preview img {width: 100%; height: 100%; object-fit: contain;}
.ua-banner-noimg {color: #ccc; font-size: 40px;}

.ua-banner-info {flex: 1; min-width: 0;}
.ua-banner-info h3 {margin: 0 0 6px; font-size: 16px;}

.ua-banner-meta {display: flex; gap: 12px; align-items: center; font-size: 12px; color: #777; margin-bottom: 12px;}
.ua-banner-slot {color: #2eacce;}
.ua-banner-status {display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase;}
.ua-status-active {background: #e8f5e9; color: #2e7d32;}
.ua-status-pending {background: #fff8e1; color: #f57f17;}
.ua-status-rejected {background: #fdecea; color: #b71c1c;}
.ua-status-paused {background: #eee; color: #777;}

.ua-banner-stats {display: flex; gap: 22px; padding: 10px 0; border-top: 1px solid #eef2f5; border-bottom: 1px solid #eef2f5; margin-bottom: 12px;}
.ua-stat {display: flex; flex-direction: column;}
.ua-stat-num {font-size: 16px; font-weight: 600; color: #333;}
.ua-stat-label {font-size: 11px; color: #999; text-transform: uppercase;}

.ua-banner-actions {display: flex; gap: 6px;}
.ua-banner-reject {margin-top: 10px; padding: 8px 12px; background: #fdecea; color: #b71c1c; border-radius: 4px; font-size: 13px;}
.ua-banner-reject i {margin-right: 4px;}

/* Empty state */
.ua-empty-state {text-align: center; padding: 60px 20px; background: #fafcfd; border-radius: 8px; border: 2px dashed #dde3e8;}
.ua-empty-state i {font-size: 48px; color: #ccc; margin-bottom: 12px;}
.ua-empty-state h3 {margin: 0 0 8px; font-size: 18px;}
.ua-empty-state p {margin: 0 0 20px; color: #777;}
.ua-empty-sm {padding: 30px 20px;}
.ua-empty-sm i {font-size: 32px;}

/* Form */
.ua-form {}
.ua-step {background: #fff; border: 1px solid #e5ebef; border-radius: 8px; padding: 22px; margin-bottom: 18px; /*opacity: 0.6;*/ transition: opacity 0.2s;}
.ua-step-active, .ua-step-done {opacity: 1;}
.ua-step h2 {margin: 0 0 18px; font-size: 17px; display: flex; align-items: center; gap: 10px;}
.ua-step-num {display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #2eacce; color: #fff; font-weight: 600; font-size: 14px;}
.ua-step-done .ua-step-num {background: #8BC34A;}

.ua-row {display: flex; align-items: flex-start; margin-bottom: 14px; gap: 12px; flex-wrap: wrap;}
.ua-row label {flex: 0 0 200px; padding-top: 9px; font-size: 13px; font-weight: 500; color: #444;}
.ua-row input[type="text"],
.ua-row input[type="number"],
.ua-row input[type="datetime-local"],
.ua-row select,
.ua-row textarea {padding: 9px 12px; border: 1px solid #c7d6db; border-radius: 4px; font-size: 14px; background: #f8fbfc; min-width: 280px; max-width: 100%;}
.ua-row input:focus, .ua-row select:focus {outline: none; border-color: #2eacce; background: #fff;}
.ua-row input[type="checkbox"] {margin-top: 10px; transform: scale(1.3);}
.ua-explain {color: #999; font-size: 12px; font-style: italic; margin-top: 4px; flex-basis: 100%; margin-left: 212px;}
.ua-explain-inline {color: #999; font-size: 13px; padding-top: 9px;}

/* Slot grid */
.ua-slot-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;}
.ua-slot-card {cursor: pointer; border: 2px solid #e5ebef; border-radius: 8px; padding: 16px; background: #fff; transition: 0.15s; position: relative;}
.ua-slot-card input {position: absolute; opacity: 0;}
.ua-slot-card:hover {border-color: #b8d8e3;}
.ua-slot-card.is-selected {border-color: #2eacce; background: #f0f8fb;}
.ua-slot-card-body h4 {margin: 0 0 8px; font-size: 15px;}
.ua-slot-size {font-size: 12px; color: #777; margin-bottom: 6px;}
.ua-slot-limit {font-size: 12px; color: #999;}
.ua-slot-limit i {color: #2eacce; margin-right: 3px;}
.ua-slot-demo {display: inline-block; margin-top: 8px; font-size: 12px; color: #2eacce; text-decoration: none;}
.ua-slot-description {margin-top: 12px; padding: 10px 14px; background: #f0f8fb; border-radius: 4px; font-size: 13px; color: #0f6778;}
.ua-slot-description i {margin-right: 4px;}

/* Tariff list */
.ua-tariff-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;}
.ua-tariff-card {cursor: pointer; border: 2px solid #e5ebef; border-radius: 8px; padding: 16px; position: relative; transition: 0.15s;}
.ua-tariff-card input {position: absolute; opacity: 0;}
.ua-tariff-card:hover {border-color: #b8d8e3;}
.ua-tariff-card.is-selected {border-color: #2eacce; background: #f0f8fb;}
.ua-tariff-body h4 {margin: 0 0 10px; font-size: 15px;}
.ua-tariff-prices {font-size: 13px; margin-bottom: 8px;}
.ua-tariff-prices span {font-weight: 600; color: #2eacce;}
.ua-tariff-meta {font-size: 11px; color: #999; display: flex; gap: 10px; flex-wrap: wrap;}

/* Summary */
.ua-step-final {background: #fafcfd; border-color: #c7d6db;}
.ua-summary {background: #fff; border-radius: 6px; padding: 14px 18px; margin-bottom: 16px;}
.ua-summary-row {display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px;}
.ua-summary-row strong {color: #2eacce; font-size: 17px;}

/* Stats */
.ua-stats-filters {display: flex; gap: 6px; margin-bottom: 16px;}
.ua-stats-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px;}
.ua-stat-card {background: #fff; border: 1px solid #e5ebef; border-radius: 8px; padding: 18px; text-align: center;}
.ua-stat-icon {font-size: 26px; color: #2eacce; margin-bottom: 8px;}
.ua-stat-card .ua-stat-num {font-size: 26px; font-weight: 700; margin-bottom: 4px;}
.ua-stat-card .ua-stat-label {font-size: 12px; color: #777;}
.ua-stat-card .ua-stat-sub {font-size: 11px; color: #aaa; margin-top: 6px;}

/* Box */
.ua-box {background: #fff; border: 1px solid #e5ebef; border-radius: 8px; margin-bottom: 20px; overflow: hidden;}
.ua-box-head {padding: 12px 18px; background: #fafcfd; border-bottom: 1px solid #e8eef2; font-weight: 600; font-size: 14px;}
.ua-box-head i {color: #2eacce; margin-right: 6px;}
.ua-box-inside {padding: 18px;}

/* Budget bar */
.ua-budget-bar {height: 20px; background: #eef2f5; border-radius: 10px; overflow: hidden; margin-bottom: 8px;}
.ua-budget-fill {height: 100%; background: linear-gradient(90deg, #2eacce, #8BC34A); transition: width 0.3s;}
.ua-budget-info {font-size: 13px; color: #777;}

/* Balance */
.ua-balance-large {font-size: 40px; font-weight: 700; color: #2eacce; text-align: center; padding: 10px 0;}

/* Alerts */
.ua-alert {padding: 12px 16px; border-radius: 4px; margin-bottom: 18px; font-size: 14px;}
.ua-alert-error {background: #fdecea; border-left: 4px solid #d9534f; color: #b71c1c;}
.ua-alert-info {background: #e8f4fb; border-left: 4px solid #2eacce; color: #0f6778;}

/* Table */
.ua-table {width: 100%; border-collapse: collapse; font-size: 13px;}
.ua-table th {text-align: left; padding: 10px 8px; background: #f8fbfc; border-bottom: 1px solid #e0e6ea; color: #666; font-size: 11px; text-transform: uppercase;}
.ua-table td {padding: 10px 8px; border-bottom: 1px solid #eef2f5;}

/* Badges */
.ua-badge {display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;}
.ua-badge-green {background: #e8f5e9; color: #2e7d32;}
.ua-badge-yellow {background: #fff8e1; color: #f57f17;}
.ua-badge-red {background: #fdecea; color: #b71c1c;}
.ua-badge-gray {background: #eee; color: #777;}

/* User menu link */
.ua-menu-link {display: block; padding: 6px 0; color: inherit; text-decoration: none;}
.ua-menu-link:hover {color: #2eacce;}

@media (max-width: 767px) {
  .ua-banner-card {flex-direction: column;}
  .ua-banner-preview {width: 100%; height: 160px;}
  .ua-row label {flex-basis: 100%; padding-top: 0;}
  .ua-explain {margin-left: 0;}
  .ua-banner-stats {flex-wrap: wrap; gap: 12px;}
}

/* HELP */
.ua-help {max-width: 900px;}
.ua-help .ua-box {margin-bottom: 16px;}
.ua-help .ua-box-inside {padding: 20px 22px;}
.ua-help p {font-size: 15px; line-height: 1.65; margin: 10px 0; color: #333;}

.ua-help .ua-doc-toc {margin: 0; padding-left: 22px; font-size: 15px; line-height: 2;}
.ua-help .ua-doc-toc a {color: #2eacce; text-decoration: none;}
.ua-help .ua-doc-toc a:hover {text-decoration: underline;}

.ua-help .ua-doc-steps {padding-left: 22px; font-size: 15px; line-height: 1.7;}
.ua-help .ua-doc-steps li {margin-bottom: 12px;}
.ua-help .ua-doc-steps b {color: #2eacce; display: block; margin-bottom: 3px;}

.ua-help .ua-doc-list {padding-left: 22px; font-size: 15px; line-height: 1.8;}
.ua-help .ua-doc-list li {margin-bottom: 6px;}
.ua-help code {background: #f0f4f7; padding: 1px 6px; border-radius: 3px; font-family: Consolas, monospace; font-size: 13px; color: #d6454a;}

.ua-help h4 {font-size: 16px; color: #333; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px dashed #e5ebef;}
.ua-help h4:first-child {margin-top: 0;}

.ua-help .ua-doc-faq {border-left: 3px solid #2eacce; padding: 2px 0 2px 14px; margin: 14px 0; background: #fafcfd; border-radius: 0 4px 4px 0;}
.ua-help .ua-doc-q {font-weight: 600; padding: 10px 14px 4px; font-size: 15px; color: #333;}
.ua-help .ua-doc-q:before {content: "Q: "; color: #2eacce; font-weight: 700;}
.ua-help .ua-doc-a {padding: 4px 14px 12px; font-size: 14px; color: #555; line-height: 1.6;}
.ua-help .ua-doc-a:before {content: "A: "; color: #2eacce; font-weight: 700;}

.ua-help .ua-alert {font-size: 14px; line-height: 1.6;}
.ua-help .ua-alert i {margin-right: 6px;}

.ua-help .ua-box[id^="ua-help-"] {scroll-margin-top: 20px;}

@media (max-width: 767px) {
  .ua-help .ua-doc-toc {font-size: 14px;}
  .ua-help p, .ua-help .ua-doc-steps, .ua-help .ua-doc-list {font-size: 14px;}
}

/* BALANCE PANEL */
.ua-balance-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #f0f8fb 0%, #e3f3f9 100%);
  border: 1px solid #cde6ee;
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 24px;
}
.ua-balance-info {flex: 1; min-width: 220px;}
.ua-balance-label {font-size: 13px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;}
.ua-balance-value {font-size: 38px; font-weight: 700; color: #2eacce; line-height: 1.1; margin-bottom: 6px;}
.ua-balance-hint {font-size: 12px; color: #7a8b95; line-height: 1.4;}
.ua-balance-actions {display: flex; gap: 10px; flex-wrap: wrap;}

@media (max-width: 767px) {
  .ua-balance-panel {flex-direction: column; align-items: stretch; padding: 18px;}
  .ua-balance-value {font-size: 30px;}
  .ua-balance-actions {flex-direction: column;}
  .ua-balance-actions .ua-btn {width: 100%; text-align: center;}
}

/* LOCATION AUTOCOMPLETE */
.ua-loc-autocomplete-row {position:relative;}
.ua-loc-autocomplete {position:relative; display:inline-block; min-width:320px; max-width:100%;}
.ua-loc-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #c7d6db;
  border-radius: 4px;
  font-size: 14px;
  background: #f8fbfc;
  outline: none;
}
.ua-loc-input:focus {background:#fff; border-color:#2eacce;}

.ua-loc-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #2eacce;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 100;
}
.ua-loc-suggestion {
  padding: 8px 12px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #f0f4f7;
}
.ua-loc-suggestion:last-child {border-bottom: none;}
.ua-loc-suggestion:hover {background:#f0f8fb; color:#2eacce;}

.ua-loc-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ua-loc-selected:empty {margin-top:0;}

.ua-loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #e8f4fb;
  color: #1e7894;
  border: 1px solid #cde6ee;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.ua-loc-chip-remove {
  background: transparent;
  border: none;
  color: #1e7894;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
}
.ua-loc-chip-remove:hover {color:#d9534f;}