:root {

    --color-primary         : #3653BA;
    --color-primary-dark    : #314CAD;
    --color-primary-deep    : #2A4194;

    --color-bg-light        : #F5F7FF;
    --color-bg-strong       : #C4CFFC;

    --color-surface         : #FFFFFF;
    --color-border          : #94A4E6;

    --color-text            : #203172;
    --color-text-strong     : #0B122B;
    --color-text-muted      : #6677B6;
    --color-text-on-primary : #FFFFFF;

    --color-outline         : #D3DCFC;

    --color-disable         : #AAAAAA;

    --color-positive        : #30AF48;
    --color-negative        : #DD3C3C;
    --color-neutral         : #CCCCCC;

    --border-radius         : 1.5rem!important;
    --margin                : 0.75rem!important;
    --padding               : 0.75rem!important;
}

/* TEXT SELECTION */
::selection {
    color      : var(--color-surface);
    background : var(--color-primary);
}
::-moz-selection {
    color      : var(--color-surface);
    background : var(--color-primary);
}
::-o-selection {
    color      : var(--color-surface);
    background : var(--color-primary);
}
::-ms-selection {
    color      : var(--color-surface);
    background : var(--color-primary);
}
::-webkit-selection {
    color      : var(--color-surface);
    background : var(--color-primary);
}

/* FONTS */
@font-face {
    font-family : 'Poppins';
    src         : url('./Fonts/Poppins-Regular.ttf') format('truetype');
    font-weight : 400;
    font-style  : normal;
}
@font-face {
    font-family : 'Poppins';
    src         : url('./Fonts/Poppins-Italic.ttf') format('truetype');
    font-weight : 400;
    font-style  : italic;
}
@font-face {
    font-family : 'Poppins';
    src         : url('./Fonts/Poppins-Bold.ttf') format('truetype');
    font-weight : 700;
    font-style  : normal;
}

html, body {
    font-family                : 'Poppins', sans-serif!important;
    font-size                  : 16px!important;
    font-weight                : 400!important;
    line-height                : 1.5!important;
    color                      : var(--color-text-strong)!important;
    background-color           : var(--color-bg-light)!important;
    overflow                   : hidden;
    -webkit-overflow-scrolling : touch;
}

.icon {
    width          : 1em;
    height         : 1em;
    display        : inline-block;
    vertical-align : middle;
    fill           : currentColor;
}

/* SHARED */
.bordered {
    border : 1px solid var(--color-border);
}
.round {
    border-radius : var(--border-radius)!important;
}
.round-top {
    border-top-left-radius  : var(--border-radius) !important;
    border-top-right-radius : var(--border-radius) !important;
}
.round-bottom {
    border-bottom-right-radius : var(--border-radius) !important;
    border-bottom-left-radius  : var(--border-radius) !important;
}
.bckg-surface {
    background-color : var(--color-surface);
}
.bckg-transparent {
    background-color : rgba( 0, 0, 0, 0.0 );
}
hr {
    margin : 0!important;
}

/* default padding */
.p-d { 
    padding : var(--padding)!important;
}
.ps-d {
    padding-left : var(--padding)!important;
}
.pt-d {
    padding-top : var(--padding)!important;
}
.pe-d {
    padding-right : var(--padding)!important;
}
.pb-d {
    padding-bottom : var(--padding)!important;
}
.px-d {
    padding-left  : var(--padding)!important;
    padding-right : var(--padding)!important;
}
.py-d {
    padding-top    : var(--padding)!important;
    padding-bottom : var(--padding)!important;
}

/* default margin */
.m-d { 
    margin : var(--margin)!important;
}
.ms-d {
    margin-left : var(--margin)!important;
}
.mt-d {
    margin-top : var(--margin)!important;
}
.me-d {
    margin-right : var(--margin)!important;
}
.mb-d {
    margin-bottom : var(--margin)!important;
}
.mx-d {
    margin-left  : var(--margin)!important;
    margin-right : var(--margin)!important;
}
.my-d {
    margin-top    : var(--margin)!important;
    margin-bottom : var(--margin)!important;
}

