body {
margin: 0 !important;
overflow-x: hidden !important;
}
.wrap {
border-radius: 25px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px
}
.card {
width: 100%;
max-width: 780px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 81, 47, 0.25);
border-radius: 24px;
overflow: hidden;
height: auto !important;
}
.card-header {
background: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);
background-size: 200% auto;
padding: 36px 40px;
position: relative;
overflow: hidden
}
.card-header::before {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08)
}
.card-header::after {
content: '';
position: absolute;
bottom: -40px;
left: 60px;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05)
}
.hdr-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px
}
.hdr-logo svg {
width: 36px;
height: 36px;
fill: rgba(255, 255, 255, 0.9)
}
.hdr-logo-txt {
font-size: 22px;
font-weight: 700;
color: #fff;
letter-spacing: 3px
}
.hdr-title {
font-size: 26px;
font-weight: 700;
color: #fff;
margin-bottom: 6px;
position: relative;
z-index: 1
}
.hdr-sub {
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
position: relative;
z-index: 1
}
.form-body {
padding: 36px 40px
}
.section-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
margin-top: 8px
}
.section-label span {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #F09819;
white-space: nowrap
}
.section-label::before,
.section-label::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(240, 152, 25, 0.4), transparent)
}
.section-label::before {
background: linear-gradient(90deg, transparent, rgba(240, 152, 25, 0.4))
}
.section-label::after {
background: linear-gradient(90deg, rgba(240, 152, 25, 0.4), transparent)
}
.fgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px
}
.field {
position: relative
}
.flabel {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 8px
}
.flabel svg {
width: 18px;
height: 18px;
fill: #F09819;
flex-shrink: 0
}
.flabel label {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer
}
.finp input,
.finp select {
width: 100%;
height: 46px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #fff;
font-size: 14px;
font-family: var(--font-sans);
padding: 0 14px;
outline: none;
transition: border-color 0.2s, background 0.2s;
-webkit-appearance: none;
appearance: none
}
.finp input::placeholder {
color: rgba(255, 255, 255, 0.3)
}
.finp input:focus,
.finp select:focus {
border-color: #F09819;
background: rgba(240, 152, 25, 0.08)
}
.finp input.err,
.finp select.err {
border-color: #FF512F
}
.finp select {
cursor: pointer
}
.sel-wrap {
position: relative
}
.sel-wrap select {
padding-right: 36px
}
.sel-arr {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none
}
.sel-arr svg {
width: 18px;
height: 18px;
fill: rgba(255, 255, 255, 0.4)
}
.phone-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 10px
}
.ferr {
display: none;
align-items: center;
gap: 6px;
margin-top: 6px;
font-size: 11px;
color: #FF512F
}
.ferr svg {
width: 13px;
height: 13px;
fill: #FF512F;
flex-shrink: 0
}
.ferr.show {
display: flex
}
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 81, 47, 0.3), rgba(240, 152, 25, 0.3), transparent);
margin: 8px 0 28px
}
.foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap
}
.sbtn {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 0 32px;
height: 50px;
border: none;
border-radius: 12px;
background: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);
background-size: 200% auto;
cursor: pointer;
font-size: 15px;
font-weight: 600;
color: #fff;
letter-spacing: 0.5px;
transition: background-position 0.4s, transform 0.15s;
overflow: hidden
}
.sbtn:hover {
background-position: right center;
transform: translateY(-1px)
}
.sbtn:active {
transform: scale(0.98)
}
.sbtn svg {
width: 18px;
height: 18px;
fill: #fff;
flex-shrink: 0
}
.snote {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: rgba(255, 255, 255, 0.45)
}
.snote svg {
width: 14px;
height: 14px;
fill: rgba(255, 255, 255, 0.35);
flex-shrink: 0
}
.smsg {
display: none;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: rgba(240, 152, 25, 0.12);
border: 1px solid rgba(240, 152, 25, 0.35);
border-radius: 12px;
margin-top: 24px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px
}
.smsg.show {
display: flex
}
.smsg svg {
width: 22px;
height: 22px;
fill: #F09819;
flex-shrink: 0
}
option {
background: #1a1a2e;
color: #fff
}
@media(max-width:580px) {
.fgrid {
grid-template-columns: 1fr
}
.card-header,
.form-body {
padding: 28px 24px
}
.foot {
flex-direction: column;
align-items: flex-start
}
}