@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
/* Modern styles for non-AJAX form */
#smmc-widget { font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Tahoma, Arial, 'Noto Sans'; }
#smmc-widget .smmc-form {
background: rgba(255,255,255,0.92);
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
backdrop-filter: saturate(140%) blur(6px);
}
#smmc-widget label { font-weight: 600; color: #111827; }
#smmc-widget input[type="url"],
#smmc-widget input[type="number"],
#smmc-widget select {
width: 100%;
padding: 12px 14px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #f9fafb;
color: #111827;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#smmc-widget select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%); background-position: calc(100% - 16px) calc(1em + 2px), calc(100% - 11px) calc(1em + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
#smmc-widget input:focus,
#smmc-widget select:focus {
border-color: #60a5fa;
box-shadow: 0 0 0 4px rgba(96,165,250,.25);
}
#smmc-widget small { color: #6b7280; }
#smmc-widget .smmc-alert {
padding: 12px;
border-radius: 10px;
margin-bottom: 12px;
font-weight: 600;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
#smmc-widget .smmc-ok { border:1px solid #22c55e; background:#ecfdf5; color:#065f46; }
#smmc-widget .smmc-err { border:1px solid #ef4444; background:#fef2f2; color:#991b1b; }
#smmc-widget .smmc-warn{ border:1px solid #f59e0b; background:#fffbeb; color:#92400e; }
#smmc-widget button[type="submit"] {
width: 100%;
padding: 12px 16px;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #fff;
font-weight: 700;
letter-spacing: .2px;
cursor: pointer;
transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
box-shadow: 0 10px 20px rgba(37,99,235,.25);
}
#smmc-widget button[type="submit"]:hover { transform: translateY(-1px); }
#smmc-widget button[type="submit"]:active { transform: translateY(0); }
#smmc-widget button[disabled] { opacity: .6; cursor: not-allowed; }
/* Hide native dropdown arrow */
select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: none !important;
background: none !important;
}
/* Hide arrow in old Edge/IE */
select::-ms-expand {
display: none !important;
}
/* === Custom left arrow for select with subtle animation === */
#smmc-widget select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-left: 40px; /* space for left arrow */
background-color: #f9fafb;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 12px center;
background-size: 14px;
transition: background-position .2s ease, box-shadow .2s ease, border-color .2s ease, transform .12s ease;
}
/* Move arrow a bit on focus for a gentle motion */
#smmc-widget select:focus {
background-position: 8px center;
}
/* Old Edge/IE native arrow */
#smmc-widget select::-ms-expand {
display: none;
}
/* Optional micro-bounce on open (some browsers honor :focus + :active) */
#smmc-widget select:active {
transform: translateY(-1px);
}
/* ==== Enhanced dropdown arrow (RTL-left) with spacing & animation ==== */
#smmc-widget .smmc-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #f9fafb;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 16px;
background-position: 14px center; /* arrow sits on the left */
padding-left: 46px; /* space between arrow and text */
transition: background-position .2s ease, box-shadow .2s ease, border-color .2s ease, transform .12s ease;
}
#smmc-widget .smmc-form select:focus {
background-position: 10px center; /* subtle slide toward text on focus */
}
#smmc-widget .smmc-form select:active {
transform: translateY(-1px);
}
#smmc-widget .smmc-form select::-ms-expand { display: none; }
/* ==== Enhanced modern form styling ==== */
#smmc-widget .smmc-form {
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(249,250,251,0.98) 100%);
border: 1px solid #e5e7eb;
border-radius: 18px;
padding: 22px;
box-shadow: 0 12px 34px rgba(0,0,0,0.08);
}
#smmc-widget label { font-weight: 700; color: #111827; letter-spacing: .2px; }
#smmc-widget .smmc-form input[type="url"],
#smmc-widget .smmc-form input[type="number"],
#smmc-widget .smmc-form select {
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 12px;
padding: 12px 14px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .08s ease;
}
#smmc-widget .smmc-form input[type="url"]:hover,
#smmc-widget .smmc-form input[type="number"]:hover,
#smmc-widget .smmc-form select:hover {
background: #ffffff;
}
#smmc-widget .smmc-form input[type="url"]:focus,
#smmc-widget .smmc-form input[type="number"]:focus,
#smmc-widget .smmc-form select:focus {
border-color: #60a5fa;
box-shadow: 0 0 0 4px rgba(96,165,250,.22);
}
#smmc-widget button[type="submit"] {
width: 100%;
padding: 12px 16px;
border: 0;
border-radius: 14px;
background: linear-gradient(135deg, #1d4ed8, #3b82f6);
color: #fff;
font-weight: 800;
letter-spacing: .25px;
cursor: pointer;
transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
box-shadow: 0 12px 24px rgba(37,99,235,.28);
}
#smmc-widget button[type="submit"]:hover { transform: translateY(-1px); }
#smmc-widget button[type="submit"]:active { transform: translateY(0); }
#smmc-widget select {
padding-right: 26px !important;
}