/* =====================================================
   Isle Host / islestay.app inspired theme for WHMCS
   Target: Six (default) WHMCS theme
   ===================================================== */

/* --- Google Fonts: Poppins --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =====================================================
   1. GLOBAL / TYPOGRAPHY
   ===================================================== */
body {
  background-color: #ff0000 !important;
}
body,
input, textarea, select, button {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: #333333;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  color: #39636a;
}

a {
  color: #39636a;
}
a:hover, a:focus {
  color: #f77a66;
  text-decoration: none;
}

/* =====================================================
   2. NAVIGATION / HEADER
   ===================================================== */
.navbar-main,
nav.navbar {
  background-color: #39636a !important;
  border-bottom: 3px solid #1dddbf;
  box-shadow: 0 2px 12px rgba(57, 99, 106, 0.18);
}

.navbar-main .navbar-brand,
nav.navbar .navbar-brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #ffffff !important;
  font-size: 1.4rem;
  letter-spacing: -0.5px;
}

.navbar-main .nav-link,
nav.navbar .nav-link,
.navbar-main a,
nav.navbar a:not(.btn) {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500;
  font-size: 0.92rem;
  transition: color 0.2s;
}

.navbar-main .nav-link:hover,
nav.navbar .nav-link:hover {
  color: #1dddbf !important;
}

.navbar-main .nav-item.active > .nav-link,
nav.navbar .nav-item.active > .nav-link {
  color: #1dddbf !important;
  border-bottom: 2px solid #1dddbf;
}

/* Cart / icon links */
.navbar-main .cart-link,
.navbar-main .btn-navbar {
  color: #1dddbf !important;
}

/* =====================================================
   3. HERO / BANNER AREA
   ===================================================== */
.hero-area,
#hero,
.homepage-hero,
section.hero {
  background: linear-gradient(135deg, #39636a 0%, #2a4f55 50%, #1a3a3f 100%);
  color: #ffffff;
  padding: 80px 0 70px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-area::before,
#hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(29, 221, 191, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-area h1,
#hero h1,
.hero-area .hero-title {
  color: #ffffff !important;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.hero-area p,
#hero p,
.hero-area .hero-subtitle {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

/* =====================================================
   4. BUTTONS
   ===================================================== */
.btn-primary,
.btn-success,
input[type="submit"],
button[type="submit"] {
  background-color: #f77a66 !important;
  border-color: #f77a66 !important;
  color: #ffffff !important;
  border-radius: 100px !important;
  padding: 10px 28px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.3px;
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(247, 122, 102, 0.3);
}

.btn-primary:hover,
.btn-success:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #e8614d !important;
  border-color: #e8614d !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(247, 122, 102, 0.4);
}

.btn-secondary,
.btn-default {
  background-color: transparent !important;
  border: 2px solid #39636a !important;
  color: #39636a !important;
  border-radius: 100px !important;
  padding: 8px 24px !important;
  font-weight: 600 !important;
  transition: all 0.2s;
}

.btn-secondary:hover,
.btn-default:hover {
  background-color: #39636a !important;
  color: #ffffff !important;
}

.btn-danger {
  border-radius: 100px !important;
}

/* =====================================================
   5. PANELS / CARDS
   ===================================================== */
.panel,
.card,
.module {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(57, 99, 106, 0.08) !important;
  transition: box-shadow 0.2s, transform 0.2s;
}

.panel:hover,
.card:hover {
  box-shadow: 0 6px 24px rgba(57, 99, 106, 0.14) !important;
}

.panel-heading,
.card-header {
  background-color: #39636a !important;
  color: #ffffff !important;
  border-radius: 12px 12px 0 0 !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  border-bottom: none !important;
  padding: 14px 20px !important;
}

.panel-heading h3,
.panel-heading .panel-title,
.card-header h3,
.card-header h4 {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1rem;
}

.panel-body,
.card-body {
  padding: 20px !important;
}

/* =====================================================
   6. FORMS & INPUTS
   ===================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
  border: 1.5px solid #d0dfe1 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.9rem !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: #39636a !important;
  box-shadow: 0 0 0 3px rgba(57, 99, 106, 0.12) !important;
  outline: none !important;
}

label {
  font-weight: 600;
  font-size: 0.88rem;
  color: #39636a;
  margin-bottom: 4px;
}

/* =====================================================
   7. TABLES
   ===================================================== */
.table > thead > tr > th {
  background-color: #39636a;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none !important;
  padding: 12px 16px !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f4f8f9;
}

.table > tbody > tr > td {
  border-color: #e4eced !important;
  padding: 12px 16px !important;
  font-size: 0.9rem;
  vertical-align: middle;
}

/* =====================================================
   8. SIDEBAR / NAVIGATION PILLS
   ===================================================== */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: #39636a !important;
  border-radius: 8px !important;
}

.nav-pills > li > a {
  border-radius: 8px !important;
  color: #39636a;
  font-weight: 500;
  transition: background-color 0.15s;
}

.nav-pills > li > a:hover {
  background-color: #e8f2f3;
  color: #39636a;
}

/* =====================================================
   9. ALERTS & BADGES
   ===================================================== */
.alert-success {
  background-color: #e6faf7 !important;
  border-color: #1dddbf !important;
  color: #1a6b5e !important;
  border-radius: 10px !important;
}

.alert-info {
  background-color: #e8f2f3 !important;
  border-color: #39636a !important;
  color: #39636a !important;
  border-radius: 10px !important;
}

.alert-warning {
  border-radius: 10px !important;
}

.alert-danger {
  border-radius: 10px !important;
}

.badge,
.label {
  border-radius: 100px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}

.badge-success,
.label-success {
  background-color: #1dddbf !important;
  color: #1a3a3f !important;
}

.badge-primary,
.label-primary {
  background-color: #39636a !important;
}

.badge-danger,
.label-danger {
  background-color: #f77a66 !important;
}

/* =====================================================
   10. FOOTER
   ===================================================== */
footer,
#footer {
  background-color: #1a3a3f !important;
  color: rgba(255, 255, 255, 0.75);
  padding: 30px 0;
  font-size: 0.85rem;
  border-top: 3px solid #1dddbf;
}

footer a,
#footer a {
  color: #1dddbf !important;
}

