/* =========================================================
   AmyHOSTING Template Refresh (safe for rootpanel)
   This file is loaded AFTER theme.green.css
   ========================================================= */

/* Brand tokens */
:root{
  --ah-brand1:#0DCBE5;
  --ah-brand2:#2cc185;
  --ah-ink: rgba(15,23,42,.92);
  --ah-muted: rgba(15,23,42,.64);
  --ah-border: rgba(15,23,42,.12);
  --ah-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --ah-shadow-hover: 0 14px 40px rgba(2, 6, 23, 0.12);
  --ah-radius: 12px;
}

/* -------------------------------
   Global buttons (rootpanel-safe)
   - no padding changes to avoid layout breaks
   ------------------------------- */
.btn{
  border-radius: var(--ah-radius);
  border-width: 1px;
  font-weight: 700;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2,6,23,.12);
}
.btn:focus,
.btn.focus{
  box-shadow: 0 0 0 3px rgba(44,193,133,.18);
}
.btn:disabled,
.btn.disabled{
  transform:none;
  box-shadow:none;
}

/* Make primary/success look like brand gradient */
.btn-primary,
.btn-success{
  background-image: linear-gradient(135deg, var(--ah-brand1), var(--ah-brand2));
  border-color: var(--ah-brand2);
}
.btn-primary:hover,
.btn-success:hover{
  background-image: linear-gradient(135deg, #0bb6ce, #25a270);
  border-color: #25a270;
}

/* Keep text readable on gradient buttons (theme may set white already) */
.btn-primary,
.btn-success{ color:#fff; }

/* Outline brand */
.btn-outline-primary,
.btn-outline-success{
  border-color: var(--ah-brand2);
  color: var(--ah-brand2);
}
.btn-outline-primary:hover,
.btn-outline-success:hover{
  background: var(--ah-brand2);
  border-color: var(--ah-brand2);
  color:#fff;
}

/* -------------------------------
   Cards & surfaces
   ------------------------------- */
.card{
  border-radius: 14px;
  border-color: var(--ah-border);
}
.card .card-body{ border-radius: 14px; }

/* -------------------------------
   Pricing tables improvements
   Works with existing markup (.pricing-table)
   ------------------------------- */
.pricing-tables{ margin-top: 10px; }
.pricing-table{
  border-radius: 18px;
  border: 1px solid var(--ah-border);
  box-shadow: var(--ah-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pricing-table:hover{
  transform: translateY(-2px);
  box-shadow: var(--ah-shadow-hover);
  border-color: rgba(44,193,133,.35);
}
.pricing-table-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ah-ink);
}
.pricing-table-price .value{
  font-weight: 900;
  letter-spacing: -0.6px;
}
.pricing-table-features{
  color: rgba(15,23,42,.78);
  line-height: 1.55;
}
.pricing-table .btn.btn-primary{
  border-radius: 12px;
  font-weight: 800;
}

/* Highlight promo tariffs that already use card-border-color-danger */
.pricing-table.card-border-color-danger{
  border-color: rgba(244,88,70,.55);
}

/* -------------------------------
   Page hero block (used on tarifs page)
   ------------------------------- */
.ah-page-hero{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(13,203,229,0.12), rgba(44,193,133,0.12));
  border: 1px solid var(--ah-border);
  box-shadow: var(--ah-shadow);
  padding: 18px;
  margin: 10px 0 18px 0;
}
.ah-page-hero:before{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:240px; height:240px;
  background: radial-gradient(circle, rgba(13,203,229,0.35), transparent 62%);
}
.ah-page-hero:after{
  content:"";
  position:absolute;
  left:-70px; bottom:-70px;
  width:280px; height:280px;
  background: radial-gradient(circle, rgba(44,193,133,0.30), transparent 62%);
}
.ah-page-hero .ah-hero-inner{ position: relative; z-index: 1; }
.ah-page-hero h3{
  margin: 0 0 6px 0;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--ah-ink);
}
.ah-page-hero p{
  margin: 0;
  color: var(--ah-muted);
}
.ah-grad{
  background: linear-gradient(-48deg, var(--ah-brand1) -30%, var(--ah-brand2) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* -------------------------------
   Small UX tweaks
   ------------------------------- */
a{ text-underline-offset: 2px; }

/* -------------------------------
   Forms (safe): inputs/selects
   ------------------------------- */
.form-control,
.custom-select,
select.form-control{
  border-radius: 12px;
  border-color: var(--ah-border);
  box-shadow: none;
}
.form-control:focus,
.custom-select:focus,
select.form-control:focus{
  border-color: rgba(44,193,133,.45);
  box-shadow: 0 0 0 3px rgba(44,193,133,.14);
}

/* Smaller controls keep shape */
.form-control-sm,
.custom-select-sm{
  border-radius: 10px;
}

/* -------------------------------
   Tables (safe): clearer headers & hover
   ------------------------------- */
.table{
  border-color: var(--ah-border);
}
.table thead th{
  border-bottom-color: rgba(15,23,42,.14);
  color: rgba(15,23,42,.80);
  font-weight: 800;
}
.table tbody tr:hover{
  background: rgba(13,203,229,.04);
}

/* -------------------------------
   Alerts (safe): softer corners
   ------------------------------- */
.alert{
  border-radius: 14px;
  border-color: var(--ah-border);
}

/* =========================================================
   Cabinet / rootpanel polish
   (affects logged-in UI: header, menu, cards, tables)
   ========================================================= */

/* Header surfaces */
.mai-top-header,
.mai-sub-header{
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.08);
}

/* User menu icons: slightly calmer */
.mai-top-header .mai-user-nav .nav-link{
  opacity: .95;
}

/* Dropdowns */
.dropdown-menu{
  border-radius: 14px;
  border-color: var(--ah-border);
  box-shadow: var(--ah-shadow);
}
.dropdown-item{
  font-weight: 700;
}

/* Card headers */
.card-header{
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.card-header-divider{
  font-weight: 900;
  letter-spacing: -0.15px;
  color: var(--ah-ink);
}

/* Main content spacing */
.mai-wrapper .main-content.container{
  padding-top: 16px;
}

/* Make "card-table" pages feel less cramped */
.card.card-table .card-body{
  padding-top: 14px;
}

/* Table readability */
.table-striped tbody tr:nth-of-type(odd){
  background-color: rgba(248, 250, 252, 0.65);
}
.table td,
.table th{
  vertical-align: middle;
}

/* Small clickable links that were styled as .btn-secondary (tables sorting) */
a.btn-secondary{
  color: rgba(15,23,42,.78);
  text-decoration: none;
  font-weight: 800;
}
a.btn-secondary:hover{
  color: rgba(15,23,42,.92);
  text-decoration: underline;
}

/* Badges / statuses */
.badge{
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
}

/* Input groups (search) */
.input-group .form-control{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.input-group-append .btn,
.input-group-prepend .btn{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Sidebar tabs: slightly more modern hover */
.mai-nav-tabs .nav-link{
  border-radius: 12px;
}
.mai-nav-tabs .nav-link:hover{
  background: rgba(13,203,229,.06);
}


/* Compact action toolbars (filters/search rows) */
.card.card-table .row.px-4{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* -------------------------------
   Modals (safe)
   ------------------------------- */
.modal-content{
  border-radius: 16px;
  border-color: var(--ah-border);
  box-shadow: var(--ah-shadow-hover);
}

/* Pagination (safe) */
.pagination .page-link{
  border-radius: 10px;
  border-color: var(--ah-border);
}
.pagination .page-item.active .page-link{
  background: linear-gradient(135deg, var(--ah-brand1), var(--ah-brand2));
  border-color: rgba(44,193,133,.55);
  color: #fff;
}

/* Empty states: nicer spacing when tables have no rows */
.card.card-table td[colspan],
.card.card-table .card-body > .text-center{
  color: var(--ah-muted);
}

/* -------------------------------
   Pricing: tighter spacing on mobile
   ------------------------------- */
@media (max-width: 768px){
  .pricing-tables > [class*='col-']{ margin-bottom: 14px; }
  .pricing-table{ padding: 16px; }
}