/* ==========================================================
   RUUM MEDIA HELP CENTER — CUSTOM CSS
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");

:root {
  --ruum-blue:#189BD7;
  --ruum-heading:#1D1D1F;
  --ruum-text:rgba(0,0,0,.53);
  --ruum-gray-bg:#F4F4F4;
  --ruum-blue-bg:#EAF6FA;
  --ruum-white:#FFFFFF;
}

html,body,input,button,textarea,select{font-family:"Roboto",Arial,sans-serif!important}
body{background:var(--ruum-gray-bg);color:var(--ruum-text)}
h1,h2,h3,h4,h5,h6{color:var(--ruum-heading);font-family:"Roboto",Arial,sans-serif!important}
h1{font-size: 1.8em!important; line-height: 1.4em!important;}
h2{font-size: 1.5em!important; font-weight: 400!important;}

#mainNav{background:#fff;border-bottom:1px solid rgba(29,29,31,.08);box-shadow:none}
#mainNav .navbar-inner{padding-top:30px;padding-bottom:30px}
#mainNav .container-fluid{position:relative;min-height:78px}
#mainNav .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important;padding:0!important;z-index:100}
#mainNav .brand img{display:block;width:auto;height:56px}
#mainNav .nav,#mainNav .caret{display:none!important}
#mainNav .btn-navbar{position:absolute;right:20px;top:50%;transform:translateY(-50%)}

.hero{padding:48px 0;background:#fff}
#docsSearch h1{margin:10px 0 0 0!important;color:var(--ruum-heading)!important;font-size:24px!important;font-weight:500!important;line-height:1.35}
#searchBar{max-width:650px;margin:0 auto}
#searchBar .search-query,.search-query{box-sizing:border-box;min-height:52px;border:1px solid rgba(29,29,31,.14)!important;border-radius:25px!important;background:#fff;box-shadow:none!important;color:var(--ruum-heading);font-size:16px}
#searchBar .search-query:focus,.search-query:focus{border-color:var(--ruum-blue)!important;box-shadow:0 0 0 4px rgba(24,155,215,.12)!important;outline:none}
#searchBar button,.btn-primary{min-height:52px;padding-left:28px;padding-right:28px;border-color:var(--ruum-blue)!important;border-radius:0 25px 25px 0!important;background-image:none!important;box-shadow:none!important;color:#fff!important;font-weight:500;text-shadow:none!important}
#searchBar button:hover,#searchBar button:focus,.btn-primary:hover,.btn-primary:focus{border-color:#1389BE!important;background:#1389BE!important}

.category-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;max-width:1060px;margin:0 auto;padding:48px 20px 36px}
.category-list .category{position:relative;box-sizing:border-box;width:100%!important;min-height:320px;margin:0!important;padding:150px 28px 28px!important;overflow:hidden;border:1px solid rgba(24,155,215,.35)!important;border-radius:22px!important;background-color:#fff!important;background-repeat:no-repeat!important;background-position:center 28px!important;background-size:108px 108px!important;box-shadow:0 8px 28px rgba(29,29,31,.05);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease}
.category-list .category:hover{transform:translateY(-6px);border-color:var(--ruum-blue)!important;background-color:var(--ruum-blue-bg)!important;box-shadow:0 16px 38px rgba(29,29,31,.10)}

.category-list .category h3,.category-list .category h2,.category-list .category .category-name,.category-list .category a:first-of-type{color:var(--ruum-heading)!important;font-family:"Roboto",Arial,sans-serif!important;font-size:21px!important;font-weight:500!important;line-height:1.3;text-decoration:none!important}
.category-list .category p,.category-list .category .description{color:var(--ruum-text)!important;font-size:15px!important;line-height:1.5}
.category-list .category a{color:var(--ruum-blue)}
.category-list .category a:hover{color:#1389BE}

.collection,.related,.contentWrapper,.contentWrapper.withRelated,.articleRatings,#fullArticle .admin-edit{border-radius:22px!important}
.collection{border:1px solid rgba(29,29,31,.08);background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.collection:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(29,29,31,.08)}
.related{margin-top:25px}
footer{border-top:1px solid rgba(29,29,31,.08);background:var(--ruum-gray-bg);color:var(--ruum-text)}

@media(max-width:900px){.category-list{grid-template-columns:1fr;max-width:620px}.category-list .category{min-height:290px}}
@media(max-width:600px){#mainNav .navbar-inner{padding-top:20px;padding-bottom:20px}#mainNav .container-fluid{min-height:64px}#mainNav .brand img{height:44px}.hero{padding:36px 18px}#docsSearch h1{font-size:21px!important}#searchBar{width:100%}#searchBar .search-query,#searchBar button{min-height:48px}.category-list{gap:18px;padding:30px 16px}.category-list .category{min-height:280px;padding:140px 22px 24px!important;border-radius:18px!important;background-position:center 24px!important;background-size:100px 100px!important}}

/* =========================================
   CATEGORY ICON PROPORTIONS
   ========================================= */

.category-list .category {
    position: relative !important;
    min-height: 330px !important;
    background-image: none !important;
    text-align: center;
}

/* Zajednički prostor za ikonice */

.category-list .category::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 50%;
    width: 180px;
    height: 125px;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center;
}

/* Planning — šira horizontalna ilustracija */

#category-4::before {
    background-image: url("https://ruummedia.com/assets/icons/planning-your-listing.png");
    background-size: 110px auto;
}

/* Services — kompaktnija ilustracija */

#category-11::before {
    background-image: url("https://ruummedia.com/assets/icons/services.png");
    background-size: 110px auto;
}

/* Billing — viša ilustracija */

#category-13::before {
    background-image: url("https://ruummedia.com/assets/icons/polices.png");
    background-size: auto 100px;
}

#category-15::before {
    background-image: url("https://ruummedia.com/assets/icons/fq.png");
    background-size: auto 90px;
}
#fullArticle .callout-blue {
    border-color: #189BD7!important;
}
#main-content {
    background: none!important;
}
footer p {
    font-size: .9em;
    color: #9b9b9b;
    text-align: center!important;
    margin-top: 3em;
}