/* zero padding */
.p-0 { 
    padding : 0!important;
}
.ps-0 {
    padding-left : 0!important;
}
.pt-0 {
    padding-top : 0!important;
}
.pe-0 {
    padding-right : 0!important;
}
.pb-0 {
    padding-bottom : 0!important;
}
.px-0 {
    padding-left  : 0!important;
    padding-right : 0!important;
}
.py-0 {
    padding-top    : 0!important;
    padding-bottom : 0!important;
}

/* zero margin */
.m-0 { 
    margin : 0!important;
}
.ms-0 {
    margin-left : 0!important;
}
.mt-0 {
    margin-top : 0!important;
}
.me-0 {
    margin-right : 0!important;
}
.mb-0 {
    margin-bottom : 0!important;
}
.mx-0 {
    margin-left  : 0!important;
    margin-right : 0!important;
}
.my-0 {
    margin-top    : 0!important;
    margin-bottom : 0!important;
}

.hidden {
    display : none;
}

/* ANCHOR */
a {
    color           : var(--color-text)!important;
    text-decoration : none!important;
    cursor          : pointer!important;
}
a:hover {
    color : var(--color-text-muted)!important;
}
a:active {
    color : var(--color-text-strong)!important;
}

/* TEXT */
.txt-start {
    text-align : left;
}
.txt-center {
    text-align : center;
}
.txt-end {
    text-align : right;
}
.txt-bold {
    font-weight : bold;
}
.txt-italic {
    font-style : italic;
}

.txt-error {
    color     : var(--color-negative);
    font-size : 0.8rem;
}

/* SCROLLABLE DIV */
.scrollable {
    flex             : 1; /* Takes up the remaining space */
    overflow-x       : hidden;
    overflow-y       : auto; /* Enables scrolling */
    min-height       : 0; /* Prevents flex issues */
    scrollbar-width  : thin;
    scrollbar-color  : transparent transparent;
    transition       : scrollbar-color 0.3s;
    scrollbar-gutter : stable; /* Prevents layout shift when scrollbar appears */
}
.scrollable:hover {
    scrollbar-color : rgba(0, 0, 0, 0.2) transparent;
}
.scrollable::-webkit-scrollbar {
    width : 6px;
}
.scrollable::-webkit-scrollbar-thumb {
    background-color : rgba(0, 0, 0, 0.2);
    border-radius    : 4px;
}
.scrollable::-webkit-scrollbar-track {
    background : transparent;
}

/* GLASS EFFECT */
.glass {
    background-color        : var(--color-surface);
    border-radius           : var(--border-radius)!important;
    box-shadow              : 0 4px 30px rgba( 0, 0, 0, 0.1 )!important;
    /* border                  : 1px solid rgba( 255, 255, 255, 1 )!important;
    backdrop-filter         : blur(10px)!important;
    -webkit-backdrop-filter : blur(10px)!important; */
}

.liquid-glass {
    border-radius    : var(--border-radius)!important;
    background-color : rgba(255,255,255,0.12);

    -webkit-backdrop-filter : saturate(180%) blur(12px);
    backdrop-filter         : saturate(180%) blur(12px);

    border     : 1px solid rgba(255,255,255,0.18);
    /* box-shadow : 0 6px 20px rgba( 0, 0, 0, 0.18 ); */

    transition  : transform 0.15s cubic-bezier(0.24, 0.82, 0.29, 1), box-shadow 0.15s cubic-bezier(0.24, 0.82, 0.29, 1);
    will-change : transform;
}
.liquid-glass:active {
    /* transform       : scale(1.05); */
    /* box-shadow      : 0 3px 10px rgba(0,0,0,0.28); */
    backdrop-filter : saturate(160%) blur(14px);
}

