/* ==================================================================
   ORDER FORM "MODERN" — restyled to match the Nebulix client theme.
   Same class/id names throughout so no .tpl file needed to change.
   ================================================================== */

#order-modern{
  --op-primary:#93202c;
  --op-primary-dark:#741823;
  --op-primary-light:#f7e5e6;
  --op-primary-lighter:#fbf0f1;
  --op-primary-bg:var(--op-primary);
  --op-navy:#1f2129;
  --op-surface:#ffffff;
  --op-border:#e4e4ee;
  --op-text:#1f2129;
  --op-text-muted:#8a8ca3;
  --op-success:#1a9c5f;
  --op-success-bg:#e5f8ee;
  --op-success-border:#c3ecd6;
  --op-danger:#e5484d;
  --op-danger-bg:#fdecec;
  --op-danger-border:#f8c9ca;
  --op-warning-bg:#fff6e0;
  --op-info-bg:#f4f4f8;
  --op-radius-sm:8px;
  --op-radius-md:12px;
  --op-radius-lg:16px;
  --op-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  margin:0;
  padding:0;
  font-family:var(--op-font);
  font-size:13.5px;
  color:var(--op-text);
}

@media (prefers-color-scheme: dark){
  #order-modern{
    --op-primary:#c85a63;
    --op-primary-dark:#d97880;
    --op-primary-light:#3a2022;
    --op-primary-lighter:#2c1a1c;
    --op-primary-bg:var(--op-primary);
    --op-navy:#f0f1f5;
    --op-surface:#1e2128;
    --op-border:#2c2f38;
    --op-text:#e8e9ee;
    --op-text-muted:#9a9dab;
    --op-success:#4fce93;
    --op-success-bg:#173226;
    --op-success-border:#25503c;
    --op-danger:#f27a7e;
    --op-danger-bg:#3a1f20;
    --op-danger-border:#5a2c2e;
    --op-warning-bg:#332a13;
    --op-info-bg:#242730;
  }
  #order-modern{background:var(--op-surface);}
}

#order-modern *{box-sizing:border-box;}

#order-modern h1{
  margin:0 0 18px;
  padding:0 0 14px;
  text-align:center;
  font-size:24px;
  font-weight:700;
  color:var(--op-navy);
  border-bottom:1px solid var(--op-border);
}
#order-modern h2{
  margin:0 0 12px;
  padding:0 0 8px;
  font-size:16px;
  font-weight:600;
  color:var(--op-navy);
  border-bottom:1px solid var(--op-border);
}
#order-modern h3{
  margin:0 0 10px;
  padding:0;
  font-size:14px;
  font-weight:600;
  color:var(--op-navy);
}
#order-modern p{margin:0 0 10px;}
#order-modern a{color:var(--op-primary);text-decoration:none;}
#order-modern a:hover{color:var(--op-primary-dark);text-decoration:underline;}

#order-modern select{
  border:1px solid var(--op-border);
  border-radius:var(--op-radius-sm);
  padding:6px 8px;
  font-family:var(--op-font);
  font-size:13px;
  background:var(--op-surface);
  color:var(--op-text);
}
#order-modern input[type="text"],
#order-modern input[type="password"]{
  border:1px solid var(--op-border);
  border-radius:var(--op-radius-sm);
  padding:7px 10px;
  font-family:var(--op-font);
  font-size:13px;
  background:var(--op-surface);
  color:var(--op-text);
}
#order-modern input[type="text"]:focus,
#order-modern input[type="password"]:focus,
#order-modern select:focus{
  outline:none;
  border-color:var(--op-primary);
  box-shadow:0 0 0 3px var(--op-primary-light);
}
#order-modern input[type="checkbox"],
#order-modern input[type="radio"]{width:auto;margin-right:4px;}

#order-modern .clear{clear:both;}

#order-modern #configcontainer, #order-modern #configcontainer2{display:none;}

#order-modern .loading{
  display:none;width:220px;padding-top:10px;
  margin-left:auto;margin-right:auto;clear:both;text-align:center;
}

