/*
 * Bond IT — Reseller Portal CSS
 * Matches bondit.com.au visual identity.
 * All colour values are hardcoded (no CSS custom properties — portal limitation).
 *
 * Brand palette:
 *   Orange button/accent : #ff9900
 *   Orange dark (text)   : #C45E00
 *   Orange mid           : #ffcc80
 *   Orange light         : #ffebcc
 *   Page bg              : #F5F5F5
 *   Text primary         : #1A1A1A
 *   Text secondary       : #3D3D3D
 *   Text muted           : #717171
 */

/* ============================================================
   RESET
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #F5F5F5;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #3D3D3D;
}

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

a { color: #C45E00; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-decoration: none; }

a:hover { text-decoration: underline; color: #9E4E00; }

strong { font-weight: bold; }

i, em { font-style: italic; }

img { margin: 0; border: 0; }

ul { margin: 0; padding: 0; list-style: none; }

p, ul, ol, td, th, div {
    color: #3D3D3D;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.55;
    margin: 0;
    padding: 0;
    border: none;
}

.contentFull p,
.contentFull ul,
.contentFull ol,
.contentFull td,
.contentFull th,
.contentFull div {
    color: #3D3D3D;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.55;
}

td, th, tr { vertical-align: top; text-align: left; }

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
.cf > iframe { position: absolute; }

input, select, textarea {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    border: 1px solid #E0E0E0;
    outline: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    background: #fff;
    color: #1A1A1A;
    transition: border-color 0.15s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: #C45E00;
}

input[type="checkbox"],
input[type="radio"] { vertical-align: middle; }

/* ============================================================
   LAYOUT WRAPPER
   ============================================================ */

#all {
    width: 1000px;
    margin: 0 auto;
    text-align: left;
    z-index: 1;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* ============================================================
   HEADER — matches Bond IT .site-nav
   ============================================================ */

.header {
    background: #ffffff;
    border-bottom: 3px solid #ff9900;
    padding: 0 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    height: 56px;
}

.resellerHeaderTitle {
    font-family: 'Segoe UI Semibold', 'Segoe UI', Tahoma, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1A1A1A !important;
    text-decoration: none !important;
    letter-spacing: -0.01em;
}

.resellerHeaderTitle:hover {
    color: #C45E00 !important;
    text-decoration: none !important;
}

/* ============================================================
   FOOTER — matches Bond IT .site-footer
   ============================================================ */

.footer {
    background: #111111;
    color: #888888;
    text-align: center;
    padding: 20px 24px;
    font-size: 0.85rem;
    border-top: 3px solid #ff9900;
    margin-top: 40px;
}

.footer,
.footer p,
.footer div {
    color: #888888;
}

.footer a {
    color: #ff9900;
    text-decoration: none;
}

