/*
Theme Name: Shaam Follow
Theme URI: https://shaamtech.com
Author: Shaam Tech tm
Author URI: https://shaamtech.com
Description: الموقع الخاص بيتزوريد المتابعين من شام تك تم التصميم و تطوير بكامل من قبل فريق شام تك.
Version: 2.1
Text Domain: shaam-follow
*/

:root {
  --shaam-blue: #074889;
  --shaam-blue-dark: #021528;
  --shaam-purple: #8a56ff;
  --shaam-yellow: #ffb31a;
  --shaam-radius-lg: 24px;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  background: var(--shaam-blue);
  color: #fff;
  direction: rtl;
  text-align: right;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display:block; }

.shaam-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* HEADER */

.shaam-header {
  background: linear-gradient(90deg, #021528, #063b73);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.shaam-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.shaam-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shaam-logo img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.shaam-logo-text {
  font-weight: 700;
  font-size: 20px;
}

.shaam-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.shaam-nav a { font-size: 14px; opacity: 0.9; }
.shaam-nav a:hover { opacity: 1; }

.shaam-cta-btn,
.shaam-login-btn-header {
  background: var(--shaam-yellow);
  color: var(--shaam-blue-dark);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  font-size: 14px;
}

.shaam-login-btn-header {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: none;
}

.shaam-wallet-pill {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.shaam-wallet-pill button {
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  background: var(--shaam-purple);
  color: #fff;
}

/* HERO */

.shaam-hero {
  background: radial-gradient(circle at top right, rgba(138,86,255,0.4), transparent 55%),
              radial-gradient(circle at bottom left, rgba(0,153,255,0.4), transparent 55%),
              var(--shaam-blue);
  padding: 60px 0 70px;
}

.shaam-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.shaam-hero-title {
  font-size: 32px;
  line-height: 1.5;
  margin-bottom: 14px;
  min-height: 60px;
}

#typing-effect {
  display: inline-block;
  border-left: 2px solid rgba(255,255,255,0.9);
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

.shaam-hero-subtitle {
  font-size: 15px;
  opacity: 0.9;
  margin-bottom: 24px;
}

.shaam-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.btn-primary,
.btn-secondary {
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--shaam-yellow);
  color: var(--shaam-blue-dark);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
}

.shaam-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.shaam-hero-badge {
  background: rgba(6,59,115,0.7);
  padding: 6px 16px;
  border-radius: 999px;
}

/* HERO VISUAL */

.shaam-hero-visual { position: relative; }

.shaam-hero-card {
  background: #1a1640;
  border-radius: 36px;
  padding: 24px 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}

.shaam-hero-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(210,163,217,0.3), transparent 60%);
  opacity: 0.9;
}

.shaam-hero-card-inner { position: relative; display:flex; flex-direction:column; gap:18px; }

.shaam-hero-phone {
  width: 80%;
  margin: 0 auto;
  border-radius: 32px;
  background: #2b205f;
  padding: 18px 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.shaam-hero-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.shaam-hero-stat-item {
  background: rgba(0,0,0,0.45);
  border-radius: 16px;
  padding: 8px 10px;
}

.shaam-floating-pill {
  position: absolute;
  right: -10px;
  top: 15%;
  background: var(--shaam-yellow);
  color: var(--shaam-blue-dark);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.4);
  animation: floatY 3s ease-in-out infinite;
}

/* COUNTERS */

.shaam-counters {
  background: var(--shaam-blue-dark);
  padding: 40px 0;
}

.shaam-counters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.shaam-counter-box {
  background: #061d33;
  border-radius: 20px;
  padding: 20px 10px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.shaam-counter-number {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 6px;
}

.shaam-counter-label {
  color: #7fa4c8;
  font-size: 14px;
}

/* SECTIONS */

.shaam-section { padding: 60px 0; }

.shaam-section-title {
  font-size: 24px;
  margin-bottom: 8px;
}

.shaam-section-subtitle {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 26px;
}

/* SERVICES */

.shaam-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.shaam-service-card {
  background: #021528;
  border-radius: var(--shaam-radius-lg);
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}

.shaam-service-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.shaam-service-card ul {
  margin: 0 0 16px;
  padding-right: 18px;
  font-size: 13px;
}

.shaam-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 11px;
  margin-bottom: 8px;
}