#order-modern .errorbox{
  display:none;margin:0 auto 16px;padding:12px 16px;
  background:var(--op-danger-bg);border:1px solid var(--op-danger-border);
  width:100%;font-weight:600;color:var(--op-danger);text-align:center;
  border-radius:var(--op-radius-md);
}
#order-modern .errorbox p{margin:0;padding:0;font-weight:600;text-align:left;}
#order-modern .errorbox li{font-weight:400;text-align:left;color:var(--op-danger);}

#order-modern .textleft{text-align:left;}
#order-modern .textcenter{text-align:center;}
#order-modern .textright{text-align:right;}
#order-modern .textgreen{color:var(--op-success);}
#order-modern .textred{color:var(--op-danger);}

#order-modern table tr td{padding:4px 6px;}

/* ------------------------------------------------------------
   Buttons — used everywhere via .ordernow / .button / .checkout /
   plain input[type=submit|button]
   ------------------------------------------------------------ */
#order-modern input[type="submit"],
#order-modern input[type="button"],
#order-modern button,
#order-modern .ordernow,
#order-modern .checkout{
  display:inline-block;
  background:var(--op-primary-bg);
  color:#fff;
  border:0;
  border-radius:var(--op-radius-sm);
  padding:10px 20px;
  font-family:var(--op-font);
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  transition:background .15s ease;
}
#order-modern input[type="submit"]:hover,
#order-modern input[type="button"]:hover,
#order-modern button:hover,
#order-modern .ordernow:hover,
#order-modern .checkout:hover{
  background:var(--op-primary-dark);
  color:#fff;
}
/* secondary / plain action buttons (continue shopping, view cart, empty cart) */
#order-modern .cartbuttons input[type="button"],
#order-modern .checkoutbuttons input[type="button"]:not(.checkout){
  background:var(--op-info-bg);
  color:var(--op-text);
}
#order-modern .cartbuttons input[type="button"]:hover,
#order-modern .checkoutbuttons input[type="button"]:not(.checkout):hover{
  background:var(--op-primary-light);
  color:var(--op-primary-dark);
}

/* ------------------------------------------------------------
   Product Categories
   ------------------------------------------------------------ */
#order-modern #categories{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  max-width:100%;
  margin:0 0 24px;
  padding:0;
  border-bottom:1px solid var(--op-border);
  text-align:left;
}
#order-modern #categories a,#order-modern #categories .hx-tab-active{
  display:inline-block;
  text-decoration:none;
  padding:10px 4px;
  margin:0 14px 0 0;
  border-bottom:2px solid transparent;
  font-weight:600;
  font-size:13px;
  color:var(--op-text-muted);
}
#order-modern #categories a:hover{color:var(--op-primary);text-decoration:none;}
#order-modern #categories .hx-tab-active{color:var(--op-primary);border-bottom-color:var(--op-primary);}

#order-modern #currencychooser{
  float:right;margin:10px 0;padding:6px 12px;
  background:var(--op-info-bg);border-radius:var(--op-radius-sm);
  font-size:12px;
}
#order-modern #currencychooser a{color:var(--op-text);padding-right:8px;}

/* ------------------------------------------------------------
   Product Listing
   ------------------------------------------------------------ */
#order-modern .products{float:left;margin:0;width:50%;}

#order-modern .product{
  margin:10px;padding:22px;
  background:var(--op-surface);
  border:1px solid var(--op-border);
  border-radius:var(--op-radius-lg);
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
}
#order-modern .product:hover{
  border-color:var(--op-primary);
  box-shadow:0 14px 30px rgba(0,0,0,.09);
  transform:translateY(-2px);
  cursor:pointer;
}
#order-modern .product .pricing{
  float:right;text-align:right;
  font-family:var(--op-font);
  font-size:12.5px;line-height:1.5;color:var(--op-text-muted);
}
#order-modern .product .pricing .pricing{font-weight:800;font-size:25px;color:var(--op-primary);display:block;}
#order-modern .product .name{
  font-family:var(--op-font);font-weight:700;font-size:17px;
  margin-bottom:16px;padding-top:4px;color:var(--op-navy);
}
#order-modern .product .qty{font-size:12px;font-weight:400;color:var(--op-text-muted);}
#order-modern .product .prodfeature{
  float:left;margin:0 8px 8px 0;padding:9px 14px;
  border:1px solid var(--op-border);background:var(--op-info-bg);
  text-align:center;border-radius:var(--op-radius-sm);
  font-size:16px;font-weight:700;color:var(--op-primary);
}
#order-modern .product .prodfeature .feature{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--op-text-muted);}
#order-modern .product .description{font-size:12.5px;color:var(--op-text-muted);margin:14px 4px 0;}
#order-modern .product .ordernowbox{margin:16px 0 0;text-align:right;}
#order-modern .product .ordernowbox .ordernow{display:inline-block;width:auto;padding:9px 20px;font-size:13px;}

