/* =====================================================
   CARRELLI SHOP THEME
   Semantic UI 2.5 Override
   ===================================================== */

:root {

    /* BRAND */

    --cs-primary: #0F2747;
    --cs-primary-dark: #08172B;

    --cs-secondary: #F97316;
    --cs-secondary-dark: #EA580C;

    --cs-white: #FFFFFF;

    --cs-grey-50: #F8FAFC;
    --cs-grey-100: #E5E7EB;
    --cs-grey-200: #CBD5E1;
    --cs-grey-300: #94A3B8;
    --cs-grey-500: #6B7280;
    --cs-grey-700: #374151;
    --cs-grey-900: #1F2937;

    /* SEMANTIC COLOR REMAP */

    --red: #C2410C;
    --orange: #F97316;
    --yellow: #D97706;
    --olive: #4D7C0F;
    --green: #15803D;
    --teal: #0F766E;
    --blue: #0F2747;
    --violet: #4338CA;
    --purple: #6D28D9;
    --pink: #BE185D;
    --brown: #92400E;
    --grey: #6B7280;
    --black: #08172B;
}

/* =====================================================
   BODY
   ===================================================== */

body {
    background: #F8FAFC;
    color: #1F2937;
}

a.link_red,
a.link_red:hover {
    color: #a00b0b;
}

i.black.icon {
    color: #0F2747 !important;
}

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

.ui.button {
    border-radius: 8px;
    font-weight: 600;
    transition: all .2s ease;
}

.ui.primary.button,
.ui.blue.button {
    background: #0F2747;
    color: #fff;
}

.ui.primary.button:hover,
.ui.blue.button:hover {
    background: #17355D;
    color: #fff;
}

.ui.orange.button {
    background: #F97316;
    color: #fff;
}

.ui.orange.button:hover {
    background: #EA580C;
}

.ui.red.button {
    background: #C2410C;
    color: #fff;
}

.ui.yellow.button {
    background: #D97706;
    color: #fff;
}

.ui.green.button {
    background: #15803D;
    color: #fff;
}

.ui.teal.button {
    background: #0F766E;
    color: #fff;
}

.ui.violet.button {
    background: #4338CA;
    color: #fff;
}

.ui.purple.button {
    background: #6D28D9;
    color: #fff;
}

.ui.pink.button {
    background: #BE185D;
    color: #fff;
}

.ui.brown.button {
    background: #92400E;
    color: #fff;
}

.ui.grey.button {
    background: #6B7280;
    color: #fff;
}

.ui.black.button {
    background: #08172B;
    color: #fff;
}

.ui.primary.orange.button,
.ui.orange.primary.button {
    background: #F97316;
    color: #FFFFFF;
    border: 1px solid #F97316;
    transition: all .25s ease;
}

/* Hover */

.ui.primary.orange.button:hover,
.ui.orange.primary.button:hover {
    background: #EA580C;
    border-color: #EA580C;
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(249, 115, 22, .25);
}

/* Focus */

.ui.primary.orange.button:focus,
.ui.orange.primary.button:focus {
    background: #EA580C;
    border-color: #EA580C;
    color: #FFFFFF;
}

/* Active */

.ui.primary.orange.button:active,
.ui.orange.primary.button:active {
    background: #EA580C;
    border-color: #EA580C;
}


/* =====================================================
   SEGMENTS
   ===================================================== */

.ui.segment {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 39, 71, .05);
}

.ui.raised.segment {
    box-shadow: 0 4px 14px rgba(15, 39, 71, .08);
}

.ui.secondary.segment {
    background: #F8FAFC;
}

.ui.segment.secondary.search_top {
    background: #C7CFDA;
}

.ui.primary.segment {
    border-top: 4px solid #0F2747;
}

.ui.orange.segment {
    border-top: 4px solid #F97316;
}

.ui.inverted.blue.segment {
    border-top: 4px solid #0F2747;
    background-color: #0F2747 !important;
    color: #fff !important;
}

