/* ===== Modern Order Page Styles ===== */
:root{
  --order-bg: #0e1525;
  --order-ink: #0b1220;
  --order-card: #ffffff;
  --order-muted: #6b7280;
  --order-accent: #0ea5e9; /* sky-500 */
  --order-accent-2: #22c55e; /* green-500 */
  --order-accent-3: #65C9F6; /* #8CD6F8 */
  --order-ring: rgba(14,165,233,0.25);
  --order-ring-2: rgba(14,165,233,0.18);
}

.order-modern{
  background: linear-gradient(180deg, rgba(14,21,37,0.9), rgba(14,21,37,0.97)), url('images/body_bg.png?ver=1.2');
  color: #111827;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.order-modern .container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.order-hero{
  padding: 3rem 0 1rem;
  text-align: center;

  /*background: linear-gradient(180deg, #055BB5 0%, #044a94 100%);*/
  color: #ffffff;
    background:
	url("../images/decentheader.jpg") center/cover no-repeat,
    radial-gradient(860px 860px at 50% 85%, rgba(255,255,255,0.15), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #055BB5 0%, #044a94 100%) !important;
  background-repeat: no-repeat;
}



.order-hero h1{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1.2;
  margin: 0 0 .5rem 0;
  color: #ffffff;
}

.order-hero .accent{ color: #ffffff; }
.order-hero .subtitle{
  max-width: 860px;
  margin: 0 auto;
  opacity: 1;
  font-size: 1.05rem;
  color: #eef4ff;
}

.products{
  background: #f8fafc;
}

.products-grid{
  display: grid;
  grid-template-columns: 1fr; /* stacked layout */
  gap: 1.5rem;
}

.product-card{
  background: var(--order-card);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  border: 1px solid #e5e7eb;
  padding: 1.25rem;
}

.product-header{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.product-header h2{
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  margin: 0 0 .25rem 0;
}

.product-tagline{
  color: var(--order-muted);
  margin: 0;
}

.license-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px){
  .license-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.license-card{
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  padding: 1rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.license-card.highlight{
  border-color: var(--order-accent);
  box-shadow: 0 0 0 4px var(--order-ring);
}

.license-card:hover {
  border: 2px solid #e5e7eb;
  border-color: var(--order-accent-3);
  box-shadow: 0 0 0 4px var(--order-ring-2);
}

.license-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}

.license-head h3{
  font-size: 1.125rem;
  margin: 0;
}

.badge{
  font-size: .75rem;
  line-height: 1;
  padding: .35rem .5rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #0c4a6e;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
}

.feature-list{
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.feature-list li{
  padding-left: 1.25rem;
  position: relative;
  margin: .35rem 0;
}

.feature-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

.feature-list .muted{
  color: var(--order-muted);
}

.price{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin: .25rem 0 .75rem 0;
}

.price .unit{
  font-weight: 600;
  font-size: .9rem;
  opacity: .8;
  margin-left: .2rem;
}

.buy-button{
  display: inline-block;
  text-align: center;
  padding: .75rem 1rem;
  border-radius: 10px;
  border: 1px solid #0ea5e9;
  text-decoration: none !important;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
  color: #075985 !important;
  background: #e0f2fe;
}

.buy-button:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(2,6,23,.08); }
.buy-button:active{ transform: translateY(0); }

.buy-button.primary{
  background: #dcfce7;
  border-color: #22c55e;
  color: #14532d !important;
}

.comparison{
  background: #ffffff;
  padding: 2rem 0 3rem;
}

.comparison h2{
  text-align: center;
  font-family: 'Poppins', sans-serif;
  margin: 0 0 1rem;
}

.comparison-wrap{
  overflow-x: auto;
}

.comparison-table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.comparison-table th,
.comparison-table td{
  padding: .85rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.comparison-table thead th{
  background: #f1f5f9;
  text-align: left;
  font-weight: 700;
}

.comparison-table tbody tr:nth-child(even) td{
  background: #fafafa;
}

.legal-note{
  text-align: center;
  color: #6b7280;
  margin-top: 1rem;
}
/* ===== /Modern Order Page Styles ===== */


/* ===== Theme Overrides (blue hero + button alignment) ===== */
/* Main accent updated to #055BB5 */
:root{
  --order-accent: #055BB5;
  --order-ring: rgba(5, 91, 181, 0.25);
}


/* License cards: ensure equal visual alignment of action buttons */
.license-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.license-card .buy-button{
  margin-top: auto; /* push button to bottom to align across columns */
}

/* Optional: keep highlight border using the new accent */
.license-card.highlight{
  border-color: var(--order-accent) !important;
  box-shadow: 0 0 0 4px var(--order-ring) !important;
}
/* ===== /Theme Overrides ===== */


/* ===== Mixed Color Theme (sky + deep blue) & font adjustments ===== */
:root{
  --brand-blue: #055BB5;   /* new main */
  --brand-sky:  #0EA5E9;   /* previous accent */
  --hero-fg:    #FFFFFF;
  --hero-fg-sub:#EAF3FF;
}

/* Hero background mixes both colors; foreground adapted for contrast */


/* Ensure buy buttons align horizontally across license cards */
.license-grid{ align-items: stretch; }
.license-card{ display: flex; flex-direction: column; height: 100%; }
.license-card .buy-button{ margin-top: auto; }
/* ===== /Mixed Color Theme ===== */


/* ===== Layout Fixes: equal card heights + contained shadows ===== */
.product-card{
  overflow: hidden;            /* prevent child shadows from escaping */
}

.license-grid{
  align-items: stretch;        /* equalize heights across columns */
}

.license-card{
  height: auto !important;     /* cancel previous 100% height */
  display: flex;
  flex-direction: column;
}

.license-card .buy-button{
  margin-top: auto;            /* anchor action to bottom for alignment */
}
/* ===== /Layout Fixes ===== */


/* ===== Alignment Fixes: ensure consistent price spacing across cards ===== */
.license-card{
  display: flex;
  flex-direction: column;
}
.license-card .feature-list{
  flex: 1 1 auto; /* grow to fill available space */
}
/* Anchor the price just above the button for consistent spacing */
.license-card .price{
  margin-top: auto !important;   /* push price to the bottom area */
  margin-bottom: .5rem !important;
}
/* Keep button right below the price, not auto-pushed */
.license-card .buy-button{
  margin-top: .25rem !important;
}

/* ===== FAQ Section ===== */
.faq{
  background: #ffffff;
  padding: 2rem 0 3rem;
}
.faq h2{
  text-align: center;
  font-family: 'Poppins', sans-serif;
  margin: 0 0 1rem;
}
.faq details{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: .75rem 0;
}
.faq summary{
  cursor: pointer;
  font-weight: 700;
}
.faq p{
  margin: .5rem 0 0;
  color: #374151;
}



/* --- Section wrappers / dividers --- */
.section{ position:relative; padding:3rem 0; }
.section--alt{ background:#f8fafc; } /* optional alternate bg */

/* Soft hairline between stacked sections */
.section + .section::before{
  content:""; position:absolute; left:0; right:0; top:0; height:16px;
  background: linear-gradient(180deg, rgba(2,6,23,.08), rgba(2,6,23,0));
  pointer-events:none;
}

/* Optional: subtle bottom fade to add depth */
.section::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(2,6,23,.08), transparent);
}

/* Section titles with keyline */
.section-title{
  font-family:'Poppins', sans-serif;
  display:flex; align-items:center; gap:.5rem;
  margin:0 0 1rem; padding:0 0 .5rem;
  border-bottom:1px solid #e5e7eb;
}