/* ------------------------------------------------------------
   Domain Registration
   ------------------------------------------------------------ */
#order-modern .domainreg{
  margin:0 auto 16px;padding:16px;width:100%;
  background:var(--op-info-bg);border:1px dashed var(--op-border);
  border-radius:var(--op-radius-md);
}

#order-modern .domainoptions{
  margin:0 auto;padding:0;width:100%;
  background:var(--op-surface);border:1px solid var(--op-border);
  border-radius:var(--op-radius-md);font-size:13px;overflow:hidden;
}
#order-modern .domainoptions .option{padding:14px 16px;border-bottom:1px solid var(--op-border);}
#order-modern .domainoptions .option:last-child{border-bottom:0;}
#order-modern .domainoptions .optionselected{background:var(--op-primary-lighter);}

#order-modern .domainreginput{margin:0;padding:12px;font-size:13.5px;text-align:center;}
#order-modern .domainreginput input,
#order-modern .domainreginput select,
#order-modern .domainregperiod select{font-size:13px;padding:6px 8px;}

#greyout{
  display:none;position:absolute;top:0;left:0;width:100%;height:100%;
  background:rgba(31,33,41,.45);z-index:50000;
}
#domainpopupcontainer{display:none;position:absolute;top:0;left:0;width:100%;text-align:center;padding:150px 0 0;z-index:50001;}
#domainresults{
  width:550px;margin:0 auto;padding:24px;
  border:0;background:var(--op-surface);text-align:center;
  border-radius:var(--op-radius-lg);
  box-shadow:0 12px 36px rgba(31,33,41,.18);
}
#order-modern .domainbox{background:var(--op-surface);width:550px;padding:16px;}

#order-modern .domainavailable{color:var(--op-success);font-size:16px;font-weight:700;text-align:center;}
#order-modern .domainunavailable{color:var(--op-danger);font-size:16px;font-weight:700;text-align:center;}
#order-modern .domaininvalid{color:var(--op-danger);font-size:16px;font-weight:700;text-align:center;}
.hx-domain-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;margin:0 auto 14px;}
.hx-domain-icon-ok{background:var(--op-success-bg);color:var(--op-success);}
.hx-domain-icon-bad{background:var(--op-danger-bg);color:var(--op-danger);}
.hx-domain-retry{display:inline-block;margin-top:10px;padding:8px 18px;border-radius:var(--op-radius-sm);background:var(--op-info-bg);color:var(--op-text);font-size:12.5px;font-weight:600;}
.hx-domain-retry:hover{background:var(--op-primary-light);color:var(--op-primary-dark);text-decoration:none;}
#order-modern .domainregperiod{font-size:12.5px;text-align:center;}
#order-modern div.domainsuggestions{font-weight:700;padding:10px 0;color:var(--op-navy);}
#order-modern table.domainsuggestions{margin:0 auto;width:100%;border-radius:var(--op-radius-md);overflow:hidden;}
#order-modern table.domainsuggestions th{background:var(--op-navy);font-size:11px;font-weight:700;text-align:center;padding:8px;color:#fff;}
#order-modern table.domainsuggestions td{background:var(--op-surface);text-align:center;border-bottom:1px solid var(--op-border);font-size:12px;line-height:1.8;}
#order-modern table.domainsuggestions td select{font-size:11px;}

#order-modern #domainconfig{
  margin:0 auto;padding:16px;width:100%;
  border:1px solid var(--op-border);border-radius:var(--op-radius-md);
  background:var(--op-surface);
}

/* ------------------------------------------------------------
   Product Config
   ------------------------------------------------------------ */