/* ABOUT IMAGE SECTION */

.shaam-about-image-section {
  text-align: center;
}

.shaam-about-image-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* STEPS & TESTIMONIALS */

.shaam-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}

.shaam-step-card {
  background: rgba(2,21,40,0.9);
  border-radius: 18px;
  padding: 18px;
  position: relative;
}

.shaam-step-number {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--shaam-yellow);
  opacity: 0.85;
}

.shaam-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.shaam-testimonial-card {
  background: rgba(2,21,40,0.9);
  border-radius: 18px;
  padding: 18px;
}

/* FORM STYLES */

.shaam-form {
  background: #021528;
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}

.shaam-form .field { margin-bottom: 14px; }
.shaam-form label { display:block; font-size:13px; margin-bottom:4px; }

.shaam-form input[type="text"],
.shaam-form input[type="number"],
.shaam-form input[type="url"],
.shaam-form input[type="email"],
.shaam-form input[type="password"],
.shaam-form select,
.shaam-form textarea {
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(1,10,20,0.9);
  color: #fff;
  font-size: 13px;
}

.shaam-form small { font-size:11px; opacity:0.8; }

.shaam-form .checkbox {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
}

.shaam-form input[type="checkbox"] { margin-top:2px; }

/* FLOATING CONTACT */

.floating-contact {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
}

.floating-contact .contact-button {
  background: var(--shaam-yellow);
  color: var(--shaam-blue-dark);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0,0,0,0.45);
  font-size: 14px;
  animation: pulseShaam 2s infinite;
}

@keyframes pulseShaam {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,179,26,0.7); }
  70% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(255,179,26,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,179,26,0); }
}

@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* LOGIN PAGE */

.shaam-login-section {
  position: relative;
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  padding: 60px 0;
  overflow: hidden;
  background: radial-gradient(circle at top right, rgba(138,86,255,0.25), transparent 55%),
              radial-gradient(circle at bottom left, rgba(0,153,255,0.25), transparent 55%),
              #021528;
}

.shaam-login-bg::before,
.shaam-login-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}

.shaam-login-bg::before {
  width: 260px; height:260px;
  background:#5b8cff;
  top:-60px; right:-80px;
}

.shaam-login-bg::after {
  width:260px; height:260px;
  background:#f5a623;
  bottom:-80px; left:-60px;
}

.shaam-login-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.shaam-login-card {
  width:100%; max-width:460px;
  padding:28px 24px 26px;
  border-radius:26px;
  background: rgba(3,18,38,0.9);
  backdrop-filter: blur(18px);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  border:1px solid rgba(255,255,255,0.08);
  position:relative;
  overflow:hidden;
}

.shaam-login-card::before {
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at top left, rgba(90,199,255,0.25), transparent 65%);
  opacity:.8; pointer-events:none;
}

.shaam-login-card > * { position:relative; z-index:1; }

.shaam-login-ai-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  font-size:11px;
  margin-bottom:10px;
}

.shaam-login-title { margin:0 0 6px; font-size:22px; }
.shaam-login-subtitle { margin:0 0 14px; font-size:13px; opacity:0.85; }

.shaam-login-ai-message {
  background:rgba(1,10,20,0.85);
  border-radius:14px;
  padding:10px 12px;
  font-size:12px;
  margin-bottom:16px;
  border:1px dashed rgba(255,255,255,0.18);
  min-height:38px;
}

.shaam-login-form .field { margin-bottom:12px; }
.shaam-login-form label { font-size:13px; margin-bottom:4px; display:block; }

.shaam-login-form input[type="text"],
.shaam-login-form input[type="password"] {
  width:100%;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(1,10,20,0.9);
  color:#fff;
  font-size:13px;
}