footer a:hover,
#footer a:hover {
  color: #f77a66 !important;
}

/* =====================================================
   11. BREADCRUMBS
   ===================================================== */
.breadcrumb {
  background-color: #f4f8f9 !important;
  border-radius: 8px !important;
  font-size: 0.85rem;
  padding: 8px 16px !important;
}

.breadcrumb > li + li::before,
.breadcrumb-item + .breadcrumb-item::before {
  color: #1dddbf !important;
}

.breadcrumb > .active,
.breadcrumb-item.active {
  color: #39636a !important;
  font-weight: 600;
}

/* =====================================================
   12. PRODUCT / SERVICE CARDS (Order pages)
   ===================================================== */
.product-box,
.package,
.pricing-box {
  border-radius: 16px !important;
  border: 2px solid #e4eced !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.product-box:hover,
.package:hover,
.pricing-box:hover {
  border-color: #39636a !important;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(57, 99, 106, 0.15) !important;
}

.product-box .product-name,
.package-name,
.pricing-name {
  font-family: 'Poppins', sans-serif !important;
  color: #39636a !important;
  font-weight: 700 !important;
}

.product-box .price,
.package-price {
  color: #f77a66 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}

/* =====================================================
   13. INVOICE / BILLING STATUS
   ===================================================== */
.status-active,
.badge-active {
  background-color: #1dddbf !important;
  color: #1a3a3f !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
  font-weight: 600;
}

.status-suspended,
.badge-suspended {
  background-color: #f77a66 !important;
  color: #fff !important;
}

/* =====================================================
   14. PAGE WRAPPER / BODY BACKGROUND
   ===================================================== */
body {
  background-color: #f7fafa !important;
}

.wrapper,
#wrapper,
.main-content,
.container-main {
  background-color: #f7fafa;
}

/* Top accent bar (thin teal line at very top of page) */
body::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #39636a 0%, #1dddbf 50%, #f77a66 100%);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

/* =====================================================
   15. MISC POLISH
   ===================================================== */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Rounded pagination */
.pagination > li > a,
.pagination > li > span {
  border-radius: 8px !important;
  margin: 0 2px;
  color: #39636a;
  border-color: #d0dfe1;
}

.pagination > .active > a,
.pagination > .active > a:hover {
  background-color: #39636a !important;
  border-color: #39636a !important;
}

/* Progress bars */
.progress-bar {
  background-color: #1dddbf !important;
}

/* Domain search input group */
.input-group-addon {
  background-color: #39636a !important;
  color: #ffffff !important;
  border-color: #39636a !important;
}

/* Login / register page centering */
.login-container,
.register-container {
  max-width: 460px;
  margin: 40px auto;
}

/* Teal horizontal rules */
hr {
  border-color: #e4eced;
}