/*
* Pikasmm (PINK) - Extracted inline CSS
* Generated from all blocks in the Twig templates.
*
* IMPORTANT:
* - This file is intentionally NOT linked from the templates.
* - Add your own after the existing theme CSS.
* - Source comments below show exactly where each block came from.
*/
/* ==========================================================================
Source: account.twig | inline style block 1 | attrs: id="pika-account-fix"
========================================================================== */
.pika-account-page { padding-bottom: 28px; }
.pika-account-profile {
display:flex; align-items:center; justify-content:space-between; gap:18px;
padding:20px; margin-bottom:18px; border-radius:16px;
background:var(--card-bg, var(--main-bg)); border:1px solid var(--border-color, rgba(127,127,127,.16));
}
.pika-account-profile-left { display:flex; align-items:center; gap:14px; min-width:0; }
.pika-account-avatar {
width:72px; height:72px; flex:0 0 72px; border-radius:18px; overflow:hidden;
position:relative; cursor:pointer; border:2px solid var(--mc); background:rgba(127,127,127,.12);
box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.pika-account-avatar [data-sm="avatar"] { display:block; width:100%; height:100%; border-radius:inherit; }
.pika-account-avatar-edit {
position:absolute; right:5px; bottom:5px; width:24px; height:24px; border-radius:8px;
display:flex; align-items:center; justify-content:center; color:#fff; background:var(--mc); font-size:11px;
}
.pika-account-profile-copy { min-width:0; }
.pika-account-profile-copy h3 { margin:0 0 4px; font-size:20px; line-height:1.2; overflow-wrap:anywhere; }
.pika-account-profile-copy p { margin:0; opacity:.72; overflow-wrap:anywhere; }
.pika-account-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pika-account-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; align-items:start; }
.pika-account-nav, .pika-account-panel {
background:var(--card-bg, var(--main-bg)); border:1px solid var(--border-color, rgba(127,127,127,.16)); border-radius:16px;
}
.pika-account-nav { padding:10px; position:sticky; top:90px; }
.pika-account-nav button, .pika-account-nav a {
width:100%; border:0; background:transparent; color:inherit; border-radius:10px; padding:11px 12px;
display:flex; align-items:center; gap:10px; text-align:left; text-decoration:none; cursor:pointer; transition:.18s ease;
}
.pika-account-nav button:hover, .pika-account-nav a:hover { background:rgba(127,127,127,.08); }
.pika-account-nav button.active { color:#fff; background:var(--mc); }
.pika-account-nav i { width:18px; text-align:center; }
.pika-account-panel { padding:20px; min-height:370px; }
.pika-account-pane { display:none; }
.pika-account-pane.active { display:block; }
.pika-account-title { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.pika-account-title i { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(127,127,127,.09); color:var(--mc); }
.pika-account-title h4 { margin:0; }
.pika-profile-card { display:grid; grid-template-columns:100px minmax(0,1fr); gap:18px; align-items:center; padding:16px; border:1px solid var(--border-color, rgba(127,127,127,.16)); border-radius:14px; }
.pika-profile-preview { width:92px; height:92px; border-radius:20px; overflow:hidden; background:rgba(127,127,127,.12); border:2px solid var(--mc); }
.pika-profile-preview [data-sm="avatar"] { display:block; width:100%; height:100%; }
.pika-account-note { font-size:13px; opacity:.68; margin-top:8px; }
.pika-account-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pika-account-divider { height:1px; background:var(--border-color, rgba(127,127,127,.16)); margin:22px 0; }
.pika-account-api { display:flex; gap:10px; align-items:center; }
.pika-account-api .form-control { flex:1; }
@media (max-width: 767.98px) {
.pika-account-profile { align-items:flex-start; flex-direction:column; }
.pika-account-actions { width:100%; justify-content:flex-start; }
.pika-account-grid { grid-template-columns:1fr; }
.pika-account-nav { position:static; display:flex; overflow-x:auto; gap:6px; padding:8px; }
.pika-account-nav button, .pika-account-nav a { width:auto; flex:0 0 auto; white-space:nowrap; }
.pika-account-form-row { grid-template-columns:1fr; }
.pika-profile-card { grid-template-columns:1fr; }
}
/* ==========================================================================
Source: faq.twig | inline style block 1
========================================================================== */
.faq-ss-tabs .home-ss-tab .ss-tab-head{font-size:14px}@media (max-width:991.98px){.nav-custom-3 {display: grid;grid-template-columns: repeat(2, 1fr);white-space: nowrap}.nav-custom-3 .nav-item .nav-link{font-size:12px}}
/* ==========================================================================
Source: footer.twig | inline style block 1
========================================================================== */
[data-sm="avatar"] {
background-position:center !important;
background-repeat:no-repeat !important;
background-size:cover !important;
}
#avatarModal .avatar-item { cursor:pointer; position:relative; border:2px solid transparent; border-radius:14px; transition:.16s ease; }
#avatarModal .avatar-item:hover { transform:translateY(-2px); border-color:var(--mc); }
#avatarModal .avatar-item.pika-avatar-selected { border-color:var(--mc); box-shadow:0 0 0 3px color-mix(in srgb, var(--mc) 18%, transparent); }
/* ==========================================================================
Source: header2.twig | inline style block 1 | attrs: id="pikasmm-tsm-header-tools"
========================================================================== */
/* Pikasmm-native top navigation tools. Functional behavior comes from TSM; UI follows Pikasmm. */
.pika-top-nav-tool {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 auto;
text-decoration: none !important;
vertical-align: middle;
}
/* Let Pikasmm's own .btn + .btn-line-icon rules own the button surface. */
.pika-top-nav-tool .btn-icon {
margin: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pika-top-nav-tool .btn-icon i {
color: currentColor !important;
}
/* Small Pikasmm-flavored interaction without replacing the theme's button CSS. */
.pika-top-nav-tool {
transition: transform .16s ease, color .16s ease, border-color .16s ease, background-color .16s ease;
}
.pika-top-nav-tool:hover {
transform: translateY(-1px);
}
.pika-top-nav-tool:active {
transform: translateY(0);
}
/* Animated Telegram / Facebook owner links supplied by the user. Namespaced to Pikasmm. */
.pika-social-owner-btn {
width: 45px;
height: 45px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
position: relative;
border-radius: 7px;
cursor: pointer;
transition: all .3s;
flex: 0 0 45px;
padding: 0;
margin: 0 2px;
text-decoration: none !important;
isolation: isolate;
}
.pika-social-owner-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
letter-spacing: .8px;
border-radius: 10px;
transition: all .3s;
border: 1px solid rgba(156,156,156,.466);
position: relative;
z-index: 2;
box-sizing: border-box;
}
.pika-social-owner-icon svg {
display: block;
fill: #fff;
position: relative;
z-index: 3;
}
.pika-social-owner-bg {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 10px;
pointer-events: none;
transition: all .3s;
}
.pika-telegram-owner .pika-social-owner-bg { background: #24a1de; }
.pika-facebook-owner .pika-social-owner-bg { background: #1877f2; }
.pika-social-owner-btn:hover .pika-social-owner-bg {
transform: rotate(35deg);
transform-origin: bottom;
}
.pika-social-owner-btn:hover .pika-social-owner-icon {
border-color: rgba(226,226,226,.466);
background-color: rgba(204,204,204,.466);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.pika-social-owner-btn:focus-visible {
outline: 2px solid var(--mc, #6c5ce7);
outline-offset: 3px;
}
@media (max-width: 575.98px) {
.pika-social-owner-btn {
width: 40px;
height: 40px;
flex-basis: 40px;
}
}
/* Animated light/dark switch supplied for the Pikasmm top navbar. */
.pika-theme-nav {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
margin: 0 2px;
}
.pika-theme-switch {
font-size: 17px;
position: relative;
display: inline-block;
width: 4em;
height: 2.2em;
margin: 0;
border-radius: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
.pika-theme-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
pointer-events: none;
}
.pika-theme-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #2a2a2a;
transition: 0.4s;
border-radius: 30px;
overflow: hidden;
}
.pika-theme-slider:before {
position: absolute;
content: "";
height: 1.2em;
width: 1.2em;
border-radius: 20px;
left: 0.5em;
bottom: 0.5em;
transition: 0.4s;
transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
box-shadow: inset 8px -4px 0 0 #fff;
z-index: 2;
}
.pika-theme-switch input:checked + .pika-theme-slider {
background-color: #00a6ff;
}
.pika-theme-switch input:checked + .pika-theme-slider:before {
transform: translateX(1.8em);
box-shadow: inset 15px -4px 0 15px #ffcf48;
}
.pika-theme-star {
background-color: #fff;
border-radius: 50%;
position: absolute;
width: 5px;
height: 5px;
transition: all 0.4s;
}
.pika-theme-star-1 { left: 2.5em; top: 0.5em; }
.pika-theme-star-2 { left: 2.2em; top: 1.2em; }
.pika-theme-star-3 { left: 3em; top: 0.9em; }
.pika-theme-switch input:checked + .pika-theme-slider .pika-theme-star {
opacity: 0;
}
.pika-theme-cloud {
width: 3.5em;
position: absolute;
bottom: -1.4em;
left: -1.1em;
opacity: 0;
transition: all 0.4s;
}
.pika-theme-switch input:checked + .pika-theme-slider .pika-theme-cloud {
opacity: 1;
}
.pika-theme-switch:focus-within .pika-theme-slider {
outline: 2px solid var(--mc, #6c5ce7);
outline-offset: 2px;
}
@media (max-width: 575.98px) {
.pika-theme-switch { font-size: 14px; }
}
/* Animated notification bell supplied by the user, namespaced for Pikasmm. */
.pika-notification-button {
width: 50px;
height: 50px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 50px;
padding: 0;
margin: 0 2px;
background-color: rgb(44, 44, 44);
border-radius: 50%;
cursor: pointer;
transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
box-shadow: 2px 2px 10px rgba(0, 0, 0, .13);
border: none;
color: #fff;
vertical-align: middle;
}
.pika-notification-bell {
width: 18px;
height: auto;
display: block;
overflow: visible;
}
.pika-notification-bell path {
fill: #fff;
}
.pika-notification-button:hover {
background-color: rgb(56, 56, 56);
}
.pika-notification-button:hover .pika-notification-bell {
animation: pikaBellRing .9s both;
}
.pika-notification-button:active {
transform: scale(.8);
}
.pika-notification-button:focus-visible {
outline: 2px solid var(--mc, #6c5ce7);
outline-offset: 3px;
}
@keyframes pikaBellRing {
0%, 100% { transform-origin: top; }
15% { transform: rotateZ(10deg); }
30% { transform: rotateZ(-10deg); }
45% { transform: rotateZ(5deg); }
60% { transform: rotateZ(-5deg); }
75% { transform: rotateZ(2deg); }
}
.pika-notification-count {
position: absolute;
top: -3px;
right: -3px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--mc, #6c5ce7);
color: #fff;
font-size: 9px;
font-weight: 800;
line-height: 1;
box-shadow: 0 0 0 2px var(--main-bg, #fff);
z-index: 4;
pointer-events: none;
}
@media (max-width: 575.98px) {
.pika-notification-button {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.pika-notification-bell { width: 16px; }
}
/* Notification modal - same Pikasmm card/button vocabulary. */
.pika-news-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.pika-news-modal.is-open { display: flex; }
.pika-news-backdrop {
position: absolute;
inset: 0;
background: rgba(8, 15, 30, .56);
backdrop-filter: blur(5px);
}
.pika-news-dialog {
position: relative;
width: min(640px, 100%);
max-height: min(82vh, 720px);
overflow: hidden;
border-radius: 14px;
background: var(--second-bg, #fff);
border: 1px solid var(--border-color, rgba(127,127,127,.16));
box-shadow: 0 22px 65px rgba(0,0,0,.22);
color: inherit;
}
.pika-news-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid var(--border-color, rgba(127,127,127,.14));
}
.pika-news-title-wrap {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.pika-news-title-wrap .pika-news-head-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--mc, #6c5ce7);
color: #fff;
flex: 0 0 38px;
}
.pika-news-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.pika-news-head small { opacity: .65; }
.pika-news-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border-radius: 10px;
border: 1px solid var(--border-color, rgba(127,127,127,.14));
background: transparent;
color: inherit;
cursor: pointer;
transition: background-color .16s ease, color .16s ease;
}
.pika-news-close:hover {
color: var(--mc, inherit);
background: var(--main-bg, rgba(127,127,127,.06));
}
.pika-news-list {
max-height: calc(min(82vh, 720px) - 72px);
overflow-y: auto;
padding: 14px;
}
.pika-news-item {
padding: 14px;
border-radius: 12px;
background: var(--main-bg, rgba(127,127,127,.05));
border: 1px solid var(--border-color, rgba(127,127,127,.12));
}
.pika-news-item + .pika-news-item { margin-top: 10px; }
.pika-news-item-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.pika-news-item-icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--second-bg, #fff);
border: 1px solid var(--border-color, rgba(127,127,127,.12));
overflow: hidden;
color: var(--mc, inherit);
}
.pika-news-item-icon img { width: 24px; height: 24px; object-fit: contain; }
.pika-news-item h4 { margin: 0; font-size: 14px; font-weight: 700; }
.pika-news-item-date { display: block; margin-top: 2px; font-size: 11px; opacity: .62; }
.pika-news-content { font-size: 13px; line-height: 1.6; word-break: break-word; }
.pika-news-empty { padding: 24px 12px; text-align: center; opacity: .7; }
@media (max-width: 767.98px) {
.pika-news-modal { padding: 10px; align-items: flex-end; }
.pika-news-dialog { width: 100%; max-height: 86vh; border-radius: 14px 14px 10px 10px; }
.pika-news-list { max-height: calc(86vh - 72px); }
}
/* ==========================================================================
Source: header2.twig | inline style block 2 | attrs: id="pikasmm-reference-sidebar-skin"
========================================================================== */
/* Sidebar structure/skin adapted from the supplied reference only.
Pikasmm routes, Twig conditions, data and backend behavior remain unchanged. */
.sidebar {
display: flex;
flex-direction: column;
min-height: 100vh;
max-height: 100vh;
}
.sidebar .sidebar-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 74px;
padding: 14px 16px;
border-bottom: 1px solid var(--border-color, rgba(127,127,127,.12));
}
.sidebar .sidebar-head > a {
min-width: 0;
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar .app-logo {
display: flex;
align-items: center;
min-width: 0;
max-width: 178px;
}
.sidebar .app-logo .big-logo,
.sidebar .app-logo img {
display: block;
max-width: 168px;
max-height: 46px;
width: auto;
height: auto;
object-fit: contain;
}
.sidebar .pika-sidebar-site-name {
display: block;
max-width: 168px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 800;
font-size: 17px;
color: var(--text-color, inherit);
}
.sidebar .small-logo {
display: none;
width: 38px;
height: 38px;
object-fit: contain;
}
.sidebar .sidebar-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 10px;
scrollbar-width: thin;
}
.sidebar .sidebar-top {
margin-bottom: 8px;
}
.sidebar .sidebar-top > button,
.sidebar .sidebar-menu-item > a {
width: 100%;
min-height: 46px;
display: flex;
align-items: center;
gap: 10px;
padding: 7px 9px;
border: 0;
border-radius: 12px;
background: #00000000;
color: var(--text-color, inherit);
text-align: left;
text-decoration: none !important;
transition: background-color .18s ease, color .18s ease, transform .18s ease;
box-sizing: border-box;
}
.sidebar .sidebar-top > button:hover,
.sidebar .sidebar-menu-item > a:hover {
background: #ffe2f0;
transform: translateX(2px);
}
.sidebar .sidebar-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .sidebar-menu-item {
margin: 2px 0;
}
.sidebar .sidebar-menu-icon {
flex: 0 0 34px;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--main-bg, rgba(127,127,127,.08));
color: var(--mc, currentColor);
transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.sidebar .sidebar-menu-icon svg {
max-width: 20px;
max-height: 20px;
}
/* Premium/duotone sidebar icon treatment. */
.sidebar .sidebar-menu-icon .fad {
font-size: 17px;
line-height: 1;
--fa-primary-color: currentColor;
--fa-secondary-color: currentColor;
--fa-secondary-opacity: .42;
}
.sidebar .sidebar-menu-item.active .sidebar-menu-icon .fad {
--fa-primary-color: #fff;
--fa-secondary-color: #fff;
--fa-secondary-opacity: .55;
}
.sidebar .sidebar-menu-text {
flex: 1 1 auto;
min-width: 0;
font-size: 13px;
font-weight: 650;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar .sidebar-menu-arrow {
flex: 0 0 auto;
opacity: .48;
font-size: 12px;
transition: transform .18s ease, opacity .18s ease;
}
.sidebar .sidebar-menu-item > a:hover .sidebar-menu-arrow {
opacity: .9;
transform: translateX(2px);
}
.sidebar .sidebar-menu-item.active > a {
background: var(--mc, #3978f6);
color: #fff;
box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
.sidebar .sidebar-menu-item.active .sidebar-menu-icon {
background: rgba(255,255,255,.16);
color: #fff;
}
.sidebar .sidebar-menu-item.active .sidebar-menu-arrow {
color: #fff;
opacity: .78;
}
.sidebar .sidebar-menu:not(.expanded) .sidebar-menu-list > .sidebar-menu-item:nth-child(n+10) {
display: none;
}
.sidebar .sidebar-showmore {
width: 100%;
min-height: 40px;
margin-top: 8px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 10px;
border: 1px dashed var(--border-color, rgba(127,127,127,.18));
background: transparent;
color: var(--text-color, inherit);
font-size: 12px;
font-weight: 700;
opacity: .82;
transition: opacity .18s ease, background-color .18s ease, border-color .18s ease;
}
.sidebar .sidebar-showmore:hover {
opacity: 1;
background: var(--main-bg, rgba(127,127,127,.06));
}
.sidebar .sidebar-showmore .txt-less { display: none; }
.sidebar .sidebar-menu.expanded .sidebar-showmore .txt-more { display: none; }
.sidebar .sidebar-menu.expanded .sidebar-showmore .txt-less { display: inline; }
.sidebar .sidebar-menu.expanded .sidebar-showmore i { transform: rotate(180deg); }
.sidebar .sidebar-showmore i { transition: transform .18s ease; }
.sidebar .sidebar-foot {
flex: 0 0 auto;
padding: 10px;
border-top: 1px solid var(--border-color, rgba(127,127,127,.12));
background: var(--second-bg, transparent);
}
.sidebar .sidebar-userbox {
padding: 11px;
border: 1px solid var(--border-color, rgba(127,127,127,.12));
border-radius: 14px;
background: var(--main-bg, rgba(127,127,127,.05));
box-shadow: 0 8px 22px rgba(0,0,0,.04);
}
.sidebar .sidebar-userbox-user {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.sidebar .sidebar-userbox-avatar {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
background: var(--second-bg, rgba(127,127,127,.10));
color: #5078fa00!important;
border: 1px solid var(--border-color, rgba(127,127,127,.12));
}
.sidebar .sidebar-userbox-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.sidebar .sidebar-userbox-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar .sidebar-userbox-name {
display: block;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: 800;
color: var(--text-color, inherit);
}
.sidebar .sidebar-userbox-mail {
display: block;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
opacity: .58;
}
.sidebar .sidebar-userbox-stats {
display: grid;
gap: 6px;
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid var(--border-color, rgba(127,127,127,.10));
}
.sidebar .sidebar-userbox-row {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 10px;
}
.sidebar .sidebar-userbox-label {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 6px;
opacity: .68;
white-space: nowrap;
}
.sidebar .sidebar-userbox-row .acc-badge {
max-width: 118px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 4px 7px;
border-radius: 999px;
background: var(--second-bg, rgba(127,127,127,.08));
color: var(--text-color, inherit);
font-weight: 750;
border: 1px solid var(--border-color, rgba(127,127,127,.10));
}
/* Preserve Pikasmm's collapsed-sidebar behavior, with the reference compact visual. */
body.sidebar-passive .sidebar .app-logo,
body.sidebar-passive .sidebar .sidebar-menu-text,
body.sidebar-passive .sidebar .sidebar-menu-arrow,
body.sidebar-passive .sidebar .sidebar-showmore,
body.sidebar-passive .sidebar .sidebar-userbox-info,
body.sidebar-passive .sidebar .sidebar-userbox-stats {
display: none !important;
}
body.sidebar-passive .sidebar .small-logo {
display: block;
}
body.sidebar-passive .sidebar .sidebar-head {
justify-content: center;
padding-left: 8px;
padding-right: 8px;
}
body.sidebar-passive .sidebar .sidebar-head > a {
justify-content: center;
}
body.sidebar-passive .sidebar .sidebar-toggle {
display: none;
}
body.sidebar-passive .sidebar .sidebar-top > button,
body.sidebar-passive .sidebar .sidebar-menu-item > a {
justify-content: center;
padding-left: 6px;
padding-right: 6px;
}
body.sidebar-passive .sidebar .sidebar-menu-icon {
margin: 0;
}
body.sidebar-passive .sidebar .sidebar-userbox {
padding: 7px;
}
body.sidebar-passive .sidebar .sidebar-userbox-user {
justify-content: center;
}
@media (max-width: 767.98px) {
.sidebar .sidebar-head { min-height: 66px; padding: 10px 12px; }
.sidebar .sidebar-body { padding: 9px 8px; }
.sidebar .sidebar-foot { padding: 8px; }
.sidebar .sidebar-userbox { padding: 9px; }
.sidebar .sidebar-userbox-stats { display: none; }
}
/* ==========================================================================
Source: neworder.twig | inline style block 1
========================================================================== */
/* Dark mode input override */
body.dark-mode .search-input {
color: #fff; /* white text in dark mode */
background-color: #1e1e1e; /* dark background */
}
/* Dropdown styles */
#dropdown_for_search {
display: none;
max-height: 300px; /* reduced max height */
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 3px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
font-size: 14px;
background-color: #fff; /* light mode dropdown bg */
color: #000; /* light mode text */
}
/* Dark mode dropdown override */
body.dark-mode #dropdown_for_search {
background-color: #2c2c2c;
color: #fff;
border: 1px solid #444;
}
/* Each search item */
.search-item {
padding: 6px 10px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
}
/* Hover effect */
.search-item:hover {
background-color: #f5f5f5;
}
/* Dark mode hover effect */
body.dark-mode .search-item:hover {
background-color: #3a3a3a;
}
/* Loader */
#search_loader {
display: none;
padding: 6px 0;
font-size: 13px;
color: #555;
text-align: center;
}
/* Dark mode loader */
body.dark-mode #search_loader {
color: #ccc;
}
/* ==========================================================================
Source: neworder.twig | inline style block 2
========================================================================== */
/* Dropdown styles */
#dropdown_for_search {
display: none;
max-height: 300px; /* reduced max height */
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 3px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
font-size: 14px;
}
/* Each search item */
.search-item {
padding: 6px 10px; /* reduced padding */
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
}
.search-item:hover {
background-color: #f5f5f5;
}
/* Loader */
#search_loader {
display: none;
padding: 6px 0;
font-size: 13px;
color: #555;
text-align: center;
}
/* ==========================================================================
Source: neworder.twig | inline style block 3 | attrs: id="tsm-neworder-dropdown-sync-style"
========================================================================== */
/* Keep Pikasmm's theme, only add TSM dropdown metadata behavior. */
#select-category-container .select2-container,
#select-service-container .select2-container { width:100% !important; }
.select2-results__option .svc-meta {
width:100%; margin-top:6px; display:flex; flex-wrap:wrap; align-items:center; gap:7px;
font-size:11px; line-height:1.35;
}
.rc-inline-btn {
display:inline-flex !important; align-items:center; justify-content:center; gap:5px;
padding:.28rem .55rem !important; min-height:28px; line-height:1.1;
font-size:10px !important; font-weight:700; white-space:nowrap;
cursor:pointer; user-select:none;
}
.rc-inline-btn i { font-size:10px; }
.service-speed-badge {
display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px;
font-size:10px; font-weight:800; letter-spacing:.15px; white-space:nowrap;
border:1px solid rgba(127,127,127,.24); background:rgba(127,127,127,.12);
}
.service-speed-badge-fast { color:#20b779; background:rgba(32,183,121,.12); border-color:rgba(32,183,121,.3); }
.service-speed-badge-normal { color:#d99a1b; background:rgba(217,154,27,.12); border-color:rgba(217,154,27,.3); }
.service-speed-badge-slow { color:#e35b68; background:rgba(227,91,104,.12); border-color:rgba(227,91,104,.3); }
.service-speed-badge-loading, .service-speed-badge-unknown { opacity:.78; }
/* Fast Today Services: TSM behavior, rendered with Pikasmm cards/forms/buttons. */
body.fast-today-no-scroll { overflow:hidden; }
.fast-today-services-launcher { display:flex; justify-content:flex-start; }
.fast-today-services-btn { display:inline-flex; align-items:center; gap:6px; }
.fast-today-services-modal {
position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center;
padding:18px; color:inherit;
}
.fast-today-services-modal.is-open { display:flex; }
.fast-today-services-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.68); backdrop-filter:blur(2px); }
.fast-today-services-box {
position:relative; z-index:1; width:min(980px,96vw); max-height:90vh; margin:0;
overflow:hidden; display:flex; flex-direction:column; box-shadow:0 22px 70px rgba(0,0,0,.35);
}
.fast-today-services-head { display:flex; align-items:center; justify-content:space-between; gap:15px; flex:0 0 auto; }
.fast-today-services-title { font-size:18px; font-weight:800; }
.fast-today-services-head small { display:block; margin-top:3px; opacity:.66; line-height:1.35; }
.fast-today-services-close { width:38px; height:38px; padding:0 !important; flex:0 0 38px; }
.fast-today-services-controls { padding:14px 18px; border-bottom:1px solid rgba(127,127,127,.14); }
.fast-today-platforms { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px; }
.fast-today-platform-btn { display:inline-flex; align-items:center; gap:5px; }
.fast-today-platform-btn.is-active { pointer-events:none; }
.fast-today-services-search { max-width:440px; }
.fast-today-services-body { overflow:auto; min-height:220px; }
.fast-today-status {
padding:10px 12px; margin-bottom:12px; border-radius:8px; font-size:12px; font-weight:600;
background:rgba(127,127,127,.08); border:1px solid rgba(127,127,127,.14);
}
.fast-today-grid { display:flex; flex-direction:column; gap:9px; }
.fast-today-empty { padding:28px 16px; text-align:center; opacity:.65; line-height:1.6; }
.fast-today-card {
display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px;
border:1px solid rgba(127,127,127,.16); border-radius:10px; background:rgba(127,127,127,.035);
}
.fast-today-card-main { min-width:0; flex:1; }
.fast-today-card-name { font-size:13px; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }
.fast-today-card-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fast-today-chip {
display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px;
font-size:10px; font-weight:700; border:1px solid rgba(127,127,127,.18); background:rgba(127,127,127,.08);
}
.fast-today-chip.fast { color:#20b779; border-color:rgba(32,183,121,.28); background:rgba(32,183,121,.10); }
.fast-today-select-btn { flex:0 0 auto; }
@media (max-width:575px){
.fast-today-services-modal { padding:8px; }
.fast-today-services-box { width:100%; max-height:94vh; }
.fast-today-services-controls, .fast-today-services-body { padding:12px; }
.fast-today-card { align-items:flex-start; flex-direction:column; }
.fast-today-select-btn { width:100%; }
.fast-today-platform-btn { flex:1 1 calc(50% - 7px); justify-content:center; }
}
/* TSM-style Auto Link Fixer switch, placed immediately above the dynamic link field. */
.nwo-switch {
display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
padding:11px 12px; border-radius:10px; border:1px solid rgba(127,127,127,.18);
background:rgba(127,127,127,.06);
}
.nwo-switch__meta { min-width:0; flex:1; }
.nwo-switch__title { font-size:13px; font-weight:800; line-height:1.3; }
.nwo-switch__desc { margin-top:3px; font-size:10.5px; line-height:1.45; opacity:.72; }
.nwo-switch input { position:absolute; opacity:0; pointer-events:none; }
.nwo-switch__control {
position:relative; display:inline-block; width:42px; height:23px; flex:0 0 42px;
border-radius:999px; background:rgba(127,127,127,.35); transition:.2s ease;
}
.nwo-switch__control:after {
content:""; position:absolute; width:17px; height:17px; left:3px; top:3px; border-radius:50%;
background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:.2s ease;
}
.nwo-switch input:checked + .nwo-switch__control { background:#2FCD94; }
.nwo-switch input:checked + .nwo-switch__control:after { transform:translateX(19px); }
@media (max-width:575px){
.select2-results__option .svc-meta { gap:5px; }
.nwo-switch { padding:10px; }
.nwo-switch__desc { font-size:10px; }
}
/* ==========================================================================
Source: notifications.twig | inline style block 1
========================================================================== */
input[type="checkbox"]{display: block}
/* ==========================================================================
Source: read-before-order.twig | inline style block 1
========================================================================== */
/* =========================================================
PIKASMM — Read Before Order
Styling only. Content, routes and form logic are unchanged.
========================================================= */
.read-before-order-page {
padding: 34px 0 70px;
color: var(--text-color, inherit);
}
.rbo-shell {
width: min(100%, 1160px);
margin: 0 auto;
}
/* ---------- Hero ---------- */
.rbo-hero {
position: relative;
overflow: hidden;
margin-bottom: 18px;
padding: 28px 30px;
border-radius: 18px;
background:
radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--mc, #6c5ce7) 22%, transparent) 0, transparent 34%),
var(--second-bg, #fff);
border: 1px solid var(--border-color, rgba(127,127,127,.14));
box-shadow: 0 12px 34px rgba(0,0,0,.08);
}
.rbo-hero::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -55px;
bottom: -85px;
border-radius: 50%;
background: color-mix(in srgb, var(--mc, #6c5ce7) 12%, transparent);
pointer-events: none;
}
.rbo-badge {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 13px;
padding: 7px 11px;
border-radius: 999px;
background: rgba(255, 71, 87, .10);
border: 1px solid rgba(255, 71, 87, .20);
color: #e05260;
font-size: 11px;
line-height: 1;
font-weight: 800;
letter-spacing: .045em;
text-transform: uppercase;
}
.rbo-title {
position: relative;
z-index: 1;
margin: 0;
color: var(--text-color, inherit);
font-size: clamp(28px, 4vw, 40px);
line-height: 1.15;
font-weight: 850;
letter-spacing: -.025em;
}
.rbo-subtitle {
position: relative;
z-index: 1;
max-width: 800px;
margin: 11px 0 0;
color: var(--text-color, inherit);
opacity: .72;
font-size: 14px;
line-height: 1.75;
}
.rbo-quick-actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 18px;
}
.rbo-action,
.rbo-proceed-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 10px 15px;
border-radius: 11px;
border: 1px solid transparent;
background: var(--mc, #6c5ce7);
color: #fff !important;
text-decoration: none !important;
font-size: 13px;
line-height: 1;
font-weight: 750;
box-shadow: 0 8px 20px color-mix(in srgb, var(--mc, #6c5ce7) 22%, transparent);
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background-color .16s ease;
}
.rbo-action:hover,
.rbo-proceed-btn:hover:not(:disabled) {
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 24px color-mix(in srgb, var(--mc, #6c5ce7) 30%, transparent);
}
.rbo-action.secondary {
background: var(--main-bg, rgba(127,127,127,.07));
color: var(--text-color, inherit) !important;
border-color: var(--border-color, rgba(127,127,127,.14));
box-shadow: none;
}
.rbo-action.secondary:hover {
color: var(--text-color, inherit) !important;
border-color: color-mix(in srgb, var(--mc, #6c5ce7) 35%, var(--border-color, rgba(127,127,127,.14)));
}
/* ---------- Accordion cards ---------- */
.rbo-section {
margin: 0 0 12px;
border-radius: 16px;
overflow: hidden;
background: var(--second-bg, #fff);
border: 1px solid var(--border-color, rgba(127,127,127,.13));
box-shadow: 0 7px 20px rgba(0,0,0,.045);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rbo-section:hover {
border-color: color-mix(in srgb, var(--mc, #6c5ce7) 28%, var(--border-color, rgba(127,127,127,.13)));
}
.rbo-section[open] {
border-color: color-mix(in srgb, var(--mc, #6c5ce7) 35%, var(--border-color, rgba(127,127,127,.13)));
box-shadow: 0 10px 28px rgba(0,0,0,.07);
}
.rbo-section summary::-webkit-details-marker {
display: none;
}
.rbo-section-head {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 15px 17px;
border-bottom: 1px solid transparent;
background: transparent;
transition: background-color .18s ease, border-color .18s ease;
}
.rbo-section-head:hover {
background: var(--main-bg, rgba(127,127,127,.045));
}
.rbo-section[open] .rbo-section-head {
border-bottom-color: var(--border-color, rgba(127,127,127,.11));
background: var(--main-bg, rgba(127,127,127,.035));
}
.rbo-section-head-main {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.rbo-icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: color-mix(in srgb, var(--mc, #6c5ce7) 10%, var(--main-bg, transparent));
border: 1px solid color-mix(in srgb, var(--mc, #6c5ce7) 18%, transparent);
color: var(--mc, #6c5ce7);
font-size: 18px;
}
.rbo-section-title {
margin: 0;
color: var(--text-color, inherit);
font-size: 15px;
line-height: 1.4;
font-weight: 800;
}
.rbo-section-note {
margin: 3px 0 0;
color: var(--text-color, inherit);
opacity: .58;
font-size: 12px;
line-height: 1.45;
}
.rbo-toggle {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--main-bg, rgba(127,127,127,.06));
border: 1px solid var(--border-color, rgba(127,127,127,.12));
color: var(--text-color, inherit);
opacity: .8;
transition: transform .2s ease, color .2s ease, background-color .2s ease;
}
.rbo-section[open] .rbo-toggle {
transform: rotate(180deg);
color: var(--mc, #6c5ce7);
background: color-mix(in srgb, var(--mc, #6c5ce7) 9%, var(--main-bg, transparent));
}
.rbo-content {
padding: 17px 18px 19px;
color: var(--text-color, inherit);
font-size: 13px;
line-height: 1.75;
}
.rbo-content p {
margin: 0 0 12px;
}
.rbo-content p:last-child,
.rbo-content ul:last-child {
margin-bottom: 0;
}
.rbo-content ul {
margin: 0;
padding-left: 20px;
}
.rbo-content li + li {
margin-top: 8px;
}
.rbo-content strong {
color: var(--text-color, inherit);
font-weight: 800;
}
/* ---------- Alerts ---------- */
.rbo-alert {
margin: 0 0 14px;
padding: 13px 15px;
border-radius: 12px;
color: var(--text-color, inherit);
font-size: 13px;
line-height: 1.65;
}
.rbo-alert.danger {
background: rgba(255, 71, 87, .09);
border: 1px solid rgba(255, 71, 87, .20);
}
.rbo-alert.danger strong {
color: #e05260;
}
.rbo-alert.warning {
background: rgba(245, 166, 35, .10);
border: 1px solid rgba(245, 166, 35, .24);
}
.rbo-alert.warning strong {
color: #d59024;
}
.rbo-alert.success {
background: rgba(25, 195, 125, .09);
border: 1px solid rgba(25, 195, 125, .22);
}
.rbo-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.rbo-grid .rbo-section {
margin-bottom: 0;
}
.rbo-mini-list li::marker {
color: var(--mc, #6c5ce7);
}
/* ---------- Accept card ---------- */
.rbo-accept-card {
margin-top: 18px;
padding: 20px;
border-radius: 16px;
background: var(--second-bg, #fff);
border: 1px solid rgba(25, 195, 125, .24);
box-shadow: 0 9px 26px rgba(0,0,0,.06);
}
.rbo-accept-card h3 {
margin: 0 0 7px;
color: #32a86d;
font-size: 17px;
line-height: 1.4;
font-weight: 850;
}
.rbo-accept-card p {
margin: 0 0 13px;
color: var(--text-color, inherit);
opacity: .72;
font-size: 13px;
line-height: 1.65;
}
.rbo-accept-check {
display: flex;
align-items: flex-start;
gap: 11px;
margin: 14px 0;
padding: 13px 14px;
border-radius: 12px;
background: rgba(25, 195, 125, .07);
border: 1px solid rgba(25, 195, 125, .16);
color: var(--text-color, inherit);
font-size: 13px;
font-weight: 650;
line-height: 1.55;
cursor: pointer;
}
.rbo-accept-check:hover {
background: rgba(25, 195, 125, .10);
}
.rbo-accept-check input {
width: 18px;
height: 18px;
margin: 1px 0 0;
flex: 0 0 auto;
accent-color: var(--mc, #6c5ce7);
}
.rbo-proceed-btn {
border: 0;
cursor: pointer;
}
.rbo-proceed-btn:disabled {
opacity: .45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ---------- Guest ---------- */
.rbo-guest-card {
width: min(100%, 760px);
margin: 32px auto;
padding: 26px;
border-radius: 18px;
text-align: left;
background: var(--second-bg, #fff);
border: 1px solid var(--border-color, rgba(127,127,127,.13));
box-shadow: 0 12px 34px rgba(0,0,0,.07);
}
/* ---------- Dark theme refinements ---------- */
html.dark .rbo-hero,
html.dark .rbo-section,
html.dark .rbo-accept-card,
html.dark .rbo-guest-card {
box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
html.dark .rbo-action.secondary {
background: rgba(255,255,255,.045);
}
html.dark .rbo-section-head:hover,
html.dark .rbo-section[open] .rbo-section-head {
background: rgba(255,255,255,.025);
}
/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
.read-before-order-page {
padding-top: 24px;
}
.rbo-grid {
grid-template-columns: 1fr;
}
.rbo-hero {
padding: 24px 20px;
}
}
@media (max-width: 575.98px) {
.read-before-order-page {
padding: 16px 0 46px;
}
.rbo-hero {
padding: 20px 16px;
border-radius: 14px;
margin-bottom: 12px;
}
.rbo-title {
font-size: 27px;
}
.rbo-subtitle {
font-size: 13px;
line-height: 1.65;
}
.rbo-quick-actions {
display: grid;
grid-template-columns: 1fr;
}
.rbo-action,
.rbo-proceed-btn {
width: 100%;
}
.rbo-section {
border-radius: 14px;
}
.rbo-section-head {
align-items: flex-start;
padding: 13px 14px;
gap: 10px;
}
.rbo-section-head-main {
gap: 10px;
}
.rbo-icon {
width: 36px;
height: 36px;
flex-basis: 36px;
border-radius: 10px;
font-size: 16px;
}
.rbo-toggle {
width: 30px;
height: 30px;
flex-basis: 30px;
}
.rbo-section-title {
font-size: 14px;
}
.rbo-section-note {
font-size: 11px;
}
.rbo-content {
padding: 15px 14px 17px;
}
.rbo-accept-card,
.rbo-guest-card {
padding: 16px;
border-radius: 14px;
}
}
/* ==========================================================================
Source: read-before-order_styling_fixed.twig | inline style block 1
========================================================================== */
/* =========================================================
PIKASMM — Read Before Order
Styling only. Content, routes and form logic are unchanged.
========================================================= */
.read-before-order-page {
padding: 34px 0 70px;
color: var(--text-color, inherit);
}
.rbo-shell {
width: min(100%, 1160px);
margin: 0 auto;
}
/* ---------- Hero ---------- */
.rbo-hero {
position: relative;
overflow: hidden;
margin-bottom: 18px;
padding: 28px 30px;
border-radius: 18px;
background:
radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--mc, #6c5ce7) 22%, transparent) 0, transparent 34%),
var(--second-bg, #fff);
border: 1px solid var(--border-color, rgba(127,127,127,.14));
box-shadow: 0 12px 34px rgba(0,0,0,.08);
}
.rbo-hero::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -55px;
bottom: -85px;
border-radius: 50%;
background: color-mix(in srgb, var(--mc, #6c5ce7) 12%, transparent);
pointer-events: none;
}
.rbo-badge {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 13px;
padding: 7px 11px;
border-radius: 999px;
background: rgba(255, 71, 87, .10);
border: 1px solid rgba(255, 71, 87, .20);
color: #e05260;
font-size: 11px;
line-height: 1;
font-weight: 800;
letter-spacing: .045em;
text-transform: uppercase;
}
.rbo-title {
position: relative;
z-index: 1;
margin: 0;
color: var(--text-color, inherit);
font-size: clamp(28px, 4vw, 40px);
line-height: 1.15;
font-weight: 850;
letter-spacing: -.025em;
}
.rbo-subtitle {
position: relative;
z-index: 1;
max-width: 800px;
margin: 11px 0 0;
color: var(--text-color, inherit);
opacity: .72;
font-size: 14px;
line-height: 1.75;
}
.rbo-quick-actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 18px;
}
.rbo-action,
.rbo-proceed-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 10px 15px;
border-radius: 11px;
border: 1px solid transparent;
background: var(--mc, #6c5ce7);
color: #fff !important;
text-decoration: none !important;
font-size: 13px;
line-height: 1;
font-weight: 750;
box-shadow: 0 8px 20px color-mix(in srgb, var(--mc, #6c5ce7) 22%, transparent);
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background-color .16s ease;
}
.rbo-action:hover,
.rbo-proceed-btn:hover:not(:disabled) {
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 24px color-mix(in srgb, var(--mc, #6c5ce7) 30%, transparent);
}
.rbo-action.secondary {
background: var(--main-bg, rgba(127,127,127,.07));
color: var(--text-color, inherit) !important;
border-color: var(--border-color, rgba(127,127,127,.14));
box-shadow: none;
}
.rbo-action.secondary:hover {
color: var(--text-color, inherit) !important;
border-color: color-mix(in srgb, var(--mc, #6c5ce7) 35%, var(--border-color, rgba(127,127,127,.14)));
}
/* ---------- Accordion cards ---------- */
.rbo-section {
margin: 0 0 12px;
border-radius: 16px;
overflow: hidden;
background: var(--second-bg, #fff);
border: 1px solid var(--border-color, rgba(127,127,127,.13));
box-shadow: 0 7px 20px rgba(0,0,0,.045);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rbo-section:hover {
border-color: color-mix(in srgb, var(--mc, #6c5ce7) 28%, var(--border-color, rgba(127,127,127,.13)));
}
.rbo-section[open] {
border-color: color-mix(in srgb, var(--mc, #6c5ce7) 35%, var(--border-color, rgba(127,127,127,.13)));
box-shadow: 0 10px 28px rgba(0,0,0,.07);
}
.rbo-section summary::-webkit-details-marker {
display: none;
}
.rbo-section-head {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 15px 17px;
border-bottom: 1px solid transparent;
background: transparent;
transition: background-color .18s ease, border-color .18s ease;
}
.rbo-section-head:hover {
background: var(--main-bg, rgba(127,127,127,.045));
}
.rbo-section[open] .rbo-section-head {
border-bottom-color: var(--border-color, rgba(127,127,127,.11));
background: var(--main-bg, rgba(127,127,127,.035));
}
.rbo-section-head-main {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.rbo-icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: color-mix(in srgb, var(--mc, #6c5ce7) 10%, var(--main-bg, transparent));
border: 1px solid color-mix(in srgb, var(--mc, #6c5ce7) 18%, transparent);
color: var(--mc, #6c5ce7);
font-size: 18px;
}
.rbo-section-title {
margin: 0;
color: var(--text-color, inherit);
font-size: 15px;
line-height: 1.4;
font-weight: 800;
}
.rbo-section-note {
margin: 3px 0 0;
color: var(--text-color, inherit);
opacity: .58;
font-size: 12px;
line-height: 1.45;
}
.rbo-toggle {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--main-bg, rgba(127,127,127,.06));
border: 1px solid var(--border-color, rgba(127,127,127,.12));
color: var(--text-color, inherit);
opacity: .8;
transition: transform .2s ease, color .2s ease, background-color .2s ease;
}
.rbo-section[open] .rbo-toggle {
transform: rotate(180deg);
color: var(--mc, #6c5ce7);
background: color-mix(in srgb, var(--mc, #6c5ce7) 9%, var(--main-bg, transparent));
}
.rbo-content {
padding: 17px 18px 19px;
color: var(--text-color, inherit);
font-size: 13px;
line-height: 1.75;
}
.rbo-content p {
margin: 0 0 12px;
}
.rbo-content p:last-child,
.rbo-content ul:last-child {
margin-bottom: 0;
}
.rbo-content ul {
margin: 0;
padding-left: 20px;
}
.rbo-content li + li {
margin-top: 8px;
}
.rbo-content strong {
color: var(--text-color, inherit);
font-weight: 800;
}
/* ---------- Alerts ---------- */
.rbo-alert {
margin: 0 0 14px;
padding: 13px 15px;
border-radius: 12px;
color: var(--text-color, inherit);
font-size: 13px;
line-height: 1.65;
}
.rbo-alert.danger {
background: rgba(255, 71, 87, .09);
border: 1px solid rgba(255, 71, 87, .20);
}
.rbo-alert.danger strong {
color: #e05260;
}
.rbo-alert.warning {
background: rgba(245, 166, 35, .10);
border: 1px solid rgba(245, 166, 35, .24);
}
.rbo-alert.warning strong {
color: #d59024;
}
.rbo-alert.success {
background: rgba(25, 195, 125, .09);
border: 1px solid rgba(25, 195, 125, .22);
}
.rbo-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.rbo-grid .rbo-section {
margin-bottom: 0;
}
.rbo-mini-list li::marker {
color: var(--mc, #6c5ce7);
}
/* ---------- Accept card ---------- */
.rbo-accept-card {
margin-top: 18px;
padding: 20px;
border-radius: 16px;
background: var(--second-bg, #fff);
border: 1px solid rgba(25, 195, 125, .24);
box-shadow: 0 9px 26px rgba(0,0,0,.06);
}
.rbo-accept-card h3 {
margin: 0 0 7px;
color: #32a86d;
font-size: 17px;
line-height: 1.4;
font-weight: 850;
}
.rbo-accept-card p {
margin: 0 0 13px;
color: var(--text-color, inherit);
opacity: .72;
font-size: 13px;
line-height: 1.65;
}
.rbo-accept-check {
display: flex;
align-items: flex-start;
gap: 11px;
margin: 14px 0;
padding: 13px 14px;
border-radius: 12px;
background: rgba(25, 195, 125, .07);
border: 1px solid rgba(25, 195, 125, .16);
color: var(--text-color, inherit);
font-size: 13px;
font-weight: 650;
line-height: 1.55;
cursor: pointer;
}
.rbo-accept-check:hover {
background: rgba(25, 195, 125, .10);
}
.rbo-accept-check input {
width: 18px;
height: 18px;
margin: 1px 0 0;
flex: 0 0 auto;
accent-color: var(--mc, #6c5ce7);
}
.rbo-proceed-btn {
border: 0;
cursor: pointer;
}
.rbo-proceed-btn:disabled {
opacity: .45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ---------- Guest ---------- */
.rbo-guest-card {
width: min(100%, 760px);
margin: 32px auto;
padding: 26px;
border-radius: 18px;
text-align: left;
background: var(--second-bg, #fff);
border: 1px solid var(--border-color, rgba(127,127,127,.13));
box-shadow: 0 12px 34px rgba(0,0,0,.07);
}
/* ---------- Dark theme refinements ---------- */
html.dark .rbo-hero,
html.dark .rbo-section,
html.dark .rbo-accept-card,
html.dark .rbo-guest-card {
box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
html.dark .rbo-action.secondary {
background: rgba(255,255,255,.045);
}
html.dark .rbo-section-head:hover,
html.dark .rbo-section[open] .rbo-section-head {
background: rgba(255,255,255,.025);
}
/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
.read-before-order-page {
padding-top: 24px;
}
.rbo-grid {
grid-template-columns: 1fr;
}
.rbo-hero {
padding: 24px 20px;
}
}
@media (max-width: 575.98px) {
.read-before-order-page {
padding: 16px 0 46px;
}
.rbo-hero {
padding: 20px 16px;
border-radius: 14px;
margin-bottom: 12px;
}
.rbo-title {
font-size: 27px;
}
.rbo-subtitle {
font-size: 13px;
line-height: 1.65;
}
.rbo-quick-actions {
display: grid;
grid-template-columns: 1fr;
}
.rbo-action,
.rbo-proceed-btn {
width: 100%;
}
.rbo-section {
border-radius: 14px;
}
.rbo-section-head {
align-items: flex-start;
padding: 13px 14px;
gap: 10px;
}
.rbo-section-head-main {
gap: 10px;
}
.rbo-icon {
width: 36px;
height: 36px;
flex-basis: 36px;
border-radius: 10px;
font-size: 16px;
}
.rbo-toggle {
width: 30px;
height: 30px;
flex-basis: 30px;
}
.rbo-section-title {
font-size: 14px;
}
.rbo-section-note {
font-size: 11px;
}
.rbo-content {
padding: 15px 14px 17px;
}
.rbo-accept-card,
.rbo-guest-card {
padding: 16px;
border-radius: 14px;
}
}
/* ==========================================================================
Source: recommended-services.twig | inline style block 1
========================================================================== */
.vcomp-speed-select{min-width:160px;border-radius:12px;height:44px;}
.vcomp-speed-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;margin-left:8px;vertical-align:middle;}
.vcomp-speed-fast{background:rgba(34,197,94,.12);color:#15803d;border:1px solid rgba(34,197,94,.22);}
.vcomp-speed-slow{background:rgba(239,68,68,.12);color:#b91c1c;border:1px solid rgba(239,68,68,.22);}
.vcomp-speed-unknown{background:rgba(148,163,184,.12);color:var(--color-5);border:1px solid rgba(148,163,184,.22);}
.vcomp-time-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;width:100%;}
.vcomp-time-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.08);font-size:12px;font-weight:600;}
.vcomp-time-chip small{font-weight:500;color:var(--color-5);}
.vcomp-total-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;background:rgba(59,130,246,.10);color:#1d4ed8;border:1px solid rgba(59,130,246,.18);font-weight:800;}
.vrec-score-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:14px;background:linear-gradient(135deg,rgba(168,85,247,.20),rgba(59,130,246,.12));color:var(--color-5);border:1px solid rgba(168,85,247,.35);font-weight:950;box-shadow:0 6px 18px rgba(168,85,247,.16);}
.vrec-score-badge .score-num{font-size:15px;line-height:1;}
.vrec-score-badge .score-text{font-size:10px;text-transform:uppercase;letter-spacing:.05em;opacity:.78;}
.vrec-status-stack{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;}
.vrec-reco-score-inline{display:inline-flex;align-items:center;margin-left:8px;padding:3px 8px;border-radius:999px;background:var(--color-8);border:1px solid var(--color-6);;color:var(--color-5);font-size:11px;font-weight:950;line-height:1;}
.vrec-score-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.30);color:#d8b4fe;font-size:12px;font-weight:950;}
.vrec-card-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;width:100%;}
.vrec-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.08);color:#dbeafe;}
.vrec-badge-fast{background:var(--color-8);border-color:rgba(34,197,94,.28);color:#86efac;}
.vrec-badge-reliable{background:var(--color-8);border-color:rgba(59,130,246,.28);color:#93c5fd;}
.vrec-badge-hot{background:var(--color-8);border-color:rgba(249,115,22,.30);color:#fdba74;}
.vrec-badge-newfast{background:var(--color-8);border-color:rgba(168,85,247,.32);color:#c6bb53d6;}
.vrec-recent-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:12px;background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.20);color:#86efac;font-weight:850;}
.vcomp-platform-buttons{display:flex!important;flex-wrap:wrap;gap:9px;align-items:center;width:100%;}
.vcomp-platform-btn{display:inline-flex!important;align-items:center;justify-content:center;border:1px solid var(--color-6);;background:var(--color-2);;color:var(--color-5);border-radius:999px;padding:10px 15px;font-size:13px;font-weight:900;line-height:1;min-height:40px;box-shadow:0 3px 10px rgba(0,0,0,.12);transition:all .15s ease;cursor:pointer;text-decoration:none;}
.vcomp-platform-btn:hover{transform:translateY(-1px);border-color:rgba(168,85,247,.55);color:#fff;background:rgba(168,85,247,.18);text-decoration:none;}
.vcomp-platform-btn.active{background:linear-gradient(135deg,var(--primary-color,#a855f7),#7c3aed);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(168,85,247,.30);}
.vcomp-platform-title{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--color-5);margin-right:2px;}
.vcomp-reco-buttons{display:flex!important;flex-wrap:wrap;gap:9px;align-items:center;width:100%;}
.vcomp-reco-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;border:1px solid var(--color-7);;background:var(--color-8);;color:var(--color-6);;border-radius:999px;padding:10px 15px;font-size:13px;font-weight:900;line-height:1;min-height:40px;box-shadow:0 3px 10px rgba(0,0,0,.12);transition:all .15s ease;cursor:pointer;text-decoration:none;}
.vcomp-reco-btn:hover{transform:translateY(-1px);border-color:rgba(34,197,94,.55);color:#fff;background:rgba(34,197,94,.18);text-decoration:none;}
.vcomp-reco-btn.active{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(34,197,94,.26);}
.vcomp-modal-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.vcomp-modal-btn{display:inline-flex;align-items:center;gap:7px;border-radius:12px;font-weight:800;}
/* Horizontal card info layout: Total Orders + Reliability Badge + Recent Orders */
.vrec-card-horizontal-info{
display:grid!important;
grid-template-columns:minmax(180px,.9fr) minmax(260px,1.35fr) minmax(220px,1fr)!important;
gap:12px!important;
width:100%!important;
align-items:stretch!important;
}
.vrec-info-panel{
display:flex!important;
align-items:center!important;
gap:10px!important;
min-width:0!important;
padding:12px 14px!important;
border:1px solid rgba(148,163,184,.14)!important;
border-radius:16px!important;
background:rgba(15,23,42,.14)!important;
}
.vrec-info-label{
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
flex:0 0 auto!important;
font-size:12px!important;
font-weight:950!important;
color:var(--color-6);!important;
white-space:nowrap!important;
}
.vrec-info-value{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;flex:1 1 auto!important;}
.vrec-info-badges{align-items:flex-start!important;}
.vrec-info-badges .vrec-info-value{align-items:flex-start!important;}
.vrec-info-badges .vrec-card-badges{margin-top:0!important;width:auto!important;flex:1 1 auto!important;}
.vrec-info-actions{justify-content:space-between!important;}
.vrec-info-actions .vcomp-modal-actions{margin:0!important;flex:0 0 auto!important;}
.vrec-info-actions .vcomp-modal-actions .btn{white-space:nowrap!important;}
.vrec-info-actions small{display:none!important;}
@media (max-width: 991.98px){
.vrec-card-horizontal-info{grid-template-columns:1fr!important;gap:9px!important;}
.vrec-info-panel{align-items:flex-start!important;justify-content:flex-start!important;flex-wrap:wrap!important;padding:11px!important;}
.vrec-info-actions .vcomp-modal-actions{width:100%!important;}
.vrec-info-actions .vcomp-modal-actions .btn{width:100%!important;justify-content:center!important;}
}
@media(max-width:768px){.vcomp-speed-select{width:100%;min-width:100%;}.vcomp-platform-buttons{gap:6px}.vcomp-platform-btn{font-size:12px;padding:8px 11px;}}
/* Recommended Services: platform buttons only. Hide any old platform dropdown/select accidentally left by cached theme fragments. */
.recommended-services-filters .sfc-item .dropdown.ui-dropdown,
.recommended-services-filters select[name="platform"],
.recommended-services-filters .vcomp-speed-select{display:none!important;}
/* Recommended Services desktop UI placement fix */
.recommended-services-filters{
display:grid!important;
grid-template-columns:minmax(280px,1fr) auto auto auto!important;
gap:12px!important;
align-items:end!important;
width:100%!important;
padding:16px!important;
margin:4px 0 18px 0!important;
border:1px solid rgba(148,163,184,.16)!important;
border-radius:20px!important;
background:var(--color-1);!important;
overflow:visible!important;
}
.recommended-services-filters .sf-item{margin:0!important;min-width:0!important;}
.recommended-services-filters .search{grid-column:1 / 2!important;width:100%!important;}
.recommended-services-filters .search-box{width:100%!important;margin:0!important;}
.vrec-reco-section,.vrec-platform-section{grid-column:1 / -1!important;width:100%!important;}
.vrec-fast-section{grid-column:1 / 2!important;align-self:center!important;}
.vrec-apply-action,.vrec-clear-action{align-self:center!important;}
.vrec-apply-action .btn,.vrec-clear-action .btn{height:44px!important;min-width:130px!important;border-radius:12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.vcomp-reco-buttons,.vcomp-platform-buttons{
padding:10px!important;
border:1px solid rgba(148,163,184,.14)!important;
border-radius:16px!important;
background:var(--color-8);!important;
}
.vcomp-platform-title{width:100%!important;margin:0 0 3px 0!important;}
.vcomp-reco-btn,.vcomp-platform-btn{white-space:nowrap!important;}
.vrec-filter-note{margin-top:6px!important;line-height:1.35!important;}
@media (min-width:768px) and (max-width:1100px){
.recommended-services-filters{grid-template-columns:1fr 1fr!important;align-items:stretch!important;}
.recommended-services-filters .search,.vrec-reco-section,.vrec-platform-section{grid-column:1 / -1!important;}
.vrec-fast-section,.vrec-apply-action,.vrec-clear-action{grid-column:auto!important;}
.vrec-apply-action .btn,.vrec-clear-action .btn{width:100%!important;}
}
/* Recommended Services mobile responsiveness fix */
@media (max-width: 767.98px){
.order_page .container-fluid{padding-left:10px!important;padding-right:10px!important;max-width:100%!important;overflow-x:hidden!important;}
.order_page .row{margin-left:0!important;margin-right:0!important;}
.order_page [class*="col-"]{padding-left:0!important;padding-right:0!important;}
/* Header + summary counters */
.order_page .d-flex.align-items-center.justify-content-between.mb-4{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important;margin-bottom:16px!important;}
.order_page .d-flex.align-items-center.justify-content-between.mb-4 > div:first-child{width:100%!important;min-width:0!important;}
.order_page .d-flex.align-items-center.justify-content-between.mb-4 h4{font-size:20px!important;line-height:1.25!important;margin-bottom:4px!important;}
.order_page .d-flex.align-items-center.justify-content-between.mb-4 small{display:block!important;font-size:12px!important;line-height:1.35!important;}
.order_page .d-flex.align-items-center.gap-4{width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;align-items:stretch!important;}
.order_page .d-flex.align-items-center.gap-4 .text-left{border:1px solid rgba(148,163,184,.18)!important;border-radius:12px!important;background:rgba(15,23,42,.22)!important;padding:8px 4px!important;min-width:0!important;}
.order_page .d-flex.align-items-center.gap-4 .small{font-size:9px!important;line-height:1.15!important;white-space:normal!important;}
.order_page .d-flex.align-items-center.gap-4 .font-weight-bold{font-size:13px!important;line-height:1.2!important;word-break:break-word!important;}
/* Filters */
.recommended-services-filters{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;width:100%!important;overflow:visible!important;}
.recommended-services-filters .sf-item,
.recommended-services-filters .sfc-item{width:100%!important;flex:1 1 100%!important;max-width:100%!important;margin:0!important;}
.recommended-services-filters .search{width:100%!important;order:1!important;}
.recommended-services-filters .search-box{width:100%!important;max-width:100%!important;height:46px!important;display:flex!important;}
.recommended-services-filters .search-box--input{width:100%!important;min-width:0!important;}
.recommended-services-filters .form-control{width:100%!important;max-width:100%!important;height:44px!important;}
.recommended-services-filters .btn{width:100%!important;min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:10px!important;}
.vrec-reco-section,.vrec-platform-section,.vrec-fast-section,.vrec-apply-action,.vrec-clear-action{grid-column:1/-1!important;width:100%!important;}
.recommended-services-filters .vcomp-speed-badge{width:100%!important;height:42px!important;justify-content:center!important;margin:0!important;}
.recommended-services-filters small.text-muted{font-size:11px!important;line-height:1.35!important;}
/* Platform buttons */
.vcomp-platform-buttons,.vcomp-reco-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;align-items:stretch!important;}
.vcomp-platform-title{grid-column:1/-1!important;margin:0 0 2px 0!important;font-size:11px!important;}
.vcomp-platform-btn,.vcomp-reco-btn{width:100%!important;min-width:0!important;min-height:38px!important;padding:9px 7px!important;font-size:12px!important;line-height:1.1!important;white-space:normal!important;text-align: left!important;box-shadow:none!important;}
/* Service card */
.page,.page-body{overflow:visible!important;}
.orders-wrapper{width:100%!important;margin:0 0 14px 0!important;}
.orders-card{width:100%!important;max-width:100%!important;border-radius:16px!important;overflow:hidden!important;margin:0!important;}
.orders-card .oc-block{display:block!important;width:100%!important;padding:12px!important;border-bottom:1px solid rgba(148,163,184,.12)!important;}
.orders-card .oc-block:last-child{border-bottom:0!important;}
.orders-card .oc-first{display:block!important;width:100%!important;max-width:100%!important;text-align:left!important;min-width:0!important;}
.orders-card .oc-id{display:inline-flex!important;width:auto!important;max-width:100%!important;margin:0 0 8px 0!important;font-size:12px!important;white-space:normal!important;}
.orders-card .oc-name{display:block!important;width:100%!important;max-width:100%!important;font-size:12.5px!important;line-height:1.35!important;text-align:left!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important;}
.orders-card .oc-last{display:flex!important;width:100%!important;justify-content:flex-start!important;margin-top:10px!important;}
.orders-card .oc-status{display:inline-flex!important;width:auto!important;max-width:100%!important;min-width:0!important;padding:6px 10px!important;font-size:11px!important;white-space:normal!important;}
.orders-card .oc-alt-first{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;width:100%!important;max-width:100%!important;}
.orders-card .oc-item{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;min-width:0!important;}
.orders-card .oc-item > span{display:flex!important;width:100%!important;max-width:100%!important;align-items:flex-start!important;gap:8px!important;min-width:0!important;}
.orders-card .oc-item .icon{flex:0 0 18px!important;width:18px!important;min-width:18px!important;margin:1px 0 0 0!important;text-align: left!important;}
.orders-card .oc-item .text{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;font-size:12px!important;line-height:1.35!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:anywhere!important;}
.orders-card .oc-item .primary-color{display:inline!important;}
.vcomp-total-badge,.vcomp-speed-badge{margin:5px 0 0 0!important;padding:5px 9px!important;font-size:11px!important;white-space:normal!important;}
.vrec-score-badge,.vrec-recent-badge{margin:5px 0 0 0!important;padding:6px 9px!important;font-size:11px!important;white-space:normal!important;}
.vrec-card-badges{gap:6px!important;margin-top:6px!important;}
.vrec-badge{font-size:11px!important;padding:6px 8px!important;}
.vrec-status-stack{justify-content:flex-start!important;width:100%!important;margin-top:8px!important;}
.vrec-reco-score-inline{margin-left:6px!important;padding:3px 7px!important;font-size:10.5px!important;}
/* Recent Orders button and Create Order button */
.vcomp-modal-actions{display:flex!important;flex-direction:column!important;gap:6px!important;width:100%!important;align-items:stretch!important;margin-top:8px!important;}
.vcomp-modal-actions .btn,
.orders-card .btn-big-primary{display:flex!important;width:100%!important;min-height:44px!important;height:auto!important;align-items:center!important;justify-content:center!important;text-align: left!important;white-space:normal!important;line-height:1.2!important;padding:11px 10px!important;border-radius:12px!important;}
.vcomp-modal-actions small{display:block!important;width:100%!important;text-align:left!important;font-size:10.5px!important;line-height:1.35!important;margin:0!important;}
/* Pagination */
.pagination{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:5px!important;padding-left:0!important;}
.pagination li{margin:0!important;}
/* Keep floating bottom nav from covering buttons */
body{padding-bottom:88px!important;overflow-x:hidden!important;}
}
@media (max-width: 380px){
.vcomp-platform-buttons,.vcomp-reco-buttons{grid-template-columns:1fr!important;}
.order_page .d-flex.align-items-center.gap-4{grid-template-columns:1fr!important;}
}
/* Recent Complete popup mobile fix */
@media (max-width: 767.98px){
#rcModal > div{width:96vw!important;max-width:96vw!important;max-height:84vh!important;border-radius:16px!important;}
#rcBody{padding:12px!important;}
#rcBody > div[style*="display:flex"]{display:block!important;}
#rcBody div[style*="max-width:calc(100% - 120px)"]{max-width:100%!important;width:100%!important;}
#rcBody div[style*="width:110px"]{width:100%!important;align-items:flex-start!important;margin-top:8px!important;}
}
/* Badge explanation card at top of Recommended Services */
.vrec-badge-guide{
margin:0 0 16px 0!important;
padding:16px!important;
border:1px solid rgba(148,163,184,.16)!important;
border-radius:20px!important;
background:var(--color-1);!important;
box-shadow:0 10px 28px rgba(0,0,0,.10)!important;
}
.vrec-badge-guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.vrec-badge-guide-title{display:flex;align-items:center;gap:8px;font-weight:950;font-size:15px;color:var(--color-6);;}
.vrec-badge-guide-sub{font-size:12px;color:var(--color-5);line-height:1.4;margin-top:4px;}
.vrec-badge-guide-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.vrec-badge-guide-item{padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:var(--color-8);;min-width:0;}
.vrec-badge-guide-item .vrec-badge{margin-bottom:7px;}
.vrec-badge-guide-item p{margin:0;font-size:11.5px;line-height:1.35;color:var(--color-5);;}
.vrec-badge-guide-formula{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--color-8);border:1px solid rgba(168,85,247,.25);color:#d8b4fe;font-size:12px;font-weight:900;white-space:nowrap;}
@media(max-width:1100px){.vrec-badge-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.vrec-badge-guide-head{display:block;}.vrec-badge-guide-formula{margin-top:10px;white-space:normal;}}
@media(max-width:767.98px){.vrec-badge-guide{padding:12px!important;border-radius:16px!important;margin-bottom:12px!important;}.vrec-badge-guide-grid{grid-template-columns:1fr!important;gap:8px!important;}.vrec-badge-guide-title{font-size:14px!important;}.vrec-badge-guide-sub{font-size:11.5px!important;}.vrec-badge-guide-item{padding:10px!important;}.vrec-badge-guide-item p{font-size:11px!important;}.vrec-badge-guide-formula{width:100%;justify-content:center;text-align: left;}}
.vrec-copy-id-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;}
.vrec-copy-id-btn.vrec-copied{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important;}
@media(max-width:768px){.vrec-copy-id-btn{width:100%;min-height:44px;}}
/* ==========================================================================
Source: reviews.twig | inline style block 1
========================================================================== */
/* =========================================================
Sidebar + fixed-header guard for TSM layouts
This page is sometimes rendered under the fixed left sidebar
and under the fixed topbar. These variables are updated by JS.
========================================================= */
:root {
--reviews-sidebar-offset: 0px;
--reviews-topbar-offset: 88px;
}
html, body {
max-width: 100%;
overflow-x: hidden !important;
}
@media (min-width: 992px) {
.wrapper-content {
margin-left: var(--reviews-sidebar-offset) !important;
width: calc(100% - var(--reviews-sidebar-offset)) !important;
max-width: calc(100% - var(--reviews-sidebar-offset)) !important;
transition: margin-left .22s ease, width .22s ease, max-width .22s ease;
}
.wrapper-content__body,
#block_93,
.addfunds-block {
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 991px) {
.wrapper-content {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* =========================================================
TSM Reviews Page UI Fix
- fixes cut/hidden layout beside sidebar
- dark theme cards instead of huge white blocks
- safe custom modal, no Bootstrap JS dependency
========================================================= */
.wrapper-content,
.wrapper-content__body,
#block_93,
.addfunds-block {
overflow: visible !important;
}
#reviewsPage,
#reviewsPage * {
box-sizing: border-box;
}
#reviewsPage {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: calc(var(--reviews-topbar-offset) + 18px) clamp(14px, 2.2vw, 32px) 38px !important;
overflow-x: hidden !important;
color: #eaf1ff;
}
#reviewsPage .reviews-shell {
width: 100%;
max-width: none;
margin: 0 auto;
}
#reviewsPage .reviews-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 18px;
padding: 18px 20px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(139, 92, 246, .20), rgba(14, 165, 233, .08));
border: 1px solid rgba(167, 139, 250, .22);
box-shadow: 0 18px 48px rgba(0, 0, 0, .20);
}
#reviewsPage .reviews-hero h2 {
margin: 0;
font-size: clamp(20px, 2vw, 28px);
line-height: 1.2;
font-weight: 900;
color: #ffffff;
}
#reviewsPage .reviews-hero p {
margin: 5px 0 0;
color: #aebddb;
font-size: 14px;
line-height: 1.45;
}
#reviewsPage .reviews-layout {
display: grid;
grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
gap: 20px;
align-items: start;
width: 100%;
min-width: 0;
}
#reviewsPage .reviews-full {
grid-column: 1 / -1;
}
#reviewsPage .reviews-panel {
position: relative;
width: 100%;
min-width: 0;
border-radius: 22px;
padding: 18px;
background: rgba(17, 28, 45, .94);
border: 1px solid rgba(148, 163, 184, .16);
box-shadow: 0 20px 55px rgba(0, 0, 0, .24);
overflow: hidden;
}
#reviewsPage .reviews-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at top right, rgba(168, 85, 247, .18), transparent 34%);
}
#reviewsPage .reviews-panel > * {
position: relative;
z-index: 1;
}
#reviewsPage .reviews-section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
#reviewsPage .reviews-section-title h3 {
margin: 0;
font-size: 18px;
line-height: 1.2;
font-weight: 900;
color: #ffffff;
}
#reviewsPage .review-count-pill,
#reviewsPage .review-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 30px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
color: #dbeafe;
background: rgba(96, 165, 250, .12);
border: 1px solid rgba(147, 197, 253, .22);
white-space: nowrap;
}
#reviewsPage .review-status-published {
color: #bbf7d0;
background: rgba(34, 197, 94, .12);
border-color: rgba(34, 197, 94, .24);
}
#reviewsPage .review-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 11px 18px;
border-radius: 999px;
border: 0 !important;
cursor: pointer;
font-weight: 900;
line-height: 1;
color: #fff !important;
text-decoration: none !important;
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
box-shadow: 0 14px 30px rgba(124, 58, 237, .32);
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
#reviewsPage .review-btn:hover,
#reviewsPage .review-btn:focus {
transform: translateY(-1px);
opacity: .96;
outline: none;
color: #fff !important;
box-shadow: 0 18px 38px rgba(124, 58, 237, .44);
}
#reviewsPage .review-btn-danger {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
box-shadow: 0 14px 28px rgba(239, 68, 68, .24);
}
#reviewsPage .review-btn-small {
min-height: 36px;
padding: 9px 13px;
font-size: 13px;
}
#reviewsPage .review-alert {
width: 100%;
margin: 12px 0 0;
padding: 13px 14px;
border-radius: 16px;
line-height: 1.45;
overflow-wrap: anywhere;
color: #dbeafe;
background: rgba(14, 165, 233, .12);
border: 1px solid rgba(56, 189, 248, .22);
}
#reviewsPage .review-alert-danger {
color: #fecaca;
background: rgba(239, 68, 68, .12);
border-color: rgba(248, 113, 113, .25);
}
#reviewsPage .review-alert-success {
color: #bbf7d0;
background: rgba(34, 197, 94, .12);
border-color: rgba(74, 222, 128, .25);
}
#reviewsPage .review-card {
width: 100%;
min-width: 0;
margin: 12px 0 0;
border-radius: 18px;
overflow: hidden;
background: rgba(10, 18, 32, .82);
color: #eaf1ff;
border: 1px solid rgba(148, 163, 184, .16);
box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}
#reviewsPage .review-card:first-child {
margin-top: 0;
}
#reviewsPage .review-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 16px;
background: rgba(15, 23, 42, .64);
border-bottom: 1px solid rgba(148, 163, 184, .12);
}
#reviewsPage .review-user-line {
min-width: 0;
}
#reviewsPage .review-card-header h5 {
margin: 0;
font-size: 17px;
line-height: 1.25;
font-weight: 900;
color: #ffffff;
overflow-wrap: anywhere;
}
#reviewsPage .review-date {
flex: 0 0 auto;
font-size: 13px;
color: #9fb0cf;
white-space: nowrap;
}
#reviewsPage .review-card-body {
padding: 16px;
}
#reviewsPage .review-label {
margin: 0 0 7px;
font-size: 13px;
font-weight: 900;
color: #93a7c9;
}
#reviewsPage .rating {
display: flex;
align-items: center;
gap: 3px;
min-height: 24px;
}
#reviewsPage .rating .fa-star,
#reviewsPage .reviewStar {
color: rgba(148, 163, 184, .42);
}
#reviewsPage .rating .checked,
#reviewsPage .reviewStar.checked,
#reviewsPage .reviewStar.text-warning,
#addReviewModal .reviewStar.checked,
#addReviewModal .reviewStar.text-warning {
color: #f59e0b !important;
}
#reviewsPage .review-desc,
#reviewsPage .review-reply {
margin: 11px 0 0;
line-height: 1.58;
color: #f8fbff;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
#reviewsPage .review-reply-box {
margin-top: 14px;
padding: 12px;
border-radius: 14px;
background: rgba(124, 58, 237, .10);
border: 1px solid rgba(167, 139, 250, .18);
}
#reviewsPage .review-meta-row {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 14px;
font-size: 13px;
color: #c7d2e7;
}
#reviewsPage .review-meta-row strong {
color: #ffffff;
font-weight: 900;
}
#reviewsPage .reviews-list {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
max-height: 610px;
overflow-y: auto;
padding-right: 7px;
}
#reviewsPage .reviews-list .review-card {
margin-top: 0;
}
#reviewsPage .reviews-list::-webkit-scrollbar {
width: 6px;
}
#reviewsPage .reviews-list::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(167, 139, 250, .55);
}
#reviewsPage .reviews-grid-guest {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-height: none;
overflow: visible;
padding-right: 0;
}
#reviewsPage .content-text-card {
padding: 16px;
border-radius: 18px;
background: rgba(17, 28, 45, .94);
color: #eaf1ff;
border: 1px solid rgba(148, 163, 184, .16);
box-shadow: 0 14px 38px rgba(0,0,0,.18);
}
/* Custom modal - avoids Bootstrap conflict */
#addReviewModal.tsm-review-modal {
position: fixed;
inset: 0;
z-index: 999999 !important;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
#addReviewModal.tsm-review-modal.is-open {
display: flex !important;
}
#addReviewModal .tsm-review-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 23, .72);
backdrop-filter: blur(8px);
}
#addReviewModal .tsm-review-dialog {
position: relative;
z-index: 2;
width: min(100%, 520px);
max-height: calc(100vh - 40px);
overflow-y: auto;
border-radius: 24px;
background: #111c2d;
color: #eaf1ff;
border: 1px solid rgba(167, 139, 250, .20);
box-shadow: 0 32px 90px rgba(0,0,0,.55);
}
#addReviewModal .tsm-review-modal-header,
#addReviewModal .tsm-review-modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 17px 19px;
border-bottom: 1px solid rgba(148, 163, 184, .14);
}
#addReviewModal .tsm-review-modal-footer {
justify-content: flex-end;
border-top: 1px solid rgba(148, 163, 184, .14);
border-bottom: 0;
flex-wrap: wrap;
}
#addReviewModal .tsm-review-modal-body {
padding: 19px;
}
#addReviewModal .tsm-review-modal-title {
margin: 0;
font-size: 20px;
font-weight: 900;
color: #ffffff;
}
#addReviewModal .review-modal-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, .18);
background: rgba(255,255,255,.06);
color: #ffffff;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
#addReviewModal .review-stars-wrap {
text-align: left;
margin: 4px 0 20px;
}
#addReviewModal .reviewStar {
cursor: pointer;
margin: 0 3px;
color: rgba(148, 163, 184, .44);
transition: transform .18s ease, color .18s ease;
}
#addReviewModal .reviewStar:hover {
transform: scale(1.1);
}
#addReviewModal #ratingText {
min-height: 28px;
margin: 12px 0 0;
font-size: 16px;
font-weight: 900;
color: #ffffff;
}
#addReviewModal label {
display: block;
font-weight: 900;
margin-bottom: 9px;
color: #dbeafe;
}
#addReviewModal textarea {
width: 100%;
min-height: 125px;
padding: 13px 14px;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, .28);
resize: vertical;
color: #ffffff;
background: rgba(2, 6, 23, .34);
outline: none;
}
#addReviewModal textarea:focus {
border-color: rgba(168, 85, 247, .68);
box-shadow: 0 0 0 4px rgba(168, 85, 247, .12);
}
body.review-modal-open {
overflow: hidden;
}
@media (max-width: 1370px) and (min-width: 992px) {
#reviewsPage .reviews-layout {
grid-template-columns: 1fr;
}
#reviewsPage .reviews-list {
max-height: none;
overflow: visible;
padding-right: 0;
}
}
@media (max-width: 1199px) {
#reviewsPage .reviews-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 991px) {
#reviewsPage {
padding: calc(var(--reviews-topbar-offset) + 14px) 14px 32px !important;
}
#reviewsPage .reviews-layout {
grid-template-columns: 1fr;
}
#reviewsPage .reviews-list {
max-height: none;
overflow: visible;
padding-right: 0;
}
#reviewsPage .reviews-grid-guest {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
#reviewsPage {
padding: calc(var(--reviews-topbar-offset) + 10px) 10px 28px !important;
}
#reviewsPage .reviews-hero,
#reviewsPage .reviews-section-title,
#reviewsPage .review-card-header {
align-items: flex-start;
flex-direction: column;
}
#reviewsPage .reviews-panel {
padding: 14px;
border-radius: 18px;
}
#reviewsPage .review-btn,
#reviewsPage .reviews-hero .review-btn {
width: 100%;
}
#reviewsPage .review-date {
white-space: normal;
}
#reviewsPage .reviews-grid-guest {
grid-template-columns: 1fr;
}
#addReviewModal.tsm-review-modal {
padding: 10px;
}
#addReviewModal .tsm-review-dialog {
border-radius: 18px;
}
#addReviewModal .reviewStar {
font-size: 2.05em !important;
}
#addReviewModal .tsm-review-modal-footer .review-btn {
width: 100%;
}
}
/* ==========================================================================
Source: service-analytics-statistics.twig | inline style block 1 | attrs: id="selected-service-analytics-style"
========================================================================== */
.selected-service-analytics-wrapper{margin-top:10px;}
.selected-service-analytics-wrapper .nwo-ssa-title{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px;}
.selected-service-analytics-box{border:1px solid rgba(128,128,128,.16);border-radius:14px;padding:12px;background:rgba(128,128,128,.06);}
.ssa-loading,.ssa-empty{padding:18px;text-align:center;opacity:.75;font-size:13px;}
.ssa-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px;}
.ssa-stat{border:1px solid rgba(128,128,128,.14);background:rgba(255,255,255,.04);border-radius:12px;padding:10px;min-height:74px;}
.ssa-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.72;margin-bottom:5px;display:flex;align-items:center;gap:5px;}
.ssa-stat-value{font-size:18px;font-weight:800;line-height:1.2;word-break:break-word;}
.ssa-stat-value.small{font-size:13px;line-height:1.35;}
.ssa-section-title{font-size:12px;font-weight:800;margin:10px 0 7px;display:flex;align-items:center;gap:6px;opacity:.9;}
.ssa-status-line{display:flex;flex-direction:column;gap:7px;border:1px solid rgba(128,128,128,.13);border-radius:12px;padding:10px;background:rgba(128,128,128,.055);}
.ssa-status-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid rgba(128,128,128,.10);border-radius:10px;padding:8px 10px;background:rgba(255,255,255,.035);font-size:12px;font-weight:800;line-height:1.25;}
.ssa-status-left{display:flex;align-items:center;gap:8px;min-width:0;}
.ssa-status-icons{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:34px;}
.ssa-status-icon{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;line-height:1;background:rgba(128,128,128,.16);border:1px solid rgba(128,128,128,.18);opacity:.95;font-family:Arial,Helvetica,sans-serif;}
.ssa-status-name{opacity:.86;white-space:nowrap;}
.ssa-status-count{font-size:13px;font-weight:900;white-space:nowrap;}
.ssa-icon-pending{color:#f5b342;background:rgba(245,179,66,.12);}
.ssa-icon-processing{color:#5aa7ff;background:rgba(90,167,255,.12);}
.ssa-icon-inprogress{color:#8d7cff;background:rgba(141,124,255,.12);}
.ssa-icon-completed{color:#2fcd94;background:rgba(47,205,148,.12);}
.ssa-icon-partial{color:#f0c14b;background:rgba(240,193,75,.12);}
.ssa-icon-canceled{color:#ff5b6e;background:rgba(255,91,110,.12);}
.ssa-live-pulse{animation:ssaLivePulse 1.15s ease-in-out infinite;}
.ssa-spin{animation:ssaSpin 1s linear infinite;}
@keyframes ssaLivePulse{0%,100%{transform:scale(1);opacity:.65;}50%{transform:scale(1.14);opacity:1;}}
@keyframes ssaSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.ssa-recent-list{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.ssa-recent-row{display:flex;align-items:flex-start;gap:10px;border:1px solid rgba(128,128,128,.14);border-radius:13px;padding:10px 11px;background:rgba(128,128,128,.055);box-shadow:0 8px 22px rgba(0,0,0,.05);}
.ssa-recent-badge{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:0 0 30px;font-size:15px;font-weight:900;color:#2fcd94;background:rgba(47,205,148,.12);border:1px solid rgba(47,205,148,.22);}
.ssa-recent-content{min-width:0;flex:1;}
.ssa-recent-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:900;line-height:1.2;}
.ssa-recent-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ssa-recent-time{white-space:nowrap;font-size:11px;font-weight:900;border-radius:999px;padding:4px 8px;color:#2fcd94;background:rgba(47,205,148,.10);border:1px solid rgba(47,205,148,.18);}
.ssa-recent-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.ssa-recent-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700;background:rgba(255,255,255,.045);border:1px solid rgba(128,128,128,.10);opacity:.82;}
.ssa-recent-dot{font-size:8px;line-height:1;opacity:.65;}
.ssa-note{margin-top:8px;font-size:11px;opacity:.65;line-height:1.4;}
@media (max-width:768px){.ssa-top{grid-template-columns:repeat(2,minmax(0,1fr));}.ssa-status-line{gap:7px 10px;}.ssa-recent-head{align-items:flex-start;flex-direction:column;}.ssa-recent-time{white-space:normal;}.ssa-recent-row{padding:10px;}}
/* ==========================================================================
Source: service.twig | inline style block 1
========================================================================== */
@media only screen and (min-width: 992px) {.services-wrapper .s-col:last-child {display: none}}
/* ==========================================================================
Source: services.twig | inline style block 1
========================================================================== */
.services-filters .bcenter {
display: flex;
justify-content: center;
width: 100%;
}
.services-category,
.services-card {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.services-category.custom-header .card.services-title {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: var(--mc);
}
.services-category.custom-header .card.services-title .st-name {
color: #fff;
}
/* ==========================================================================
Source: setnewpassword.twig | inline style block 1
========================================================================== */
#header, footer {display: none}
/* ==========================================================================
Source: statistics.twig | inline style block 1
========================================================================== */
.vcomp-speed-select{min-width:160px;border-radius:12px;height:44px;}
.vcomp-speed-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;margin-left:8px;vertical-align:middle;}
.vcomp-speed-fast{background:rgba(34,197,94,.12);color:#15803d;border:1px solid rgba(34,197,94,.22);}
.vcomp-speed-slow{background:rgba(239,68,68,.12);color:#b91c1c;border:1px solid rgba(239,68,68,.22);}
.vcomp-speed-unknown{background:rgba(148,163,184,.12);color:#64748b;border:1px solid rgba(148,163,184,.22);}
@media(max-width:768px){.vcomp-speed-select{width:100%;min-width:100%;}}