/*
=====================================================
RTH CORE TERMINAL
COMPONENT SYSTEM v2
MATERIAL + INTERACTION LAYER
=====================================================
*/



/* =====================================
   GLASS MATERIAL
===================================== */


.rth-glass {


position:relative;

overflow:hidden;

isolation:isolate;


background:

linear-gradient(
135deg,
rgba(255,255,255,.16),
rgba(255,255,255,.06) 35%,
rgba(15,23,42,.55)
);



backdrop-filter:

blur(24px)
saturate(130%);



-webkit-backdrop-filter:

blur(24px)
saturate(130%);



border:

1px solid rgba(255,255,255,.18);



box-shadow:


0 40px 100px rgba(0,0,0,.60),


inset 0 1px 0 rgba(255,255,255,.25),


inset 0 0 60px rgba(56,189,248,.08);



transition:

transform .4s var(--rth-ease),
border-color .4s ease,
box-shadow .4s ease;


}



/* glass texture */


.rth-glass::before {


content:"";


position:absolute;


inset:0;



background:


radial-gradient(
circle at 20% 20%,
rgba(255,255,255,.18),
transparent 35%
),


radial-gradient(
circle at 80% 70%,
rgba(56,189,248,.12),
transparent 40%
);



opacity:.55;


pointer-events:none;


z-index:1;


}




/* glass reflection */


.rth-glass::after {


content:"";


position:absolute;


top:-100%;


left:-120%;


width:90%;


height:250%;



background:

linear-gradient(
115deg,
transparent,
rgba(255,255,255,.15),
transparent
);



transform:

rotate(18deg);



filter:

blur(30px);



animation:

rthGlassReflection

18s

infinite;


pointer-events:none;


}



@keyframes rthGlassReflection {


0%{

transform:
translateX(-20%)
rotate(18deg);

opacity:0;

}



30%{

opacity:.25;

}



60%{

opacity:.15;

}



100%{

transform:
translateX(260%)
rotate(18deg);

opacity:0;

}


}




/* =====================================
   STANDARD MODULE
===================================== */


.rth-module {


position:relative;


overflow:hidden;


background:


linear-gradient(

135deg,

rgba(255,255,255,.08),

rgba(15,23,42,.38)

);



border:

1px solid rgba(255,255,255,.12);



box-shadow:


0 25px 70px rgba(0,0,0,.45),


inset 0 1px 0 rgba(255,255,255,.16);



border-radius:

14px;



transition:

border-color .35s ease,
box-shadow .35s ease,
transform .35s var(--rth-ease);


}



.rth-module:hover {


transform:

translateY(-3px);



border-color:

rgba(56,189,248,.35);



box-shadow:


0 35px 90px rgba(0,0,0,.55),


inset 0 0 40px rgba(56,189,248,.08);


}



/* =====================================
   ACTION PANEL
===================================== */


.rth-action-panel {


position:relative;


overflow:hidden;


padding:

40px;



background:


linear-gradient(

135deg,

rgba(255,255,255,.12),

rgba(15,23,42,.45)

);



border:

1px solid rgba(255,255,255,.18);



box-shadow:


0 40px 100px rgba(0,0,0,.55),


inset 0 1px 0 rgba(255,255,255,.18);



border-radius:

16px;



backdrop-filter:

blur(24px);


}



.rth-action-panel::before {


content:"";


position:absolute;


inset:0;



background:


radial-gradient(
circle at 15% 20%,
rgba(255,255,255,.15),
transparent 35%
),


radial-gradient(
circle at 85% 80%,
rgba(56,189,248,.12),
transparent 40%
);



pointer-events:none;


}



.rth-action-panel > * {


position:relative;

z-index:2;


}



.rth-action-title {


font-size:

clamp(28px,3vw,42px);


font-weight:

600;


color:

rgba(255,255,255,.96);


}



.rth-action-description {


max-width:

620px;


color:

rgba(255,255,255,.65);


line-height:

1.8;


}




/* =====================================
   LABEL + STATUS
===================================== */


.rth-label,
.rth-meta {


font-size:

11px;


letter-spacing:

.16em;


text-transform:

uppercase;


color:

rgba(255,255,255,.45);


display:flex;


align-items:center;


gap:8px;


}



.rth-label::before {


content:"";


width:

6px;


height:

6px;


border-radius:

50%;


background:

var(--rth-accent);


box-shadow:

0 0 15px var(--rth-accent);


}




.rth-status-line {


display:flex;

align-items:center;

gap:10px;


font-size:13px;


color:

rgba(255,255,255,.65);


}



.rth-status-online {


width:

8px;


height:

8px;


border-radius:

50%;


background:

var(--rth-success);


box-shadow:

0 0 18px var(--rth-success);



animation:

rthStatusPulse

3s

infinite;


}



@keyframes rthStatusPulse {


50%{

transform:

scale(1.25);

opacity:1;

}


}



/* =====================================
   BUTTON SYSTEM
===================================== */


.rth-button,
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"] {


position:relative;


display:inline-flex;


align-items:center;


justify-content:center;


gap:8px;



padding:

12px 26px;



min-height:

42px;



background:


linear-gradient(

135deg,

rgba(255,255,255,.12),

rgba(15,23,42,.45)

);



color:white!important;



border:

1px solid rgba(255,255,255,.18)!important;



border-radius:

10px;



font-size:

14px;



cursor:pointer;



text-decoration:none!important;



backdrop-filter:

blur(14px);



box-shadow:


0 15px 40px rgba(0,0,0,.35),


inset 0 1px 0 rgba(255,255,255,.16);



overflow:hidden;



transition:

transform .35s var(--rth-ease),
border-color .35s ease,
box-shadow .35s ease;


}




.rth-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover {


transform:

translateY(-2px);



border-color:

rgba(56,189,248,.4)!important;



box-shadow:


0 25px 60px rgba(0,0,0,.45),


inset 0 0 35px rgba(56,189,248,.08);


}



.rth-button:active,
button:active {


transform:

scale(.98);


}




.rth-button-small {


padding:

8px 16px;


font-size:

13px;


}




/* =====================================
   FORM SYSTEM
===================================== */


input,
textarea,
select {


width:100%;



background:


linear-gradient(

135deg,

rgba(255,255,255,.08),

rgba(15,23,42,.42)

)!important;



color:white!important;



border:

1px solid rgba(255,255,255,.16)!important;



border-radius:

10px;



padding:

13px 16px;



font-size:

15px;



font-family:

inherit;



backdrop-filter:

blur(14px);



box-shadow:


inset 0 1px 0 rgba(255,255,255,.12),


0 15px 35px rgba(0,0,0,.25);


}



input::placeholder,
textarea::placeholder {


color:

rgba(255,255,255,.38);


}



input:focus,
textarea:focus,
select:focus {


outline:none;


border-color:

rgba(56,189,248,.45)!important;



box-shadow:


0 0 0 3px rgba(56,189,248,.08),


inset 0 0 30px rgba(56,189,248,.08);


}



textarea {


min-height:

150px;


resize:

vertical;


}



/* =====================================
   DIVIDER
===================================== */


.rth-divider {


height:

1px;


background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent

);


margin:

24px 0;


}



/* =====================================
   VALUES
===================================== */


.rth-value {


font-size:

32px;


font-weight:

600;


color:

rgba(255,255,255,.95);


}



.rth-description {


font-size:

14px;


line-height:

1.7;


color:

rgba(255,255,255,.62);


}



/* =====================================
   MOBILE
===================================== */


@media(max-width:768px){


.rth-action-panel {


padding:

28px;


}


.rth-glass {


backdrop-filter:

blur(18px);


}


}