@import './_variables.scss';
// -----------------------------------------------------------------------------
// Brand theme switch. Enable exactly ONE of the @import lines below to choose
// the active palette. Comment all of them out (or just leave them commented)
// to fall back to "version 0" — the original blue/navy defined in _variables.scss.
//
//   v0 (original blue) → both imports below commented out
//   moti1 (muted teal)   → uncomment _theme-turquoise-moti1
//   claude1 (vibrant cyan) → uncomment _theme-turquoise-claude1   ← active
// -----------------------------------------------------------------------------
@import './_theme-turquoise-moti1.scss';
// @import './_theme-turquoise-claude1.scss';
@import './markdown.scss';
// import fonts

:root {
    // --color-dark: #ff0055;
    --color-dark: #252a42;
}

$color2: #081421;

button { border:none;}

.noselect { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none;}
a { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; }
 
  .gap_bottom { margin-bottom: var(--gap);}

  .carousel__track { gap:var(--gap); }

  .u { text-decoration: underline;}
  
  .paddme { padding-inline: var(--gap);}
  
#app {
    font-family: var(--font); 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
  }

.mbl_no_margins { margin-left: -15px; margin-right: -15px; width: auto; }

html, body { height: 100%; direction:rtl; padding: 0px; margin:0px; background: #f8f8f8; text-align: var(--text-align); color:var(--color2); font-size: 18px; /*scroll-behavior: smooth;*/ }
a{ color:var(--text-color); text-decoration:none; outline:none;}

html, body, input, textarea, select{ font-family: var(--font); 
  @media (min-width: 600px) { font-size: 16px; }
  @media (max-width: 600px) { font-size: 14px; }
}
* { box-sizing: border-box; padding: 0px; margin: 0px; font-family: var(--font); -webkit-tap-highlight-color: transparent; letter-spacing: -0.01em;}

body {overflow-y:hidden;  }
.rtl { direction:rtl; text-align: right; }
.ltr { direction:ltr; text-align: left; }

img{ border:none; vertical-align:middle;}

textarea { resize:none; }
input[type=url] { direction: ltr; text-align: left; 
  &::placeholder {
    text-align: right;
    direction: rtl;
  }
  
}

a { @include transition(all 0.08s ease 0s); }
a:active { transform: scale(1.02);}

a { cursor:pointer;}

::-webkit-input-placeholder { color: #A1A1A1; }
:-moz-placeholder { color: #A1A1A1; }
::-moz-placeholder { color: #A1A1A1; }
:-ms-input-placeholder { color: #A1A1A1; }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

ul { margin: 0px; list-style-type: none; }
    
a:hover { /*color:inherit;*/ text-decoration: none; }

// h1,h2,h3,h4,h5 { margin: 0px; line-height: 1; font-family: var(--font2); font-weight: 100;}

.btn { display: inline-flex; align-items: center; justify-content: center; gap:6px; border-radius: 10px; padding: 0px 15px; @include transition(all 0.2s ease 0s); cursor: pointer; white-space: nowrap; background: var(--btn-color); color: var(--btn-text-color); font-size: 14px; color: #000; height: 40px;
  &.btn-square { width: 40px; border-radius: 6px; padding: 0px; }
  &.btn_primary { background: var(--color1); color: #fff; }
  &.btn_rounded { border-radius: 48px; }
  &.btn_radius { border-radius: 6px; border-radius: 48px; }
}

.centered { margin: 0 auto; width: calc(100% - (3rem * 2)); }

// .btn_white,.btn { border:none; padding: 0 15px; height: 30px; text-align: center; border-radius: 7px; font-family: var(--font); @include transition(all 0.2s ease 0s); cursor: pointer; white-space: nowrap;
//     &.big { font-weight: bold; letter-spacing: .5px; display: flex; justify-content: center; align-items: center; padding: 0px;
//       @media (min-width: 600px) { height: 50px; min-width: 200px; font-size: 24px;   }
//       @media (max-width: 600px) { height: 40px; min-width: 150px; font-size: 18px; }
//     }
// }

// .btn, .frmSbmBtn, input[type=submit] { background: var(--color1); color: #fff; border:none; display: inline-flex; justify-content: center; gap:6px; align-items: center; height: 35px; padding: 0 10px; cursor: pointer; border-radius: 40px; font-family: var(--font); 
//   @media (min-width: 600px) { font-size: 16px;
//     &:hover { filter: saturate(1.5) brightness(1.02);  background: var(--color1); }
//   }
//   @media (max-width: 600px) { font-size: 14px; }
//   i,svg { }

//   &.color2 { background: var(--color2); }
//   &.red { background: var(--red); }
// }
// .btn_white { color: var(--color1); background: var(--bg1); 
//     &:hover { background: #fff;  box-shadow: 0px 20px 20px rgba(0,0,0, 0.3); transform: translateY(-8px); }
// }
.btn.red { background-color: var(--red);}

.btn.bordered { background: var(--bg1); border:1px solid var(--color1);
  &, * { color: var(--color1);}
  &.color2 { border-color: var(--color2);
    &, * { color: var(--color2); }
  }
  &.red { border-color: var(--red);
    &, * { color: var(--red); }
  }

}

#page-wrap { display: flex; background: var(--bg2);
  #page_content { flex:1; }
  
  // Mobile styles - account for fixed header
  @media (max-width: 600px) {
    #page_content {
      padding-top: calc(var(--header-height) + var(--app-top-bleed)); // Height of mobile header
      .app-theme.floating-header & { padding-top: 0px; }
    }
  }
}


.form-input {
  flex: 1;
  min-width: 200px;
  padding: 12px 24px;
  border: 2px solid #e9ecef;
  background-color: #EFF2F4;
  border-radius: 12px;
  outline: none;
  font-size: var(--h6);
  font-family: var(--font);
  @include transition(border-color 0.2s ease);

  &:focus {
    border-color: var(--primary);
  }

  &::placeholder {
    color: var(--gray);
  }
}

@media (min-width: 601px) {
.page_slide { padding-top: var(--top-padding);}
}


.slide-up-enter-active, .slide-up-leave-active { transition: all 0.3s ease; }
.slide-up-enter-from, .slide-up-leave-to { transform: translateY(100%) !important; }


.sml-slide-up-enter-active, .sml-slide-up-leave-active { transition: all 0.2s ease;  }
.sml-slide-up-enter-from, .sml-slide-up-leave-to { transform: translateY(10%) !important; opacity: 0 !important; }

/* POP EFFECT */
.pop-enter-active, .pop-leave-active { transition: all 0.1s ease; }
.pop-enter-from, .pop-leave-to { transform: scale(0) translateY(-100%) translateX(100%) }

.scale-enter-active, .scale-leave-active { transition: all 0.06s ease; }
.scale-enter-from, .scale-leave-to { transform: scale(0);}


.listin-enter-active { transition: all 0.5s ease; transition-delay: var(--enter-delay, 0s); }
.listin-enter-from, .listin-leave-to { opacity: 0; transform: translateX(30px); }

  // fade effect
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

/* popup */
// animation-duration: 0.2s; transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); will-change: opacity;
// &.active{transform: translate(-50%, -50%) scale(1); opacity: 1; transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); }

.popup-enter-active, .popup-leave-active { transition: all 0.3s ease; animation-duration: 0.2s; transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946); will-change: opacity;}
.popup-enter-from, .popup-leave-to { transform: scale(0) translateY(-50%) translateX(-50%); opacity: 0; transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); }
// #quill-container { direction: rtl; text-align: right;}
// .ql-editor.ql-blank::before { direction: rtl; text-align: right;}
// .ql-editor { direction: rtl; text-align: right;}