/**
 * VeltrixHosting – Unique WHMCS Order Form
 *
 * Brand:
 * Turquoise: #43C2C7
 * Pink:      #F51E70
 */


/* =========================================================
   ROOT / VARIABLES
   ========================================================= */

#order-modern {
    --veltrix-turquoise: #43C2C7;
    --veltrix-turquoise-dark: #32AEB3;
    --veltrix-turquoise-light: #EEF9FA;

    --veltrix-pink: #F51E70;
    --veltrix-pink-dark: #D91861;
    --veltrix-pink-light: #FFF1F6;

    --veltrix-dark: #252936;
    --veltrix-text: #525866;
    --veltrix-muted: #858B96;

    --veltrix-bg: #F7F9FB;
    --veltrix-card: #FFFFFF;
    --veltrix-border: #E5E9EE;

    margin: 0;
    padding: 35px 0 60px;

    font-family: "DM Sans", Arial, sans-serif;
    color: var(--veltrix-text);
}


/* =========================================================
   GENERAL
   ========================================================= */

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

#order-modern a {
    color: var(--veltrix-turquoise-dark);
    text-decoration: none;
    transition: color .2s ease;
}

#order-modern a:hover {
    color: var(--veltrix-pink);
    text-decoration: none;
}

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

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


/* =========================================================
   TITLE
   ========================================================= */

#order-modern .title-bar {
    margin: 0 0 32px;
    padding: 0;
    text-align: center;
}

#order-modern .title-bar h1 {
    margin: 0;
    padding: 0;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.6px;

    color: var(--veltrix-dark);
}


/* =========================================================
   CATEGORY SELECTOR
   ========================================================= */

#order-modern .choosecat {
    margin: 12px 0 30px;
    text-align: center;
}

#order-modern select {
    min-height: 44px;
    padding: 9px 38px 9px 14px;

    border: 1px solid var(--veltrix-border);
    border-radius: 9px;

    background-color: #fff;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--veltrix-dark);

    outline: none;

    box-shadow: 0 2px 8px rgba(25, 35, 55, .03);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#order-modern select:hover {
    border-color: #CDD3DA;
}

#order-modern select:focus {
    border-color: var(--veltrix-turquoise);

    box-shadow:
        0 0 0 3px rgba(67, 194, 199, .15);
}


/* =========================================================
   CURRENCY SELECTOR
   ========================================================= */

#order-modern .currencychooser {
    margin: 12px 0 24px;
    padding: 0;
    text-align: right;
}

#order-modern .currencychooser a,
#order-modern .currencychooser label,
#order-modern .currencychooser button {
    font-family: "DM Sans", Arial, sans-serif;
    border-radius: 7px;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

#order-modern .product {
    position: relative;

    margin: 16px 0;
    padding: 27px 25px 23px;

    min-height: 330px;

    background: var(--veltrix-card);

    border: 1px solid var(--veltrix-border);
    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 4px 12px rgba(25, 35, 55, .035),
        0 10px 28px rgba(25, 35, 55, .04);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* Veltrix színes felső csík */

#order-modern .product::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        var(--veltrix-turquoise) 0%,
        var(--veltrix-turquoise) 72%,
        var(--veltrix-pink) 72%,
        var(--veltrix-pink) 100%
    );
}


/* Hover */

#order-modern .product:hover {
    background: var(--veltrix-card);

    border-color: rgba(67, 194, 199, .55);

    transform: translateY(-4px);

    box-shadow:
        0 8px 18px rgba(25, 35, 55, .06),
        0 20px 42px rgba(25, 35, 55, .09);

    cursor: pointer;
}


/* =========================================================
   PRODUCT NAME
   ========================================================= */

#order-modern .product .name {
    margin: 1px 0 0;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .3px;

    color: var(--veltrix-dark);
}


/* =========================================================
   PRICING
   ========================================================= */

/* Külső árblokk */
#order-modern .product > .pricing {
    position: absolute;
    top: 30px;
    right: 25px;

    float: none;
    margin: 0;

    display: block;
    width: auto;

    text-align: right;
    white-space: nowrap;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;

    color: var(--veltrix-pink);
}


/* A tényleges ár */
#order-modern .product > .pricing > span.pricing {
    position: static;

    display: inline;

    float: none;
    margin: 0 6px 0 0;

    width: auto;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 23px;
    line-height: 1;
    font-weight: 700;

    color: var(--veltrix-pink);

    white-space: nowrap;
}


/* WHMCS sortöréseinek eltüntetése */
#order-modern .product > .pricing > br {
    display: none;
}

/* =========================================================
   PRODUCT FEATURES
   ========================================================= */

/*
 * Nincs min-width.
 * Az ár már nem floatol mellettük.
 * A feature boxok 28px-rel lejjebb indulnak.
 */

#order-modern .product .prodfeature {
    float: left;

    margin: 28px 5px 4px 0;
    padding: 7px 9px 6px;

    background: #FAFBFC;

    border: 1px solid #E7EAEE;
    border-radius: 9px;

    text-align: center;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.05;
    font-weight: 700;

    color: var(--veltrix-turquoise-dark);
}