.shaam-login-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px;
  margin-bottom:10px;
  font-size:12px;
}

.shaam-login-btn {
  width:100%;
  display:inline-flex;
  justify-content:center;
}

.shaam-login-or {
  text-align:center;
  margin:12px 0;
  font-size:12px;
  opacity:0.75;
}

.shaam-login-social { text-align:center; margin-bottom:8px; }

.shaam-login-google {
  display:inline-block;
  font-size:12px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
}

.shaam-login-bottom {
  font-size:12px;
  text-align:center;
  margin-top:8px;
  opacity:0.85;
}

.shaam-login-link { color: var(--shaam-yellow); }

.remember-me {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* FOOTER */

.shaam-footer {
  background: #021528;
  padding: 26px 0 16px;
  font-size: 13px;
}

.shaam-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.shaam-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .shaam-hero-inner { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 768px) {
  .shaam-nav { display:none; }
  .shaam-header-inner { justify-content: space-between; }
  .shaam-counters-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 520px) {
  .shaam-counters-grid { grid-template-columns: 1fr; }
  .shaam-hero-title { font-size:26px; }
}

/* REGISTER PAGE */

.shaam-register-section {
  position: relative;
  min-height: calc(100vh - 140px);
  padding: 60px 0;
  background: radial-gradient(circle at top left, rgba(90,199,255,0.35), transparent 55%),
              radial-gradient(circle at bottom right, rgba(244,182,38,0.3), transparent 55%),
              #021528;
  display: flex;
  align-items: center;
}

.shaam-register-wrapper {
  display: flex;
  justify-content: center;
}

.shaam-register-card {
  width: 100%;
  max-width: 520px;
  padding: 28px 24px 26px;
  border-radius: 28px;
  background: rgba(3, 18, 38, 0.9);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
  animation: shaam-pop-in 0.6s ease-out;
}

.shaam-register-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top right, rgba(138,86,255,0.35), transparent 60%);
  opacity: .9;
  pointer-events: none;
}

.shaam-register-card > * { position: relative; z-index: 1; }

.shaam-register-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  margin-bottom: 10px;
}

.shaam-register-title {
  margin: 0 0 6px;
  font-size: 22px;
}

.shaam-register-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  opacity: 0.85;
}

.shaam-register-alert {
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  margin-bottom: 14px;
}

.shaam-register-alert-error {
  background: rgba(200, 37, 57, 0.15);
  border: 1px solid rgba(255, 87, 115, 0.5);
}

.shaam-register-alert ul {
  margin: 0;
  padding-right: 18px;
}

.shaam-register-form .field {
  margin-bottom: 12px;
}

.shaam-register-form label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.input-with-icon {
  position: relative;
}

.input-with-icon .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.8;
}

.input-with-icon input {
  width: 100%;
  padding: 9px 10px;
  padding-left: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(1, 10, 20, 0.9);
  color: #fff;
  font-size: 13px;
}

.shaam-register-note {
  font-size: 11px;
  opacity: 0.8;
  margin: 6px 0 14px;
}

.shaam-register-note a {
  color: var(--shaam-yellow);
}

.shaam-register-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shaam-register-btn {
  width: 100%;
  justify-content: center;
}

.shaam-register-login-link {
  text-align: center;
  font-size: 13px;
}

@keyframes shaam-pop-in {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .shaam-register-card {
    padding: 24px 18px 22px;
  }
}

