/* ==========================================================================
   r2d2hosting.com – shared hosting
   Fixed 940px, dark steel masthead with the nav inside it, left sidebar.
   Tahoma/Arial, system fonts only, no libraries, no animation.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font: 13px/1.5 Tahoma, "Segoe UI", Geneva, "DejaVu Sans", sans-serif;
    color: #2f3438;
    background: #d8dce0;
}
img { border: 0; vertical-align: middle; max-width: 100%; }
a { color: #1f6ea8; }
a:hover { color: #0f4d78; }
h1 { font: bold 21px/1.25 Arial, Helvetica, sans-serif; color: #223140; margin: 0 0 10px; }
h2 { font: bold 16px/1.3 Arial, Helvetica, sans-serif; color: #223140; margin: 20px 0 8px; border-bottom: 2px solid #2e86c8; padding-bottom: 3px; }
h3 { font: bold 12px/1.4 Tahoma, sans-serif; color: #445; text-transform: uppercase; letter-spacing: .6px; margin: 14px 0 5px; }
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px; padding-left: 20px; }
ul { list-style: square; }
li { margin-bottom: 3px; }
hr { border: 0; border-top: 1px solid #dcdcdc; margin: 16px 0; }
small, .note { font-size: 11px; color: #78808a; }
.note a { color: #78808a; }
code, .mono { font-family: "Courier New", Courier, monospace; font-size: 12px; }

/* ---------- Page shell ---------- */
#page { width: 940px; margin: 0 auto 22px; background: #fff; border: 1px solid #b6bcc2; border-top: 0; }