.footer a:hover {
    color: #ffcc80;
    text-decoration: underline;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, .heading h1 {
    color: #111111;
    font-family: 'Segoe UI Semibold', 'Segoe UI', Tahoma, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 10px;
    line-height: 1.25;
}

h1.regDomain { color: #C45E00; }

h2 {
    color: #C45E00;
    font-size: 1.35rem;
    line-height: 1.3;
    margin-bottom: 16px;
    font-weight: 700;
    font-family: 'Segoe UI Semibold', 'Segoe UI', Tahoma, sans-serif;
}

h2.grey { color: #484848; }

h3 {
    color: #C45E00;
    font-family: 'Segoe UI Semibold', 'Segoe UI', Tahoma, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

h4 {
    margin-bottom: 10px;
    font-family: 'Segoe UI Semibold', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 700;
    font-size: 0.97rem;
    line-height: 1.4;
    color: #1A1A1A;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn, input[type="submit"], button {
    display: inline-block;
    padding: 10px 22px;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
    background: #ff9900;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255,153,0,0.3);
}

.btn:hover,
input[type="submit"]:hover,
button:hover {
    background: #e67e00;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255,153,0,0.42);
    transform: translateY(-1px);
}

.btn.secondary,
.btn.alt,
a.btn.secondary {
    background: transparent;
    color: #C45E00;
    border: 2px solid #ff9900;
    box-shadow: none;
}

.btn.secondary:hover,
.btn.alt:hover {
    background: #ff9900;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255,153,0,0.3);
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */

.mainIndent { padding: 0 24px; }

.mainIndent.noRight { padding-right: 0; }

.mainIndent.pricingPage { padding: 0 40px; }

/* ============================================================
   TABLES
   ============================================================ */

table {
    border-collapse: collapse;
    width: 100%;
}

table th {
    background: #F0F0F0;
    color: #1A1A1A;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 10px 12px;
    border-bottom: 2px solid #E0E0E0;
    text-align: left;
}

table td {
    padding: 10px 12px;
    border-bottom: 1px solid #E0E0E0;
    vertical-align: top;
    color: #3D3D3D;
    font-size: 0.92rem;
}

table tr:hover td { background: #FFF5E6; }

/* Domain pricing table */
.domainsTable th {
    background: #ff9900;
    color: #ffffff;
    font-size: 0.85rem;
    padding: 9px 12px;
}

.domainsTable td {
    font-size: 0.88rem;
    padding: 9px 12px;
}

.domainsTable tr:nth-child(even) td { background: #FAFAFA; }

.domainsTable tr:hover td { background: #FFF5E6; }

/* ============================================================
   DOMAIN SEARCH / PRICING
   ============================================================ */

.domainSearchWrap,
.domainSearch {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-top: 4px solid #ff9900;
    border-radius: 8px;
    padding: 28px 24px;
    margin-bottom: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.domainSearch h2,
.domainSearchWrap h2 {
    color: #C45E00;
    margin-bottom: 14px;
}

.domainSearch input[type="text"],
.domainSearchWrap input[type="text"] {
    width: 60%;
    padding: 10px 14px;
    font-size: 1rem;
    border: 1px solid #E0E0E0;
    border-radius: 6px 0 0 6px;
    margin-right: -4px;
    vertical-align: middle;
}

.domainSearch .btn,
.domainSearchWrap .btn {
    border-radius: 0 6px 6px 0;
    vertical-align: middle;
    padding: 10px 20px;
}

/* ============================================================
   ALERTS & MESSAGES
   ============================================================ */

.error_content,
.errorMessage {
    background: #fdf0f0;
    border: 1px solid #FCA0A0;
    border-radius: 6px;
    color: #b83232;
    margin-bottom: 20px;
    padding: 14px 18px;
}

.successMessage,
.success {
    background: #edf7f0;
    border: 1px solid #a3d9b3;
    border-radius: 6px;
    color: #2a6e3a;
    margin-bottom: 20px;
    padding: 14px 18px;
}

.infoMessage,
.info {
    background: #e8f0ff;
    border: 1px solid #a3b8e8;
    border-radius: 6px;
    color: #1a3a80;
    margin-bottom: 20px;
    padding: 14px 18px;
}

/* Form validation */
.invalid input,
.form_validation_error + .dropdownBox .menuSelect,
.form_validation_error input,
.form_validation_error textarea,
textarea.form_validation_error,
select.form_validation_error,
input.form_validation_error,
.form_validation_error .menuSelect {
    background-color: #fdf0f0 !important;
    border: 1px solid #EE0000 !important;
}

/* ============================================================
   FORMS
   ============================================================ */

.formRow,
.fieldRow {
    margin-bottom: 16px;
}

label {
    display: block;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 5px;
    font-size: 0.92rem;
}

.formNote,
.fieldNote {
    font-size: 0.82rem;
    color: #717171;
    margin-top: 4px;
}

/* ============================================================
   PRICING / PLAN BOXES
   ============================================================ */

.planBlock,
.planBox {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-top: 4px solid #ff9900;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s, transform 0.2s;
}

.planBlock:hover,
.planBox:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.planBlock .price,
.planBox .price,
.priceWrap .price {
    font-size: 2.6rem;
    font-weight: 700;
    color: #C45E00;
    line-height: 1.1;
}

.planBlock .currency,
.priceWrap .currency {
    font-size: 1.2rem;
    color: #C45E00;
    font-weight: 700;
    vertical-align: super;
}

.planBlock .period,
.priceWrap .monthly {
    font-size: 0.82rem;
    color: #717171;
}

/* Featured / highlighted plan */
.planBlock.featured,
.planBox.featured {
    border-top-color: #C45E00;
    background: #FFFBF5;
}

/* ============================================================
   PACKAGE / PRODUCT LISTING
   ============================================================ */

.packageWrap {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.packageWrap > a {
    display: block;
    margin-bottom: 12px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A1A1A;
}

.packageWrap > a:hover { color: #C45E00; }

.packageDetails {
    background: #ff9900;
    border-radius: 6px;
    padding: 12px 16px;
    display: inline-block;
    vertical-align: middle;
}

.packageDetails .priceWrap {
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
}

/* ============================================================
   NAVIGATION (portal internal nav)
   ============================================================ */

.navWrap,
.portalNav {
    background: #F0F0F0;
    border-bottom: 1px solid #E0E0E0;
    padding: 0 24px;
}

.navWrap ul,
.portalNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navWrap ul li a,
.portalNav ul li a {
    display: block;
    padding: 12px 16px;
    color: #3D3D3D;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.navWrap ul li a:hover,
.portalNav ul li a:hover,
.navWrap ul li.active a,
.portalNav ul li.active a {
    color: #C45E00;
    background: #FFF5E6;
    text-decoration: none;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb {
    padding: 10px 0 20px;
    font-size: 0.82rem;
    color: #717171;
}

.breadcrumb a { color: #C45E00; }

.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb span { color: #717171; margin: 0 6px; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.red { color: #b83232 !important; }
.available, .green { color: #2a6e3a !important; }
.blue { color: #C45E00 !important; }
.rightAlign { text-align: right; }
.leftAlign { text-align: left; }
.align_center { text-align: center; }
.centerBlock { margin-left: auto; margin-right: auto; }
.top_align { vertical-align: top !important; }
.marginMe { margin-bottom: 24px; }
.fz11 { font-size: 11px; }
.yellowBg { background: #FFF5E6; }
.mainIndent.noRight.planOptions { padding: 0; }
.actions.pageBottom { text-align: right; margin-bottom: 24px; }
.actions.pageBottom.payment { margin-top: 24px; text-align: center; }

.linkTipLight {
    border-bottom: 1px dotted #C8C8C8;
    cursor: help;
    font-weight: bold;
}

.tooltip_back_order {
    border-bottom: 1px dotted #717171;
    cursor: help;
}

/* ============================================================
   CARET (dropdown indicator)
   ============================================================ */

.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #717171;
    content: "";
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    position: relative;
    margin-left: 5px;
}

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */

.dropdownBox,
.menuSelect {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.menuItemContent {
    padding: 8px 2em 8px 13px !important;
    cursor: pointer;
    color: #3D3D3D;
    font-size: 0.92rem;
}

.menuItemContent:hover {
    background: #FFF5E6;
    color: #C45E00;
}

/* ============================================================
   DOMAIN TLD TABLE (pricing page)
   ============================================================ */

.homeColumn2 {
    width: 375px;
    margin-left: 15px;
}

.homeColumn2 h2 {
    background-color: #ff9900;
    color: #ffffff;
    padding: 0 20px;
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 44px;
}

.homeColumn2 .countries {
    background: #F5F5F5;
    padding: 15px 20px 0;
    height: 622px;
    overflow: auto;
    width: 335px;
}

.homeColumn2 .countries .selectWrap { margin: 0 0 15px; }

.homeColumn2 .countries tr:hover { background: #FFF5E6; }

.homeColumn2 .countries table td {
    font-size: 0.85rem;
    vertical-align: middle;
}

.homeColumn2 table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.homeColumn2 table tr { height: 26px; }
.homeColumn2 table .tld { font-weight: bold; color: #C45E00; }
.homeColumn2 table .cost { text-align: right; }
.homeColumn2 p { margin-bottom: 16px; }

/* ============================================================
   ACCORDION
   ============================================================ */

.accordion h4 {
    display: block;
    background: #F0F0F0;
    line-height: 44px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0 48px 0 48px;
    border-top: 1px dashed #C8C8C8;
    position: relative;
    color: #1A1A1A;
    transition: background 0.15s;
    margin-bottom: 0;
}

.accordion h4:before {
    display: inline-block;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 11px;
    left: 14px;
    background: #fff;
    color: #ff9900;
    content: "+";
    font-weight: bold;
    text-align: center;
    line-height: 22px;
    border-radius: 50%;
    border: 1px solid #ff9900;
}

.accordion .expanded h4:before { content: "–"; }

.accordion h4:hover { background: #FFF5E6; }

.accordion .article {
    display: none;
    padding: 14px 48px;
    overflow: hidden;
    border-top: 1px dashed #C8C8C8;
    background: #FAFAFA;
}

.accordion.twoColumn { width: 48%; float: left; }

/* ============================================================
   PAGE SECTIONS
   ============================================================ */

.sectionBlock,
.contentBlock {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 24px;
}

.pageTitle,
.pageHeading {
    color: #C45E00;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #ff9900;
}

/* ============================================================
   MISC / LEGACY OVERRIDES
   ============================================================ */

#account_button_wrap { display: none; }
#account_button_wrap.active { display: block; }

.dropHead { font-size: 1.1rem; }

ul.disc { list-style: disc; }
ul.disc li { margin-left: 24px; }

.t_ContentContainer div,
.t_ContentContainer div p,
.t_ContentContainer div li {
    font-size: 11px;
    line-height: 15px;
}

.t_Content_bright {
    padding: 10px;
    background: white;
    border: 1px solid transparent;
}

.t_Skin { border: 1px solid transparent; }

.greenToolTip { border: 1px solid #a3d9b3; background-color: #edf7f0; }
.blueToolTip { border: 1px solid #a3b8e8; background-color: #e8f0ff; }
.grayToolTip { border: 1px solid #C8C8C8; background-color: #F0F0F0; width: 250px !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1040px) {
    #all { width: 100%; box-shadow: none; }
}

@media (max-width: 700px) {
    .header { height: auto; min-height: 48px; padding: 0 16px; }
    .resellerHeaderTitle { font-size: 1.05rem; }
    .mainIndent { padding: 0 16px; }
    .mainIndent.pricingPage { padding: 0 16px; }
    .homeColumn2 { width: 100%; margin-left: 0; }
    .homeColumn2 .countries { width: 100%; height: auto; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.1rem; }
    table th, table td { padding: 8px; font-size: 0.82rem; }
    .accordion.twoColumn { width: 100%; float: none; }
}