/* Topup glass layout */
.shaam-topup-section {
  position:relative;
  min-height:calc(100vh - 140px);
  padding:60px 0;
  background:radial-gradient(circle at top left, rgba(90,199,255,0.32), transparent 55%),
             radial-gradient(circle at bottom right, rgba(244,182,38,0.28), transparent 55%),
             #020f22;
}
.shaam-topup-layout {
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:24px;
}
.shaam-topup-card,
.shaam-topup-side-inner {
  border-radius:26px;
  background:rgba(3,18,38,0.92);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 24px 70px rgba(0,0,0,0.8);
  padding:22px 22px 20px;
}
.shaam-topup-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  font-size:11px;
  margin-bottom:10px;
}
.shaam-topup-title {
  margin:0 0 6px;
  font-size:22px;
}
.shaam-topup-subtitle {
  margin:0 0 14px;
  font-size:13px;
}
.shaam-topup-steps {
  margin:0 0 16px;
  padding-right:18px;
  font-size:12px;
  opacity:0.9;
}
.shaam-topup-steps li { margin-bottom:4px; }
.shaam-topup-form .field { margin-bottom:12px; }
.shaam-topup-form label {
  display:block;
  font-size:13px;
  margin-bottom:4px;
}
.shaam-topup-submit {
  width:100%;
  justify-content:center;
  margin-top:4px;
}
.shaam-topup-side-inner h3 {
  margin:0 0 8px;
  font-size:18px;
}
.shaam-topup-side-inner p {
  margin:0 0 10px;
  font-size:13px;
  opacity:0.9;
}
.shaam-topup-qr {
  margin:6px 0 10px;
  text-align:center;
}
.shaam-topup-qr img {
  max-width:190px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.2);
}
.shaam-topup-note {
  font-size:11px;
  opacity:0.85;
}
@media(max-width:768px){
  .shaam-topup-layout {
    grid-template-columns:1fr;
  }
}

/* Auth pages (login/register) */
.shaam-auth-section {
  min-height: calc(100vh - 140px);
  padding: 60px 0;
  background: radial-gradient(circle at top left, rgba(90,199,255,0.32), transparent 55%),
             radial-gradient(circle at bottom right, rgba(244,182,38,0.28), transparent 55%),
             #020f22;
  display:flex;
  align-items:center;
}
.shaam-auth-wrapper {
  width:100%;
  display:flex;
  justify-content:center;
}
.shaam-auth-card {
  width:100%;
  max-width:420px;
  background:rgba(3,18,38,0.94);
  border-radius:26px;
  padding:26px 22px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,0.85);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
}
.shaam-auth-title {
  margin:0 0 6px;
  font-size:24px;
}
.shaam-auth-subtitle {
  margin:0 0 18px;
  font-size:13px;
  opacity:0.85;
}
.shaam-auth-form .field {
  margin-bottom:12px;
}
.shaam-auth-form label {
  display:block;
  font-size:13px;
  margin-bottom:4px;
}
.shaam-auth-form input {
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(1,10,20,0.95);
  color:#fff;
  padding:9px 10px;
  font-size:13px;
}
.phone-input-group {
  display:flex;
  align-items:center;
  gap:8px;
}
.phone-prefix {
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  font-size:13px;
}
.shaam-auth-btn {
  width:100%;
  margin-top:6px;
  justify-content:center;
}
.shaam-auth-switch {
  margin-top:10px;
  font-size:13px;
  text-align:center;
}
.shaam-auth-switch a {
  color:#ffcd33;
}
.shaam-auth-alert {
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  margin-bottom:14px;
}
.shaam-auth-alert-error {
  background:rgba(200,37,57,0.12);
  border:1px solid rgba(255,87,115,0.5);
}
.shaam-auth-alert-success {
  background:rgba(0,160,90,0.12);
  border:1px solid rgba(0,200,120,0.6);
}

/* History table styles */
.shaam-topup-history {
  background: rgba(255,255,255,0.03);
  padding: 25px;
  border-radius: 12px;
  margin-top: 40px;
  color: #fff;
}
.shaam-topup-history .shaam-title {
  text-align: center;
  font-size: 22px;
  margin-bottom: 16px;
  color: #ffcd33;
}
.shaam-history-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  font-size: 13px;
}
.shaam-history-table th {
  background: rgba(255,255,255,0.1);
  padding: 10px;
  text-align: center;
}
.shaam-history-table td {
  padding: 9px;
  text-align: center;
}
.shaam-history-table tr:nth-child(even) {
  background: rgba(255,255,255,0.04);
}