/* Dialog */
.dialog-overlay {
    display         : flex;
    position        : fixed;
    top             : 0;
    left            : 0;
    height          : 100vh;
    width           : 100vw;
    background      : rgba(255, 255, 255, 0.8);
    justify-content : center;
    align-items     : center;
}
.dialog-overlay.enter {
    animation : dialog-fade-in 0.3s ease forwards;
}
.dialog-overlay.exit {
    animation : dialog-fade-out 0.3s ease forwards;
}

.dialog {
    display         : flex;
    flex-direction  : column;
    max-height      : 90vh;
    animation-delay : 0.1s;
    max-width       : 600px;
    width           : 100%;
    box-sizing      : border-box;
    margin          : 0 1rem;
}
.dialog.enter {
    animation : dialog-slide-up 0.3s ease forwards;
}
.dialog.exit {
    animation : dialog-slide-down 0.3s ease forwards;
}

.dialog-header {
    display       : flex;
    /* flex-wrap     : wrap; */
    align-items   : center;
    gap           : 0.5rem;
    padding       : 1rem;
}

.dialog-title {
    margin      : 0;
    font-weight : bold;
    flex-grow   : 1;
    min-width   : 0;
    word-break  : break-word;
}

.dialog-text {
    flex-grow   : 1;
    /*overflow    : auto;*/
    max-height  : 100%;
    padding     : 0 1rem 0 1rem;
}

.dialog-footer {
    flex-shrink : 0;
    padding     : 1rem;
}

@keyframes dialog-fade-in {
    from { opacity : 0; }
    to { opacity : 1; }
}
@keyframes dialog-fade-out {
    from { opacity : 1; }
    to { opacity : 0; }
}
@keyframes dialog-slide-up {
    from { transform : translateY(100%); opacity : 0; }
    to { transform : translateY(0); opacity : 1; }
}
@keyframes dialog-slide-down {
    from { transform : translateY(0); opacity : 1; }
    to { transform : translateY(100%); opacity : 0; }
}
/* END Dialog */

/* QUILL EDITOR */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-radius : var(--border-radius)
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top : 1px solid #ccc!important;
}
.ql-toolbar.ql-snow {
    margin-bottom : var(--margin);
}
/* END QUILL EDITOR */

/* INTERACTIVE IMAGE */
/* Usage: add the class "interactive-img" to your <img> or a wrapper element */
.interactive-img {
  --scale-hover: 1.04;
  --scale-active: 0.98;
  --shadow-default: 0 6px 18px rgba(0,0,0,0.12);
  --shadow-hover:   0 12px 36px rgba(0,0,0,0.18);
  --shadow-active:  0 6px 18px rgba(0,0,0,0.10);
  --transition: transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms cubic-bezier(.2,.9,.2,1);

  display: inline-block;          /* if used on wrapper — keeps layout tight */
  transform-origin: center center;
  transition: var(--transition);
  /*box-shadow: var(--shadow-default);*/
  will-change: transform, box-shadow;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0); /* promote to its own layer for smoother animation */
  cursor : pointer;
}

/* If you apply the class directly to <img>, reset display */
img.interactive-img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* Hover / pointer over (desktop & touch when pointer is available) */
.interactive-img:hover,
.interactive-img:focus {
  transform: scale(var(--scale-hover));
  box-shadow: var(--shadow-hover);
  outline: none; /* we provide our own focus style below */
}

/* Active / pressed state (mouse down / touch press) */
.interactive-img:active {
  transform: scale(var(--scale-active));
  box-shadow: var(--shadow-active);
  transition-duration: 120ms;
}

/* Good keyboard focus indicator for accessibility */
.interactive-img:focus-visible {
  box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 0 0 4px rgba(30,144,255,0.12);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .interactive-img {
    transition: none;
    transform: none;
  }
  .interactive-img:hover,
  .interactive-img:active,
  .interactive-img:focus {
    transform: none;
    box-shadow: var(--shadow-default);
  }
}
/* END INTERACTIVE IMAGE */