#order-modern .product .prodfeature .feature {
    display: block;

    margin: 0 0 2px;

    font-size: 10px;
    line-height: 1.1;
    font-weight: 500;

    color: var(--veltrix-muted);
}


/* =========================================================
   PRODUCT DESCRIPTION
   ========================================================= */

#order-modern .product .description {
    clear: both;

    margin: 20px 0 15px;
    padding: 17px 0 0;

    border-top: 1px solid #EEF0F3;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--veltrix-text);
}

#order-modern .product .description p {
    margin: 5px 0;
}

#order-modern .product .description ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

#order-modern .product .description li {
    position: relative;

    margin: 6px 0;
    padding: 0 0 0 21px;
}

#order-modern .product .description li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: var(--veltrix-turquoise-dark);

    font-weight: 800;
}


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

#order-modern .btn,
#order-modern button,
#order-modern input[type="submit"] {
    font-family: "DM Sans", Arial, sans-serif;

    border-radius: 8px;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* RENDELÉS GOMB */

#order-modern .btn-success,
#order-modern .product .btn-success,
#order-modern .product input[type="submit"],
#order-modern .product button {
    padding: 11px 20px;

    border: 1px solid var(--veltrix-pink) !important;
    border-radius: 8px !important;

    background: var(--veltrix-pink) !important;

    color: #fff !important;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;

    text-shadow: none !important;

    box-shadow:
        0 5px 14px rgba(245, 30, 112, .20);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

#order-modern .btn-success:hover,
#order-modern .product .btn-success:hover,
#order-modern .product input[type="submit"]:hover,
#order-modern .product button:hover {
    background: var(--veltrix-pink-dark) !important;
    border-color: var(--veltrix-pink-dark) !important;

    color: #fff !important;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(245, 30, 112, .28);
}


/* Gombikon */

#order-modern .btn i,
#order-modern button i {
    margin-right: 6px;
}


/* Primary */

#order-modern .btn-primary {
    border-color: var(--veltrix-turquoise-dark) !important;
    background: var(--veltrix-turquoise) !important;
    color: #fff !important;
}

#order-modern .btn-primary:hover {
    border-color: var(--veltrix-turquoise-dark) !important;
    background: var(--veltrix-turquoise-dark) !important;
}


/* Default */

#order-modern .btn-default {
    background: #fff !important;

    border: 1px solid var(--veltrix-border) !important;

    color: var(--veltrix-dark) !important;

    box-shadow: none;
}

#order-modern .btn-default:hover {
    background: var(--veltrix-turquoise-light) !important;

    border-color: var(--veltrix-turquoise) !important;

    color: var(--veltrix-turquoise-dark) !important;
}


/* =========================================================
   ERROR BOX
   ========================================================= */

#order-modern .errorbox {
    display: none;

    margin: 18px 0;
    padding: 15px 20px;

    background: var(--veltrix-pink-light);

    border: 1px solid rgba(245, 30, 112, .25);
    border-radius: 10px;

    color: #BB1554;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;

    text-align: center;
}


/* =========================================================
   ALERTS
   ========================================================= */

#order-modern .alert {
    border-radius: 10px;

    font-family: "DM Sans", Arial, sans-serif;
}

#order-modern .alert-info {
    background: var(--veltrix-turquoise-light);

    border-color: rgba(67, 194, 199, .3);

    color: #277D81;
}

#order-modern .alert-danger {
    background: var(--veltrix-pink-light);

    border-color: rgba(245, 30, 112, .25);

    color: #BB1554;
}


/* =========================================================
   LOADING
   ========================================================= */

#order-modern .loading {
    display: none;

    width: 220px;

    margin-left: auto;
    margin-right: auto;

    padding-top: 10px;

    clear: both;

    text-align: center;
}

#order-modern #cartLoader i {
    font-size: 1.6em;

    color: var(--veltrix-turquoise);
}


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

#order-modern input[type="text"],
#order-modern input[type="email"],
#order-modern input[type="password"],
#order-modern input[type="tel"],
#order-modern input[type="number"],
#order-modern textarea {
    min-height: 42px;

    padding: 9px 12px;

    background: #fff;

    border: 1px solid var(--veltrix-border);
    border-radius: 8px;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;

    color: var(--veltrix-dark);

    outline: none;

    box-shadow: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#order-modern textarea {
    min-height: 110px;
    resize: vertical;
}

#order-modern input[type="text"]:focus,
#order-modern input[type="email"]:focus,
#order-modern input[type="password"]:focus,
#order-modern input[type="tel"]:focus,
#order-modern input[type="number"]:focus,
#order-modern textarea:focus {
    border-color: var(--veltrix-turquoise);

    box-shadow:
        0 0 0 3px rgba(67, 194, 199, .13);
}


/* =========================================================
   PANELS
   ========================================================= */

#order-modern .panel {
    border: 1px solid var(--veltrix-border);
    border-radius: 12px;

    box-shadow: none;
}