#order-modern .hx-config-row{display:flex;gap:24px;align-items:stretch;}
#order-modern .prodconfigcol1{float:left;width:65%;}
#order-modern .hx-config-row .prodconfigcol1{float:none;width:auto;flex:1 1 65%;}
#order-modern .hx-config-row .prodconfigcol2{float:none;width:auto;flex:1 1 33%;}
#order-modern .hx-sticky-summary{position:sticky;top:20px;}
@media (max-width:800px){
  #order-modern .hx-config-row{flex-direction:column;}
  #order-modern .hx-sticky-summary{position:static;}
}
#order-modern .prodconfigcol2{float:right;width:33%;}

#order-modern .billingcycle,
#order-modern .serverconfig,
#order-modern .configoptions,
#order-modern .addons,
#order-modern .customfields{
  border:1px solid var(--op-border);
  padding:2px;
  margin-bottom:20px;
  border-radius:var(--op-radius-md);
  background:var(--op-surface);
  overflow:hidden;
}

/* ------------------------------------------------------------
   Config Tables
   ------------------------------------------------------------ */
#order-modern .configtable{border-collapse:separate;border-spacing:0;width:100%;}
#order-modern .configtable td{padding:9px 10px;}
#order-modern .configtable td.fieldlabel{width:190px;text-align:left;color:var(--op-text-muted);font-weight:600;font-size:12.5px;vertical-align:top;padding-top:12px;}
.hx-config-icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;margin-right:5px;opacity:.75;flex:none;float:left;margin-top:1px;}
.hx-config-label-text{display:block;overflow:hidden;}
#order-modern .configtable td.radiofield{width:34px;text-align:center;}
#order-modern .configtable td.fieldarea{
  background:var(--op-info-bg);
  border-bottom:1px solid var(--op-surface);
  padding:8px 10px;text-align:left;
}
#order-modern .configtable tr:last-child td.fieldarea{border-bottom:0;}

#order-modern .configoplabel{color:var(--op-primary-dark);font-weight:700;text-align:center;font-size:14px;}

/* ------------------------------------------------------------
   Order Summary
   ------------------------------------------------------------ */
#order-modern .ordersummary{
  border:1px solid var(--op-border);padding:14px;min-height:80px;margin-bottom:20px;
  border-radius:var(--op-radius-md);background:var(--op-surface);
}
#order-modern .ordersummarytbl{width:100%;}
#order-modern .ordersummarytbl td{font-size:12px;padding:3px 0;}
#order-modern .summaryproduct{padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--op-border);font-weight:600;color:var(--op-navy);}

#order-modern .checkoutbuttons{text-align:center;}
#order-modern .checkoutbuttons input{margin-bottom:8px;padding:9px 20px;font-size:13px;}

/* ------------------------------------------------------------
   Addons
   ------------------------------------------------------------ */
#order-modern .addoncontainer{
  margin:0 auto 16px;padding:16px;width:100%;
  background:var(--op-info-bg);border:1px dashed var(--op-border);
  border-radius:var(--op-radius-md);
}
#order-modern .addoncontainer .title{margin:0;padding:0;font-family:var(--op-font);font-size:15px;font-weight:700;color:var(--op-navy);}
#order-modern .addoncontainer .desc{margin:0;padding:10px 0;text-align:center;font-size:12px;color:var(--op-text-muted);}
#order-modern .addoncontainer .pricing{padding-bottom:10px;text-align:center;font-weight:700;color:var(--op-primary-dark);}
#order-modern .addoncontainer select{max-width:50%;}

/* ------------------------------------------------------------
   Domain Renewals
   ------------------------------------------------------------ */
#order-modern .regperiod{padding:6px;border:1px solid var(--op-border);border-radius:var(--op-radius-sm);}

#order-modern table.renewals{width:100%;border-radius:var(--op-radius-md);overflow:hidden;border-collapse:separate;border-spacing:0;}
#order-modern table.renewals th{background:var(--op-navy);font-size:11.5px;font-weight:700;text-align:center;padding:9px;color:#fff;}
#order-modern table.renewals td{background:var(--op-surface);text-align:center;border-bottom:1px solid var(--op-border);font-size:12.5px;line-height:1.8;}
#order-modern table.renewals tr.rowhighlight td{background:var(--op-info-bg);}
#order-modern table.renewals tr:hover td{background:var(--op-primary-lighter);}
#order-modern table.renewals th a,#order-modern table.renewals th a:visited{color:#fff;text-decoration:none;}
#order-modern table.renewals th a:hover{color:#fff;text-decoration:underline;}