/* ---------- Masthead (logo + nav in one dark bar) ---------- */
.mast { background: #223140; border-bottom: 3px solid #2e86c8; }
.mast__in { width: 940px; margin: 0 auto; padding: 12px 18px 0; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo .wm { font: bold 23px/1 Arial, Helvetica, sans-serif; color: #fff; letter-spacing: -.3px; }
.logo .wm b { color: #4ea8e8; font-weight: bold; }
.logo .tag { display: block; font-size: 11px; color: #8fa2b3; margin-top: 3px; }
.mast__util { margin-left: auto; text-align: right; padding-bottom: 2px; }
.mast__util a { color: #b9c8d5; font-size: 11px; text-decoration: none; }
.mast__util a:hover { color: #fff; text-decoration: underline; }
.mast__util .sep { color: #4a5c6d; font-size: 11px; }
.switch { display: inline-flex; border: 1px solid #3d5061; margin-left: 6px; }
.switch button, .switch a {
    border: 0; background: #2c3f52; color: #a8bccd; cursor: pointer;
    font: bold 11px Tahoma, sans-serif; padding: 2px 7px; text-decoration: none;
}
.switch button + button, .switch a + a { border-left: 1px solid #3d5061; }
.switch button.on, .switch a.on { background: #2e86c8; color: #fff; }

/* ---------- Nav tabs, sitting inside the masthead ---------- */
.tabs { width: 940px; margin: 0 auto; display: flex; flex-wrap: wrap; padding: 10px 18px 0; gap: 2px; }
.tabs a {
    color: #cddbe6; text-decoration: none; font-size: 12px; padding: 7px 15px;
    background: #2c3f52; border: 1px solid #3d5061; border-bottom: 0;
    text-transform: uppercase; letter-spacing: .8px;
}
.tabs a:hover { background: #375068; color: #fff; }
.tabs a.on { background: #fff; color: #223140; font-weight: bold; border-color: #b6bcc2; }
.tabs .cta {
    margin-left: auto; background: #2e86c8; border-color: #1f6ea8; color: #fff; font-weight: bold;
}
.tabs .cta:hover { background: #3e97da; }

/* ---------- Body: left sidebar + content ---------- */
.main { display: flex; align-items: flex-start; gap: 18px; padding: 16px 18px 22px; }
.content { flex: 1 1 auto; min-width: 0; order: 2; }
.side { flex: none; width: 205px; order: 1; }
.main.nosidebar .content { order: 1; width: 100%; }
.crumb { font-size: 11px; color: #98a0a8; margin-bottom: 7px; }
.crumb a { color: #78808a; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.lead { font-size: 13px; }

/* ---------- Sidebar boxes ---------- */
.sbox { border: 1px solid #cfd5da; border-left: 3px solid #2e86c8; background: #f6f8fa; margin-bottom: 12px; }
.sbox h3 {
    background: #e7ecf1; border-bottom: 1px solid #cfd5da; color: #33414e;
    font: bold 11px/1 Tahoma, sans-serif; text-transform: uppercase; letter-spacing: .6px;
    padding: 7px 9px; margin: 0;
}
.sbox .in { padding: 9px; font-size: 12px; }
.sbox p { margin-bottom: 7px; }
.sbox ul { padding-left: 16px; margin-bottom: 0; }
.sbox li { font-size: 12px; }
.status { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.status .dot { width: 9px; height: 9px; background: #35a03a; border: 1px solid #24762a; border-radius: 50%; flex: none; }

/* Price list in the sidebar */
.plist { width: 100%; border-collapse: collapse; margin-bottom: 7px; }
.plist td { border-bottom: 1px solid #e2e7eb; padding: 5px 2px; font-size: 12px; }
.plist tr:last-child td { border-bottom: 0; }
.plist td.p { text-align: right; font-weight: bold; white-space: nowrap; color: #1f6ea8; }

/* ---------- Intro strip ---------- */
.intro { display: flex; gap: 16px; align-items: stretch; }
.intro__txt { flex: 1 1 auto; min-width: 0; }
.quote {
    flex: none; width: 200px; border: 1px solid #cfd5da; background: #f6f8fa;
    border-top: 3px solid #2e86c8; padding: 12px; text-align: center;
}
.quote .lbl { font-size: 11px; color: #78808a; text-transform: uppercase; letter-spacing: .6px; }
.quote .amt { font: bold 26px/1.1 Arial, Helvetica, sans-serif; color: #223140; margin: 5px 0 2px; }
.quote .sub { font-size: 11px; color: #78808a; margin-bottom: 10px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block; cursor: pointer; text-decoration: none;
    font: bold 12px/1 Arial, Helvetica, sans-serif; padding: 7px 14px;
    background: linear-gradient(#4098d8, #2e86c8); border: 1px solid #1f6ea8;
    border-radius: 3px; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(0,0,0,.12);
}
.btn:hover { background: linear-gradient(#4ea6e6, #3690d4); color: #fff; }
.btn:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.btn--dark { background: linear-gradient(#3a4f63, #2a3d4f); border-color: #1b2938; }
.btn--dark:hover { background: linear-gradient(#455c73, #33495d); }
.btn--gray { background: linear-gradient(#fcfcfc, #eaedf0); border-color: #bfc5cb; color: #3a4550; text-shadow: 0 1px 0 #fff; }
.btn--gray:hover { background: linear-gradient(#fff, #f2f4f6); color: #1f6ea8; }
.btn--sm { padding: 4px 9px; font-size: 11px; }
.btn--lg { padding: 9px 20px; font-size: 13px; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---------- Form controls ---------- */
.input, .select, .textarea {
    border: 1px solid #a9b1b9; background: #fff; padding: 4px 6px;
    font: 12px Tahoma, Geneva, sans-serif; color: #2f3438; border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1); width: 100%;
}
.textarea { resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: #2e86c8; outline: 0; }
.field { margin-bottom: 9px; }
.field label { display: block; font-size: 11px; color: #5a636c; margin-bottom: 3px; }
.req { color: #c0392b; }
.form-grid { display: flex; gap: 10px; }
.form-grid .field { flex: 1 1 0; min-width: 0; }
.form-msg { font-size: 12px; margin: 8px 0; }
.form-msg.ok  { border: 1px solid #b4d8b6; background: #eef7ee; color: #2a662a; padding: 7px 9px; }
.form-msg.err { border: 1px solid #dfb5b0; background: #fbefed; color: #963226; padding: 7px 9px; }

/* ---------- Tables ---------- */
table.tbl { border-collapse: collapse; width: 100%; margin-bottom: 10px; }
table.tbl th, table.tbl td { border: 1px solid #cfd5da; padding: 6px 8px; font-size: 12px; text-align: left; vertical-align: top; }
table.tbl th { background: #e7ecf1; font-weight: bold; color: #33414e; white-space: nowrap; }
table.tbl tbody tr:nth-child(even) td { background: #f8fafb; }
table.tbl td.num { text-align: right; white-space: nowrap; }
table.tbl td.act { text-align: right; white-space: nowrap; width: 1%; }
table.tbl tr.pick td { background: #e8f2fa; border-color: #b9d6ec; }
table.tbl tr.pick td:first-child { border-left: 3px solid #2e86c8; }
table.tbl tr.grp th { background: #223140; color: #fff; text-transform: uppercase; font-size: 11px; letter-spacing: .7px; }
.price-big { font: bold 15px Arial, Helvetica, sans-serif; color: #223140; }
.tag { display: inline-block; background: #2e86c8; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; padding: 1px 5px; border-radius: 2px; }
.yes { color: #35a03a; font-weight: bold; }

/* ---------- Columns ---------- */
.cols { display: flex; gap: 16px; }
.cols > div { flex: 1 1 0; min-width: 0; }
.cols--num > div { border-top: 1px solid #cfd5da; padding-top: 8px; }
.cols2 { display: flex; gap: 18px; }
.cols2 > div { flex: 1 1 0; min-width: 0; }

/* ---------- Changelog / notices ---------- */
.log { border-top: 1px solid #dcdcdc; }
.log__i { border-bottom: 1px solid #dcdcdc; padding: 8px 0; display: flex; gap: 12px; }
.log__d { flex: none; width: 92px; font-family: "Courier New", Courier, monospace; font-size: 12px; color: #78808a; }
.log__t { flex: 1 1 auto; min-width: 0; font-size: 12px; }
.log__t b { display: block; color: #223140; }

/* ---------- Boxes ---------- */
.box { border: 1px solid #cfd5da; background: #fbfcfd; padding: 12px 14px; margin-bottom: 12px; }
.box h3 { margin-top: 0; }
.hl { border: 1px solid #b9d6ec; border-left: 3px solid #2e86c8; background: #e8f2fa; padding: 10px 12px; margin: 12px 0; font-size: 12px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid #dcdcdc; }
.faq-i { border-bottom: 1px solid #dcdcdc; }
.faq-q { cursor: pointer; padding: 8px 4px 8px 18px; font-weight: bold; font-size: 12px; color: #1f6ea8; position: relative; }
.faq-q:before { content: "+"; position: absolute; left: 4px; color: #2e86c8; font-weight: bold; }
.faq-i.open .faq-q:before { content: "\2013"; }
.faq-a { display: none; padding: 0 4px 10px 18px; font-size: 12px; }
.faq-i.open .faq-a { display: block; }

/* ---------- Order modal ---------- */
.modal { display: none; position: fixed; inset: 0; background: rgba(20,28,36,.55); z-index: 50; overflow: auto; padding: 20px 10px; }
.modal.open { display: block; }
.modal__box { width: 620px; max-width: 100%; margin: 0 auto; background: #fff; border: 1px solid #1b2938; box-shadow: 0 3px 14px rgba(0,0,0,.4); }
.modal__hd { background: #223140; color: #fff; padding: 9px 12px; display: flex; align-items: center; border-bottom: 3px solid #2e86c8; }
.modal__hd h3 { color: #fff; margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; }
.modal__close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.modal__bd { padding: 14px; }
.sum { border: 1px solid #b9d6ec; border-left: 3px solid #2e86c8; background: #e8f2fa; padding: 9px 11px; margin-bottom: 12px; font-size: 12px; }
.sum .big { font: bold 17px Arial, Helvetica, sans-serif; color: #223140; }

/* ---------- Footer ---------- */
.foot { background: #223140; color: #93a3b1; padding: 16px 18px; font-size: 11px; }
.foot a { color: #c3d1dc; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot h4 { color: #fff; font: bold 11px Tahoma, sans-serif; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.foot__cols { display: flex; gap: 22px; }
.foot__cols > div { flex: 1 1 0; min-width: 0; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 3px; }
.foot__bar { border-top: 1px solid #35485b; margin-top: 14px; padding-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.foot__bar .right { margin-left: auto; }

/* ---------- Mobile ---------- */
@media (max-width: 970px) {
    #page { width: auto; border-left: 0; border-right: 0; }
    .main { flex-direction: column; padding: 14px; }
    .content, .side { order: 0; width: 100%; }
    .mast__in, .tabs { width: auto; }
    .mast__in, .tabs, .foot { padding-left: 14px; padding-right: 14px; }
    .mast__util { margin-left: 0; text-align: left; width: 100%; padding: 8px 0 0; }
    .tabs .cta { margin-left: 0; }
    .intro, .cols, .cols2, .form-grid, .foot__cols { flex-direction: column; gap: 12px; }
    .quote { width: 100%; }
    table.tbl { display: block; overflow-x: auto; }
}