#order-modern .panel-heading {
    padding: 14px 17px;

    background: #FAFBFC;

    border-bottom: 1px solid var(--veltrix-border);
    border-radius: 12px 12px 0 0;

    font-family: "DM Sans", Arial, sans-serif;
    font-weight: 700;

    color: var(--veltrix-dark);
}

#order-modern .panel-body {
    padding: 17px;
}


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

#order-modern table {
    font-family: "DM Sans", Arial, sans-serif;
}

#order-modern .table > thead > tr > th {
    border-bottom: 2px solid var(--veltrix-turquoise);

    color: var(--veltrix-dark);

    font-weight: 700;
}

#order-modern .table > tbody > tr > td {
    border-top-color: var(--veltrix-border);
}


/* =========================================================
   BADGES / LABELS
   ========================================================= */

#order-modern .label-success {
    background: var(--veltrix-turquoise);
}

#order-modern .label-primary {
    background: var(--veltrix-pink);
}


/* =========================================================
   TEXT COLORS
   ========================================================= */

#order-modern .text-success {
    color: var(--veltrix-turquoise-dark) !important;
}

#order-modern .text-primary {
    color: var(--veltrix-pink) !important;
}


/* =========================================================
   RESPONSIVE – TABLET
   ========================================================= */

@media (max-width: 991px) {

    #order-modern {
        padding-top: 25px;
    }

    #order-modern .title-bar h1 {
        font-size: 32px;
    }

    #order-modern .product {
        min-height: 0;
    }

}


/* =========================================================
   RESPONSIVE – MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #order-modern {
        padding: 15px 0 40px;
    }

    #order-modern .title-bar {
        margin-bottom: 22px;
    }

    #order-modern .title-bar h1 {
        font-size: 27px;
        line-height: 1.25;
    }

    #order-modern .choosecat {
        margin-bottom: 22px;
    }

    #order-modern .choosecat select {
        width: 100%;
        max-width: 100%;
    }

    #order-modern .currencychooser {
        margin-bottom: 18px;
        text-align: center;
    }

    #order-modern .product {
        margin: 13px 0;
        padding: 24px 18px 20px;

        min-height: 0;

        border-radius: 13px;
    }

    #order-modern .product .name {
        font-size: 19px;
    }

    #order-modern .product .pricing {
        top: 22px;
        right: 18px;

        font-size: 19px;
    }

    #order-modern .product .pricing small {
        font-size: 12px;
    }

    #order-modern .product .prodfeature {
        margin-top: 26px;
        padding: 7px 8px 6px;

        font-size: 14px;
    }

    #order-modern .product .description {
        margin-top: 17px;

        font-size: 13px;
    }

}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 480px) {

    /*
     * Kis mobilon az ár visszakerül normál flow-ba,
     * hogy ne ütközzön a csomagnévvel.
     */

    #order-modern .product .pricing {
        position: static;

        float: none;

        margin: 8px 0 0;

        text-align: left;

        font-size: 19px;

        white-space: nowrap;
    }

    #order-modern .product .prodfeature {
        width: calc(50% - 5px);

        margin-top: 18px;
        margin-right: 5px;
    }

    #order-modern .product .btn-success {
        width: 100%;

        margin-top: 5px;
    }

}

/* === INGYENES WEBOLDAL KÖLTÖZTETÉS ADDON === */

#order-standard_cart .veltrix-migration-addon {
    border: 2px solid #43C2C7 !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(67, 194, 199, 0.14);
    transition: all 0.25s ease;
}

/* Hover */
#order-standard_cart .veltrix-migration-addon:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(67, 194, 199, 0.22);
}

/* Felső tartalom */
#order-standard_cart .veltrix-migration-addon .panel-body {
    padding: 24px 30px !important;
}

/* Addon neve */
#order-standard_cart .veltrix-migration-addon label {
    font-size: 17px;
    font-weight: 700;
    color: #101449;
    margin-bottom: 12px;
}

/* Leírás */
#order-standard_cart .veltrix-migration-addon .panel-body {
    color: #42485A;
    font-size: 14px;
    line-height: 1.6;
}

/* INGYENES! sáv */
#order-standard_cart .veltrix-migration-addon .panel-price {
    background: #EEFBFC !important;
    color: #101449 !important;
    font-weight: 700;
    padding: 9px !important;
}

/* Alsó hozzáadás sáv */
#order-standard_cart .veltrix-migration-addon .panel-add {
    background: #43C2C7 !important;
    color: #ffffff !important;
    font-weight: 700;
    padding: 10px !important;
}

/* Kiválasztva */
#order-standard_cart .veltrix-migration-addon.panel-addon-selected {
    border-color: #43C2C7 !important;
    box-shadow: 0 8px 28px rgba(67, 194, 199, 0.22);
}

/* Checkbox */
#order-standard_cart .veltrix-migration-addon .checkbox_square-blue {
    background-color: #43C2C7 !important;
    border-color: #43C2C7 !important;
}