/* ------------------------------------------------------------
   Shopping Cart
   ------------------------------------------------------------ */
#order-modern table.cart{width:100%;border-radius:var(--op-radius-md);overflow:hidden;border-collapse:separate;border-spacing:0;}
#order-modern table.cart th{background:var(--op-navy);font-size:11.5px;font-weight:700;text-align:center;padding:10px;color:#fff;}
#order-modern table.cart td{background:var(--op-surface);border-bottom:1px solid var(--op-border);font-size:12.5px;padding:10px;}
#order-modern table.cart tr.subtotal td{background:var(--op-info-bg);border-bottom:1px solid var(--op-border);font-size:12.5px;padding:8px 10px;}
#order-modern table.cart tr.subtotal:hover td{background:var(--op-info-bg);}
#order-modern table.cart tr.promotion td{background:var(--op-warning-bg);border-bottom:1px solid var(--op-border);font-size:12.5px;padding:8px 10px;}
#order-modern table.cart tr.promotion:hover td{background:var(--op-warning-bg);}
#order-modern table.cart tr.total td{
  background:var(--op-success-bg);color:var(--op-success);
  border-bottom:0;font-size:16px;font-weight:700;padding:12px 10px;
}
#order-modern table.cart tr.total:hover td{background:var(--op-success-bg);}
#order-modern table.cart tr.recurring td{background:var(--op-primary-lighter);border-bottom:2px solid var(--op-primary-light);font-size:12.5px;font-weight:500;padding:8px 10px;}
#order-modern table.cart tr.recurring:hover td{background:var(--op-primary-lighter);}
#order-modern table.cart tr:hover td{background:var(--op-primary-lighter);}
#order-modern table.cart th a,#order-modern table.cart th a:visited{color:#fff;text-decoration:none;}
#order-modern table.cart th a:hover{color:#fff;text-decoration:underline;}

#order-modern .cartedit{font-size:11.5px;color:var(--op-text-muted);}
#order-modern .cartremove{font-size:11.5px;color:var(--op-danger);}
#order-modern .cartbuttons{float:right;margin:0;padding:14px 0 0;width:auto;text-align:center;display:flex;gap:8px;}

#order-modern .checkoutcol1{float:left;width:49%;}
#order-modern .checkoutcol2{float:right;width:49%;}

#order-modern .signuptype{
  float:left;margin:0 5px 0 0;padding:8px 16px;
  border:1px solid var(--op-border);border-bottom:0;
  line-height:1.4;color:var(--op-text-muted);font-weight:500;font-size:13px;
  border-radius:var(--op-radius-sm) var(--op-radius-sm) 0 0;
  background:var(--op-info-bg);
}
#order-modern .signuptype:hover{cursor:pointer;}
#order-modern .signuptype.active{background:var(--op-surface);color:var(--op-navy);font-weight:700;border-color:var(--op-border);}

#order-modern .signupfields{
  border:1px solid var(--op-border);padding:2px;margin:0 0 20px;
  border-radius:var(--op-radius-md);background:var(--op-surface);overflow:hidden;
}
#order-modern .signupfields .configtable td.fieldlabel{width:100px;}
#order-modern .signupfields.padded{padding:18px;text-align:center;}
#order-modern .signupfields.hidden{display:none;}

#order-modern .carttaxwarning{margin:0 0 20px;color:var(--op-text-muted);text-align:center;font-size:12.5px;}

#order-modern .cartwarningbox{
  margin:20px 0;padding:12px;border:1px solid var(--op-warning-bg);
  background:var(--op-warning-bg);border-radius:var(--op-radius-md);
  text-align:center;color:var(--op-navy);font-size:12.5px;
}

#order-modern .cartbox{
  padding:14px;margin:14px 0;background:var(--op-info-bg);
  border-radius:var(--op-radius-md);text-align:center;
}