.ui.inverted.orange.segment {
    border-top: 4px solid #F97316;
    background-color: #F97316 !important;
    color: #fff !important;
}

.ui.segment.mh250 {
    min-height: 250px;
}

.ui.segment.mh300 {
    min-height: 300px;
}

.ui.segment.mh400 {
    min-height: 400px;
}

.ui.segment.mh500 {
    min-height: 500px;
}

/* =====================================================
   MODALS
   ===================================================== */

.ui.modal {
    border-radius: 12px;
    overflow: hidden;
}

.ui.modal>.header {
    background: #0F2747;
    color: #fff;
    border-bottom: none;
}

.ui.modal>.actions {
    background: #F8FAFC;
}

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

.ui.menu {
    border-color: #E5E7EB;
}

.ui.menu .active.item {
    color: #0F2747 !important;
    border-color: #0F2747 !important;
}

.ui.secondary.menu .active.item {
    background: #0F2747;
    color: #fff !important;
}

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

.ui.label {
    border-radius: 6px;
}

.ui.blue.label,
.ui.primary.label {
    background: #0F2747;
    color: #fff;
}

.ui.orange.label {
    background: #F97316;
    color: #fff;
}

.ui.red.label {
    background: #C2410C;
    color: #fff;
}

.ui.green.label {
    background: #15803D;
    color: #fff;
}

/* =====================================================
   MESSAGES
   ===================================================== */

.ui.message {
    border-radius: 8px;
}

.ui.info.message {
    background: #EEF4FB;
    color: #0F2747;
    border-color: #0F2747;
}

.ui.success.message {
    background: #ECFDF5;
    color: #15803D;
}

.ui.warning.message {
    background: #FFF7ED;
    color: #D97706;
}

.ui.error.message {
    background: #FEF2F2;
    color: #C2410C;
}

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

.ui.form input:not([type]),
.ui.form input[type=text],
.ui.form input[type=email],
.ui.form input[type=password],
.ui.form textarea,
.ui.form select {
    border-radius: 8px;
    border-color: #CBD5E1;
}

.ui.form input:not([type]),
.ui.form input[type=date],
.ui.form input[type=datetime-local],
.ui.form input[type=email],
.ui.form input[type=file],
.ui.form input[type=number],
.ui.form input[type=password],
.ui.form input[type=search],
.ui.form input[type=tel],
.ui.form input[type=text],
.ui.form input[type=time],
.ui.form input[type=url] {
    color: #0F2747 !important;
    opacity: 1;
}

.ui.icon.input>i.icon,
.ui.input>i.icon {
    opacity: 1;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus {
    border-color: #0F2747;
    box-shadow: 0 0 0 3px rgba(15, 39, 71, .12);
}

.ui.selection.dropdown>.default.text {
    color: #0F2747;
}

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

.ui.table {
    border-radius: 10px;
}

.ui.table thead th {
    background: #F8FAFC;
    color: #0F2747;
}

.ui.celled.table tr:hover {
    background: rgba(15, 39, 71, .03);
}

/* =====================================================
   CARDS
   ===================================================== */

.ui.card,
.ui.cards>.card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 39, 71, .06);
}

.ui.card>.content>.header {
    color: #0F2747;
}

/* =====================================================
   PROGRESS
   ===================================================== */

.ui.progress .bar {
    background: #F97316;
}

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

.ui.accordion .title.active {
    color: #0F2747;
}

/* =====================================================
   TABS
   ===================================================== */

.ui.tabular.menu .active.item {
    color: #0F2747;
    border-top: 3px solid #F97316;
}

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

.ui.selection.dropdown:focus,
.ui.selection.active.dropdown {
    border-color: #0F2747;
}

/* =====================================================
   LINKS
   ===================================================== */

a {
    color: #0F2747;
}

a:hover {
    color: #F97316;
}

/* =====================================================
   LOADER
   ===================================================== */

.ui.active.loader:before {
    border-color: #E5E7EB;
}

.ui.active.loader:after {
    border-color: #F97316 transparent transparent;
}

img {
    border: 0;
}